genericJSXVisualization vs genericGWTVisualization

Changes

If you are familiar with the generic GWT-Visualizations (used in articles before), you can read here the
explanation on the main changes with respect to genericGWTVisualization. As JSX visualizations are developed further,
the list will not be complete, and we recommend to read the full
explanation about visualizations in the article JSX Visualizations.

Variables

1. The field (real/rational) is not part of the definition of the variable any more. You can set it as you set colors or labels
   by using the command \field{<varname>}{<fieldtype>} (default is real).
2. In the definition of variables, you can omit the var(..) when referring to other variables. So the syntax
   for the expressions is the same as in variable-environments of problems.
3. Some names for your variables are not allowed to be used. These are:
   • The math functions: abs, acos, acosh, asin, asinh, atan, atan2, atanh, cbrt, ceil, clz32, cos, cosh, exp, expm1, floor, fround, hypot, imul, log, log10, log1p, log2, max, min, pow, random, round, sign, sin, sinh, sqrt, tan, tanh, trunc
   • The math constants: _E, LN10, LN2, LOG10E, LOG2E, PI, SQRT1_2, SQRT2_ (also in lowerCase)
   • var
   • names that you use for indeterminates of function terms
   • some internally used functions (you will be notified, if you accidentally use one)

Dependence behaviour

There are two sorts of dependencies:

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 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).
   For ways to circumvent this behaviour, if really needed, see below.

Sliders

1. Sliders are now handled like other variables, and are displayed in the canvas in the lower left corner
   (if listed in the plot command).
2. The new syntax for defining them is \slider[stepsize]{name}{field}{initialvalue}{leftbound}{rightbound}
3. Left and right bound may be any expressions evaluating to numbers, but will not change if elements occuring in the
   expression change.
4. The bounds of the slider can not be made editable any more.
5. Using sliders in text shows its value.
6. There will be no number variable (master) intimately linked to the slider. But other variables might
   depend on the slider, and changing the slider will include changes of elements depending on the slider.

Vectors and Affines

1. A vector always starts at the origin. It is given by a point, its endpoint. Therefore a vector can never be dragged.
   But is intimitely connected to its point (as lines to their points).

2. An affine vector can be given
   (a) by two points: It is the connecting vector of these points. Same rules apply as for lines.
   (b) A point and a vector/affine: It is the arrow starting at the point and being parallel to the vector/affine.
   It can be dragged if the point can be dragged (and point moves with it). If the affine is editable, it is not
   connected to the vector/affine, but still to the point.
   (c) Two vectors (as in GWTVisualizations) or vector and affine: It is the arrow starting at the endpoint of the first vector
   and being parallel to the second vector/affine. It can be dragged (if set to editable) if the vector is editable
   (so not draggable – see above). If the affine is editable, it is not connected to the second vector/affine, but
   still to the endpoint of the first vector.
   (d) A point/vector and two numbers/number expressions: It is the arrow starting at the point or the endpoint of the vector
   and having the numbers as components.

Angles and Arcs

The \angle-command now really produces an angle. Arcs (in GWTVisualizations called angle) are created by an \arc-command.
Angles can never be dragged themselves, but are always linked to the points defining them (even if editable).

(More details on angle and arcs see below).

Points on (Parametric) Curves

The optional upper and lower limits for a pointOn(Paramtric)Curve are ignored. Instead, the point can move on the whole curve.
If you wish to restrict the point to parts of the curve, define an invisible parametricCurve
with the desired bounds instead and stick the point to that invisible curve.

New features

• A circle can not only be given by its center and the radius, but also by its center and a point on the circle.
• Lines, segments, polygons, circles, and arcs can also be made draggable if the point(s) defining them are (see above).
• Segments and polygons can also be used in text. The length of the segment and the oriented area of the polygon are shown.
  When changing them in text, the first defining point stays fixed, and the other point(s) are scaled accordingly. (only possible, if
  the point(s) are freely draggable).
• All variables can be depicted in several canvases
• For the boundaries of the canvas \plotTop and \plotBottom can also be given, not only \plotLeft and \plotRight
• The visualization is responsive, i.e. adjusts its size to the available width.
• An affine vector can be defined by two points (connecting vector), by a point and a vector (results in the arrow starting
  at the point and having the same direction as the vector), or as before by two vectors.
• In randadjustIf not only random numbers can be used, but also other numbers (type number or slider), and coordinates of points (type point, but not pointOnCurve), as long as
  the chain for computing the values only uses numbers and points. E.g. if a and b are random numbers, and p is the point (a+b,a-b), a valid check
  would be p[x]^2+p[y]^2<2.
• Angle and arc can be defined by either 3 points (center, starting point, point for direction of end),
  or by two points and a number (center, starting point, size of angle),
  or by a point and 3 numbers (center, radius, starting angle, end angle).
  In case of an Angle defined by two or more points, there can be provided a further number (scaling factor). Syntax is
  \angle[editable]{name}{field}{value} and \arc[editable]{name}{field}{value}, where value is the comma separated list
  of one of the defining data (in the order listed above).
• Showing coordinates of points on mouseover is now possible by using „showPointCoords“ in the optional value for the \plot-command.
• For function graphs and parametricCurves one can use any parameter different from variable names and predefined names
  listed above. Which name is used for the parameter is automatically determined. For sets, however, the indeterminates _x_
  and _y_ have to be used.
• You can use \snapToGrid{xStep,yStep} to let points snap to a grid with the specified
  distances in x-direction and y-direction, e.g. \snapToGrid{1,1} would mean that the points are snapped to integral coordinates.
• If the parameter determining the field is real or rational, one can now provide an additional number (separated from
  real/rational by a comma). For the field real this denotes the number of decimals shown in the text representation (default is 2),
  for the field rational it denotes the denominator of the fraction to which the number is rounded (default is 100).
  The feature in the case of rationals should be used with care, as it may cause problems when using it with depending objects.

• The new visualizations can be used with problems:

  • use number and function variables from the problem or a question via
    \problem{varname}{fieldtype} or via \question{questionnr}{varname}{fieldtype}
    
    Warning: Whether the visualization considers the imported variable as number or as
    function depends on whether the term has an indeterminate.
  • provide number values or function values as answers using the command
    \answer{varname}{questionnr,answernr} inside the visualization environment
    (similar to the attributes label or color of the variable varname ).

  More details on using data of visualizations as answers are provided under
  graphical problems

• Text can be placed within the canvas, by defining a variable with the string-command. Syntax is
  \string[editable]{name}{field}{value}{position}.

Tipps and Tricks

Circumventing dependence behaviour for lines and points

For simplicity, we restrict here to lines and points, but the same strategies can be used for circles and
points etc.

As described above, lines are intimately linked to the points defining it, and can only be dragged if
set editable AND both points are editable (in which case the points can also be dragged).
In the following, we describe how to obtain other scenarios:

1. Line can be dragged, but not one/both points (but they still move with the line):
   Define an/two invisible editable point(s) through which the editable line passes, and
   define the non-editable point(s) to have the same coordinates as the invisible point(s).
2. Break dependence between line and points: Define the line through an/two invisible editable point(s)
   having the same coordinates as the initial point(s).

Moving the whole line/polygon when dragging one point

You might wish to be able to move a polygon by dragging one of its vertices.
For example, if one vertex is a point on a curve, you will not be able to drag the polygon.
In this case, you should define the other vertices to be non-editable with a fixed direction to the point on curve,
as in the following example.

Example: