Share your repls and programming experiences

← Back to all posts
Visualize the Golden Ratio (and more!)

Can't wait to touch it? Link here

This web app takes a ratio or rotation and plots it in 3 different ways. It is useful for visualizing the golden ratio, but can be used for any number you want.

### Scatter Mode

This mode rotates by the input rotation and steps out from the origin by by the step input, then places a dot and repeats. With the golden ratio as the rotation, the dots will be further apart than any other rotation.

### Spiral Mode

The step control is now multiples of pi over 4. It is the amount rotated about the origin before placing another vertex on the spiral. The distance between the vertices is increased by multiples of the ratio control. For the golden ratio, the lengths of each leg approximately follow the Fibonacci sequence. This isn't actually a golden spiral, but it looks similar.
Using ratios closer to 1 give smoother spirals, and values less than 1 spiral inward to the origin and are uninteresting.

### Circles Mode

This one has no real mathematical significance, but it does look nice. I recommend using rotations that are ratios of pi for this one. In the presets section, type in a denominator (doesn't have to be an integer) and click the [Pi /] button to set the rotation without having to enter the decimal radian measure manually.

### Animate!

All the modes have animations specific to them. The scatter animation goes through all rotations up to pi radians. It may take a while, and the only way (currently) to pause animations is to reload the page, so keep that in mind. The spiral animation increases the step control up to pi radians, at first looking like a growing spiral and then taking more abstract and interesting shapes. I recommend ratios close to 1 for this, such as 1.1. The circle animation spreads out and oscillates, increasing the step linearly and varying the rotation with a sine function. Rotations less than 0.15 may freeze the app due to the heavier computation needed for it, so maybe avoid those. The rotation doesn't reset after the animation completes, and the sine function may have lowered the rotation value, so beware pressing [Animate!] repeatedly. I like the value pi/20 for this, and a low line weight like 1 px for this.