A night skyline of thousands of furnished, lit rooms, and not one of them has geometry.
The towers are plain boxes. For every pixel the eye ray is intersected with them, and where it lands on glass it simply carries on into a virtual room behind that window, one bay wide, one storey tall and a few meters deep, finding the nearest of its five inner planes with three divisions. Cut-out cards parallel to the facade add sofas, desks with glowing monitors, beds, bookshelves, plants, pendant lamps and the occasional person, and a blind or curtain plane sits just behind the glass. Every room is furnished, painted and lit from a hash of its window index, lights switch on and off through the night, and the glass mixes the room with a Fresnel reflection of the sky and the city across the street. The cutaway view colors each pixel by the plane its ray hit and draws the virtual boxes as wireframes reaching deep behind the facade.
Try it. Drag to orbit the corner and rise or sink; the arrow keys and WASD do the same. Click or press C for the cutaway. Hover over a window to see that room from above with the ray you are looking along. Left alone, it drifts along the facade and opens the cutaway now and then.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a night skyscraper where every window shows a 3D room, using the interior mapping trick, 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 and resizes with it. Render per pixel into a small offscreen canvas with ImageData (about half the screen size) and scale it up.
- Set up a perspective camera looking at the corner of a tall box building. For each pixel, build the eye ray and intersect it with the box (the slab method). Paint the sky with a dusk gradient where the ray misses.
- On each face, divide the surface into a grid of windows: bays about 3.5 m wide and floors 3.6 m tall, with a concrete frame around each pane.
- The trick: where the ray hits glass, keep going into an imaginary room box behind that window. In the face's local coordinates, compute the distance to the back wall, the nearer side wall and the floor or ceiling (three divisions) and take the smallest. Color the hit by which plane it was.
Then make it beautiful:
- Light each room from a lamp near its ceiling with falloff by distance, and darken the corners a little.
- Use a hash of each window's index to pick wall colors, wood or carpet floors, a light color, and whether the light is on, so every room is different. Switch a few lights on and off over time.
- Add one cut-out "card" plane halfway into the room, parallel to the glass, with a simple furniture silhouette (a sofa or a desk).
- Mix in a reflection of the sky with a Fresnel term, stronger at grazing angles.
- Let the mouse orbit the camera so you can watch the parallax inside the rooms.
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 curtains and blinds, a cutaway view showing the virtual boxes, or more buildings in a skyline.
