Tymless - a Javascript library for playing with shapes

Co-ordinates

Most frameworks expect you to draw a shape via the cartesian co-ordinates of each corner. The result isn't intuitive, as it is difficult to look at a collection of numbers and visualise the shape they generate. Not is it actually helpful. When playing with shapes, the exact location relative the frame is often quite unimportant. Tymless does let you use co-ordinates if you need them though.

Cursor drawing

The Logo language was the first attempt to make playing with shapes easy. It did this by allowing you to move a robotic "turtle" equipped with a pen; in effect a graphical cursor. There was no reference to any cartesian frame. Shapes specified in this style are much easier to visualise. Tymless isn't Logo, but it uses a similar style of drawing.

Autofit

When playing with shapes, their exact location and size relative to the frame is not particularly important. Clearly you want all of your shape(s) to be on the visible part of the frame, and large enough that they can be easily seen. In fact, as large as they can be is usually preferred. Tymless can automatically size and position your drawing optimally.

Regular shapes

Equilateral triangles, squares and other regular polygons of any number of sides can be drawn with one simple command.

Redrawing

If you create a shape by moving the graphical cursor around, this is something you can repeat in different places and orientations on the page, like a replayable macro. Just draw your shape in a Javascript function, and call that function whenever you want to repeat your shape. By changing the default length you can draw your shape in different sizes.

Recursion and inflation

Recursive shape "inflation" was the original motivation for Tymless.js, and the famous Koch curve, or snowflake, was probably the first example I ever saw. Tymless makes this as easy as possible.

Colours

Creative use of colour can be a powerful way to illustrate and visualise what is happening with a collection of shapes. Or just make them look better!

Animation

Animation can show how a drawing changes depending when a parameter changes, or how a system evolves with time.

Co-ordinate arithmetic

Once a shape is fixed to the page its corners have cartesian co-ordinates, which are equivalent to complex numbers. In other words you can do arithmetic with them. What does your shape look like when cubed?