JSX Visualization Variables

• Define variables
  • Random numbers
  • \randadjustIf
  • Other variables
  • Editability
  • Available types of variables
  • 1. Numbers
  • 2. Function
  • 3. Point
  • 4. Line and Line Segment
  • 5. Vector and affine vector
  • 6. Circle and Sphere
  • 7. Arc
  • 8. Angle
  • 9. Polygon
  • 10. Parametric Function
  • 11. Point on Curve
  • 12. Set
  • 13. Sliders
  • 14. Text in the 2D-Canvas
  • 15. Sequences
  • 16. Horizontal and Vertical Strips
  • 17. Creating Arrows on Click
  • 18. Checkbox
  • 19. Selecting objects
  • 20. Directed Graphs
  • Plane
  • Curve in 3D
  • Parametric Surface

Define variables

At the beginning of the visualization you can define variables. A variable can later be used to:

1. create another variable that depends on this variable,
2. be displayed in 2D-canvases or 3D-canvases (does not apply for number variables),
3. be displayed in text-part as a formula, or number,

Random numbers

Supported are random integers, doubles, and rationals.

1. randint

   1 2	\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

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

3. randrat

   1	\randrat{name}{minNumerator}{maxNumerator}{minDenominator}{maxDenominator} %creates a random rational number with numerator from [minNumerator, maxNumerator] and denominator from [minDenominator,maxDenominator]

\randadjustIf

You can use \randadjustIf also in the variables environment of a visualization.

The syntax is the same as \randadjustIf in generic problems, and you can use almost all types of variables
in the condition argument. Exception is a coordinate of point on a parametric curve, or any variable depending on such.

Example:

Other variables

This group consists of numbers, functions and geometry variables. These types of variables can also be editable by the user and be dependant on other variables.
The common syntax of the variables is (with one exception, namely the type string ):

Exceptions to this syntax are variables retrieved from problems using \problem or \question

• editable is an optional argument that enables user interactivity. An editable variable can usually be edited by the user
  when you use it in a \text{}, and dragged around when you put it on a \plot{}.
• name is the name of the variable to which you refer when you define other variables depending on it, when you use it in text, and
  when you plot it.
• value defines the value of the variable. Here expressions are expected. Depending on the type it may
  have one or more comma separated expressions. You can use other variables by using the name of that variable.

Editability

The flag editable not only affects whether the user can change the variable/element, but also its dependence behaviour on the variables which occur
in its definition.

1. If a variable/element is not editable, the defining term will make the element dependent from all elements
   appearing in the definition. If one of the latter is changed (by drag, text input, change of parent elements ...), the element will also change.
2. If an element is editable, the defining term is used as initial value. Changing elements occurring in the
   defining term will not change the editable element.

Exceptions from this behaviour:
The geometric objects lines, circles, vectors, affines, polygons, angles, and arcs are intimately linked to points occuring as defining points in its definition.
That means two things:

1. Changing a point (by drag, input, change of parent) leads to changes of all these geometric objects depending on the point (even if they are
   editable).
2. These geometric objects can only be dragged if they are made editable AND its defining point(s) are editable. Furthermore,
   these defining points must not be points on curves, as those are not freely draggable.
   If the prerequisites for dragging the object are fulfilled, dragging the geometric object also moves the point(s).
3. Also the elements can only be edited in text if they are made editable AND all points that would be moved by changing the value are editable, too.

Example:

In this example, the point _p_ is not editable. The user will neither be able to drag it in the canvas nor to change its value
in the text. However, if the user changes the value of _n_, the point will move to the new coordinates (n,n).
The point _q_ is editable, and hence the user can drag it in the canvas, and also change its value in text. Its initial
coordinates are given as (0.5,-0.5) as initially n=0.5. As _q_ is editable, however, it will not move when _n_ is changed.
Finally, the segment _s_ is intimately linked to the points _p_ and _q_. If one of the points move/are moved, _s_ changes accordingly
to stay the segment linking _p_ and _q_. Although _s_ is editable, it can not be dragged, since the point _p_ can not be dragged.
However, in text the displayed value of _s_ -- which is its length -- can be changed. In this case, the second point _q_
will be moved to fit the desired distance to _p_. If the second point wouldn't be editable, the displayed value would not be changeable.

Available types of variables

The available types of variables are number (cannot be shown in canvases), and

• displayable in 2D-canvases: function, point, line, segment, vector, affine, circle, arc, angle, polygon, parametricFunction, pointOnCurve, set, slider, string, sequence, horizontalStrip, verticalStrip, checkbox, graphNode, graphEdge
• displayable in 3D-canvases: function, point, line, segment, vector, affine, plane, polygon, sphere, curve, parametricSurface
• with special feature: onClickArrows, onClickSelect

For the types function, point etc. that are available for 2D and 3D, MUMIE will recognize from your defining input whether it is for 2D or 3D.

1. Numbers

For giving the value of a number you can use
all of the math functions abs, acos, acosh, asin, asinh, atan, atanh, cbrt, ceil, clz32, cos, cosh, exp, floor, ln, log, log10, log1p, log2, sign, sin, sinh, sqrt, tan, tanh, trunc,
as well as all number variables, coordinates of points/vectors, and values of function variables.
Be aware that all variables that you use in the expression are defined before you use them.

2. Function

The value of a variable of type function is a function expression containing (at most) two indeterminates. You can use
all of the math functions abs, acos, acosh, asin, asinh, atan, atanh, cbrt, ceil, clz32, cos, cosh, exp, floor, ln, log, log10, log1p, log2, sign, sin, sinh, sqrt, tan, tanh, trunc,
as well as all number values and coordinates of points/vectors defined earlier.
You are even allowed to use the names of previously defined functions.

If the function contains one indeterminate it is flagged as being displayable in 2D, if it has two indeterminates it can be displayed in 3D-canvases.

You can use evaluations of functions in the value for other variables by using e.g. f[1] or f[a+1] for a function variable f and a number variable a. However, iterated brackets are not allowed, i.e. f[p[x]] is not valid neither is f[g[0]].
In such cases, define a new number variable first whose value is p[x] or g[0], respectively.

3. Point

You can also use the coordinates in texts (see Visualization Text ).

4. Line and Line Segment

Line and line segment expects you to use 2 point variables (also pointOnCurve is allowed) as value

Depending on whether your points are 2D-points or 3D-points, the line/segment will be available for 2D or 3D.
In text, for a 2D-line l, \var{l} shows the equation of the line in the form y=m*x+b or x=a respectively. There is no text representation of 3D-lines, yet.
For the segment (2D and 3D), its length is displayed in text.

If the flag editable is set, both the line and the segment should be draggable in canvas and changeable in text.
However, they are intimately linked to the two points. So if one point is not editable or a pointOnCurve, the line or
the segment will not be draggable.

5. Vector and affine vector

Vector is an arrow starting from the origin and ending at a point, the command expects only one point as value. A
vector will never be draggable. However, if set to editable, its textual representation (a vector) will be editable (if the point
is also editable).

An affine vector is an arbitrary arrow in the plane or 3D-space. There are several possibilities for defining it. You can give
(a) two points: In this case the arrow is the connecting arrow of the points.
(b) a combination of point/vector and vector/affine: The arrow starts at the point or the endpoint of the vector and
is parallel to the vector or affine.
(c) a point or vector as well as two or three numbers: Again the arrow starts at the point or the endpoint of the vector and
has the two numbers as x-component and y-component, or the three numbers as x-, y- and z-component.

Similar to points, you can extract the components of a vector or an affine and use it as in value for other variables by using v1[x] etc.

6. Circle and Sphere

A circle and a sphere can both be defined by its center and its radius, or by its center and a point on the circle/sphere.

The circle/sphere is intimately linked to its center, and also to the point on the circle/sphere if it is given. That means two things:
Although, in the example the circles/spheres are set to editable, they won't be as the center is not editable. If one drags the point q,
the circle adjusts to go through the point.
For the "editable" circle c1, however, the radius r is only used as initial data. So changing r does not change c1 here.

In text, a circle is displayed by its standard equation (x-center[x])^2+(y-center[y])^2=radius^2, and a sphere
by its standard equation (x-center[x])^2+(y-center[y])^2+(z-center[z])^2=radius^2.

7. Arc

There are several ways to define an arc.

1. By three points: its center, the starting point of the arc, and a third point giving the direction
   where the arc ends,
2. The center, the starting point of the arc, and the angle.
3. The center, the radius, starting angle and ending angle (both with respect to the positive x-axis).

All three arcs in this example are the same at initialization, but of course are updated differently.
Even if set editable, an arc can only be dragged, if it is defined by three freely draggable points.

In text the arc is shown in the form
[ center[x], center[y] ] + radius * [ cos(phi),sin(phi)], startingAngle <= phi <= endingAngle

This textual representation has input fields, if the arc is editable and all points involved in the definition
(i.e. all three in the first case, two in the second case and the center in the third case) are freely draggable points.

8. Angle

The data to define an angle are the same, as for arc. In the case of three points, however, one
can provide an additional scaling factor to change the default size of the drawn angle.

In text the size of the angle is shown. This size can also be used to define other variables.

All three angle variables describe the same angle in the visualization, but are shown in different sizes of radius.

9. Polygon

For defining a polygon, the value in its definition has to be a comma separated list of points.
In text the (oriented) area of the polygon is shown. For editability, the rules explained above apply.
Polygons in 3D-space only work properly if its vertices lie in a common plane.

10. Parametric Function

\parametricFunction plots a function in 2D with one parameter. The value of \parametricFunction has the following arguments (separated by commas):

1. fx - the expression defining the x component
2. fy - the expression defining the y component
3. min - the lower bound of the parameter
4. max - the upper bound of the parameter

The expressions _fx_ and _fy_ are function expressions as for function explained above, and min and max are expressions determining a number as for number.
If the parametric function is non-editable, even the lower and upper bounds are updated when the variables
in their definition change.

11. Point on Curve

In 2D, you can add a point to the graph of a function or to the curve of a parametric function by using the command
\pointOnCurve. It can then only be dragged on the curve. The value-argument of the command consists of the
name of the (parametric) curve, and the initial value for the parameter or x-value, respectively.

In the example, the point p has initial coordinates (1,sin(1)), the point q has
initial coordinates 2*(abs(cos(2*0))*cos(0), 5*abs(sin(0))*sin(0) )=(2,0).

12. 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.

The value in the definition is a relation expression involving the indeterminates x and y.
You can use variables as for number and function expressions, and you can combine relations with AND and OR, and negate them
with NOT.

For example, to create a set equivalent to the above example, you can also use:

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

13. Sliders

For sliders the optional argument (usual reserved for editability) provides a step size for the values, and
the last mandatory argument (the "value" of the command) consists of a list of three expressions determining numbers,
namely the initial value of the slider, the lower bound, and the upper bound.

stepsize can be any expression determining a number. If omitted the values of the slider can change continuously.
All arguments stepsize , leftbound, rightbound will be fixed and not editable.

If named in the \plot-command of a canvas, the slider will be added to the canvas in the lower left corner
(or above other sliders if several are shown). If used in text, the current slider value will be shown
as an editable number. Sliders can not be displayed in 3D-canvases.

In this example, the slider can be used to manipulate the function f.

14. Text in the 2D-Canvas

With the command \string, you can define a text variable. The syntax differs from the usual one, and is

This allows to place simple text (given in text) at the specified position in the canvas.
The additional argument position has to be given as two number expressions separated by comma.

The example provides the text "Some text" starting at the point (-1,1). Of course, you have to
add the variable name mytext to the list in the \plot-command, in order to be displayed.

15. Sequences

The command \sequence allows to visualize sequences. The syntax is

So in the optional argument, you can not only determine whether the sequence is editable or not, but also whether
it is given 'explicit' (default) or 'recursive'.

The value consists of a comma separated list of

1. The start index for the sequence (given by a number expression),
2. The function term for defining the n-th value of the sequence (same rules apply as for functions).
   In case of a recursive sequence with name s you refer to the previous values using s[n-1], s[n-2] etc.
3. (only in case 'recursive') further number expressions defining the initial values of your recursive sequence.

Example:

The first sequence is the Fibonacci sequence in its usual recursive form.
The second is also the Fibonacci sequence in its well-known explicit form
using the golden ratio and its conjugate.

The points of a sequence can be colored in different colors depending on certain conditions.
See Coloring the points of sequences.

16. Horizontal and Vertical Strips

With the command \horizontalStrip and \verticalStrip, you can visualize ranges
around values on the x-axis or y-axis. The syntax is the usual one

and

For example

will be displayed in the canvas as the set of all points whose y-coordinate differs
from 1 by at most 0.2, and whose x-coordinate is bigger than 0.

In detail, the value consists of a comma separated list of two or three arguments.
For \horizontalStrip, these are

1. a number expression which determines the y-coordinate around which the strip is build
2. a number expression which determines the width of the strip,
3. optionally an expression starting with '>' or '<' followed by a number expression.
   Which means that the strip starts at the number (case '>') or ends at this number (case '<').
   If no third argument is given, the strip will go to infinity in both directions.

For verticalStrip, the roles of the x-coordinate and y-coordinate are just swapped.

17. Creating Arrows on Click

With the command \onClickArrows, you can let the user create arrows by clicking at two points, one after another.
The user can remove the arrows by clicking on them again.
You can provide a set of points eligible as source points as well as a set of points eligible as target points for the arrows,
and also give a maximum number of arrows that the user can create.
Furthermore, you can provide two set of arrows that are already shown on initialization. One set which are fixed, and cannot be removed by the user, the other which can be removed.

The syntax is the usual one

where the value consists of a comma separated list of

1. the list of point names eligible as source points for the arrows,
2. the list of point names eligible as target points for the arrows,
3. the maximum number of arrows to be created,
4. the list of arrows that are there from the start, and can not be removed,
5. the list of arrows that are there from the start, and can be removed.

If a list in 1. or 2. is empty (or not given at all), all points visible on the canvas are eligible.
If the maximum number of arrows is not given, the number of arrows is not limited.
The fixed arrows are not counted in the maximum number of arrows, but the non-fixed ones are.

Example:

Here the value consists of

1. the list [p1,p2],
2. an empty list,
3. the number 4,
4. the list of pairs [ [q1,p1],[q2,p2] ], i.e. each arrow is given by an ordered pair of points,

Hence, two arrows, one from q1 to p1 and one from q2 to p2 are shown from the start, and cannot be removed.
The user can create up to 4 arrows. The source points for these arrows are limited to p1 and p2, but the
target points are arbitrary.

For evaluating which arrows are created by the user, there are several functions/attributes available.
These functions can be used in the definition of other variables, or conditions for IFELSE and have their meaning from
regarding the arrows as describing an assignment from the set of points of possible sources to the set of
points of possible targets. The fixed arrows are taken into account for these functions.

• isMap: Result is 1, if the arrows describe a map, otherwise 0,
• injective or inj: Result is 1, if in addition the map is injective,
• surjective or surj: Result is 1, if the arrows describe a surjective map,
• bijective or bij: Result is 1, if the arrows describe a bijective map,
• numberOfArrows: the number of total arrows (fixed and non-fixed) visible,
• numberOfSources: the number of points which are actually source points of arrows,
• numberOfTargets: the number of points which are actually target points of arrows,
• hasArrow(p,q): Result is 1, if there is an arrow from the point p to the point q, otherwise 0,
• hasSource(p): Result is 1, if there is an arrow with source p, otherwise 0,
• hasTarget(q): Result is 1, if there is an arrow with target q, otherwise 0,

Example for using them:

18. Checkbox

The command \checkbox allows to add a checkbox. The syntax is

• first parameter is the name of the variable
• second parameter determines whether the checkbox is initially selected {1} or not {0}

Subsequently, the value can be used like a number variable and the checkbox can be styled like other variables, too.

19. Selecting objects

Using the command \onClickSelect, one can let the user select objects that are visible on the canvas.
The information which objects are selected can then be used in definitions of other variables.

The syntax is

The value consists of a comma separated list of variable names, naming the objects that are allowed to be selected.
Optionally, one can append to this list a second list (this one enclosed in square brackets) of those objects which should be preselected.
E.g. if p and q are such objects, value could be p,q,[p] meaning that p and q can be selected and p is already preselected.

By setting a style for the onClickSelect-variable, you can define how the appearance of the objects change, when they are selected, e.g. if
the objects to be selected are points, and they should appear green, you can use
\style{sel}{fillcolor: 'green', strokecolor: 'green'} or just \style{sel}{color: 'green'}.
Here sel is the name of the onClickSelect-variable.

For accessing the information whether an object p is selected, you can use sel[p] in the definition of other variables. See the example below.

20. Directed Graphs

Using the commands \graphNode and \graphEdge, one can design directed graphs.

The syntax is

where the value of a graph node consists of two number expressions determining the position of the node (of course the two expressions are separated by comma). The value of a graph edge consists of a list of 2 up to 4 arguments:

1. the name of the source node
2. the name of the target node
3. (optional) a weight for the edge. This weight is displayed if the edge variable is used in text.
4. (optional) a number determining whether/how far the arrow is moved orthogonally to the direct line between the center of the nodes (see image).

As for (most) other variable types, for both graphNodes and graphEdges one can provide an optional argument editable by which a graph node can be dragged and the weight of the edge can be changed in text, respectively.

Example (source code to the directed graph above):

Internally, graph nodes are points with default styling, and graph edges are arrows. So if you want to change their appearance you can use the same styling commands as for those.

Plane

Curve in 3D

Parametric Surface