Today I have a new interactive demonstration for you!
Controls
Zoom in: W
Zoom out: S
Reset angle: 0
Switch mode (auto or user): Space
On “User Mode”:
– Increase angle: Up
– Decrease angle: Down
[pjs4wp]
void setup() {
size(600,600);
background(0);
stroke(255);
fill(255);
}
float r = 2;
float da = 0;
float dda = .0001;
boolean autoPlay = true;
void draw() {
background(0);
text(“Angle = ” + (float)((int)(da*10000))/100. + “%”, width/2, 20);
text(“Zoom = ” + (float)((int)(r*100))/100., width/2, 35);
if (autoPlay)
text(“Mode: Auto”, width/2, 50);
else
text(“Mode: User”, width/2, 50);
translate(width/2,height/2);
int i = 0;
float angle = 0;
while (width/r > i) {
float x = r*i*cos(angle);
float y = r*i*sin(angle);
ellipse(x,y,5,5);
angle += 2*PI*da;
i++;
}
if (keyPressed) {
if (key == ‘w’)
r *= 1.01;
if (key == ‘s’)
r *= .99;
if (key == ‘0’)
da = 0;
if (!autoPlay) {
if (keyCode == UP)
da += dda;
if (keyCode == DOWN)
da -= dda;
}
}
if (autoPlay)
da += dda;
}
void keyReleased() {
if (key == ‘ ‘)
autoPlay = 1 – autoPlay;
}
[/pjs4wp]
(As always, zooming out too much will make things begin to lag. Also, fair warning, things start getting a little seizure-inducing around a zoom of .5 or less.)
Okay! Pretty, right? But what’s actually going on?
Each frame we are drawing a sequence of dots. We start at the center of the screen, and take constant radial steps outwards. And for each step, we apply some fixed angular rotation. This angular rotation is given as a percentage of 2π on the top of the screen, and is the thing being adjusted frame by frame (either automatically or based on your input, depending on which mode you choose).
What’s cool is what happens when you approach simple rational numbers. Take a look for yourself by going on “User” mode and bringing the angle to 10% (for 1/10), 14.28% (for 1/7), 25% (for 1/4), and so on. Here are two examples:
Cool, right? At every rational number, we end up with a number of “spokes” corresponding to the denominator of our rational number. People sometimes describe the golden ratio Ф as the “most irrational number”, meaning that in some sense it is the most difficult to approximate by rational numbers. How does this look on our visualization? Check it out!
And zooming out further, we see…
We can see that using Ф as our angular rotation gives us the “least spokey” shape possible. As we zoom out further and further, we will always see our points looking basically evenly distributed across the angles at any given radius. This is a wonderfully visual way to understand the irrationality of Ф!