Circles are a fascinating geometrical object, with very interesting properties – one of which is periodicity.
In the scope of the dm2 workshop at the Institute of Architecture and Media of TU Graz, I wanted to show what you can do with simple mathematical equations and a few lines of code. So, I created the image below, which was on the cover of the booklet handout, and I posted it as a challenge, to code or explain how it is generated.

Some more examples

Solution & Code

The idea is to interpolate 2 points on 2 concentric circles, moving at different speeds. [Using the parametric equation of a circle, you define a point of the circle by an angle] Therefore by using different angle increments for each of of the 2 points, and connecting the points with a line, you end up with a line that is animated by two different periods.  Altering the values of the angle increments can yield very different results. Things to consider are the increment size, the ratio of the two and if they evenly divide PI or not.
[The angle increments I used for the dm2 poster are PI/15 and PI/32]

You can do many variations on the same concept – I will post in another time some that worked out for me. For now here are 2 examples, which contain links to the source code in openProcessing.org [You can just copy and paste it in the Processing IDE].

This one is more or less the version I used for the poster, with fixed increments. Press Space to save the image, and any other key to refresh the background.

And here the same idea which uses an interface to explain how the thing works. Press 1-2-3 to see different modes, and drag the mouse to change the angle increments.

Feel free to download the code and play around.

January 2016 / Institute of Architecture and Media / TU Graz