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
  • 7. Arc
  • 8. Angle
  • 9. Polygon
  • 10. Parametric Function
  • 11. Point on Curve
  • 12. Set
  • 13. Sliders
  • 14. Text in the Canvas

Define variables

At the beginning of the genericJSXVisualization 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

Random numbers

Supported are random integers, doubles, and rationals.

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

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 generic visualization.

The syntax is the same as \randadjustIf in generic problems, but only variables of type number or slider
as well as coordinates of points (type point) can be used in
the condition argument.

Example:

Other variables

This group consists 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:

Exceptions to this syntax are \slider, \pointOnCurve, and \string.

• 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.
• field defines the number class. You can choose from integer, real, rational.
• 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

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 values and coordinates of points/vectors defined earlier.

2. Function

The value of a function is a function expression containing (at most) one indeterminate. 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.

3. Point

4. Line and Line Segment

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

In text, \var{l} shows the equation of the line in the form y=m*x+b or x=a respectively. For the segment,
its length is displayed in text.

As the flag editable is set, both the line and the segment should be draggable in canvas and changeable in text.
However, they are intitately 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. 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 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.

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

6. Circle

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

The circle is intimately linked to its center, and also to the point on the circle if it is given. That means two things:
Although, the circles are set to editable, they won't 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, the circle is displayed by its standard equation (x-center[x])^2+(y-center[y])^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.

10. Parametric Function

\parametricFunction plots a function 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

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

\pointOnCurve has as the following arguments:

1. name of the point
2. field type
3. variable name of the function or the parametric curve, on which the point moves,
4. initial value for the indeterminate of the (parametric) function.

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

The argument list for slides is different to those for other variables.

Here, name and field are as usual. The other arguments are provided by expressions
determining numbers. The argument stepsize (in square brackets) is optional with continuous default.
All arguments stepsize , leftbound, rightbound will be fixed and not editable.

There is no optional argument for editability, as the nature of a slider is the given one.

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.

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

14. Text in the Canvas

With the command \string, you can define a text variable. Syntax is

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