A pastel garden lit by the real sun, with shadow-mapped shadows and a working sundial.
The sun's altitude and azimuth come from the textbook formulas: declination from the day of the year, the hour angle from local solar time (the clock plus the equation of time, which is why the dial and the clock disagree by up to 16 minutes) and the latitude. A small software rasterizer draws the flat shaded diorama with a z-buffer, near plane clipping and per-row spans, and renders two orthographic shadow maps from the sun every frame, a coarse one over the garden and a fine cascade over the dial, which each pixel samples with bilinear percentage closer filtering. The sundial is a true horizontal dial for the chosen latitude: its gnomon points at the celestial pole and every hour line is the shadow of that edge at a whole hour of solar time, so the close-up shows it telling the right time all year. Sky light is a hemisphere term that turns from noon blue to sunset gold, and after dark the windows and the lantern take over.
Try it. Drag the time, date and latitude sliders to see summer and winter, the tropics and the far south. Drag the scene (or use the arrow keys) to orbit, walk with WASD, press space to pause or play time, and [ or ] to nudge it by a quarter hour.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a tiny low-poly garden with a working sundial, lit by the real sun, using JavaScript and the HTML canvas element. Write the 3D rendering yourself with the 2D canvas (no WebGL, no libraries) and put everything in a single index.html file I can open directly in a browser.
Start simple:
- Model the scene as a list of triangles, each with a flat color: a square lawn, a few boxes for a house and hedges, cone trees, and a round pillar with a flat dial plate in the middle.
- Compute the sun's direction from latitude, day of the year and clock time: the declination is about -23.44 degrees times cos(2 pi (day + 10) / 365), the hour angle is 15 degrees per hour from solar noon, and the standard formulas turn those into altitude and azimuth.
- Orbit a camera around the garden, project the triangles in perspective, sort them far to near (painter's algorithm) and fill them with the canvas path API, shading each by an ambient sky term plus the sun times the dot product of its normal and the sun direction.
- Add sliders for time of day, date and latitude, and let time advance on its own.
Once that works, make it beautiful:
- Add a gnomon tilted to your latitude so its edge points at the celestial pole, and draw hour lines on the plate at angle atan(sin(latitude) tan(15 degrees times the hours from noon)).
- Cast shadows by projecting each object's vertices along the sun direction onto the ground and filling the convex hull in a translucent dark color, so the gnomon's shadow sweeps across the hour lines.
- Pick a pastel palette and change the sky and light color with the sun's height: warm and low at sunset, deep blue at night with lit windows.
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 a real z-buffer rasterizer with shadow maps, the equation of time, or a close-up view of the dial.
