I figured that what’s really wanted is a bank of sliders and buttons to play with, each controlling a parameter. That way people can walk up to the controls as if they were approaching the bridge of a starship, and just twiddle them however they feel.

Now, with the help of the Dorkbot Alba team, I finally have the controls I’ve long dreamed of, in the shape of a box with six sliders, five buttons and two glowing switches. It is a thing of beauty.

The obvious next step once you have a good interface for a set of generative animations is to start putting them in public places for people to experiment with, I think.

The first such place was the Forest Hall in Edinburgh, at a night called Dubversion, along with a collection of electrical strangeness from Dorkbot including the ‘Waldflöte‘ MIDI-rigged pipe organ, a Jacob’s Ladder and the amazing Quadracopter – as well as some excellent music.

I’m seeing this as an installation at a science museum, in the classroom or an art gallery. There’s lots more still to do with it.

I decided to make sure the sliders control much the same things in different animations – though they each look very different, they are all built out of trigonometric functions, so we can think of them as the product of waves. The most basic properties of a wave are its amplitude (loudness, if we’re talking about sound); its frequency (the pitch of a sound) and the speed at which it travels. Though they do very different things with them, each of the animations I’ve rigged up with this can be seen in terms of the two sets of interacting waves, so we have a pair of sliders controlling their amplitudes, a pair for frequency and a pair for wave speed.

As I’ve written elsewhere, waves are absolutely fundamental to an enormous range of physical processes, as well as being great fun to animate. The universe is pretty much made out of waves, so wave speed, frequency and amplitude are three of the most basic and far-reaching concepts in physics.

Applets adapted to work with the control panel:

• Shimmia (with added webcam input)
• Zoobie
• Rosaly
• Yinyo
• (also Trochor, finally re-done in Processing – more on that later – and Dragoria, but that doesn’t work with compatible controls…)

Credits:

• Tom Hardiment built the slider-box.
• Martin Ling and Al Bennett helped out with the wiring and setting up the Arduino unit.

Have fun, play around with the settings, especially ‘ratio’; that’s probably the best way of figuring out what’s going on. ‘Eccentricity’, by the way, is a measure of how flattened an ellipse is – an ellipse with 0 eccentricity is a circle, one with 1 is a line.

The Long Version

I first stumbled on trochoids by playing around with plotting trigonometric functions.

I wondered what would happen if you took the basic parametric equations for plotting a circle -

x = radius * cos (θ)
y = radius * sin (θ)

- and added them to the equation for another circle, turning more than one circle in the time it takes to draw the first one, so we get something like the trails left by a point on a wheel rolling around another wheel (an epitrochoid or hypotrochoid), with these equations:

x = radius₁ * cos (θ)
+ radius₂ * cos (ratio * θ)

y = radius₁ * sin (θ)
+ radius₂ * sin (ratio * θ)

This makes some pleasing shapes, so I thought I would try animating it.

The most obvious thing to do is to change the relative phase of the first and second circles, but this just turns the whole thing round.

What’s more interesting is to animate the phase of the x component (the cosine) in the opposite direction to the y component (sine):

x = radius₁ * cos (θ) + radius₂ * cos (ratio * θ + f)

y = radius₁ * sin (θ) + radius₂ * sin (ratio * θ – f)

This makes the circle shrink to a line, then grow into a circle flowing the opposite way, and then go through the same cycle again.

Combined with the first circle, this makes the sort of animations you can see above.

Pleased with the results of this, in 2001 I made an applet to let people play with it, and that’s where things stood till September 2004.

Then I read a gorgeously produced wee book called Harmonograph: A Visual Guide to the Mathematics of Music.

Harmonograph provides an impressively clear and thorough introduction to the basics of music theory, and ways of visualising music.

It does this in 50-odd pages, replete with beautiful illustrations of harmony made by harmonographs, kaleidophones, Chladni plates and the like.

A harmonograph is an instrument invented in the mid-nineteenth century, using two or more pendulums to produce beautiful pictures. The pictures are especially beautiful when the ratios of the frequencies of the pendulums are close to whole numbers, just as chords are especially beautiful when the ratios of the frequencies notes making them up are close to whole numbers.

The pictures I was making with Trochor were almost the same pictures produced by a rotary harmonograph, except that the pendulums of a harmonograph steadily wind down as they draw, and Trochor was arbitrarily restricted to whole-number ratios between the two drivers.

A kaleidophone, like a harmonograph, creates images of harmonics, but these are made only fleetingly, in light. It consists of a metal rod fixed in a stand, with a reflective bead on top, which is struck and then stroked with a bow.

A beam of light reflected from the top of it casts patterns onto a screen, rather like those of a rotary harmonograph, but more complex.

The biggest difference, judging by the illustrations I have seen, is that it is not restricted to circular motion:

Free to vibrate in any direction, it produces patterns composed of interacting linear waves and ellipses.

I have incorporated the idea of using ellipses, together with the damped spiralling motion and non-integer ratios of the harmonograph, into Trochor.

With 0 eccentricity, we are back to the rotary harmonograph; with 1, we have the linear harmonograph, producing Lissajous-type figures.

The equations of this version are as follow:

x = (1-damping)ⁿ * (axis_1a * cos
(θ) + axis_2a * cos (ratio * θ + f))

y =(1-damping)ⁿ * (axis_1b * sin (θ) + axis_1b * sin (ratio * θ – f))

The code for this applet is available for anyone curious – but bear in mind I wrote most of this around eight years ago, and the rest three years or so after that, and it’s not necessarily the best code! I should probably re-do this in Processing really.

The principles of computer programming are surprisingly simple and powerful. They also provide an easy way in to understanding some very important concepts in mathematics and science, by making them into things you can play around with. Messing about with stuff is one of the ways that humans learn best, as well as being hugely enjoyable!

For scientists and engineers, it is crucial to be able to solve equations, to apply the methods of mathematics to practical or theoretical problems. For the rest of us, that might be less important but there is still great value in having an intuitive understanding of the way the world works. Often, this is much easier if we have a handle on the mathematics expressing scientific laws.

This is only one of the reasons almost everyone should be exposed to the fundamentals of programming. Another reason is that there is huge practical value in even quite simple programming. Most web sites, for example, are built using one or more scripting languages. In general this makes them far easier to maintain, but since many people imagine that programming at all is beyond them, they get put off trying to make fundamental changes.

The biggest reason for everyone to have a go at programming is also the simplest: Programming can be tremendous fun, and you’ll never know how much until you try it. It’s a toy, a tool, and a tool for making toys.

To give you an idea of how easy it is to get started with Processing, and a taste of what beautiful and seemingly complex forms can arise from a tiny amount of mathematics, I have included below a very short program to draw a fractal – a mathematical form which shows similar structures at many different scales, in this case spirals of spirals of spirals. The comments within the program should give you some clues what is going on, but do not worry if you are not able to follow all of the steps in it, especially if you have never programmed before. Soon, it will all make perfect sense!

I would encourage you to download Processing from http://processing.org now and install it following the simple instructions there. Then paste in the code below and hit ‘run’.

//Double slashes indicate this line is a comment that Processing can ignore.
// Comments in your code make it easier to follow.
// The first thing to do is declare all the variables we will use.
float x=50, y=50, seed=420, f=0; // Each seed value gives a different fractal.
double df=0, ddf=TWO_PI/seed;
int i=0;
void setup(){ // 'setup' is called just once, when the program is run.
size(200,200); // Tell Processing how big a window it should use.
}
void draw(){ // 'draw' is called every time the program draws a frame.
background(255); // This fills in the frame with a white background.
while (i<9000){ // Repeat the next block 9000 times.
i+=1; // This means 'add 1 to i'. We could also write out 'i=i+1'.
f+=df;
df+=ddf;
x+=cos(f);
y+=sin(f);
point(x,y);
}
// We need to reset most of the variables every frame.
x=100;
y=100;
i=0;
f=0;
df=0;
ddf+=0.00000005; // This causes animation to happen.
}

Feel free to play around with this code, setting the variable named ’seed’ to different numbers, changing the size of the window and so on. You might also like to start looking at some of the examples that come with Processing. Next time we will start looking in more detail in what’s going on here.

Processing is designed to be easy to learn and quick for knocking up simple programs which explore particular graphical and mathematical ideas. It is one of my favourite things ever, and I would encourage anybody to have a play around with it some time.

Zoobie then draws a semi-transparent triangle at the second point, whereas Shimmia draws a pixel at the first point which gets its colour from second point in an image. The relation between them is quite a lot like the one between caustics and refracted images, though the mathematical analogy is not exact.

Click and drag inside the applet with either mouse button (or, if you only have one, with and with the closest thing you have to a Ctrl button) to change the frequency and amplitude of the waves. Drag with shift held down to change their speed.

For now the image is just this one I took of some leaves, but I figure I’ll see if I can pull pictures from Flickr later.

The original Resonata is considerably more sophisticated in various ways, but really almost completely different.

I might make t-shirts of some of these (etc.) available in my Cafepress Trigonometry shop (already selling some related designs), although I’ve never really made enough sales there to justify the effort.