Long, long ago, when the Internet was young and so was I, Compuserve ran a successful collection of forums on many and varied topics. Their Science & Maths Forum in particular brought me delight and illumination; reading lucid explanations of difficult topics, and attempting to produce them myself, had a great formative influence on me as a potential scientist and educator. There’s nothing quite like explaining something to get it straight in your own head.

One of the internet-friends I made there was an American named Jeff Werbock, who came bearing a vision of the universe as a unified whole composed of space multiply curved in on itself, and forever converging and diverging: a sort of universal hypertoroid. Though I’m not convinced that it entirely captures the way the cosmos works, I very much like its focus on curvature and movement as fundamental features of the structure of spacetime, and I think it has great aesthetic appeal.

So when it struck me one day that I knew exactly how to create a visualisation of it using POCO, the animation-based C variant that I was programming in at that time, I was pleased to sit down and make it. This was one of the first mathematical animations I ever created, and the interactive version you see here is on extremely similar lines.

We start by drawing a toroid, which is a circle swept out in a circle, like a geometrically perfect bagel. The circles that make up the toroid are rotating, so the toroid is forever converging and diverging. Dragging the mouse left or right changes the degree to which this toroid is twisted around on itself. This gives us a rough approximation – or at least a cross-section – of a hypertoroid, which is a toroid swept out in circle.

Drag the mouse up and down in the frame to change the size of thing, and hold down the shift key while you do it to change the minor radius independently from the major radius.

I am currently working on a mobile version of this using Processing for Android, and a narrative version to accompany Jeff’s in-depth explanations of how he sees this all working…

Most of them are variations on applets I first created some time ago. The impetus to collect them all together in one place came when I set about creating an interactive installation, Kenneth and the Waves, using a more elegant set of inputs than that allowed by a mouse and keyboard.

The first shows the most basic interaction of two waves – the black wave at the top is the superposition of the waves, which is to say it’s what you get when you add them together. When the two waves are in phase, the peaks of one are added to the peaks of the other; when they are in anti-phase (half a cycle out of synch with each other) they cancel out. Among other things, this is the basis of interference, and standing waves – which are what you get when two identical waves travel in opposite directions in the same space. Standing waves don’t travel at all, even though they are made up of waves travelling in opposite directions. All musical instruments make use of standing waves, and they are important for various other reasons.

Since all the animations are all based on pairs of simple waves, they can all be controlled by changing the frequency, amplitude and speed of those waves. To do this, drag the mouse cursor in the animation box to change frequency (left button), amplitude (right button or shift-click) and speed (middle button or ctrl-click). The vertical axis controls one wave, horizontal axis controls the other. Press a key to switch between animations.

If you don’t have a working Java plugin for your browser, or you just want a bigger version, you could try downloading one of these applications for your operating system:

• Linux (32-bit)
• Linux (64-bit)
• Mac OS X
• Windows (32-bit)
• Windows (64-bit)

It’s inspired by Robert Johnston’s Hello Guitar Method of teaching, but doesn’t necessarily do it justice. You might also be interested in relating this to the ‘CAGED guitar system’.

The diagram shows a guitar (or violin or ukulele) with the head on the left. The root note of any chord is shown in white wherever it appears on the fretboard, and the other notes that appear in any chord are highlighted with colours depending on their relation to the root. A chord is made up of three or more different notes, each of which might be played  on one or more string, so that there is always a range of different ways of playing any chord on a stringed instrument. Usually the root note is the deepest string played, but not always.

Use the drop-down menus to choose your chord, or else click on the applet to give it focus and then use the keyboard to select chords:

• a-g choose the root note of the chord.
• A-G are sharp chords, so press shift and a to get A#
• The number keys select the type of chord.
  1. is your basic major chord, like C. This consists of the first, third and fifth notes of the major scale: C E G
  2. is a sus2 chord, like Csus2. This has the first, second and fifth notes: C D G.
  3. is a minor chord, like Cm. This uses the first, third and fifth notes of the minor scale: C D# G
  4. is a sus4 chord, like Csus4. This has the first, fourth and fifth notes of the major scale: C F G. These are also the major chords in the key you’re looking at. Notice that if you go from Csus2 to Cm to C to Csus4, the first and fifth notes are static while the middle note increases by one semitone between each.
  5. is a ‘power chord’, like C5. This loses the middle note entirely, being made only of firsts and fifths: C G. Usually played with only three strings.
  6. is a ’6′ chord, like C6 (which is also Am7). The first, third, fifth and sixth notes of the major scale: C E G A
  7. is a seventh chord, like C7. The first, third, fifth notes of the major scale, plus the seventh note of the minor scale: C E G A#
  8. is a major seventh chord, like C7maj. This uses the first, third, fifth and seventh notes of the major scale, giving a noticeably more dissonant chord than C7: C E G B
  9. is an ‘add 9′ chord, like Cadd9. That’s the first, second, third and fifth notes of the major scale (or, by convention, first, third, fifth and ninth): C D E G
• The space bar switches between different tunings.

I’ll be writing a version of this for Android smart phones, and also adding a few more chord types and integrating the menus into the applet itself – at the moment, because they’re part of the web site rather than the applet, they don’t change when you use the keyboard to change the applet’s settings.

Source code: Fretboard

Built with Processing

Since I planned to travel all over Spain and Portugal carrying this thing, I figured I’d better make something more portable than the beautiful fire-engine-red box that Tom Hardiment made me for Kenneth Mark I, which was originally a solid hardwood drawer. I took the opportunity to give it a completely different aesthetic.

I was always torn between two looks for controls for my animations – either they should be hyper-futuristic, like a starship control panel, or stained wood and brass like the machines and instruments of the Victorian era. I have always had a thing for antique scientific equipment, so I can understand why steampunk has become such a big thing. I decided to go with wood and brass.

I stripped out the plywood with the sliders and buttons attached, cut it down to size, sanded it, stained it and varnished it, and I picked up some brass knobs  and edging. Then I travelled with it to the Basque Country, where I was teaching English and looking after kids on a summer camp for a couple of weeks.  One of my colleagues there, Gareth Fox, helped me put it all together with some support struts; I replaced the plastic slider knobs with the sort you might otherwise use to open small doors. Then I went travelling again, right across to the southwest of Spain and then back up through Portugal.

Unfortunately somewhere on that largely unplanned journey (it’s a long story) I  misplaced the Arduino board that provides the interface between the sliders and a computer’s USB port. It’s not always easy to find an Arduino in a small city in a foreign country, and with no local knowledge at my command I googled ‘Arduino Coimbra’ and reached out for advice to the one person I found listed on the Arduino site, Micael Couceiro of RoboCorp and ISEC.  He suggested that if I didn’t have time to order online and wait for a delivery, I should try a shop on the outskirts of town, so I went there at lunch the next afternoon and sat around for about two hours waiting for them to open, only to find they were all out.

Eventually he very kindly agreed to lend me a board from his department, so I went over there the next day and in the end he didn’t just lend me a board but he and his colleagues offered an amazing amount of support and practical help mounting it properly and putting finishing touches to the box.

I finally got to exhibit Kenneth Mark II properly on the very last day of the conference – a little late, but not too late for a whole lot of people to play with it and give very positive feedback!

The real-life version of ‘Kenneth and the Waves’ features a big red control box with physical sliders and buttons to play with, and the animations projected on a nearby surface. The online version will follow later.

The Institute of Physics has provided funding for this project to promote public engagement with the science of waves, though the installation is fun however little you care about such things.

What’s the frequency (and what are amplitude and wave speed)?

The frequency of a wave is how many cycles it goes through in a second – so the musical note of middle C, which has a frequency of 256Hz, goes through 256 cycles every second: A string bounces back and forth 256 times, or a body of air expands and contracts 256 times, and so on.

The amplitude of a wave can be thought of as its maximum height, though it is only literally a height in the case of surface waves like ocean waves and some earthquake waves. It measures the difference between the extremes of a wave’s motion and its resting position.

The speed of a wave, as you might expect, is how fast it passes through its medium – for example, sound travels through air at around 340 metres per second, and light travels almost a million times faster.

The wavelength of a wave is the distance between one peak and the next. It’s proportional to the speed of the wave, and inversely proportional to its frequency.

The applets

The applets included are variants on Trochor, Yinyo, Shimmia, Zoobie and a new one on similar lines to Resonata but with two connected chains. A laminated poster will explain the controls and what they tell us about waves.

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, y, seed=420, f; // 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.
  // We need to reset most of the variables every frame.
  x=100;
  y=100;
  i=0;
  f=0;
  df=0;
  background(255); // This fills in the frame with a white background.
  while (i<9000){ // Repeat the next block 9000 times.
    i+=1;
    f+=df;
    df+=ddf;
    x+=cos(f);
    y+=sin(f);
    point(x,y);
  }
  ddf+=0.00000005; // So ddf changes every frame, causing 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.