What this page refuses to do. You do not get a formal proof, print-ready CAD, or pixel-perfect botany. You get a fast sketch of a classic square recursion so you see how angle and depth change the silhouette before you open heavier software.
From one trunk square to a full crown
The construction is stubbornly literal. You begin with a base square on the ground plane of the canvas. On its top edge you build a right triangle whose hypotenuse sits flush with the square. You then place a new square on each leg of the triangle. Repeat on every new square until depth runs out.
Each child square is smaller. The two legs inherit different lengths unless your triangle is isosceles, so the tree picks up natural asymmetry the moment you leave 45°.
Angles steer the silhouette more than color does
Color modes help you read depth. Angle changes the skeleton. A wider split between the two child branches opens the crown; a tighter split produces a narrow spire. If you teach the theorem, show the 45° case first: students see symmetry without algebra on the board.
For a different flavor of branching math art, open the Fractal Tree Generator after you finish here. It stresses line segments rather than tiled squares.
| Angle setting | What you usually see |
|---|---|
| Near 30° | One side dominates; the tree leans like a windy photo of an oak. |
| 45° | Balanced crown, mirrored halves, easiest screenshot for notes. |
| Near 60° | Broader spread, shorter-looking tiers, more overlap on small screens. |
Numbers worth reading once
The rail under the canvas is boring on purpose. Square count grows fast once depth passes twelve. Total area sums every filled square in pixel units so you compare presets honestly. Average edge length tells you whether the picture is full of tiny tiles or a few chunky ones.
Three places people use this without calling it art
Lesson warm-up. Project the tab, lock depth at six, sweep angle during class. Let students predict the next frame.
Texture reference. Graphic designers grab PNG exports as starting noise for posters; they trace or simplify later.
Algorithm check. If you rewrote the recursion in Python, compare your counts to the on-page stats at depth ten.
- Depth
- How many generations of squares the code is allowed to place. Not the same as the depth reading in the stats row, which reflects what landed on canvas after the last draw.
- Leg
- One side of the right triangle that touches the parent square. Each leg gets its own new square in the standard construction.
- Self-similarity
- Zoom on a branch and you see the same recipe: square, triangle, two squares. Stop when pixels collapse.
Why the preview lies a little
Canvas pixels are finite. Stroke width is one CSS pixel after scaling. At extreme depth, squares shrink below a pixel and vanish even though the math wants more. On phones we cap device pixel ratio so batteries survive; fine hairlines on a studio monitor will look softer here.
Privacy in one breath
Your drawing never leaves the tab. Download writes a file from local pixels only.
Rough notes if you port the idea into homework code
Most student bugs show up in the rotation hand-off, not in the fill color. You track a square by one corner plus side length plus an orientation angle. After you draw the square, you compute the triangle apex, then you derive two new corners for the child squares. If you forget to subtract a quarter turn when you recurse, the tree crawls sideways across the page until someone laughs.
We keep branch angle between thirty and sixty degrees here because the canvas is short. Outside that band the apex might fold backward or collide with earlier tiles, which still counts as a valid mathematical experiment but reads like a broken renderer to a grader. If you need wilder angles, fork the script locally and widen the sliders after you add overflow padding.
For a dendrite-shaped cousin with a different parameter story, try the McWorter dendrite fractal once you finish comparing crown shapes here. The Fractal Dendrite Generator is another branch-heavy lab if you want more organic silhouettes without the square grid.
