Golden ratio guide

Every control

Every control in the panel, top to bottom. Image overlay, Math and Export start closed; tap their titles to open them.

Load and save

They stay at the top while the panel scrolls. Your pictures stay on this device for every lab tool until you press × on a tile; Reset puts the controls back and leaves them, and a photo you loaded stays.

Image AButton
Your photo, laid under the drawing. Press it to open one from your device, or drop one on the frame; two at once fill A and B. It is kept on this device, never uploaded, and every lab tool that takes a picture opens with it until you press × on its corner. The photo fills the frame, cropped to the frame's shape, and is not stretched. A file that is not a picture, or one the browser cannot open, shows a message instead.
SwapButton
Changes which tile Golden ratio uses, so a picture you added as B in another tool can be used here. When the other tile is empty, the drawing goes back to the dark grid.
Image BButton
A second kept picture. Golden ratio lays one photo at a time under the drawing: the tile it is not using is dimmed and says Not used here, and pressing it only says so.
Save PNGButton
Saves the canvas as golden-ratio.png, at the size of the frame times your screen's pixel density. See PNG.
Copy imageButton
Copies the same picture to the clipboard as a PNG. A message says whether it worked. See clipboard.

Mode

The spiral, the seed head, the Voronoi cells and the rectangle grow from the centre you tap. The Penrose tiling always sits in the middle of the frame.

Fibonacci spiral · Phyllotaxis · Penrose tiling · Voronoi seeds · Golden rectanglePick one
The drawing. Fibonacci spiral: squares sized by the Fibonacci numbers, with a quarter-circle arc through each, which makes a golden spiral. Phyllotaxis: dots set one golden angle apart, each a little further out, like the seeds of a sunflower. Penrose tiling: a ring of ten thin triangles, split again and again into thin and thick ones that never repeat in a simple pattern. Voronoi seeds: dots placed as in Phyllotaxis, each owning the patch of canvas nearest to it. See Voronoi cell. Golden rectangle: a rectangle 1.618 times as wide as it is tall, cut down square by square, with an arc in each square.

Parameters

One slider, and it changes with the mode. Each mode keeps its own value when you switch away and back.

Depth · Points · Subdivisions · SeedsFilled in by the tool
The slider for the mode you picked. Depth for Fibonacci spiral: how many squares, 3 to 16, starting at 12. Depth for Golden rectangle: how many cuts, 3 to 14, starting at 10. Points for Phyllotaxis: how many dots, 100 to 5000, starting at 1000. Subdivisions for Penrose tiling: how many times the triangles are split, 2 to 7, starting at 5; see subdivision. Moving it starts the build again. Seeds for Voronoi seeds: how many cells, 10 to 200, starting at 80. See seed point.

Animation

While time runs, the spiral, the seed head, the tiling and the rectangle build up, then stay. Voronoi seeds turn slowly for as long as time runs.

SpeedSlider · 0.2 to 3 · starts at 1
How fast time runs, from a fifth of normal to three times. The slider glides to its new value. See animation speed.
Auto-animateOn or off · starts on
On, the drawing builds up piece by piece: a square every half second for the spiral, 300 dots a second for the seed head. Off, it is drawn whole at once. Voronoi seeds turn either way while time runs.
PauseButton
Stops time, and the button reads Play. Press it again to go on.
RestartButton
Sets time back to the start, so the drawing builds again from nothing.

Image overlay

With a photo loaded, the canvas shows the photo, the drawing of the mode over it, and the grid you pick. Zooming and moving the view carry the photo and its grid together, and the golden spiral grid starts from the centre you tap.

Clear imageButton
Shows only while a photo is loaded. It removes the photo and its grid, as × on the tile in use does: the photo is forgotten on this device too. The drawing goes back to the dark grid.
Drawing over the photoOn or off · starts on
On, the drawing of the mode is laid over your photo. Off, you see only the photo and its grid. It starts on. Voronoi seeds cover most of the photo, so turn this off to judge the photo alone.
None · Golden spiral · Rule of thirds · Phi grid · Golden trianglePick one
The grid laid over your photo. See composition grid. None: no grid. Golden spiral: ten squares and their arcs, centred on the point you tap, or on the middle of the frame until you tap. Rule of thirds: two lines each way, a third apart. See rule of thirds. Phi grid: two lines each way, at 38.2% and 61.8% of the frame. See phi grid. Golden triangle: one diagonal corner to corner, and a line from each other corner that meets it. See golden triangle. Without a photo, the grid is not drawn. The grids zoom and move with the photo.
OpacitySlider · 0 to 1 · starts at 0.5
How strongly the grid shows over the photo, from not at all to full. The slider glides to its new value. See overlay opacity.
Overlay colorColour · starts #10B981
The colour of the grid lines. It starts green.

Math

No controls, only numbers to read: phi to 19 decimal places, the golden angle of about 137.5 degrees, and the first 20 numbers of the Fibonacci sequence, from 0 to 4181.

Reset

ResetButton
Puts every setting back to how the page opened: the Fibonacci spiral, each slider at its start, no overlay, the drawing shown over a photo, the view zoomed back and centred, and time running.