One day build: Vertigo Poster Graphics

This is more of a two hour build rather than a one day build but I’ll still write about this. I saw the tweet above and looked at the linked program written in Python and thought: that’s pretty simple, I probably can do it in one of the frameworks I use. It’s been awhile since I worked on something using p5.js (although I am still helping whenever I can with the project), I thought I should probably brush up a little.

Looking at the algorithm

I’m not going to repost the Python program here, just visit the link in the tweet. I will however, post the algorithm for the harmonograph here.

Taken from Wikipedia

It seems pretty complicated and in a way it is. I still don’t understand it enough that I feel confident in explaining it. So here’s a 4 page description of what the Vertigo harmonograph consist of. In essence a harmonograph is formed by at least two pendulums swinging with different properties, the result when plotted on two dimensions, gives you the harmonograph pattern.

Read up on the maths behind it if you are interested, I’m not qualified to say too much, might misguide some people. 😓

Let’s just talk about code

With the Python code already written, translating it to JS using p5.js isn’t too difficult.

beginShape();
for (var i=0; i < 5000; i++){
var x1 = 1.0 * cos(i/8) * exp(-i/2500);
var y1 = 1.4 * sin(i/8) * exp(-i/2500);
var d = 400;
var vx = sin(i/d) * x1 - cos(i/d) * y1;
var vy = cos(i/d) * x1 + sin(i/d) * y1;
var px = map(vx, -1.5, 1.5, 0, 500);
var py = map(vy, -1.3, 1.3, 0, 500);
vertex(px, py);
}
endShape();

That should already duplicate the functionality of the Python code (with some adjustments to make it look more like the one on the poster). However I think this code is missing the process of generating this interesting pattern. I can easily change the code so that you can see the spiral in action from where it starts all the way to after 5000 iterations, it ends.

Full code with bunch of comments:

That will give you something pretty close to the final poster, have a look here! Mind don’t get vertigo looking at it! 🤢

I wanted to write more about this but without perfect understanding of the maths, I can’t really write much else except for the code which I did all in the comments.

Go ahead and copy this, tweak all the values, some may surprise you what it did, don’t even be afraid of messing with the algorithm. Change some sin into cos and vice versa, you may get lots more interesting results!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.