JSXGraph - introduction

This article is about JSXGraph, written in a JavaScript library for displaying geometric drawings in a web browser.

Interactive Geometric Environments

One of the tasks that need to be addressed when teaching geometry is to ensure visibility, in particular, the visibility of geometric drawings. Two modern ways to ensure the visibility of geometric drawings are dynamism and interactivity:

• Dynamic geometric drawings are in their essence geometric models that contain not just an image, but the whole algorithm on the basis of which this image is built. As a result, the drawing may change when the position of its elements changes, and the connections between the elements remain unchanged. Therefore, the student is actually dealing not with one geometric figure, but with a whole class of figures.
• Interactive geometric drawings are drawings that can be changed by both the teacher and the students during and after construction. This allows you to organize the interaction between student and teacher through such a drawing.

There are a large number of so-called interactive geometric environments that allow you to create geometric drawings, which are both interactive and dynamic.

The first interactive geometric environment was the Geometric Supposer program, developed by a team from the Massachusetts Institute of Technology under the leadership of Judas L. Schwartz for Apple II computers in the early eighties of the last century. The development of this program continues in Israel for Windows, but there is very little information about it.
')
The second such program was Cabri , developed in 1986. It is still actively developing and is one of the most common.

The third interactive geometric medium was The Geometer's Sketchpad , which was developed by Nick Jackiw in 1991. It is also actively developing and is the most popular in the USA.

I will not talk about all geometrical environments - there are many of them, many of them are not very common, and I don’t know all about them. I will mention more about GeoGebra , GEONExT , Cinderella , TracenPoche . Why these, then it becomes clear. Well, for patriotic reasons, I will mention 1C: Mathematical constructor . By its characteristics, by the way, it is no worse than others. True, in my opinion, and not better. Same class.

Geogebra was developed in 2001 by Markus Hohenwarter at the University of Salzburg and is now continued by Michael Borcherds at Johannes Kepler University in Linz.

GEONExT developed Alfred Wassermann at the University of Bayroth based on the GEONET program (http://did.mat.uni-bayreuth.de/geonet/index.html), the prototype of which was created in 1997.

The program Cinderella was written by Ulrich Kortenkamp and Jürgen Richter-Gebert in 1998.

TracenPoche wrote Jean-Philippe Vanroyen and Emmanuel Ostenne, in which year, it was not possible to establish.

Most of the IGS are written in Java or have a viewer written in Java. This allows you to work with such drawings in any modern browser, which provides almost all-platform. However, applets have some flaws, we will not talk about them in detail here, they are well known. This is the first.
Secondly, each such program has its own drawing file format. This leads to not even duplication, but to multiple repetitions of the same work.
Therefore, the development of interactive geometric environments continues.

JSXGraph

JSXGraph is a JavaScript library for displaying geometric drawings in a web browser. It provides an API used in scripts that import geometric drawing files into the page. JSXGraph, like GEONExT, was developed at Bayroth University. Actually, JSXGraph is primarily intended for displaying drawings created in GEONExT. Therefore, this fotmat almost completely supported. In addition, GeoGebra, Cinderella, TracenPoche formats (so I mentioned these programs in the previous section) and Intergeo are supported. Intergeo is a pan-European project whose goal is to develop a universal geometric format file. Thus, it turns out that this library is prokticheski all-platform in every sense of the word.

The same API can be used to build drawings from scratch or to modify loaded ready-made drawings, that is, to create a complete online interactive geometric environment.

Initialization

So, what do you need to do to include an interactive geometric drawing on a web page? Three actions are needed:

1. Include JSXGraph files. These are the jsxgraph.css and jsxgraphcore.js files. We do it as usual:
   

   <link rel="stylesheet" type="text/css" href="domain/jsxgraph.css"/> <script type="text/javascript" src="domain/jsxgraphcore.js"></script> 

   domain is the location of the JSXGraph files. This can be a local directory or jsxgraph.uni-bayreuth.de/distrib
2. Create an HTML element containing the drawing:
   

    <div id="elementID"></div>, 

   where elementID is an element identifier, elementClass is an element class. Naturally, the style of an element can be defined in any known way.
3. Initialize the “drawing board”:
   

    var brd = JXG.JSXGraph.initBoard('elementClass',{attributes}), 

   where elementClass is the class of the element, attributes are the attributes of the “board” that define its properties: dimensions, preservation of proportions, visibility of axes, grids, navigation buttons and rights notifications.

Construction of geometric objects

There are two main commands:

1. Creation command
   

    var el = brd.create('type',[parents],{attributes}); 

   where type is the type of the object (point, line, and so on),
   [parents] - an array of parent elements (for example, two points for a line),
   attributes - attributes (we will consider them later).
2. The command for setting element properties
   

    el.setProperty({key1:value1,key2:value2,...}); 

   where keyN is the name of the nth property, valueN is the value of the nth property.

Point

The simplest point creation command looks like this:

 var el = brd.create('point',[x, y]); 

The point name is specified using the name attribute (for example, {name:'A'} ).

Points can be free (they can be moved with a mouse), fixed (they cannot be moved with a mouse) and dependent (their movement depends on the movement of another object, and it is also impossible to move them with a mouse).

By default, a free dot is created:

 var p0 = board.create('point',[-1, 1], {name:'A'}); 

If the fixed attribute is set to true , then a fixed point will be created:

 var pl = board.create('point',[1, -1], {name:'B', fixed:true}); 

If the value of at least one of the coordinates of the point is a function without parameters that returns a number, then a dependent point will be created:

 var p2 = board.create('point',[function(){return p0.X()}, -2], {name:''}); 

This is how it looks in JSFiddle: jsfiddle.net/AndreyDolgov/fbha4/embedded/result%2Chtml%2Cjs .
In the drawing, point A is free, point B is fixed, point C is dependent on point A

Straight, beam, cut

A straight line can be defined in two ways:

• Two points
  

   board.create('line',[point1, point2]) 

  Points can be given either by object names, or directly by coordinates (in this case, the point is invisible).
• Equation ax+by+c=0 (note the order of the coefficients in the command)
  

    board.create('line',[c, a, b]) 

Examples:

 var p1 = board.create('point',[0,0],{name:'A'}); var p2 = board.create('point',[3,2],{name:'B'}); var l1 = board.create('line',[p1,p2]); var l2 = board.create('line',[p1,[1,5]]); 

In JSFiddle: fiddle.jshell.net/AndreyDolgov/tybTW/show/light .

 var l3 = board.create('line',[-1.0,-2.0,1.0]); 

In JSFiddle: fiddle.jshell.net/AndreyDolgov/2A8Xa/show/light .

The beam and the segment in terms of JSXGraph are the same straight lines, but with different attributes straightFirst and straightLast . If one of these attributes is false , then we get a ray, if both are a segment.

Example:

 var p1 = board.create('point',[-2,-1],{name:'A'}); var p2 = board.create('point',[3,-2],{name:'B'}); var p3 = board.create('point',[-3,2],{name:'C'}); var l1 = board.create('line',[p1,p2],{straightFirst:false}); var l2 = board.create('line',[p1,p3],{straightLast:false}); var l3 = board.create('line',[p2,p3],{straightFirst:false,straightLast:false}); 

In JSFiddle: fiddle.jshell.net/AndreyDolgov/yKxku/show/light .

Circle

The circle can be constructed in four ways:

1. Centered and point on the circle.
   

    board.create('circle',[centerPoint,pointOnCircle]); 

   If there are two arguments, they are interpreted as the center and point on the circle.
   For example:
   

    var center = board.create('point',[3,3],{name:'O'}); var ptOnCir = board.create('point',[4,5],{name:'A'}); var  = board.create('circle',[center,ptOnCir]); 

   In JSFiddle: fiddle.jshell.net/AndreyDolgov/A3JMq/show/light .
   As always, a point can be specified either by a variable name or directly by coordinates. If the point is given directly by coordinates, it is not visible.
   For example:
   

    var theCircle = board.create('circle',[[3,3],[4,5]]); 

   In JSFiddle: fiddle.jshell.net/AndreyDolgov/9FgfW/show/light .
2. In the center and radius.
   

    board.create('circle',[centerPoint,radiusOfCircle]); 

   When the second argument is a number, it is interpreted as a radius.
   For example:
   

    var center = board.create('point',[3,3]);var theCircle = board.create('circle',[center,1]); 

   In JSFiddle: fiddle.jshell.net/AndreyDolgov/VSRUx/show/light .
3. In the center and another circle with a known radius.
   

    board.create('circle',[centerPoint,circleWithDesiredRadius]); 

   If the second argument is a circle, then its radius is used to build a new circle.
   For example:
   

    var circle1 = board.create('circle',[[0,1],[0,2]]);var circle2 = board.create('circle',[[0,3],circle1]); 

   In JSFiddle: fiddle.jshell.net/AndreyDolgov/aYezn/show/light .
4. Three points.
   

    board.create('circle',[point1,point2,point3]); 

   If there are three arguments, they are interpreted as three points through which the circle is constructed.
   For example :
   

    var p1 = board.create('point',[2,1],{name:'p1',size:2}); var p2 = board.create('point',[2,5],{name:'p2',size:2}); var p3 = board.create('point',[4,3],{name:'p3',size:2}); var c = board.create('circle',[p1,p2,p3]); 

   In JSFiddle: fiddle.jshell.net/AndreyDolgov/vRW3z/show/light

Polygon

A polygon is defined by an array of vertices.

 board.create('polygon',[ptVertex1,ptVertex2,...]); 

In this case, the first and last element of the array should be the same vertex. If this is not done, the first vertex is automatically duplicated as the last.
Example:

 p1 = board.create('point',[0,0],{name:''}); p2 = board.create('point',[1,3],{name:''}); p3 = board.create('point',[5,5],{name:''}); p4 = board.create('point',[4,2],{name:''}); board.create('polygon',[p1,p2,p3,p4]); 

In JSFiddle: jsfiddle.net/AndreyDolgov/Fp3VM/show/light .

Conic section

It can be set in two ways:

1. Five points
   

    board.create('conic',[point1,point2,point3,point4,point5]); 

2. The six elements of the matrix
   

    board.create('conic',[a11,a22,a33,a21,a31,a32]); 

Examples:

 p1 = board.create('point',[0,0],{name:'p1'}); p2 = board.create('point',[1,1],{name:'p2'}); board.create('line',[p1,p2],{strokeWidth:1, color:'yellow'}); p3 = board.create('point',[2,3],{name:'p3'}); p4 = board.create('point',[3,4],{name:'p4'}); p5 = board.create('point',[4,1],{name:'p5'}); board.create('conic',[p1,p2,p3,p4,p5], {strokeWidth:4,strokeColor:'green'}); 

We will receive (JSFiddle): jsfiddle.net/AndreyDolgov/DdqvM/show/light

 board.create('conic',[9,4,-11,0,-9,-8]); 

We get : jsfiddle.net/AndreyDolgov/4jTQY/show/light .

Curve

There are three types of curves:

1. Parametric curves.
   

    board.create('curve',[x,y,a,b]); 

   where x and y are functions with one parameter that return a number, a and b define the interval of parameter values.
2. Polar curves.
   

    board.create('curve',[functionOfTheta,[xOrigin,yOrigin],optBegValTheta,optEndValTheta]); 

   where functionOfTheta is a function whose argument is an angle and which returns the distance from the pole;
   [xOrigin,yOrigin] - pole coordinates;
   optBegValTheta and optEndValTheta set the interval of the angle values ​​..
3. Graphic representation of data in the form of a broken line.
   

    board.create('curve',[xArray,yArray]); 

   where xArray and yArray are an array of X's and an array of little players ..

Examples:

 board.create('curve', [function(t){return 3*Math.cos(t);}, function(t){ return 3*Math.sin(t);}, 0, Math.PI/2]); 

This is how it will look like in JSFiddle: jsfiddle.net/AndreyDolgov/9mcAs/show/light .

 board.create('curve', [function(theta){return theta/17;}, [-2,-1], -8*Math.PI, 8*Math.PI]); 

This is how it will look like in JSFiddle: jsfiddle.net/AndreyDolgov/XKH6Q/show/light .

 x = [-4,-3,-2,-1,0,1,2,3,5]; y = [-3,2,3,-1,0,2,1,4,0]; board.create('curve',[x,y]); 

This is how it will look like in JSFiddle: jsfiddle.net/AndreyDolgov/uKFFV/show/light .

Function graph

 board.create('functiongraph',[functionRule,a,b]); 

where functionRule is a single argument function that returns a number,
a and b specify the interval at which the function is defined.
Example:

 board.create('functiongraph', [function(x){ return (x+1)%(x-1);},1,3]); 

This is how it will look like: jsfiddle.net/AndreyDolgov/gkfqj/show/light .

Text

 board.create('text',[x,y,stringText]); 

where the first two arguments set the position of the lower left corner of the text area, stringText is a string or a function that returns a string.
Example:

 board.create('text',[-5, 2, "<span style='color:yellow;background-color:blue; font-size:50px;'><br>.</span>"]); 

We get : jsfiddle.net/AndreyDolgov/YpQkL/show/light .

---

Well, we got acquainted with simple elements of geometric drawings created using the JSXGraph library. I think that introducing this is enough.
Next - a series of "JSXGraph in the examples."