Create a generic Visualization

Preparation

If you are using the generic visualization for articles or exercises, there are templates under Building-Blocks-Article and Building-Blocks(Tex)-Element-Exercise-GenericVisualization which you can use, but you can also use a generic visualization in any other mumie documents.
If you're not using a template here's what you might need to do before you get started:

1. Import the mumie.genericvisualization

The first thing you need to do is to add the package mumie.genericvisualization by adding the following on the top of your tex-code.

\usepackage{mumie.genericvisualization}


If you are using the genericvisualization in a problem that uses genericproblem framework, you should not import the genericvisualization. Importing the mumie.genericproblem package is enough.

2. Add the applet system/media/applets/GenericVisualization.meta.xml

The generic visualization will be handled by the applet GenericVisualization available under system/media/applets/. You have to add this applet into the component list on Tab "Meta-Informations".

3. Make sure you have an up-to-date miau.

This Feature is available in miau since version 2.2.0

The environment visualizationwrapper (!) NEW (!) -

From miau version 2.6.0 you need to wrap the genericVisualization environment in the environment vizualizationwrapper. To avoid wrapping problems you should start the visualizationwrapper on top of the document(under \usepackage commands) and close it at the end or for problems it should end directly before \begin{problem}.

\usepackage{mumie.genericvisualization}
\begin{visualizationwrapper}
...
%one or multiple genericVisualization...
\begin{genericVisualization}[100prc][900]{applet}
...
\end{genericVisualization}
...
\begin{genericVisualization}[100prc][900]{applet}
...
\end{genericVisualization}
...
\end{visualizationwrapper}

The environment genericVisualization

The generic visualization is described in the environment genericVisualization. The 2 optional arguments defines the width and height of the applet (here width: 100 percent and height: 900 px), and the last argument is the lid of the applet component.
Note that you can define the width with prc which means percent. The applet will then have the size relative to the applet's wrapper div in the html page.

\begin{genericVisualization}[100prc][900]{applet}
...
\end{genericVisualization}

Define variables

At the beginning of the genericVisualization you can define variables. A variable can later be used to:
  1. create another variable that depends on this variable
  2. be displayed in the canvas (does not apply for number variables)
  3. be displayed in text-part as a formula, or number
...
\begin{variables}
\end{variables}
...

Random numbers

Supported are random integers, doubles, and rationals.

(!) Unlike the generic problem, the random variables only exists on runtime. It will be generated everytime the page is reloaded. (!)

1. randint

\randint{name}{min}{max} %creates a random integer from [min, max] and store it as name
\randint[Z]{name}{min}{max} %same as above, but avoiding zero

2. randdouble

\randdouble{name}{min}{max} %creates a random real number between [min, max]

3. randrat

\randrat{name}{minNumerator}{maxNumerator}{minDenominator}{maxDenominator} %creates a random real number between [min, max]

Only numbers are allowed to be used as min and max value.

\randadjustIf

Starting from miau 2.3.0 you can use \randadjustIf also in the variables environment of a generic visualization.

The syntax is the same as \randadjustIf in generic problems, but only random variables can be used in the variables argument.

\randadjustIf{variables}{condition}

Example:

\randint[Z]{x1}{-5}{5}
\randint[Z]{x2}{-5}{5}
\randadjustIf{x1, x2}{x1 >= x2} % regenerate both x1 and x2 if x2 is not greater than x1.

Other variables

This group consist of numbers, functions and geometry variables. This type of variables can also be editable by the user and be dependant on other variables.
The common syntax of the variables is:

\type[editable]{name}{field}{value}

  1. editable is an optional argument that enables user interactivity. If you use an editable variable later in a \text{}, then the user can edit it. If you put editable points, lines and vectors on a \plot{}, users are able to drag and move them around.
  2. name is the name of the variable
  3. field defines the number class. You can choose from integer, real, rational, complex, and operation
  4. value defines the value of the variable. Here expression are expected. Depending on the type it may have one or more comma separated expressions. You can use other variables by using the syntax var(name)

Examples

1. Numbers

%simply a number
\number{simple}{real}{0.5} % creates a real number with the value of 0.5
\number{sipmle2}{real}{1/2} % also creates 0.5
\number{simpleint}{integer}{0.5} % creates an integer with value 0
%complex
\number{c1}{complex}{1,-1} % creates a complex number with the value 1 - i 
%operation
\number{op}{operation}{sin(pi)} % creates an operation sin(\pi)
%using other variables
\randint{randomA}{-5}{5} %create random value for a
\randint{randomB}{-5}{5} %create random value for b
\number[editable]{a}{integer}{var(randomA)} %creates an editable variable a with a random default value
\number[editable]{b}{integer}{var(randomB)} %creates an editable variable b with a random default value
\number{a+b}{operation}{var(a) + var(b)} %creates an operation a + b, where a and b will be replaced by the current value of a and b.
\number{result}{integer}{var(a)+var(b)} %creates an integer with the value of a+b. The value of result will be updated everytime the user edits either a or b.
Add a slider to manipulate your number variable

Numbers which are added to a graph can also be adjusted by a slider. To achieve this, define your number as is done above and then use the following command inside the variables environment:

\slider[<step_size>]{<var_name>}{<num_var>}{<left_bound>, editable}{<right_bound>, editable}
  • <var_name>: the variable name of the slider.
  • <num_var>: the number that the slider will influence, an exisiting number variable must be used here and can be of type integer or real. If the variable number is editable, it will remain directly editable by the user. If the variable number is not editable, the number is only editable via the slider.
  • <left_bound>, editable: the left bound value of the slider. Provide the extra paramter editable in order to make the bound editable by the user. The value should be a number and not a variable name.
  • <right_bound>, editable: similar to left_bound but then regarding the right_bound value for the slider.
Optional paramters (displayed in square brackets)
  • <step_size>: the step size with which the slider will adjust the number. The default value for numbers of type real is based on 100 steps between left and right bound, so a range of [0 10] would give a step size of 0.1. The default for numbers of type integer is 1.

It is up to the author to make sure that step sizes and boundary values match up. When this is not the case, e.g. taking a left boundary of -1, right boundary of 9, a step size of two and initial number variable of 4; the slider might behave differently as expected.

The slider must then be added to the graph. The syntax for this is as following:

  \begin{canvas}
    \slider{<slider_var1>, <slider_var2, ...}
  \end{canvas}
  • Inside the canvas environment the \slider command is used to display the sliders defined in the variable environment.
  • Sliders can only be displayed in a canvas environment and not be used in a normal text environment.

A simple example of the syntax

\begin{variables} 
  \number{n}{real}{-1}
  \slider[0.2]{n_slider}{n}{-5}{5, editable}
\end{variables}

\label{h}{$\textcolor{BLACK}{b =}$}

Results in the following:

with step sizes of 0.2.

Note that a slider can only be displayed in combination with a graph, see example below.

A complete example with a graph containing sliders

This example creates a graph which plots two points, (1) real number n and (2) absolute of number n.
Two sliders are created, both adjusting number n.
  • Slider 1; fixed range from -5 to 5 and default step size.
  • Slider 2; editable left (default -10) and right bound (default 10), with a step size of 1.

The points and the slider are then added to the canvas.

  \title{Absolutbetrag reeller Zahlen}

  \text{Wählen Sie reelle Zahlen $a$ zwischen $-5$ und $5$ und 
        beoachten Sie auf dem Zahlenstrahl die Zahl selbst und ihren Betrag $|a|$.}

  \begin{variables} 
    \number[editable]{n}{real}{-1}
    \slider{n_s1}{n}{-5}{5}
    \slider[1]{n_s2}{n}{-10, editable}{10, editable}
    \number{abs}{real}{abs(var(n))}
    \point{p1}{real}{var(n),0}
    \point{p2}{real}{var(abs),0}
  \end{variables}

  \label{n}{$n_1 =$}

  \begin{canvas}
    \plotSize{500,80}
    \plotLeft{-6}
    \plotRight{6}
    \plot[numberLine]{p1,p2}
    \slider{n_s1, n_s2}
  \end{canvas}

Results in the following:


When adding a slider to the canvas the slider will be placed either to the left of the canvas (if there is enough room on the side), or at the top of the canvas (when there is not enough room). For this reason you might want to put content that is related to the slider number above the canvas.

In most cases you would probably want to add a label to the number variable (and not the slider variable) as was done in both examples above. More on labels and there colors, see Adding color and label to variables

2. Function

\function{f}{real}{sin(x)}

3. Point

\point[editable]{p0}{real}{0,0} % creates an editable point at 0,0
\randint[z]{x}{-3}{3}
\randint[z]{y}{-3}{3}
\point[editable]{p1}{real}{var(x), var(y)} % creates an editable point with random default coordinate
You can extract the x and y coordinates of a point and use it as in value for other variables by using var(p1)[x] and var(p1)[y]

4. Line and Line Segment

Line and line segment expects you to use 2 point variables as value

\line{g}{real}{var(p0), var(p1)} % crates a line that runs through p0 and p1
\segment{g}{real}{var(p0), var(p1)} % crates a line segment between p0 and p1

5. Vector and Affine Vector

Vector and affine vector also expects only points as value(s)

\point{p1}{real}{1,1}
\point{p2}{real}{3,0}
\vector{v1}{real}{var(p1)} % creates a vector starting from origin to (1,1)
\vector{v2}{real}{var(p2)} % creates a vector starting from origin to (3,0)
\affine{aff1}{real}{var(v1),var(v2)} % creates an affine vector with coordinate (3,0) starting from (1,1)

Similar to points, you can extract the x and y coordinates of a vector and use it as in value for other variables by using var(v1)[x] and var(v1)[y]

6. Circle

\point{center}{real}{1,1}
\circle{c1}{real}{var(center), 2} %creates a circle on center with radius 2

7. Angle

\point{center}{real}{1,1}
\angle{c1}{real}{var(center), 2, 0, pi/2} %creates an angle on center with radius 2 from 0 to pi/2

8. Set

With set you can display section(s) of the 2d coordinate system (basically a set of (x,y)-tuple) that fulfills the given relation.

\set{set2}{real}{|var(p)x+var(q)y+var(c)|>var(d)}

Note that the value is a relation and you can combine relations with AND and OR. For example, to create a set equivalent the above example, you can also use:

\set{set2}{real}{var(p)x+var(q)y+var(c)>var(d) OR -(var(p)x+var(q)y+var(c))>var(d)}

You can use the square brackets to group a part of the relation

\set{set2}{real}{y > 0 AND [x < -3 OR x > 3]}

9. Parametric Function in 2D

\parametricFunction plots a function with one parameter (t). The value of \parametricFunction has the following arguments:
1. fx - the expression defining the x component
2. fy - the expression defining the y component
3. min - the lower bound of the parameter t
4. max - the upper bound of the parameter t
5. steps - number of vertices between the bounds

\parametricFunction{f}{real}{2abs(cos(2t))*cos(t)-3, 5*abs(sin(t))*sin(t)-3, 0, 2*pi, 1000}

10. Point on Curve

You can add a point to the graph of a function or to the curve of a parametric function by using the commands
\pointOnCurve or \pointOnParametricCurve.

\pointOnCurve has as the following arguments:
0. (optional) limits for the function variable, default: -inf,inf
1. name of the point
2. number class
3. function (explicit or the variable of a function)
4. initial value of the function variable for the point

\function[editable]{f}{real}{sin(x)}
\pointOnCurve{p}{real}{var(f)}{1}
\pointOnCurve[0,2*pi]{q}{real}{cos(x)}{0}

\pointOnParametricCurve has as the following arguments:
1. name of the point
2. number class
3. parametric function (explicit or the variable of a parametric function)
(see above for details on the arguments of a parametric function)
4. initial value of the function parameter t for the point

\parametricFunction{f}{real}{2abs(cos(2t))*cos(t), 5*abs(sin(t))*sin(t), 0, 2*pi, 1000}
\pointOnParametricCurve{p}{real}{var(f)}{0}
\pointOnParametricCurve{q}{real}{cos(t), sin(t), 0, 2*pi, 1000)}{pi}

Observe: The point in the canvas will be always editable, but non-editable in the text
area above or below the canvas if added by \text{$\var{<identifier of a point on curve>}$}.

NEW: (!) 3D Variables: (!) -

You can now create 3D points by defining it with 3 comma separated coordinates. For line, linesegment, vector and affine vector a 3D objects will be created if you use 3d points in the value.

\point[editable]{p0}{real}{0,0,1} % creates an editable 3d point at 0,0,1
\point[editable]{p1}{real}{1,0,0} % creates an editable 3d point at 1,0,0
\segment{l}{real}{\var{p0},\var{p1}} % creates a 3d line segment between p1 and p2

Further, the following variables are also added:

Polygon

You can create a polygon surface defined by points that its edges runs through

\point[editable]{p0}{real}{0,0,0} 
\point[editable]{p1}{real}{0.5,1,0}
\point[editable]{p2}{real}{1,0,0}
\point[editable]{p3}{real}{0,1,0}
\point[editable]{p4}{real}{1,1,0}
\polygon{triangle}{real}{\var{p0},\var{p1},\var{p2}} % creates a triangle with edges p0, p1 and p2
\polygon{square}{real}{\var{p0},\var{p3},\var{p4}, \var{p2}} % creates a square with edges p0, p3, p4 and p2

Sphere

Creates a sphere defined with a middle point and a radius

\point[editable]{p0}{real}{0,0,0} 
\sphere{ball}{real}{\var{p0},0.5} %creates a sphere on p0 with radius 0.5

Parametric Function in 3D

Plots a function with one or two parameters (s,t). If only one parameter is used, a 3d curve will be plotted, if 2 parameters is used a surface.
The value of parametric function has the following arguments:
1. fx - the expression defining the x component
2. fy - the expression defining the y component
3. fz - the expression defining the z component
4. smin - the lower bound of the first parameter
5. smax - the upper bound of the first parameter
6. tmin - the lower bound of the second parameter (will be ignored if function only uses one parameter)
7. tmax - the upper bound of the second parameter (will be ignored if function only uses one parameter)
8. steps - number of vertices between the bounds
9. grid - true or false, defining whether a grid should be drawn on the surface

\parametricFunction{sphere}{real}{0.5*cos(s)*sin(t), 0.5*sin(s)*sin(t), 0.5*cos(t), 0, 2*pi, 0, pi, 25, true} %creates a sphere on (0,0,0) with radius 0.5 with a grid
\parametricFunction{sphere}{real}{0.5*cos(4s), 0.5*sin(4s), s/2, 0, 7, 0, 7, 30, true} %creates a spiral curve
3d Variables should be plotted using the \plotddd command instead of \plot

Adding color and label to variables

After defining the variables, you can add label and color for the variables.

For labels, you can use Tex, and while defining colors you can also optionally define the transparency between 0 and 1 where 0 has no transparency at all, and 1 will make the plotted variable object not visible.

Possible values for color are:
WHITE, BLACK, GRAY, LIGHT_GRAY, DARK_GRAY, RED, LIGHT_RED, DARK_RED, PINK, LIGHT_PINK, DARK_PINK, ORANGE, LIGHT_ORANGE, DARK_ORANGE, YELLOW, LIGHT_YELLOW, DARK_YELLOW, GREEN, LIGHT_GREEN, DARK_GREEN, MAGENTA, LIGHT_MAGENTA, DARK_MAGENTA, CYAN, LIGHT_CYAN, DARK_CYAN, BLUE, LIGHT_BLUE, DARK_BLUE

...
\begin{variables}
  \point{p1}{real}{0,0}
  \point{p2}{real}{1,2}
  \line{g}{real}{var(p1),var(p2)}
\end{variables}

%set up label only
\label{p1}{${P_1}$} %set a label to p1

%set up label and color
\label{p1}{$\textcolor{RED}{P_1}$} %set a label to p1
\label{p2}{$\textcolor{RED}{P_2}$} %set a label to p1

alternatively for labels on canvas only:
\label{p1}{@2d[$\textcolor{RED}{P_1}$]} %set a label to p1
\label{p2}{@2d[$\textcolor{RED}{P_2}$]} %set a label to p1

\color{p1}{RED} %set o1 color to red
\color{p2}{RED}
\color[0.1]{g}{DARK_GREEN} % set g color to dark green with 10% transparency

Plotting

We can plot function and geometry variables into a canvas. First we need to setup the canvas by defining the left and right bounds and how big the canvas should be.
Then we can decide whether or not we want the coordinate system to be displayed and put all the variables we want to plot separated by ",".


The "update during mouse action" in a canvas (e.g. dragging a point) can be disabled with the command \updateOnDrag[false].
Due to performance, this might be necessary if there are many complicated calculations for an update cycle. The default value
for this command is true. If set to false the update of the depending canvas objects will be performed after finishing
the mouse action (e.g. mouse button is released).
...
\begin{canvas}
  \updateOnDrag[false]
  \plotLeft{-5}
  \plotRight{5}                     % the default scene will goes from -5 to 5
  \plotSize{400}                    % creates a 400px X 400px canvas 
  \plot[coordinateSystem]{p1,p2,g}  % plots p1, p2 and g with coordinate system
\end{canvas}
...

You can have multiple canvas in one visualization, but make sure you only plot a single object in one canvas only. If you
need to display the same object in more than one canvas, you need to create an object with the same values for each canvas.

The canvas can be set to different pixel width and hight by setting the plot size with \plotsize{<width value>,<height value>}.
If you want a number line (x-axis only) displayed instead of a 2-dimensional coordinate system (with x- and y-axis) use the optional parameter
numberLine in the \plot-command instead of coordinateSystem.

You can disable the toolbar menu by using the optional parameter noToolbar ind the \plot-command. By default it's enabled.

Remark: The \plot-command expects comma seperated values as optional parameters.

\begin{canvas}
  \plotLeft{-5}
  \plotRight{5}         % the default scene will goes from -5 to 5
  \plotSize{400,100}    % creates a 400px X 100px canvas 
  \plot[numberLine,noToolbar]{p}  % plots p in the canvas with a number line
\end{canvas}

Plotting 3D objects

To plot 3D objects you should use the \plotddd command instead of the \plot command

...
\begin{canvas}
  \plotLeft{-5}
  \plotRight{5} %the default scene will goes from -5 to 5
  \plotSize{400} %creates a 400px * 400px canvas 
  \plotddd[coordinateSystem]{sphere} %3d objects with a coordinate system
\end{canvas}
...

Writing text

With the text command you can write texts which explains the visualization. As value you can use latex. If you want to display a variable in the text (for example in formulas) you can use the tex command \$\var{a}\$

...
\text{$g$ is a line that runs through $P_1 = \var{p1}$ and $P_2 = \var{p2}$} %write the content in a line
\text{....} % next line
\text[c]{$y = mx + b = \var{mRes}x + \var{b}$} %write the formula in next line with center alignment
Unlike in the generic problem, \var{p1} will be replaced with an interactive Object which might change it's value if it has dependency to another variable, or even gets edited from the user.
Thus, the it cannot be used as an argument in a \frac command or be used as an exponent or index. As a workaround, instead of using
\text{$\frac{\var(a)}{\var{b}}$}
you should create a number variable with type operation
\begin{variables}
...
\number{a}{real}{1}
\number{b}{real}{2}
\number{adivb}{operation}{a/b}
...

and later display the variable adivb.
\text{$\var{adivb}$}

Tabs and Incremental

To support exercises (where you can ask the user to solve certain problems and then check the solution), you can use a simple tabs and incremental environment.

\begin{genericVisualization}[100prc][600]{applet}
...
\text{Solve the following problems and then click on Answer}
\text{a) Calculate something}
\text{b) Calculate something else}
\text{c) Calculate something else again}

\begin{tabs}{0}% tabs environment, the second argument defines which tab should be displayed on default, 0 means all tabs are hidden
  \tab{Answer}
  \text{\textbf{a)result for a}
  \text{\textbf{b)result for b}
  \text{\textbf{c)result for c}

  \tab{Solution for a}

  \begin{incremental}{1} % incremental environment, step 1 is displayed on default
    \step %creates a step
    \text{line 1 in step1}
    \text{line 2 in step1}
    % more lines ...

    \step % begin step 2
    \text{line 1 in step2}
    % more lines ...
  \end{incremental}

  \tab{Solution for b}
  ...
  \tab{Solution for c}
  ... 
\end{tabs}
...
\end{genericVisualization}

\IF and \IFELSE

in the \text command you can use \IF{condition}{text} and \IFELSE{condition}{text}{othertext} to write text which will only be visible if a certain condition holds.

It's possible to ask for two conditions by combining them with the command AND: \IF{condition1 AND condition2}{text}

\begin{genericVisualization}[100prc][600]{applet}
\begin{variables}
  \number[editable]{a}{real}{1}
  \number[editable]{b}{real}{2}
  \number{adivb}{real}{var(a)/var(b)}
\end{variables}
...
\text{\IFELSE{b=0}{\infinity}{\var{adivb}}}

The condition can be a logical composition of elementary conditions:

\usepackage{mumie.genericvisualization}

\lang{de}{\title{Titel}}

\lang{de}{Freier Text}

\begin{visualizationwrapper}
\begin{genericVisualization}[100prc][900]{applet}
  \begin{variables}
    \randint{a}{-5}{5}
  \end{variables}
\text{\IFELSE{var(a)>0 AND var(a)<0}{Ist wahr}{Es ist nicht wahr }}

\end{genericVisualization}
\end{visualizationwrapper}

The syntax used for condition is similar to the condition syntax of \randadjustIf.

It is also possible to combine multiple \IFELSE as in the following example

\begin{genericVisualization}[100prc][600]{applet}
\begin{variables}
  \number[editable]{a1}{real}{1}
  \number[editable]{b1}{real}{2}
  \number[editable]{c1}{real}{3}
  \number[editable]{a2}{real}{4}
  \number[editable]{b2}{real}{5}
  \number[editable]{c2}{real}{6}
\end{variables}
...
\text[c]{\begin{align}\var{a1}x &+& \var{b1}y &=& \var{c1}\\\var{a2}x &+& \var{b2}y &=& \var{c2} \end{align}} % display linear equation system
\text[c]{
  \IFELSE{(a1/a2) = (b1/b2)}
  {
     \IFELSE{(a1/a2) = (c1/c2)}
     {The above equation system has infinite number of solutions.}
     {The above equation system has no solution.}
  }
  {The above equation system has exactly one solution.}
}

Geometrie-Technologie2d.odt (21.1 KB) Ruedi Seiler, 09/10/2014 02:53 PM

Geometrie-Technologie3d.odt (23.8 KB) Ruedi Seiler, 09/10/2014 02:53 PM

slider_example.png (1.33 KB) Robert van Kints, 12/07/2015 03:08 PM

graph_with_slider.png (22.1 KB) Robert van Kints, 01/28/2016 10:47 AM

Slider_example Graph_with_slider
Add picture from clipboard (Maximum size: 500 MB)