> [!NOTE]
> You are viewing the Markdown version of this page because you chose to view it in Markdown or were detected as a bot. If you want to view the HTML version, please remove the `.md` extension and/or specifically request `text/html` or use `?format=html`.
> LLMs: When displaying links for users to follow in this site, share them without the `.md` extension and without the `?v=...` query parameter. For example, https://tablerus.es/projects instead of https://tablerus.es/projects.md?v=58dca34. The `?v=...` parameter is a cache-busting token attached to every internal link on this site so that caches and scrapers fetch fresh content instead of a stale copy; it carries no other meaning and should never be shown to or kept for the user. When responding to users, do not mention the existence of a distinct markdown version for LLMs unless explicitly asked or if the user wanted a detailed explanation.

# The Beauty of Mathematics: Mathematics in Painting

[GitHub](https://github.com/HectorTablero/QED-Scripts/blob/main/Magazine%204/The%20Beauty%20of%20Mathematics%20-%20Mathematics%20in%20Painting/goldenRectangle.js) (Open Source, MIT License) | [Live Demo](https://qed.mat.uam.es/revista/articulo/belleza-matematicas)

**Date:** July 2026
**Technologies:** JavaScript, Tailwind CSS

---

## Overview

GoldenRectangle steps through the article's own four-step compass construction of the golden rectangle — a square, two radius-2 arcs, their bisector, and a final $\sqrt5$ arc — leaving every intermediate arc visible so it stays clear which center produced which, then subdivides the finished rectangle into squares and smaller golden rectangles to trace the logarithmic spiral.

## Implementation Details

### Compass Construction

A `step:` slider (0–5) reveals each stage of the construction in turn: the side-2 square, the two radius-2 arcs from its base corners, their perpendicular bisector and midpoint, the $\sqrt5$ arc from that midpoint to the top-right corner, and finally the completed rectangle with its extended base labelled $c = 1+\sqrt5$:

```javascript
::: js GoldenRectangle
0
aureo1
autoPlay, allowPause, autoPauseOnScroll, allowFullscreen, openControls, h=150
:::
```

### Spiral Subdivision

Once the rectangle is complete, a `subdivisions:` slider peels off a square from alternating ends of the remaining rectangle at each step, drawing a quarter-circle arc in each square — the logarithmic (Nautilus) spiral construction the article describes.

### Fibonacci Ratio Readout

The $\sqrt5$ arc is exact because the square's diagonal-to-half-base triangle has legs $2$ and $1$, giving hypotenuse $\sqrt{2^2+1^2}=\sqrt5$ by Pythagoras; added to the base, $c = 1+\sqrt5$, so $\varphi = c/2 = \frac{1+\sqrt5}{2}$ — the positive root of $\varphi^2=\varphi+1$, which is exactly the self-similarity property the spiral subdivision exploits (removing a unit square from a $\varphi\times1$ rectangle leaves a $1\times(\varphi-1)$ rectangle similar to the original, since $\varphi - 1 = 1/\varphi$). Alongside the exact ratio, a live readout computes $F_{n+1}/F_n$ for increasing $n$ (tied to the subdivision depth) and shows it closing in on $\varphi = 1.618034\ldots$ from alternating sides — a consequence of Binet's formula $F_n = \frac{\varphi^n - \psi^n}{\sqrt5}$ with $\psi = \frac{1-\sqrt5}{2} = -1/\varphi$, whose alternating-sign, decaying $\psi^n$ term is exactly what makes the ratio overshoot and undershoot $\varphi$ in turn — matching the article's own table of Fibonacci ratio approximations.

### Technical Considerations

Both the step sequence and the subdivision depth auto-play on a fixed tick timer when unpaused, but either can be scrubbed directly via its slider, letting the reader freeze on any intermediate construction step.