An endless ink handscroll of misty peaks, pines, pavilions and boats, unrolling.
The scroll is cut into chunks, and each decides from the seed what stands in it: pale distant ranges, a massif of stacked rock masses, a wooded bank or open water with boats, now and then a column of invented script with its seal. Mountains are domed noise profiles washed in graded ink, outlined with a brush stroke whose width breathes with noise, folded by inner ridge lines and textured with hemp-fiber cun strokes that crowd the shaded side. Pines, trees, pavilions and boats are small procedural grammars, and mist bands whose density follows a world-space noise give the layers their atmospheric perspective. Tiles render one per frame, and each redraws every object that reaches it from that object's own random stream, so the strokes meet exactly across seams, forever.
Try it. Drag to unroll the scroll either way; left alone it drifts right to left, the way a handscroll is read. Click to press a red seal onto the silk. Press N or the New scroll label for another range, and the arrow keys to roll quickly.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an endless Chinese ink landscape (shan shui) that scrolls sideways like an unrolling handscroll, 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. Fill it with a warm silk color.
- Write a small 1D or 2D noise function yourself.
- Mountains: a mountain is a profile across its width, a rounded envelope (for example a cosine bump) multiplied by a little noise so the ridge has bumps. Fill it with a vertical gradient of dark ink at the top fading to transparent at the base, and outline the ridge with a dark line.
- Draw three layers back to front: pale low mountains far away, a band of white mist (a vertical gradient from transparent to silk to transparent), then taller, darker mountains in front.
- Place mountains along an endless strip using a seeded random generator per slot, and scroll the view slowly so new mountains keep appearing.
Once that works, make it beautiful:
- Draw outlines as brush strokes: a filled polygon around the line whose width varies with noise and tapers at both ends.
- Add texture strokes: many short ink marks hanging down from the ridge line, denser on the shaded left side.
- Add a pine tree on a foreground bank (a leaning trunk and dark clusters of short needle strokes), and a little boat on open water.
- Let me drag to scroll, and click to stamp a red square seal.
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 caching the painting in tiles for speed, pavilions and waterfalls, or columns of calligraphy in empty sky.
