sketchometry - dynamic geometry in the browser

  • Tutorial
sketchometry is an interactive dynamic geometry, web application developed based on the JSXGraph library . This article is a tutorial on its use.

To see what it is, go to the sketchometry website . Click on the big round blame in the upper right corner with the inscription "start sketchometry" - and in front of us is a drawing board with a toolbar at the top. On different devices it looks different, how exactly, you can get an idea by changing the width of the window.


On my laptop, the upper part with the toolbar looks like this:


On the left we see the cancel and return buttons.

To the right are buttons that turn on or off the modes of movement and construction. If the button is highlighted, the mode is on; if not, it is off. By default, both modes are enabled.
Well, since the build mode is on, so let's build something.


Most of the constructions are performed with gestures with the mouse or finger. Description of gestures is here (short in English and German) and here (in German).
PointGesture pointPoint
StraightGesture straightStraight
CircleGesture circleCircle
TriangleTriangle gestureTriangle
Four-gonQuadrangle gestureQuadrangle
Center and Point CircumferenceGesture circle center and pointCenter and Point Circumference
RayRay gestureRay
Straight through pointDirect gesture through a pointStraight through point
Circle through pointGesture Circle through pointCircle through point
Direct through two pointsGesture Direct through two pointsDirect through two points
Two point beamGesture Ray on two pointsTwo point beam
Center and Point CircumferenceGesture Circle centered and pointCenter and Point Circumference
MidpointMidpoint gestureMidpoint
Reflected pointGesture Reflected PointReflected point
"Free" perpendicularGesture Free PerpendicularFree perpendicular
Perpendicular through a point on a lineimageimage
Perpendicular segment through a free pointGesture Perpendicular segment through a free pointPerpendicular segment through a free point
Perpendicular line through a free pointGesture perpendicular straight line through the freePerpendicular straight line through the free
Parallel lineGesture Parallel lineParallel line
Parallel line through a given pointGesture Parallel line through a given pointParallel line through a given point
Point reflectionPoint Reflection GesturePoint reflection
BisectorBisector gestureBisector
AngleGesture angleAngle
Three-point circleGesture Three Point CircleThree-point circle
Three Point SectorGesture Three Point SectorThree Point Sector
Three-point angleGesture Three-point angleThree-point angle
PolygonPolygon gesturePolygon
TangentTangent gestureTangent

In addition to the gestures presented in the table, there are two more ways to construct a circle based on existing objects - a circle and a segment. In both cases, you must press the left key and hold for a few seconds. In the first case, the existing circle is copied. In the second, a circle is constructed whose radius is equal to the initial segment. In both cases, without releasing the keys, the circle can be moved to the right place and quit there.

We move further to the right on the main toolbar. The next button, “More ...”, opens an additional toolbar for building.

Additional build toolbar

Using the tools in this panel, you can build:

  1. Function graph.
    Symbols tabHere we see the function input field and below are several tabs. The first is the input tab for some characters. The remaining characters are entered from the keyboard. Yes, and these can also be entered from the keyboard.
    The second tab is the selection of a predefined function from the list. Function selection tab from the list
    The third tab is to select a function from the list of already built ones. Function selection tab from the list of already builtFourth tab - select a slider from the list. Its current value will be used. Slider selection tab from the listThe fifth tab is the definition of the function definition area. Definition area job tabSixth - handwriting tab.Handwriting tab
  2. Three-point angle.
    We select three points (the vertex must be selected second), we get the angle.
    Three-point angleFinished corner
  3. Three-point sector.
    We select three points (the center should be chosen second), we get the sector.
    Three Point SectorGlt sector
  4. Regular polygon.
    Having selected this tool, we set the number of sides and then select two points that will define one of the sides.
    Polygon constructionReady polygon
  5. Ruler.
    This is essentially a segment with divisions, next to which its length is shown.
    To measure, for example, the distance between points, select the Ruler tool, click on one of the points, and then drag the second end of the ruler to the second point.
    Line buildingReady line
  6. Slider
  7. Text.
    It looks almost the same as the function graphing tool. The only difference is that the “value” button appears on the right, which inserts the value of the slider or function with the given argument.Tool text

Toolbar - continued

Let's continue our acquaintance with the main toolbar.
The next tool is Scale / Navigation.
Mass / Nav
Scaling Commands:
  1. Reduce.
  2. Return to original.
  3. Click to enlarge.
Navigation commands (movement in the drawing):
  1. To the left.
  2. Up.
  3. In the middle.
  4. Way down.
  5. To the right.

The next one is the object removal tool, the recycle bin. Removing is a simple click, without asking for confirmation. But the cancellation of the action is possible even after reloading the page.
Next - the “Eye” tool (hide / show objects).
The next tool is a measurement tool.
You can measure almost everything (except the function graph). True, in the case of measuring a straight line and a beam, we get NaN.
Measurement tool
When measuring a point, we get its coordinates. And in the remaining cases, everything is quite expected - lengths, areas, angles.
If you select several objects (for points this is impossible), we get the sum of the measured values.
And finally, the last tool itself is properties.

Windows for setting properties of objects

Board PropertiesPoint PropertiesPoint Properties, Bottom
Board PropertiesPoint PropertiesPoint Properties, Bottom
Here, in general, everything is clear. Each window is, in fact, a menu for selecting a property value. When you select some items, additional fields open.
For instance:
Entering point coordinatesPoint sizePoint shapePoint fill color (upper right corner - no fill)
Entering point coordinatesPoint sizePoint shapePoint fill color
The same additional fields appear in other windows.
We will get acquainted with other dialogues.

DirectThis is a dialog for setting straight lines, rays, and line segments. Here the only new thing is the ability to set the appearance of the ends.
Straight ends
The first two buttons specify whether the ray or line extends beyond the borders. That is, the line may look like a straight line.
The right two buttons set the ends of the lines in the form of arrows. Moreover, in the case of a ray and a straight line, the ends are considered at the boundary of the visible region of the drawing. If a continuation beyond the boundary of a segment or a ray is given, too.

Perhaps the rest of the windows do not make sense. Their differences are only in small details.
The circle properties window has an additional radius input field.Radius input field
The properties window of the function has an additional function input field. If you click the mouse there, a window for plotting the graph will open, which we have already considered.Function Input Field
В окне свойств бегунка имеются поля ввода интервала значений и шага изменения значения.Slider Properties Window
В окне свойств многоугольника можно задать возможность его перемещения и будет ли он при этом оставлять след.
Кстати, след могут оставлять многие объекты.
Polygon Properties Window


The last (rightmost) button in the main toolbar is the exit to the gallery. The gallery looks like this: GalleryWe see that each drawing in the gallery has its own window, which is flipped with a mouse click or gesture.
Each window has a toolbar and, in addition, there is a gallery toolbar.
Let's start with the gallery panel.
By clicking "New" we just get on a clean board.
By clicking “Import” you can import the drawing from the clouds:
In the first three cases, the authentication forms open in a separate window. In the fourth - on the spot. That's what they look like (for example, Dropbox and WebDAV).
The next button is the settings.
Settings 1
Settings 2
The Help button is just a link to
Now let's move on to the drawing window.
On the left we see the name of the drawing. It is editable in place.
On the right, the first button is export to the cloud. It opens almost the same window as the Import from Cloud button. The difference in the last line:
Export to the cloud
This line allows you to save the drawing on your computer, while setting the file format (you can also set the file format when saving to other clouds). What are these formats:
  1. sketch is the format in which drawings are saved by the geonext program developed by the same University of Byroth as sketchometry and the JSXGraph library on which sketchometry is based.
  2. Jessie Code is a file containing a drawing in the form of text in the JessieCode language. And JessieCode is a highly specialized language - an add-on for JSXGraph. You can learn about JessieCode syntax here , and practice here .
  3. HTML is a page containing a JessieCode script.

And the last thing left to say is about the right two buttons. This is cloning and deleting a drawing.
That's all.
Well, it was, so to speak, a fairy tale. And now…


  • About the license. As such, the text of the license is not there anywhere. Only somewhere on the side is it written that
    sketchometry is free to use. It can be used for education purposes and privately for free. For commercial usage please get in contact with the address in the imprint .
  • Work on sketchometry is still far from finished, so there are bugs besides features. The most serious is the complete disappearance of the drawing when trying to perform some actions. I met this when changing the visibility of the slider and trying to make the polygon leave a trace (I really don’t know why this might be necessary, but still).
  • It would be desirable, of course, to show real training tasks, but they are not yet available.

These are three spoons of tar.


Also popular now: