A recursive tree that grows, blossoms and sways in the wind.
A recursive function grows the tree once: each branch spawns two (sometimes three) shorter children at slightly random angles, down to the twigs. Every frame the branches are laid out again with a sine-based wind bend that grows toward the tips, so the bends add up and the crown sways while the trunk barely moves. Blossoms ride the twigs, and petals let go in the wind, tumble down and settle on the hill.
Try it. Move the pointer sideways to blow the wind. Click to shake the blossoms loose and grow a new tree in a new season.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an animated fractal tree swaying in the wind with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Paint a soft dawn sky gradient behind everything.
- Write a recursive branch(length, depth) function: draw a line up, translate to its end, then call itself twice inside ctx.save() and ctx.restore(), once rotated left and once right by about 25 degrees, each child about 75% as long. Stop at a depth of 9 or 10.
- Make the trunk thick and the twigs thin by scaling lineWidth with depth, and use lineCap = "round".
- Add a little randomness to each branch's angle and length, generated once and stored, so the tree looks natural but doesn't flicker every frame.
Once that works, make it beautiful:
- Animate wind: add a sway to each branch's angle with Math.sin(time + depth) that grows toward the tips, so the trunk barely moves and the twigs dance. Let the mouse x position set the wind strength and direction.
- Put small pink blossoms at the branch tips, and occasionally let one detach as a petal that tumbles down with the wind and settles on the ground.
- Click to grow a new random tree, animating each depth level growing in after the one before it.
- For speed, compute branch endpoints into arrays and batch all branches of one depth into a single path.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as seasons with different leaf colors, a forest with depth and fog, or L-system rules for different plant shapes.
