Color Sound Lab

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Recreate “Color Sound Lab” as a browser-based interactive 3D music sequencer/toy. Use a full-screen Three.js canvas with a pale near-white/light-blue background and a fixed, friendly rounded HUD styled with Nunito-like heavy typography. The camera is a perspective camera positioned above and in front of a square 16-column by 8-row note grid, looking toward its center so the grid reads as a floating/isometric field. The grid sits on a very pale blue rectangular base and consists of 128 small white, slightly beveled square pads in 16 columns and 8 rows. Place the columns left-to-right and rows front-to-back; map the eight rows from high to low as C5, B4, A4, G4, F4, E4, D4, C4. A thin bright blue vertical playhead spans the rows and travels across columns from left to right while playing, looping after column 16. Smoothly interpolate the playhead between column positions.

Represent active notes as raised, colorful beveled cube blocks above their pads. Use a consistent row color palette, from the top row downward: hot pink, orange, yellow, green, cyan, blue, purple, and magenta. Clicking/tapping a pad toggles that cell; placing a note creates its raised colored cube and immediately plays that row’s note, while removing it deletes the cube. Support pointer/touch dragging across the grid to paint multiple cells on. Give pads and blocks a subtle scale pulse when their row sounds, and animate the scene with soft shadows, bright hemisphere/directional lighting, and 32 small colored floating spheres/orbs above and behind the grid that gently bob and rotate continuously. The overall visual style should be playful, clean, soft, colorful, and toy-like, with rounded/beveled geometry and no characters or enemies.

Initialize with a 16-step melody pattern: one note in each column at rows [7,5,4,5, 2,4,5,4, 7,5,4,2, 3,4,5,7], plus an additional row-7 note in columns 0, 4, 8, and 12. The sequencer is initially stopped, with BPM 112 and current step 0. Pressing Play starts/resumes the loop and changes the button text to “Pause”; pressing it again pauses. While playing, trigger all active notes in the current column, advance one column at a time at half-note intervals calculated as 60000/BPM/2, and display the current status as “Step N / 16.” Include Spacebar as a play/pause shortcut. Use browser audio after the first user gesture: provide three selectable instruments labeled “Bubbles,” “Pluck,” and “Bass,” corresponding to a triangle poly synth, square-wave short pluck-like poly synth, and sine mono bass synth. The bass should play the same pitch classes lowered from the 4th/5th octave to octave 3. Notes should have short musical envelopes and audible trigger feedback.

Build a fixed top translucent white rounded card with a subtle border, blur, and shadow. It should contain the title “Color Sound Lab,” a blue raised “Play” button, pink raised “Clear” button, pale-blue raised “Random” button, a Sound dropdown defaulting to Bubbles with options Bubbles/Pluck/Bass, and a Tempo range slider from 70 to 180 defaulting to 112. Clear removes every active note. Random clears the grid and then independently creates roughly one or sometimes two notes per column using the same eight rows, producing a new colorful pattern. Along the bottom, show eight white piano-style keys with blue-gray borders/shadows labeled 8, 7, 6, 5, 4, 3, 2, 1 from left to right, corresponding to low-to-high displayed note rows as in the original UI; clicking/touching a key plays its row live and gives it a pressed yellow highlight. Number-row keys 1 through 8 also play the corresponding live notes and highlight their piano keys while held. Add a bottom-left rounded help card reading: “Tap the floating grid to place notes. The playhead scans left to right. Use the piano keys or number row to play notes live.” Add a bottom-right rounded status card reading “Step 1 / 16” initially (hide it on narrow/mobile layouts if desired, matching the original responsive behavior). Keep the layout responsive: on narrow screens the top controls can wrap, the title occupies a full line, and the keyboard sits above the bottom help area. Expose optional state methods equivalent to getGameState/setGameState for title, playing state, BPM, current step, active instrument, note count, and the boolean 8x16 grid, so an external game harness can inspect or update the sequencer.