Home▸Nature & Climate▸Forest Seasons: Year-Cycle Lab (2D)

Forest Seasons: Year-Cycle Lab (2D)

2D companion to the 3D procedural forest: one continuous time-of-year slider — plus wind and precipitation — drives a cosine temperature curve, a cyclic palette blend, tree sway and rain-vs-snow, all through explicit formulas instead of four fixed snapshots.

Nature & Climate2DEasy60 FPS📱 Mobile-adapted⇄ 3D version
2d-forest-seasons ↗ Open standalone

The 3D forest scene switches between four fixed season snapshots; this 2D lab collapses that into one continuous time-of-year value so you can see the transitions themselves. Temperature follows a cosine curve peaking in summer and bottoming out in winter, the ground, sky and three-tone foliage colours are blended between the nearest season anchors with a smoothstep easing rather than a hard cut, and the same value decides whether falling precipitation renders as fog, rain or snow — snow kicks in automatically once the derived temperature drops to freezing. Forty-six procedurally placed trees sway with an amplitude set by the wind slider and a per-tree phase offset so the canopy never moves as one block, sixty flowers fade in and out with a bloom factor that peaks in spring and summer, and precipitation is a real particle system with wind-driven horizontal drift and season-dependent fall speed. Drag the time-of-year slider directly, tick "auto-advance" to let a full year run in about a minute, or jump straight to a season with the quick buttons.

⚙ Under the hood

A single cyclic time-of-year parameter drives a cosine temperature curve, a smoothstep-blended season palette (ground/sky/foliage colour and density), wind-amplitude-scaled tree sway with per-tree phase offsets, and a wind-and-temperature-driven rain/snow particle system.

forestseasonal cycletemperature curvetree swayprecipitation particlespalette blending

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)