Math art in code

Evolute of a curve

An evolute of a curve is the path traced out by the centers of the radius of curvature of the curve. Animations of this concept produce pleasing geometric shapes. See:

Evolute of a curve

Animated Lissajous figures

A Lissajous curve results from the combination of two combined signals. Here are some animations of Lissajous curves, using SVG and javascript. See:

Animated Lissajous figures

Solid of Revolution maker

Create your own solid of revolution using this interactive 3-D graph. Drag across the canvas and the shape automatically appears.

Solid of Revolution maker

CSS Animated Hexagon Wave

Here's an animation made from pure CSS whose wave motion makes it look a bit like a jelly fish.

CSS Animated Hexagon Wave

Spinning clock

This spinning clock is made using CSS (for the rotation and font changes) and javascript. For a creative take on a familiar subject, see:

Spinning clock

Moiré effect

The Moire effect is produced when 2 similar patterns (usually slightly out of phase) interact as they move. Sometimes it's not so good (striped shirts on a video), but sometimes it is a design feature. See the animation, which uses simple CSS animations (no javascript), here:

Moiré effect

Delaunay Triangulation

Delaunay Triangulation is a specific kind of triangulation (the important mathematical concept used in everything from engineering to computer graphics).

See some math, art and coding at:

Delaunay Triangulation

Flux - a Perlin noise example

Perlin Noise was an important development in computer game and animations, as it made surfaces a lot more realistic. The process is based on vectors, interpolation and differential calculus. This animation reminds us of smoke moving in the wind. See:

Flux - a Perlin noise example

Animated Moore Curve

This is an animation of the Moore Curve, an example of a space filling curve which consists of continuous (one-dimensional) fractal lines that bend around in ever more intricate ways such that they eventually fill a (2-dimensional) square.

Animated Moore Curve

Bubble sort rainbow

Bubble sorting is a simple sort technique that all coders learn about. Here are two visualizations of the bubble sort process, one involving numbers, and the other colors.

Bubble sort rainbow

CSS Matrix - a mathematical explanation

CSS Matrix - a mathematical explanation

CSS matrix interactive applet

CSS matrix interactive applet