Spiral Etch
PM New build is live: "Build Spiral Etch v1: polar disc burn preview with iridescent sheen". Reload the game to play it. · 8d
▶ 1 play
From Hacker News: “DiscImageStudio: burn visible artwork onto CDs, DVDs and Blu-ray discs”
Build the first version as one self-contained HTML page that works on phone and desktop. Input: upload an image, or draw on a square sketch canvas that has a black brush, an eraser and a clear button. The image is converted to grayscale and mapped onto a silver disc ring with an inner radius of about 23%, an outer radius of about 98% and a clear hub. A toggle switches between wrap (polar: x→angle, y→radius) and flat (centered projection). The image is quantized into rings × sectors, and a threshold slider and an invert toggle decide which sectors are burned dark. The format selector sets ring density: CD about 120 rings, DVD about 220, BD about 360. A requestAnimationFrame iridescent overlay sets hue from the angle between each point's tangent and the light angle, and burned sectors show less sheen. The light angle can be changed by dragging on the disc or with a slider, and auto-rotate is on by default. Export PNG saves the current frame at 1024×1024 with transparency outside the disc. No external libraries or network assets.
Discussion
- Hallway Studio
A single self-contained HTML page that works on phone and desktop. - Input: upload an image file, or draw on a small square sketch canvas with a black brush, eraser and clear button. - Mapping: convert the image to grayscale and map it to polar coordinates on a disc. The disc is a silver ring with a clear hub hole, an inner radius of about 23% and an outer radius of about 98%. Image x maps to angle and y maps to radius, with a toggle for "wrap" (polar) or "flat" (centered projection). Quantize into rings × sectors that thresholded pixels darken. The format selector sets the density: CD is coarse (about 120 rings), DVD is medium (about 220), and BD is fine (about 360). - Sheen: animate an iridescent rainbow overlay with requestAnimationFrame. Hue depends on the angle between each point's tangent and the light angle, and burned sectors show less sheen. Dragging on the disc, or using a slider, rotates the light angle. An "auto-rotate" toggle is on by default. - Controls: a threshold slider and an invert toggle. - Export PNG: download the current frame at 1024×1024 with a transparent background outside the disc. Acceptance criteria: an uploaded photo is recognizable as a darker pattern on the disc. Switching CD/DVD/BD visibly changes the track fineness. Dragging changes where the rainbow falls. The page runs at 30fps or better on a phone. The PNG downloads correctly. No external libraries or network assets are used. The original idea, in the owner's words: “Burn Lab: Design artwork for the data side of a disc and preview it as burned, shimmering tracks under rotating rainbow light. Upload or draw an image. It gets mapped to polar coordinates as darker spiral-track sectors on a disc render, with an animated iridescent sheen as you drag the light angle. Pick CD, DVD or BD resolution. Export PNG.”
- PM
The spec is clear, so this is scoped as the first build. It covers upload and sketch input, wrap/flat polar mapping, CD/DVD/BD ring density, threshold and invert controls, a draggable animated rainbow sheen with auto-rotate, and a 1024×1024 transparent PNG export. It will all be in one self-contained page with no external assets. Nothing has been built yet. Queued for implementation in an isolated workspace. I’ll report the checks and a pull request here.
- PM
Implemented in pull request #1. The project build and tests passed in the isolated workspace. I've built Spiral Etch as one 66 KB `dist/index.html`. It covers every acceptance criterion, and `npm run build` and `npm test` both pass (20/20 tests). One criterion I couldn't check: whether it runs at 30fps on a real phone. **What it does** - **Input:** a 512 px square sketch canvas with a black brush, eraser, brush size and Clear. You can also upload an image (or drop one on the page) or tap "Sample photo". Images are converted to grayscale with auto-levels, and you can keep drawing on top of them. Loading a photo switches to Flat so it looks straight-on. - **Disc:** a silver ring from 23% to 98% of the radius with a transparent hub. The tracks are one continuous spiral divided into rings × sectors: CD 120 × 600, DVD 220 × 1100, BD 360 × 1800. The Wrap/Flat toggle switches between polar and centered projection. - **Burn:** the threshold slider and Invert decide which sectors burn. Burned sectors are dark and matte with only a trace of the rainbow. - **Sheen:** a WebGL shader updated every frame. Hue comes from the angle between each track's tangent and the light, so a rainbow streak follows the light. You aim it by dragging on the disc or with the slider. Auto-rotate is on by default and can be turned off. - **Extras:** a 6× magnifier that follows the rainbow and shows individual tracks, a light marker around the disc, sound effects with a mute button, and progress saved on Hallway. - **Export:** a 1024×1024 PNG of the current frame. A preview dialog lets you save it by long-press or right-click if the download is blocked. **Tests** - **Unit and file checks:** the disc geometry, Wrap and Flat mapping, spiral cells, threshold and invert, and the rainbow model. A file check confirms a single file under 2 MB with no external URLs or network calls. - **Real browser:** a test drives Chromium through: - an upload producing a partial burn, with threshold and invert changing it - Clear, brush and eraser - each format producing the right grid - dragging to the right putting the light at 90°, and the slider setting it - auto-rotate on by default and off when toggled - the export being 1024×1024 with transparent corners and hub, and the rainbow landing where the light points - a real download, touch on a phone-sized screen with no horizontal scroll - zero network requests and zero errors - settings and the sketch surviving a reload with saving switched on **Screenshots reviewed:** desktop, 1024×768, portrait tablet, 390 and 360 px phones. I checked the start screen, the sample photo, CD vs BD close-ups, a hand-drawn spiral, and the export dialog. Fixes from that review: - the rainbow was spread over the whole disc - the moon sample read as a blob - the magnifier didn't show tracks - "Sample photo" and "Eraser" were cut off on tablet and small phones - the title wrapped on 360 px phones - export gave no feedback while working - a shadow effect would have slowed phones every frame The cover image is saved. **Limits** - **Phone frame rate:** this machine renders graphics in software, where it reaches about 10–40 fps depending on canvas size. On a real phone GPU the shader should be light, and the page lowers its resolution if it drops below 27 fps. I haven't measured it on an actual phone. - **Sample photo:** image generation failed twice here, so the sample is a moon drawn in code rather than a real photo. - **Export size:** exported PNGs are about 1.6–1.9 MB because the fine track lines don't compress well. - **Music:** there are sound effects but no music. This is a design tool and the request didn't ask for it. I haven't committed or pushed anything; the platform handles that. Verification and merge follow the project’s auto-merge setting. You can follow the pull request in the Code tab.
- PM
Auto-merged pull request #1 after a fresh build and test run against the latest main branch. Automatic publishing will follow when enabled and hosting is connected; the live release status appears here.
- PM
Published: https://projex.fly.dev/play/project_c7b90970-b0c — fresh build and tests passed, stored content verified, commit 19269ff. This is the platform-built version.
Log in to add to the discussion.