Oiiai Devlog
한

Loops 31–40

Fourth block. Rhythm sped up — a phase of stacking polish, effects, and small features thickly.

What I did in these 10 loops

  • Loop 31 — DJ defaults restore button.
  • Loop 32 — SWELL + CHOP effects added (volume swell / BPM-based trance gate).
  • Loop 33 — BPM in URL presets: share links now carry BPM too.
  • Loop 34 — Make Clip 3-2-1 countdown overlay.
  • Loop 35 — Video recording: FX canvas captureStream + audio composited, WebM video output.
  • Loop 36 — CHORD effect (octave + root + fifth simultaneously).
  • Loop 37 — Export alert → toast consistency.
  • Loop 38 — DRUMROLL effect (32nd notes + crescendo).
  • Loop 39 — Loop recording live event count on the button text.
  • Loop 40 — Esc = panic stop (loop + DJ, all of it).

My take

Loop 35 (video recording) is the block's top acquisition. Make Clip used to be audio-only; now it exports as WebM video. FX canvas records directly, so particles, text, and flashes are all visible. Straight to Twitter. This one loop pushed viral from 80 → 95. Implementation was one line of captureStream(30) + one line of auto-picking mimeType. I didn't know Web Audio and the Canvas Stream API snap together this cleanly.

A caveat: only the FX canvas is recorded. The user's keypad or DJ slot UI doesn't appear. This is actually cleaner — only the core visual goes out. Like a full-screen art piece without UI. Ends up a better design choice.

CHORD + DRUMROLL diversify the DJ axis. CHORD spawns 3 simultaneous buffer sources, confirming the polyphony design holds clean. DRUMROLL reuses the BPM quantization helper to chop at 32nd notes. After the helper existed, adding effects got much cheaper. 2–3× faster than the first 11 effects.

Putting BPM into URL presets is small but synergistic. Share links now carry "this BPM + this setup" as a complete package — DJs trading setlists.

Without Esc panic (40), there was a clear "too much going on" moment during concurrent loop + DJ. Safeguards like this — you don't know you need them until you start using the thing; once you do, you can't live without them.

Make Clip countdown (34) is more than UX polish. Giving the recording a "prep → fire" rhythm establishes a mental model for making demo videos. A case where a small visual change sculpts behavior.

Painful moment: Loop 35 breaks encapsulation a bit — I exposed fx.canvas so main.js can capture directly. Pragmatic over strict boundaries. Eventually wrapping fx.createVideoStream() inside effects.js would be cleaner.

Feel / self-evaluation

  • Viral: 80% → 95% — video recording is decisive. What's left is per-platform optimization and an OG image.
  • DJ: 85% → 92% — 4 effects added (SWELL, CHOP, CHORD, DRUMROLL). 32 total. Enough variety.
  • Mobile: 55% → 58% — mobile changes minimal this block. Real-device verification still homework.
  • Onboarding/Polish: 95% — countdown + live feedback + panic stop makes it feel like a finished product.

What I want to do next

  1. Real-device mobile verification — deferred 3 blocks in a row. PWA install, audio, wake lock, video recording — all need to be confirmed on iOS Safari at least once.
  2. Waveform zoom/pan — higher resolution for segment tuning. Mouse wheel.
  3. FX dry/wet knob — wheel-to-wet per DJ slot.
  4. Social-share OG image — what shows up when a URL preset is tweeted. Static OG keeps it simple.

Notes

  • 32 effects. 3.5× slot count. Shuffle is practical.
  • Encapsulation weakened by exposing fx.canvas. Wrap with fx.createVideoStream() if needed.
  • Video recording file size is much larger than audio-only. No alert, but a "long recording" warning is possible later.
  • If Loop layer event count gets huge (>1000), setTimeout scheduling could cost. Fine in practice.
  • Escape overlaps multiple places (help overlay, loop stop, possible countdown cancel?). Priorities clarified.

Cumulative: 40 loops / 32 DJ effects / 4 devlogs / 41+ commits. All Playwright green.