Skip to content

Generative pixel art, 2026

Starlake

A living pixel-art lake under the stars, in one HTML file with no libraries and no image files.

Open Starlakechengboonrong.github.io/starlakeGitHub repositorygithub.com/chengboonrong/starlake
Starlake at night: snowy peaks, an aurora and a moon mirrored in a pixel-art lake
Click the sky for a shooting star, the lake for a ripple. Drag to scrub through the day.

Overview

Starlake paints a mountain lake as pixel art and keeps it moving. Each visit builds a new landscape from a seed, and the scene runs through a full day: aurora and fireflies at night, sun glare and birds by day, mist at sunrise. The moon shows the real phase for today.

Engineering approach

  • Setup builds everything that never moves, then each frame repaints the scene into one pixel buffer.
  • The scene is drawn small and scaled up, which makes per-pixel work affordable.
  • The layer map stores what each pixel is, not its colour, because colour depends on the hour.

One frame, back to front

  1. Sky
  2. Stars and moon
  3. Terrain
  4. Life
  5. Lake reflects it all
  6. Boat and reeds

Stack

HTML canvas, Plain JavaScript, Seeded value noise, Ordered dithering, Swift (wallpaper build)

Technical challenges

Smooth colour in a pixel-art palette

Problem
Pixel art cannot blend colours smoothly.
Solution
A 4 by 4 Bayer matrix gives every pixel a threshold, and one rule then draws the banded sky, the soft edges of glows and clouds, and the shading on rock.

A reflection with no extra code

Problem
Everything above the horizon has to appear in the water.
Solution
The lake is drawn late and reads the rows already painted above it, mirrored and shifted by waves that grow with depth. The moon, meteors and chimney smoke all reflect for free.

Per-pixel work at 60 fps

Problem
On a 1080p screen the lake alone touches 23,040 pixels every frame.
Solution
A 320 by 180 scene scaled up with pixelated rendering keeps the work small.
Result
The repo records 60 fps in Chromium on an M1 MacBook Pro.

Gallery

Starlake at sunrise with warm light over the peaks
Sunrise.
Starlake at noon with white clouds and sun glare on the lake
Noon.
Starlake at sunset with a red sky mirrored in the water
Sunset.

Outcome and status

Live on GitHub Pages, about 1,000 lines of JavaScript. A macOS dynamic wallpaper built from the same scene is available as a release.