// ---------- audio capture (taps the sound output, renders a WAV) const AREC = { edges: new WeakMap(), tapped: new WeakSet(), ctx: null, proc: null, on: false, L: [], R: [], n: 0, sr: 44100, msg: '', msgT: -9999 }; let _oconn = null; (function () { if (typeof AudioNode === 'undefined') return; _oconn = AudioNode.prototype.connect; AudioNode.prototype.connect = function (t, ...a) { const res = _oconn.call(this, t, ...a); try { if (t instanceof AudioNode) { let s = AREC.edges.get(this); if (!s) { s = []; AREC.edges.set(this, s); } if (!s.includes(t)) s.push(t); if (t === this.context.destination) tapNode(this); } } catch (e) {} return res; }; if (typeof AudioScheduledSourceNode !== 'undefined') { const os = AudioScheduledSourceNode.prototype.start; AudioScheduledSourceNode.prototype.start = function (...a) { try { findTap(this); } catch (e) {} return os.apply(this, a); }; } })(); function getProc(ctx) { if (AREC.proc) return AREC.ctx === ctx ? AREC.proc : null; const p = ctx.createScriptProcessor(4096, 2, 2); p.onaudioprocess = (e) => { const ib = e.inputBuffer, ob = e.outputBuffer; for (let c = 0; c < ob.numberOfChannels; c++) ob.getChannelData(c).fill(0); if (!AREC.on) return; AREC.sr = ib.sampleRate; const l = ib.getChannelData(0), r = ib.numberOfChannels > 1 ? ib.getChannelData(1) : l; AREC.L.push(new Float32Array(l)); AREC.R.push(new Float32Array(r)); AREC.n += l.length; if (AREC.n > AREC.sr * 300) setTimeout(stopArec, 0); }; _oconn.call(p, ctx.destination); AREC.ctx = ctx; AREC.proc = p; return p; } function tapNode(n) { if (!n || AREC.tapped.has(n) || n === AREC.proc) return; const p = getProc(n.context); if (!p) return; _oconn.call(n, p); AREC.tapped.add(n); } function findTap(src) { const dst = src.context.destination, seen = new Set(), ends = [], stack = [[src, 0]]; let found = false; while (stack.length) { const [n, d] = stack.pop(); if (seen.has(n) || d > 16) continue; seen.add(n); const s = AREC.edges.get(n) || []; if (s.includes(dst)) { found = true; tapNode(n); continue; } if (!s.length) { if (n !== src && !(n instanceof AnalyserNode)) ends.push(n); continue; } for (const t of s) stack.push([t, d + 1]); } if (!found) ends.forEach(tapNode); } function recTime() { const s = floor(AREC.n / max(1, AREC.sr)); return floor(s / 60) + ':' + nf(s % 60, 2); } function startArec() { closeTake(); AREC.L = []; AREC.R = []; AREC.n = 0; AREC.on = true; if (!playing) togglePlay(); showToast('Recording · press REC again to stop and get your WAV'); } function stopArec() { if (!AREC.on) return; AREC.on = false; AREC.msgT = millis(); if (AREC.n < AREC.sr * 0.2) { AREC.msg = 'NO AUDIO'; return; } buildTake(); AREC.msg = 'TAKE READY'; if (playing) togglePlay(); } function toggleArec() { AREC.on ? stopArec() : startArec(); } function buildTake() { stopPreview(); const n = AREC.n, sr = Math.round(AREC.sr), buf = new ArrayBuffer(44 + n * 4), v = new DataView(buf); const ws = (o, s) => { for (let i = 0; i < s.length; i++) v.setUint8(o + i, s.charCodeAt(i)); }; ws(0, 'RIFF'); v.setUint32(4, 36 + n * 4, true); ws(8, 'WAVE'); ws(12, 'fmt '); v.setUint32(16, 16, true); v.setUint16(20, 1, true); v.setUint16(22, 2, true); v.setUint32(24, sr, true); v.setUint32(28, sr * 4, true); v.setUint16(32, 4, true); v.setUint16(34, 16, true); ws(36, 'data'); v.setUint32(40, n * 4, true); let o = 44, idx = 0; const NB = 240, peaks = new Float32Array(NB); for (let k = 0; k < AREC.L.length; k++) { const a = AREC.L[k], b = AREC.R[k]; for (let i = 0; i < a.length; i++) { v.setInt16(o, Math.max(-1, Math.min(1, a[i])) * 32767, true); v.setInt16(o + 2, Math.max(-1, Math.min(1, b[i])) * 32767, true); o += 4; const bk = Math.min(NB - 1, Math.floor(idx * NB / n)), pv = Math.max(Math.abs(a[i]), Math.abs(b[i])); if (pv > peaks[bk]) peaks[bk] = pv; idx++; } } if (AREC.take) URL.revokeObjectURL(AREC.take.url); let abuf = null; try { abuf = AREC.ctx.createBuffer(2, n, sr); let off = 0; for (let k = 0; k < AREC.L.length; k++) { abuf.getChannelData(0).set(AREC.L[k], off); abuf.getChannelData(1).set(AREC.R[k], off); off += AREC.L[k].length; } } catch (e) { abuf = null; } let pm = 0.0001; for (let i = 0; i < NB; i++) pm = Math.max(pm, peaks[i]); for (let i = 0; i < NB; i++) peaks[i] /= pm; const name = 'DM12-' + params.bpm + 'bpm-' + 'ABCD'[bank] + '-' + Date.now().toString(36) + '.wav'; AREC.take = { url: URL.createObjectURL(new Blob([buf], { type: 'audio/wav' })), name, dur: n / sr, peaks, abuf, open: true }; AREC.L = []; AREC.R = []; const el = dlLink(); el.href = AREC.take.url; el.download = name; } let _dl = null; function dlLink() { if (!_dl) { _dl = document.createElement('a'); _dl.setAttribute('aria-label', 'Download WAV'); Object.assign(_dl.style, { position: 'fixed', display: 'none', zIndex: 10, opacity: 0, cursor: 'pointer' }); _dl.addEventListener('click', () => showToast('Saving… if no file appears, use the player below (⋮ menu or right-click → Save)')); document.body.appendChild(_dl); } return _dl; } let _au = null; function audEl() { if (!_au) { _au = document.createElement('audio'); _au.controls = true; _au.preload = 'auto'; Object.assign(_au.style, { position: 'fixed', display: 'none', zIndex: 10, height: '34px', colorScheme: 'dark' }); document.body.appendChild(_au); } return _au; } function downloadTake() { if (!AREC.take) return; const el = dlLink(); el.href = AREC.take.url; el.download = AREC.take.name; el.click(); } function togglePreview() { const T = AREC.take; if (!T || !T.abuf) return; if (AREC.pv) { stopPreview(); return; } const c = AREC.ctx; if (c.state === 'suspended') c.resume(); const s = c.createBufferSource(); s.buffer = T.abuf; const g = c.createGain(); g.gain.value = params.volume; _oconn.call(s, g); _oconn.call(g, c.destination); s.onended = () => { if (AREC.pv && AREC.pv.s === s) AREC.pv = null; }; s.start(); AREC.pv = { s, t0: c.currentTime }; } function stopPreview() { if (AREC.pv) { try { AREC.pv.s.stop(); } catch (e) {} AREC.pv = null; } } function closeTake() { stopPreview(); if (_dl) _dl.style.display = 'none'; if (_au) { _au.pause(); _au.style.display = 'none'; } if (AREC.take) AREC.take.open = false; } let toast = { t: '', at: -9999 }; function showToast(t) { toast.t = t; toast.at = millis(); } function drawToast(acc, m) { const age = millis() - toast.at; if (age > 3500) return; const a = constrain((3500 - age) / 600, 0, 1); textFont('sans-serif'); textStyle(BOLD); const ts = constrain(width / 75, 11, 15); textSize(ts); const tw = min(width - 2 * m, textWidth(toast.t) + 36), ty = height - m * 2 - ts * 2.6; noStroke(); fill(8, 8, 10, 235 * a); rect(width / 2 - tw / 2, ty, tw, ts * 2.4, ts * 1.2); fill(red(acc), green(acc), blue(acc), 255 * a); rect(width / 2 - tw / 2 + 10, ty + ts * 1.2 - 3, 6, 6, 3); label(toast.t, width / 2 + 6, ty + ts * 1.2, ts, color(red(acc), green(acc), blue(acc), 255 * a)); } function drawTake(acc, m) { const T = AREC.take; hit('tmodal', 0, 0, width, height); noStroke(); fill(0, 190); rect(0, 0, width, height); const MW = min(width - 2 * m, 640), MH = min(height - 2 * m, 360); const mx = (width - MW) / 2, my = (height - MH) / 2, p = 16; drawingContext.shadowBlur = 40; drawingContext.shadowColor = 'rgba(0,0,0,0.8)'; fill('#1d1d20'); rect(mx, my, MW, MH, 12); drawingContext.shadowBlur = 0; fill('#101012'); rect(mx + 6, my + 6, MW - 12, MH - 12, 10); const ac = (al) => color(red(acc), green(acc), blue(acc), al); textFont('monospace'); textStyle(NORMAL); drawingContext.shadowBlur = 10; drawingContext.shadowColor = params.accent; const s = round(T.dur); label('TAKE READY · ' + floor(s / 60) + ':' + nf(s % 60, 2) + ' · STEREO WAV', mx + p, my + p + 10, min(14, MW / 38), acc, LEFT); drawingContext.shadowBlur = 0; const wx = mx + p, wy = my + p + 28, ww = MW - 2 * p; const bh = constrain(MH * 0.16, 40, 58), hintH = 80; const wh = max(30, MH - (wy - my) - bh - hintH - p - 14); fill('#070706'); rect(wx, wy, ww, wh, 6); const prog = AREC.pv ? (AREC.ctx.currentTime - AREC.pv.t0) / max(0.01, T.dur) : -1; const n = T.peaks.length, bw = (ww - 12) / n; for (let i = 0; i < n; i++) { const pk = max(0.02, T.peaks[i]); fill(i / n < prog ? color('#ffe2b0') : ac(prog >= 0 ? 120 : 220)); rect(wx + 6 + i * bw, wy + wh / 2 - pk * wh * 0.42, max(1, bw - 1), pk * wh * 0.84); } if (prog >= 0) { fill(255); rect(wx + 6 + min(1, prog) * (ww - 12), wy + 4, 1.5, wh - 8); } textFont('sans-serif'); textStyle(BOLD); const by = wy + wh + 14, b3 = (ww - 16) / 3; const B = [['tplay', AREC.pv ? 'STOP' : 'PREVIEW', color('#2c2c30'), !!AREC.pv], ['tdl', 'DOWNLOAD WAV', acc, true], ['tclose', 'CLOSE', color('#2c2c30'), false]]; for (let k = 0; k < 3; k++) { const bx = wx + k * (b3 + 8); box(bx, by, b3, bh, 6, B[k][2], B[k][3]); label(B[k][1], bx + b3 / 2, by + bh / 2, min(bh * 0.3, b3 * 0.085), k === 1 ? 25 : 210); hit(B[k][0], bx, by, b3, bh); } const el = dlLink(), cr = drawingContext.canvas.getBoundingClientRect(), dx = wx + b3 + 8; Object.assign(el.style, { display: 'block', left: (cr.left + dx) + 'px', top: (cr.top + by) + 'px', width: b3 + 'px', height: bh + 'px' }); const au = audEl(); if (au.src !== T.url) au.src = T.url; Object.assign(au.style, { display: 'block', left: (cr.left + wx) + 'px', top: (cr.top + by + bh + 8) + 'px', width: ww + 'px' }); textStyle(NORMAL); label(touchScreen ? 'nothing saved? tap the player\'s ⋮ menu → Download, or long-press it' : 'nothing saved? use the player\'s ⋮ menu → Download, or right-click it → Save audio as', mx + MW / 2, by + bh + 56, min(11, MW / 52), 150); label('embedded previews can block downloads · opening the piece in its own tab fixes it', mx + MW / 2, by + bh + 71, min(10, MW / 60), 105); } const TR = [ ['KICK', 'sfx_3UzLh9rDVEPW', 1.0, 0.05], ['SNARE', 'sfx_OKs9Lmc8aQQq', 0.8, 0.4], ['CLAP', 'sfx_f7lLJe2P9y2Q', 0.8, 0.5], ['HH CL', 'sfx_HWkQRJl28DhF', 0.5, 0.9], ['HH OP', 'sfx_Qt6jPfE5Cs4D', 0.55, 0.96], ['RIM', 'sfx_ZAPFLoixP0wt', 0.6, 0.7], ['TOM', 'sfx_gnbGSFzINiTB', 0.7, 0.25], ['PERC', 'sfx_xI3OFoM4msEA', 0.6, 0.75], ['STAB', 'sfx_G2jkKvAIBgla', 0.6, 0.55], ['CHOP', 'sfx_5CxddDfBuytX', 0.65, 0.62], ['SUB', 'sfx_4XTS0MZrLGoz', 0.9, 0.1], ['METAL', 'sfx_tmpQhGXf4QLe', 0.5, 0.82] ]; const CAT0 = ['KICK', 'SNARE', 'SNARE', 'HATS', 'HATS', 'PERC', 'PERC', 'PERC', 'SYNTH', 'SYNTH', 'BASS', 'PERC']; const LIB = TR.map((t, i) => ({ n: t[0], id: t[1], v: t[2], c: CAT0[i] })).concat([ { n: '808 BD', id: 'sfx_PCQX3uYUYsSa', v: 1.0, c: 'KICK' }, { n: 'RUMBLE', id: 'sfx_gbyGaCKOf47v', v: 0.95, c: 'KICK' }, { n: '909 SN', id: 'sfx_X7P8bYmTgezP', v: 0.75, c: 'SNARE' }, { n: 'RIDE', id: 'sfx_E3O9PlvlYiGz', v: 0.45, c: 'HATS' }, { n: 'COWBL', id: 'sfx_bHnKZD3OjqSa', v: 0.5, c: 'PERC' }, { n: 'SHAKE', id: 'sfx_agYSAOlwU4A5', v: 0.5, c: 'HATS' }, { n: 'HARD BD', id: 'sfx_l0OTAfuZCYTR', v: 0.95, c: 'KICK' }, { n: 'CONGA', id: 'sfx_eGSaE4C9Vn5E', v: 0.65, c: 'PERC' }, { n: 'SNAP', id: 'sfx_jIiceU6SBQDo', v: 0.7, c: 'SNARE' }, { n: 'CRASH', id: 'sfx_JDHhNQdYRK9n', v: 0.4, c: 'HATS' }, { n: 'ACID', id: 'sfx_91AO3fO45RQs', v: 0.6, c: 'BASS' }, { n: 'HEY!', id: 'sfx_gXWRluUtjQUN', v: 0.6, c: 'VOX' }, { n: 'REESE', id: 'sfx_N9lrB09WVfHU', v: 0.75, c: 'BASS' }, { n: '808 GLD', id: 'sfx_LlYXue8K7xAB', v: 0.9, c: 'BASS' }, { n: 'SQUELCH', id: 'sfx_eVlMMh33qSac', v: 0.7, c: 'BASS' }, { n: 'DIST BS', id: 'sfx_tuCwCyxPzjLa', v: 0.75, c: 'BASS' }, { n: 'WOBBLE', id: 'sfx_QTIbln6W9dAp', v: 0.75, c: 'BASS' }, { n: 'GROWL', id: 'sfx_D1t8zpOoLgPL', v: 0.7, c: 'BASS' }, { n: 'YEAH!', id: 'sfx_u214heT2mOZP', v: 0.65, c: 'VOX' }, { n: 'AH', id: 'sfx_iNdioycDnHHn', v: 0.6, c: 'VOX' }, { n: 'ROBO', id: 'sfx_ynOBI0IRXLsm', v: 0.65, c: 'VOX' }, { n: 'OH', id: 'sfx_ZM9bgRAbhPgu', v: 0.6, c: 'VOX' }, { n: 'C\'MON', id: 'sfx_8AhGld5qqFIl', v: 0.65, c: 'VOX' }, { n: 'ZAP', id: 'sfx_hZlbjjGAIfQq', v: 0.5, c: 'SYNTH' }, { n: 'DIRTY BD', id: 'sfx_spgLSf9JmbIi', v: 0.9, c: 'KICK' }, { n: 'CRUSH BD', id: 'sfx_4zoSDJHjSYB7', v: 0.9, c: 'KICK' }, { n: 'FUZZ BD', id: 'sfx_gwT9qowvk7ww', v: 0.85, c: 'KICK' }, { n: 'ELECTRO', id: 'sfx_mo4TJNl2BjnM', v: 0.95, c: 'KICK' }, { n: 'ZAP BD', id: 'sfx_N1gpqYtObzue', v: 0.9, c: 'KICK' }, { n: 'CLICK BD', id: 'sfx_PUpSPyP9Iwba', v: 0.95, c: 'KICK' } ]); const CATS = [['KICK', 'KICKS'], ['SNARE', 'SNARES & CLAPS'], ['HATS', 'HATS & CYMBALS'], ['PERC', 'PERCUSSION'], ['SYNTH', 'SYNTH & FX'], ['BASS', 'HEAVY BASS'], ['VOX', 'VOCAL SNIPPETS']]; let browse = -1; const KITS = { Classic: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], '808 Room': [12, 1, 2, 3, 4, 16, 6, 17, 8, 9, 10, 11], Warehouse: [13, 14, 2, 17, 15, 5, 6, 7, 8, 9, 10, 11], Hybrid: [13, 14, 2, 3, 15, 16, 12, 17, 8, 9, 10, 11], 'Peak Time': [18, 14, 20, 3, 15, 5, 19, 7, 22, 23, 10, 21], 'Acid Club': [13, 1, 20, 3, 4, 5, 19, 17, 22, 9, 10, 23], 'Bass Heavy': [18, 14, 2, 3, 15, 5, 6, 17, 24, 26, 25, 29], 'Vox Rave': [13, 20, 2, 3, 15, 16, 19, 17, 30, 31, 32, 34], 'Low End': [12, 22, 2, 17, 4, 5, 6, 35, 28, 27, 25, 33], 'Dirty Techno': [36, 14, 2, 3, 15, 5, 38, 17, 22, 9, 27, 37], 'Electro': [39, 22, 20, 3, 4, 16, 40, 41, 35, 32, 25, 11] }; let sel = KITS.Classic.slice(); function applyKit() { sel = KITS[params.kit].slice(); } const NR = 12, NS = 16; const params = { bpm: 128, swing: 0.06, pitch: 1.0, warpDepth: 0.7, volume: 0.8, accent: '#f2b43c', loopLen: 16, kit: 'Classic', randomize: () => randomizeBank(bank), clear: () => { banks[bank] = blank(); } }; const KNOBS = [ { k: 'bpm', min: 80, max: 180, label: 'TEMPO' }, { k: 'swing', min: 0, max: 0.4, label: 'SWING' }, { k: 'pitch', min: 0.5, max: 1.6, label: 'PITCH' }, { k: 'warpDepth', min: 0, max: 1, label: 'WARP AMT' } ]; let banks = [], bank = 0, muted = new Array(NR).fill(false), flash = new Array(NR).fill(0), padFlash = [0, 0, 0, 0]; let recSkip = new Array(12).fill(-1), stepStart = 0, stepDur = 120; let playing = false, step = 0, lastStep = 0, nextTime = 0, stA = -1, warpAmt = 0, rec = false; let hits = [], holdRects = {}, drag = null, paint = null, grainG, bars = new Array(32).fill(0); const touchScreen = matchMedia('(pointer: coarse)').matches; function blank() { return Array.from({ length: NR }, () => new Array(NS).fill(0)); } function fromStr(rows) { return rows.map(s => s.split('').map(Number)); } function randomizeBank(b) { const dens = [0.3, 0.08, 0.12, 0.6, 0.2, 0.15, 0.1, 0.2, 0.08, 0.1, 0.12, 0.08]; const g = blank(); for (let r = 0; r < NR; r++) for (let c = 0; c < NS; c++) if (random() < dens[r]) g[r][c] = random() < 0.3 ? 2 : 1; for (let c = 0; c < NS; c += 4) g[0][c] = c === 0 ? 2 : 1; banks[b] = g; } function setup() { createCanvas(windowWidth, windowHeight); banks[0] = fromStr(['2000100010001000', '0000000000000000', '0000200000002000', '1101110111011101', '0010001000100010', '0001000000010000', '0000000000000101', '0000000100100000', '0000001000000000', '0000000000000000', '0010000000100000', '0000000000000010']); banks[1] = fromStr(['2000100010101000', '0000100000001001', '0000000000000000', '1111111111111111', '0010000000100000', '1010000010100000', '0000000000100100', '0001001000000100', '0000000000001000', '0100000001000000', '0010001000000010', '0000000100000001']); randomizeBank(2); banks[3] = blank(); banks[3][0] = [2, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0]; makeGrain(); gui.add(params, 'bpm', 80, 180, 1).name('Tempo'); gui.add(params, 'swing', 0, 0.4).name('Swing'); gui.add(params, 'pitch', 0.5, 1.6).name('Pitch'); gui.add(params, 'warpDepth', 0, 1).name('Warp depth'); gui.add(params, 'volume', 0, 1).name('Sound volume'); gui.add(params, 'kit', Object.keys(KITS)).name('Drum kit').onChange(applyKit); gui.addColor(params, 'accent').name('Accent'); gui.add(params, 'randomize').name('Randomize pattern'); gui.add(params, 'clear').name('Clear pattern'); } function makeGrain() { grainG = createGraphics(width, height); grainG.pixelDensity(1); const gc = grainG.drawingContext, W = width, H = height; const styles = ['rgba(255,255,255,0.03)', 'rgba(255,255,255,0.055)', 'rgba(0,0,0,0.035)', 'rgba(0,0,0,0.06)']; const n = Math.min(30000, Math.floor(W * H / 60)); for (let s = 0; s < 4; s++) { gc.fillStyle = styles[s]; for (let i = 0; i < n / 4; i++) gc.fillRect(Math.random() * W, Math.random() * H, 1, 1); } } function windowResized() { resizeCanvas(windowWidth, windowHeight); makeGrain(); } // ---------- sound / sequencer function hasSfx() { return typeof sfx !== 'undefined'; } function rateMul() { return max(0.3, 1 - 0.6 * warpAmt * params.warpDepth); } function trigger(r, acc, force) { flash[r] = 1; if (muted[r] && !force) return; if (!hasSfx()) return; const wob = warpAmt * params.warpDepth * sin(millis() * 0.004 + r); const L = LIB[sel[r]]; sfx.play(L.id, { volume: L.v * (acc ? 1 : 0.68) * random(0.9, 1), rate: constrain(params.pitch * rateMul() * random(0.985, 1.015), 0.25, 3), pan: constrain((TR[r][3] - 0.5) * 0.5 + wob * 0.6, -1, 1) }); } function held(id) { const k = { stutter: 83, warp: 68 }[id]; if (keyIsDown(k)) return true; const R = holdRects[id]; if (!R) return false; const inR = (x, y) => x > R.x && x < R.x + R.w && y > R.y && y < R.y + R.h; if (touches.length) return touches.some(t => inR(t.x, t.y)); return mouseIsPressed && inR(mouseX, mouseY); } function runSeq() { const stut = held('stutter'); warpAmt = lerp(warpAmt, held('warp') ? 1 : 0, held('warp') ? 0.04 : 0.08); if (!stut) stA = -1; if (!playing) return; const now = millis(); if (now - nextTime > 400) nextTime = now; let guard = 0; while (now >= nextTime && guard++ < 4) { const g = banks[bank]; for (let r = 0; r < NR; r++) { if (g[r][step] && recSkip[r] !== step) trigger(r, g[r][step] === 2); if (recSkip[r] === step) recSkip[r] = -1; } lastStep = step; const base = 60000 / params.bpm / 4 / rateMul(); let d = base * (step % 2 === 0 ? 1 + params.swing : 1 - params.swing); if (stut) { if (stA < 0) stA = step; d = base * 0.5; step = stA; } else step = (step + 1) % params.loopLen; stepStart = nextTime; stepDur = d; nextTime += d; } } // ---------- drawing helpers function hit(id, x, y, w, h, data) { hits.push({ id, x, y, w, h, data }); } function box(x, y, w, h, r, c, lit, glowC) { noStroke(); fill(0, 140); rect(x, y + 3, w, h, r); if (lit) { drawingContext.shadowBlur = 22; drawingContext.shadowColor = glowC || c; } fill(c); rect(x, y, w, h, r); drawingContext.shadowBlur = 0; fill(255, lit ? 50 : 12); rect(x + 2, y + 2, w - 4, h * 0.3, r * 0.7); fill(0, 50); rect(x + 2, y + h * 0.82, w - 4, h * 0.16, r * 0.7); } function label(t, x, y, s, c, al) { fill(c); textAlign(al || CENTER, CENTER); textSize(s); text(t, x, y); } function draw() { if (hasSfx()) sfx.volume = params.volume; runSeq(); for (let r = 0; r < NR; r++) flash[r] *= 0.86; for (let i = 0; i < 4; i++) padFlash[i] *= 0.88; hits = []; background('#141416'); const acc = color(params.accent), red = color('#e2462c'); const m = max(8, min(width, height) * 0.02); const hh = constrain(height * 0.08, 46, 72); const portrait = width < height * 1.05; const top = m * 2 + hh; let G, P; if (!portrait) { G = { x: m, y: top, w: (width - 3 * m) * 0.68, h: height - top - m }; P = { x: G.x + G.w + m, y: top, w: width - 3 * m - G.w, h: G.h }; } else { G = { x: m, y: top, w: width - 2 * m, h: (height - top - 2 * m) * 0.56 }; P = { x: m, y: G.y + G.h + m, w: width - 2 * m, h: height - top - 2 * m - G.h }; } // chassis fill('#1d1d20'); rect(m * 0.5, m * 0.5, width - m, height - m, 14); fill(255, 6); rect(m * 0.5, m * 0.5, width - m, hh + m * 1.5, 14, 14, 0, 0); drawHeader(m, m, width - 2 * m, hh, acc); drawGrid(G, acc, red, m); drawPanel(P, acc, red, m); image(grainG, 0, 0); if (browse >= 0) drawBrowser(acc, m); if (AREC.take && AREC.take.open) drawTake(acc, m); else { if (_dl) _dl.style.display = 'none'; if (_au && _au.style.display !== 'none') { _au.pause(); _au.style.display = 'none'; } } drawToast(acc, m); } function drawBrowser(acc, m) { const r = browse; hit('bclose', 0, 0, width, height); noStroke(); fill(0, 185); rect(0, 0, width, height); const MW = min(width - 2 * m, 760), MH = min(height - 2 * m, 560); const mx = (width - MW) / 2, my = (height - MH) / 2; hit('bmodal', mx, my, MW, MH); drawingContext.shadowBlur = 40; drawingContext.shadowColor = 'rgba(0,0,0,0.8)'; fill('#1d1d20'); rect(mx, my, MW, MH, 12); drawingContext.shadowBlur = 0; fill('#101012'); rect(mx + 6, my + 6, MW - 12, MH - 12, 10); const p = 16, hh = constrain(MH * 0.1, 30, 46), gp = 8; textFont('sans-serif'); textStyle(BOLD); const ab = hh, dw = min(90, MW * 0.18); const lw = MW - 2 * p - ab * 2 - dw - gp * 3; let x = mx + p; const y = my + p; box(x, y, ab, hh, 6, color('#2c2c30')); fill(200); triangle(x + ab * 0.6, y + hh * 0.3, x + ab * 0.6, y + hh * 0.7, x + ab * 0.35, y + hh * 0.5); hit('bprev', x, y, ab, hh); x += ab + gp; fill('#0b0a08'); rect(x, y, lw, hh, 6); fill(red(acc), green(acc), blue(acc), 18); rect(x + 3, y + 3, lw - 6, hh - 6, 4); textFont('monospace'); textStyle(NORMAL); drawingContext.shadowBlur = 10; drawingContext.shadowColor = params.accent; label('TRK ' + nf(r + 1, 2) + ' · ' + LIB[sel[r]].n, x + lw / 2, y + hh / 2, min(hh * 0.38, lw / 16), acc); drawingContext.shadowBlur = 0; textFont('sans-serif'); textStyle(BOLD); x += lw + gp; box(x, y, ab, hh, 6, color('#2c2c30')); fill(200); triangle(x + ab * 0.4, y + hh * 0.3, x + ab * 0.4, y + hh * 0.7, x + ab * 0.65, y + hh * 0.5); hit('bnext', x, y, ab, hh); x += ab + gp; box(x, y, dw, hh, 6, acc, true); label('DONE', x + dw / 2, y + hh / 2, min(hh * 0.32, dw * 0.2), 25); hit('bdone', x, y, dw, hh); // library const cols = MW > 600 ? 6 : MW > 420 ? 4 : 3, gap = 6; const groups = CATS.map(([c]) => LIB.map((L, i) => L.c === c ? i : -1).filter(i => i >= 0)); const lines = groups.reduce((s, g) => s + ceil(g.length / cols), 0); const by = y + hh + 14, avail = my + MH - p - 22 - by; const th = min(16, avail * 0.045); const ih = constrain((avail - CATS.length * (th + 4)) / lines - gap, 14, 46); const iw = (MW - 2 * p - gap * (cols - 1)) / cols; let yy = by; for (let ci = 0; ci < CATS.length; ci++) { label(CATS[ci][1], mx + p, yy + th / 2, min(11, th * 0.7), color(red(acc), green(acc), blue(acc), 170), LEFT); yy += th; const g = groups[ci]; for (let k = 0; k < g.length; k++) { const idx = g[k], ix = mx + p + (k % cols) * (iw + gap), iy = yy + floor(k / cols) * (ih + gap); const on = sel[r] === idx; box(ix, iy, iw, ih, 5, on ? acc : color('#2c2c30'), on); label(LIB[idx].n, ix + iw / 2, iy + ih / 2, min(ih * 0.36, iw * 0.14), on ? 25 : 210); if (idx === KITS[params.kit][r]) { fill(on ? 40 : acc); circle(ix + 8, iy + 8, 4); } hit('bitem', ix, iy, iw, ih, idx); } yy += ceil(g.length / cols) * (ih + gap) + 4; } textStyle(NORMAL); label(touchScreen ? 'tap a sound to preview & assign · dot = kit default' : 'click a sound to preview & assign · dot = kit default · Esc closes', mx + MW / 2, my + MH - p - 4, min(11, MW / 50), 120); } function drawHeader(x, y, w, h, acc) { textFont('sans-serif'); textStyle(BOLD); const pw = h * 1.5; box(x, y, pw, h, 6, playing ? color('#f08a1c') : color('#c8701a'), playing, color('#ff9a2a')); fill(30); noStroke(); if (playing) { rect(x + pw / 2 - h * 0.16, y + h * 0.32, h * 0.12, h * 0.36); rect(x + pw / 2 + h * 0.04, y + h * 0.32, h * 0.12, h * 0.36); } else triangle(x + pw / 2 - h * 0.13, y + h * 0.3, x + pw / 2 - h * 0.13, y + h * 0.7, x + pw / 2 + h * 0.2, y + h * 0.5); hit('play', x, y, pw, h); // LCD const bw = h * 0.85, bankW = bw * 4 + 12, btnW = h * 1.3; const lx = x + pw + 10, lw = max(80, w - pw - 10 - bankW - 10 - (btnW * 2 + 16)); fill('#0b0a08'); rect(lx, y, lw, h, 6); fill(red(acc), green(acc), blue(acc), 18); rect(lx + 3, y + 3, lw - 6, h - 6, 4); textFont('monospace'); textStyle(NORMAL); const ts = min(h * 0.32, lw / 26); drawingContext.shadowBlur = 10; drawingContext.shadowColor = params.accent; const segs = ['BPM ' + nf(round(params.bpm), 3), 'PTN ' + 'ABCD'[bank], 'LOOP ' + params.loopLen, nf(lastStep + 1, 2) + '/' + params.loopLen, warpAmt > 0.05 ? 'WARP' : stA >= 0 ? 'RPT' : AREC.on ? 'REC ' + recTime() : rec ? 'DUB' : millis() - AREC.msgT < 2500 ? AREC.msg : 'DM-12']; for (let i = 0; i < segs.length; i++) label(segs[i], lx + lw * (i + 0.5) / segs.length, y + h / 2, ts, acc); drawingContext.shadowBlur = 0; textFont('sans-serif'); textStyle(BOLD); let bx = lx + lw + 10; for (let i = 0; i < 4; i++) { box(bx, y + h * 0.1, bw, h * 0.8, 5, i === bank ? acc : color('#2c2c30'), i === bank); label('ABCD'[i], bx + bw / 2, y + h / 2, h * 0.3, i === bank ? 20 : 200); hit('bank', bx, y, bw, h, i); bx += bw + 4; } bx += 6; for (const [id, t] of [['rand', 'RAND'], ['clear', 'CLEAR']]) { box(bx, y + h * 0.1, btnW, h * 0.8, 5, color('#2c2c30')); label(t, bx + btnW / 2, y + h / 2, h * 0.22, 210); hit(id, bx, y, btnW, h); bx += btnW + 8; } } function drawGrid(G, acc, red, m) { textFont('sans-serif'); textStyle(BOLD); fill('#101012'); rect(G.x, G.y, G.w, G.h, 10); const pad = m * 0.6; const lw = min(G.w * 0.15, 96); const dh = min(G.h * 0.06, 22); const cw = (G.w - lw - pad * 3) / NS, ch = (G.h - dh - pad * 3) / NR; const gap = max(2, min(cw, ch) * 0.12); const x0 = G.x + pad * 2 + lw, y0 = G.y + pad * 2 + dh; // step LEDs for (let c = 0; c < NS; c++) { const cx = x0 + c * cw + cw / 2, cy = G.y + pad + dh / 2; const on = playing && c === lastStep; if (on) { drawingContext.shadowBlur = 16; drawingContext.shadowColor = '#ff8a2a'; } fill(on ? '#ffb04a' : c < params.loopLen ? (c % 4 === 0 ? '#6a3d1c' : '#4a2c16') : '#221a14'); circle(cx, cy, min(dh, cw) * (c % 4 === 0 ? 0.6 : 0.42)); drawingContext.shadowBlur = 0; } const g = banks[bank]; for (let r = 0; r < NR; r++) { const ry = y0 + r * ch; const lc = muted[r] ? color('#1e1e20') : color('#2a2a2e'); box(G.x + pad, ry + gap / 2, lw, ch - gap, 5, lc); fill(lerpColor(color(40), r >= 8 ? red : acc, flash[r])); circle(G.x + pad + min(10, lw * 0.12), ry + ch / 2, min(6, ch * 0.2)); const aw = min(lw * 0.24, ch); label(LIB[sel[r]].n, G.x + pad + 8 + (lw - aw - 8) / 2, ry + ch / 2, min(ch * 0.28, lw * 0.13), muted[r] ? 90 : 220); fill(0, 70); rect(G.x + pad + lw - aw, ry + gap / 2 + 4, 1, max(1, ch - gap - 8)); { const ax = G.x + pad + lw - aw / 2, ay = ry + ch / 2, s = min(aw, ch) * 0.16; fill(sel[r] !== KITS[params.kit][r] ? acc : color(130)); triangle(ax - s * 0.7, ay - s, ax - s * 0.7, ay + s, ax + s * 0.8, ay); } hit('label', G.x + pad, ry, lw - aw, ch, r); hit('snd', G.x + pad + lw - aw, ry, aw, ch, r); const onC = r >= 8 ? red : acc; for (let c = 0; c < NS; c++) { const cx = x0 + c * cw; const v = g[r][c], inLoop = c < params.loopLen; let col; if (v) { col = v === 2 ? lerpColor(onC, color(255, 240, 210), 0.35) : onC; if (!inLoop || muted[r]) col = lerpColor(col, color(30), 0.6); } else col = !inLoop ? color('#1a1a1c') : (floor(c / 4) % 2 === 0 ? color('#4a4a4e') : color('#36363a')); const ph = playing && c === lastStep; if (ph && !v) col = lerpColor(col, color(255), 0.15); const lit = v && ph && !muted[r]; box(cx + gap / 2, ry + gap / 2, cw - gap, ch - gap, min(6, cw * 0.12), lit ? lerpColor(col, color(255), 0.4) : col, lit || (v && inLoop && !muted[r] && flash[r] > 0.5), onC); hit('cell', cx, ry, cw, ch, { r, c }); } } } function drawPanel(P, acc, red, m) { fill('#101012'); rect(P.x, P.y, P.w, P.h, 10); const p = m * 0.7; let V, K, B, D; if (P.w > P.h * 1.3) { const cw = (P.w - p * 3) / 2, chh = (P.h - p * 3) / 2; V = { x: P.x + p, y: P.y + p, w: cw, h: chh * 1.15 }; B = { x: V.x, y: V.y + V.h + p, w: cw, h: P.h - V.h - p * 3 }; K = { x: P.x + p * 2 + cw, y: P.y + p, w: cw, h: chh * 0.85 }; D = { x: K.x, y: K.y + K.h + p, w: cw, h: P.h - K.h - p * 3 }; } else { const iw = P.w - p * 2, ih = P.h - p * 5; V = { x: P.x + p, y: P.y + p, w: iw, h: ih * 0.24 }; K = { x: V.x, y: V.y + V.h + p, w: iw, h: ih * 0.22 }; B = { x: V.x, y: K.y + K.h + p, w: iw, h: ih * 0.14 }; D = { x: V.x, y: B.y + B.h + p, w: iw, h: ih * 0.4 }; } drawVis(V, acc, red); drawKnobs(K, acc); drawFx(B, acc, red); drawPads(D, acc, red); } function drawVis(V, acc, hot) { fill('#070706'); rect(V.x, V.y, V.w, V.h, 6); const lv = hasSfx() ? sfx.levels() : { level: 0, bass: 0, mid: 0, treble: 0 }; const n = bars.length, bw = (V.w - 16) / n; for (let i = 0; i < n; i++) { const f = i / (n - 1); let e = lv.bass * pow(1 - f, 2) * 0.8 + lv.mid * exp(-sq((f - 0.5) * 3)) * 0.7 + lv.treble * f * f * 0.8; for (let r = 0; r < NR; r++) e += flash[r] * 0.55 * exp(-sq((f - TR[r][3]) * 7)); e += 0.03 * noise(i * 0.3, frameCount * 0.03); bars[i] = max(bars[i] * 0.9, min(1, e)); const segs = 14, sh = (V.h - 26) / segs; const lit = floor(bars[i] * segs); for (let s = 0; s < segs; s++) { const on = s < lit; const c = s > segs * 0.8 ? hot : acc; fill(on ? c : color(red(acc) * 0.12, green(acc) * 0.1, 10)); rect(V.x + 8 + i * bw + 1, V.y + V.h - 8 - (s + 1) * sh + 1, bw - 2, sh - 2, 1); } } // scope noFill(); stroke(255, 230, 190, 120); strokeWeight(1.2); beginShape(); for (let i = 0; i <= 60; i++) { const t = i / 60; const a = (lv.level + flash[0] * 0.4) * (V.h * 0.12) * sin(t * TWO_PI * (3 + warpAmt * 4) + frameCount * 0.25) * sin(t * PI); vertex(V.x + 8 + t * (V.w - 16), V.y + 14 + V.h * 0.12 + a); } endShape(); noStroke(); textFont('monospace'); textStyle(NORMAL); label(hasSfx() && lv.level > 0 ? 'SPECTRUM' : touchScreen ? 'TAP PLAY' : 'SPACE = PLAY', V.x + 10, V.y + 11, 10, color(red(acc), green(acc), blue(acc), 160), LEFT); } function drawKnobs(K, acc) { textFont('sans-serif'); textStyle(BOLD); const n = KNOBS.length, cw = K.w / n; const d = min(cw * 0.62, K.h * 0.62); for (let i = 0; i < n; i++) { const kd = KNOBS[i], cx = K.x + cw * (i + 0.5), cy = K.y + K.h * 0.42; const t = (params[kd.k] - kd.min) / (kd.max - kd.min); const a0 = PI * 0.75, a1 = a0 + PI * 1.5 * t; fill('#0b0b0c'); circle(cx, cy, d * 1.18); noFill(); strokeWeight(max(2, d * 0.07)); stroke(50); arc(cx, cy, d * 1.05, d * 1.05, a0, PI * 2.25); stroke(acc); drawingContext.shadowBlur = 10; drawingContext.shadowColor = params.accent; if (t > 0.005) arc(cx, cy, d * 1.05, d * 1.05, a0, a1); drawingContext.shadowBlur = 0; noStroke(); fill('#3a3a3e'); circle(cx, cy, d * 0.8); fill('#cfcfd2'); circle(cx, cy, d * 0.62); fill('#e9e9ec'); circle(cx - d * 0.06, cy - d * 0.08, d * 0.36); fill(30); circle(cx + cos(a1) * d * 0.22, cy + sin(a1) * d * 0.22, d * 0.08); label(kd.label, cx, K.y + K.h * 0.88, min(11, cw * 0.13), 150); hit('knob', cx - cw / 2, K.y, cw, K.h, kd); } } function drawFx(B, acc, red) { textFont('sans-serif'); textStyle(BOLD); const items = [['stutter', 'REPEAT', held('stutter')], ['warp', 'WARP', warpAmt > 0.1], ['rec', AREC.on ? '● ' + recTime() : 'REC', AREC.on], ['dub', 'OVERDUB', rec], ['loop', 'LOOP ' + params.loopLen, params.loopLen < 16]]; const w = (B.w - 24) / 5; for (let i = 0; i < 5; i++) { const [id, t, on] = items[i], x = B.x + i * (w + 6); const recC = (millis() % 1000) > 500 ? lerpColor(red, color(60, 12, 6), 0.45) : red; box(x, B.y, w, B.h, 6, on ? (id === 'rec' ? recC : acc) : color('#2c2c30'), on); label(t, x + w / 2, B.y + B.h * 0.45, min(B.h * 0.26, w * 0.15), on ? 25 : 210); if (id === 'stutter' || id === 'warp') { fill(on ? 40 : 110); textSize(min(9, B.h * 0.16)); text(touchScreen ? 'hold' : id === 'stutter' ? 'hold S' : 'hold D', x + w / 2, B.y + B.h * 0.78); } if (id === 'rec') { fill(on ? 40 : 110); textSize(min(9, B.h * 0.16)); text(on ? (touchScreen ? 'tap to save' : 'R · save WAV') : (touchScreen ? 'to WAV' : 'R · to WAV'), x + w / 2, B.y + B.h * 0.78); } if (id === 'dub') { fill(on ? 40 : 110); textSize(min(9, B.h * 0.16)); text(touchScreen ? 'pads → steps' : 'O · pads → steps', x + w / 2, B.y + B.h * 0.78); } holdRects[id] = { x, y: B.y, w, h: B.h }; hit(id, x, B.y, w, B.h); } } function drawPads(D, acc, red) { textFont('sans-serif'); textStyle(BOLD); const s = min((D.w - 10) / 2, (D.h - 10) / 2), ox = D.x + (D.w - (s * 2 + 10)) / 2; const cream = color('#ecd38a'); for (let i = 0; i < 4; i++) { const x = ox + (i % 2) * (s + 10), y = D.y + floor(i / 2) * (s + 10); const c = lerpColor(lerpColor(color('#8a7a50'), cream, 0.5), red, padFlash[i]); box(x, y, s, s, 8, c, padFlash[i] > 0.1, red); label(LIB[sel[8 + i]].n, x + s / 2, y + s * 0.5, s * 0.13, color(40, 30, 20, 200)); if (!touchScreen) label('ZXCV'[i], x + s * 0.12, y + s * 0.12, s * 0.09, color(40, 30, 20, 150)); hit('pad', x, y, s, s, i); } } // ---------- input function findHit(x, y) { for (let i = hits.length - 1; i >= 0; i--) { const h = hits[i]; if (x >= h.x && x <= h.x + h.w && y >= h.y && y <= h.y + h.h) return h; } return null; } function togglePlay() { playing = !playing; if (playing) { step = 0; nextTime = millis(); } } function hitTrack(r) { if (r >= 8) padFlash[r - 8] = 1; trigger(r, true, true); if (rec && playing) { // quantize to the nearest step const frac = (millis() - stepStart) / max(1, stepDur); let t = lastStep; if (frac > 0.5 && stA < 0) { t = (lastStep + 1) % params.loopLen; recSkip[r] = t; } banks[bank][r][t] = 1; } } function hitPad(i) { hitTrack(8 + i); } function toggleRec() { rec = !rec; if (rec && !playing) togglePlay(); showToast(rec ? 'OVERDUB ON · hit pads' + (touchScreen ? '' : ' or keys 1–=') + ' while it plays and the hits are written into the pattern' : 'OVERDUB OFF'); } function mousePressed(e) { const h = findHit(mouseX, mouseY); if (!h) return; const g = banks[bank]; switch (h.id) { case 'play': togglePlay(); break; case 'bank': bank = h.data; break; case 'rand': randomizeBank(bank); break; case 'clear': banks[bank] = blank(); break; case 'label': muted[h.data] = !muted[h.data]; break; case 'cell': { const { r, c } = h.data; const v = (g[r][c] + 1) % 3; g[r][c] = v; paint = v; if (v && !playing) trigger(r, v === 2, true); break; } case 'knob': drag = { kd: h.data, y: mouseY, v: params[h.data.k] }; break; case 'pad': hitPad(h.data); break; case 'rec': toggleArec(); break; case 'dub': toggleRec(); break; case 'snd': browse = h.data; break; case 'bclose': case 'bdone': browse = -1; break; case 'bmodal': case 'tmodal': break; case 'tplay': togglePreview(); break; case 'tdl': if (!e || e.target !== _dl) downloadTake(); break; case 'tclose': closeTake(); break; case 'bprev': browse = (browse + NR - 1) % NR; break; case 'bnext': browse = (browse + 1) % NR; break; case 'bitem': sel[browse] = h.data; trigger(browse, true, true); break; case 'loop': params.loopLen = params.loopLen >= 16 ? 4 : params.loopLen + 4; break; } } function mouseDragged() { if (drag) { const kd = drag.kd, range = kd.max - kd.min; let v = constrain(drag.v + (drag.y - mouseY) / 180 * range, kd.min, kd.max); params[kd.k] = kd.k === 'bpm' ? round(v) : v; gui.controllersRecursive && gui.controllersRecursive().forEach(c => c.updateDisplay && c.updateDisplay()); } else if (paint !== null) { const h = findHit(mouseX, mouseY); if (h && h.id === 'cell') banks[bank][h.data.r][h.data.c] = paint; } } function mouseReleased() { drag = null; paint = null; } function keyPressed() { if (AREC.take && AREC.take.open) { if (keyCode === ESCAPE) closeTake(); else if (keyCode === ENTER || keyCode === RETURN) downloadTake(); else if (key === ' ') togglePreview(); return false; } if (keyCode === ESCAPE && browse >= 0) { browse = -1; return false; } if (key === ' ') { togglePlay(); return false; } const i = 'zxcv'.indexOf(key.toLowerCase()); if (i >= 0) { hitPad(i); return false; } if (key.toLowerCase() === 'r') { toggleArec(); return false; } if (key.toLowerCase() === 'o') { toggleRec(); return false; } const tk = '1234567890-='.indexOf(key); if (tk >= 0) { hitTrack(tk); return false; } if ('sd'.includes(key.toLowerCase())) return false; }