Sequencer

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>PulseGrid // Drum Sequencer</title>
<style>
:root{--bg:#080b10;--panel:#111720;--panel2:#171e29;--line:#293442;--text:#e8edf2;--muted:#748293;--cyan:#40e0d0;--orange:#ff9e45;--red:#ff5b63;--purple:#bd8cff}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -10%,#1d2c3b 0,#0b1017 42%,#07090d 100%);color:var(--text);font:13px system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh;letter-spacing:.03em}.app{max-width:1180px;margin:auto;padding:24px 22px 30px}.top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px}.eyebrow{color:var(--cyan);font-size:11px;font-weight:800;letter-spacing:.24em}.brand{font-size:30px;font-weight:900;letter-spacing:.08em;margin-top:4px}.brand span{color:var(--cyan)}.status{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:11px}.lamp{width:8px;height:8px;background:#36414e;border-radius:50%;box-shadow:0 0 0 transparent}.lamp.on{background:var(--cyan);box-shadow:0 0 12px var(--cyan)}.panel{background:linear-gradient(145deg,#151d27,#0f151d);border:1px solid var(--line);border-radius:12px;box-shadow:0 15px 45px #0007;margin-bottom:15px}.controls{padding:16px;display:flex;align-items:center;gap:13px;flex-wrap:wrap}.btn{border:1px solid #40505e;background:#1e2935;color:var(--text);font-weight:800;letter-spacing:.12em;padding:11px 18px;border-radius:6px;cursor:pointer;transition:.15s;box-shadow:inset 0 1px #ffffff10}.btn:hover{border-color:var(--cyan);color:var(--cyan)}.btn.play{background:var(--cyan);border-color:var(--cyan);color:#061211;min-width:104px}.btn.play.active{background:var(--red);border-color:var(--red);color:#210608}.control{padding:0 14px;border-left:1px solid var(--line);min-width:170px}.label{display:block;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;margin-bottom:4px}.readout{color:var(--text);font-size:15px;font-weight:900}.readout b{color:var(--orange);font-size:24px;font-variant-numeric:tabular-nums}.range{accent-color:var(--cyan);width:145px;vertical-align:middle}.mini{padding:8px 11px;font-size:10px}.gridPanel{padding:18px 14px 16px;overflow-x:auto}.grid{min-width:820px;display:grid;grid-template-columns:180px repeat(16,minmax(32px,1fr));gap:7px}.corner{height:24px}.stepNo{text-align:center;color:#68798b;font-size:10px;font-weight:900;height:24px;padding-top:4px;position:relative}.stepNo:nth-child(4n+2){color:#a6b6c5}.stepNo.group::before{content:"";position:absolute;left:-5px;top:0;height:100%;border-left:1px solid #536272}.track{display:flex;align-items:center;gap:10px;padding:4px 10px;border-radius:6px;background:#0d131a;color:#b9c6d1;font-weight:800}.track.muted{opacity:.35}.trackIcon{font-size:17px;width:22px;text-align:center}.trackName{flex:1}.mute{border:1px solid #465260;background:#18212b;color:#98a8b7;border-radius:4px;font-size:10px;padding:4px 6px;cursor:pointer}.mute.active{background:var(--red);color:#fff;border-color:var(--red)}.cell{height:39px;border:1px solid #283543;border-radius:5px;background:#161f29;cursor:pointer;position:relative;transition:background .08s,transform .08s,box-shadow .08s}.cell:nth-child(4n+2){margin-left:3px}.cell:hover{border-color:#778b9e;transform:translateY(-1px)}.cell.on{background:linear-gradient(145deg,#167d80,#155c6d);border-color:var(--cyan);box-shadow:0 0 10px #25d8cf44,inset 0 1px #bafffa55}.cell.accent{background:linear-gradient(145deg,#ee9a37,#a65322);border-color:var(--orange);box-shadow:0 0 13px #ff9f4555,inset 0 1px #fff6}.cell.on:after,.cell.accent:after{content:"";position:absolute;inset:8px;border-radius:3px;background:#d8ffff22}.cell.playing{outline:2px solid #fff;outline-offset:2px;z-index:2}.legend{display:flex;gap:18px;color:var(--muted);font-size:11px;margin-top:15px;align-items:center}.dot{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px;margin-right:5px}.dot.c{background:var(--cyan)}.dot.a{background:var(--orange)}.tracks{padding:16px}.tracksTitle{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--muted);margin-bottom:12px}.trackControls{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.strip{background:#0d131a;border:1px solid #222e3a;border-radius:7px;padding:10px}.stripHead{display:flex;justify-content:space-between;font-weight:800;font-size:11px;margin-bottom:7px}.strip input{width:100%;accent-color:var(--purple)}.vol{color:var(--purple);font-size:10px}.foot{color:#506171;font-size:10px;text-align:center;margin-top:18px;letter-spacing:.12em}@media(max-width:700px){.app{padding:16px 10px}.brand{font-size:23px}.top{align-items:flex-start;flex-direction:column;gap:10px}.trackControls{grid-template-columns:repeat(3,1fr)}.control{border-left:0;padding:0 8px}.grid{grid-template-columns:145px repeat(16,32px)}}
</style></head>
<body><main class="app">
<header class="top"><div><div class="eyebrow">16 STEP PERFORMANCE INSTRUMENT</div><div class="brand">PULSE<span>GRID</span> <small style="font-size:11px;color:#657384;vertical-align:middle">MK.01</small></div></div><div class="status"><i class="lamp" id="lamp"></i><span id="status">READY / AUDIO OFF</span></div></header>
<section class="panel controls"><button class="btn play" id="play">▶ PLAY</button><button class="btn" id="stop">■ STOP</button><div class="control"><span class="label">Tempo</span><span class="readout"><b id="bpmVal">112</b> BPM</span><input class="range" id="bpm" type="range" min="60" max="200" value="112"></div><div class="control"><span class="label">Shuffle / Swing</span><span class="readout"><b id="swingVal">0</b>%</span><input class="range" id="swing" type="range" min="0" max="60" value="0"></div><div class="control"><span class="label">Master volume</span><input class="range" id="master" type="range" min="0" max="100" value="82"></div><span style="flex:1"></span><button class="btn mini" id="random">✦ RANDOM</button><button class="btn mini" id="clear">CLEAR</button></section>
<section class="panel gridPanel"><div class="grid" id="grid"><div class="corner"></div></div><div class="legend"><span><i class="dot c"></i>HIT</span><span><i class="dot a"></i>ACCENT</span><span>CLICK: ON / OFF · RIGHT CLICK: ACCENT</span></div></section>
<section class="panel tracks"><div class="tracksTitle">TRACK MIXER / SYNTH VOICES</div><div class="trackControls" id="trackControls"></div></section><div class="foot">WEB AUDIO CLOCK // LOOKAHEAD 100MS // PATTERN AUTOSAVED</div>
</main>
<script>
/* ===================== TUNABLE ENGINE CONSTANTS ===================== */
const CFG={BPM_MIN:60,BPM_MAX:200,LOOKAHEAD_MS:25,SCHEDULE_AHEAD:.1,STEP_BEATS:0.5,MASTER:0.82};
const TRACKS=[['KICK','●'],['SNARE','▰'],['CHH','✦'],['OHH','✧'],['CLAP','▤'],['TOM','◆']];
const COLORS=['#40e0d0','#ff6971','#a6e6ff','#75b9ff','#bd8cff','#ffb25c'];
let state={bpm:112,swing:0,master:82,pattern:[],volumes:[.9,.75,.62,.62,.72,.72],mutes:[false,false,false,false,false,false]};
const defaultRows=[[1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0],[0,0,1,0,0,0,1,0,0,0,1,0,0,0,1,0],[1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0],[0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1],[0,0,1,0,0,0,1,0,0,0,1,0,0,0,1,0],[0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0]];
function freshPattern(){return defaultRows.map(r=>r.map(v=>v?1:0))} state.pattern=freshPattern();
try{let saved=JSON.parse(localStorage.getItem('pulsegrid-pattern'));if(saved){state={...state,...saved};if(!Array.isArray(state.pattern)||state.pattern.length!==6)state.pattern=freshPattern()}}catch(e){}
function save(){localStorage.setItem('pulsegrid-pattern',JSON.stringify(state))}
/* ===================== UI ===================== */
const grid=document.getElementById('grid'), controls=document.getElementById('trackControls');
function render(){grid.innerHTML='<div class="corner"></div>'+Array.from({length:16},(_,i)=>`<div class="stepNo ${i%4===0?'group':''}" data-step="${i}">${String(i+1).padStart(2,'0')}</div>`).join('');
 state.pattern.forEach((row,r)=>{let tr=document.createElement('div');tr.className='track '+(state.mutes[r]?'muted':'');tr.innerHTML=`<span class="trackIcon" style="color:${COLORS[r]}">${TRACKS[r][1]}</span><span class="trackName">${TRACKS[r][0]}</span><button class="mute ${state.mutes[r]?'active':''}" data-mute="${r}">M</button>`;grid.appendChild(tr);row.forEach((v,s)=>{let c=document.createElement('div');c.className='cell '+(v===1?'on ':'')+(v===2?'accent ':'');c.dataset.r=r;c.dataset.s=s;grid.appendChild(c)})});
 document.getElementById('bpm').value=state.bpm;document.getElementById('bpmVal').textContent=state.bpm;document.getElementById('swing').value=state.swing;document.getElementById('swingVal').textContent=state.swing;document.getElementById('master').value=state.master;
 controls.innerHTML=TRACKS.map((t,i)=>`<div class="strip"><div class="stripHead"><span style="color:${COLORS[i]}">${t[1]} ${t[0]}</span><span class="vol" id="volText${i}">${Math.round(state.volumes[i]*100)}%</span></div><input data-vol="${i}" type="range" min="0" max="100" value="${Math.round(state.volumes[i]*100)}"></div>`).join('')}
render();
let painting=false,paintValue=0,suppressClick=false;function paintCell(c,v){c.classList.toggle('on',v===1);c.classList.toggle('accent',v===2)}grid.addEventListener('pointerdown',e=>{let c=e.target.closest('.cell');if(c){painting=true;suppressClick=true;let r=+c.dataset.r,s=+c.dataset.s;paintValue=state.pattern[r][s]===0?1:0;state.pattern[r][s]=paintValue;paintCell(c,paintValue)}});grid.addEventListener('pointerover',e=>{if(!painting)return;let c=e.target.closest('.cell');if(c){let r=+c.dataset.r,s=+c.dataset.s;state.pattern[r][s]=paintValue;paintCell(c,paintValue)}});window.addEventListener('pointerup',()=>{if(painting)save();painting=false});grid.addEventListener('contextmenu',e=>{let c=e.target.closest('.cell');if(c){e.preventDefault();state.pattern[+c.dataset.r][+c.dataset.s]=2;paintCell(c,2);save()}});grid.addEventListener('click',e=>{let b=e.target.closest('[data-mute]');if(b){let r=+b.dataset.mute;state.mutes[r]=!state.mutes[r];render();save();return}let c=e.target.closest('.cell');if(c){if(e.detail>0&&suppressClick){suppressClick=false;return}let r=+c.dataset.r,s=+c.dataset.s;state.pattern[r][s]=state.pattern[r][s]?0:1;paintCell(c,state.pattern[r][s]);save()}});controls.addEventListener('input',e=>{if(e.target.dataset.vol!==undefined){let i=+e.target.dataset.vol;state.volumes[i]=+e.target.value/100;document.getElementById('volText'+i).textContent=e.target.value+'%';save()}});
/* ===================== AUDIO PATCHES ===================== */
let ctx=null,masterGain=null,playing=false,timer=null,nextStep=0,origin=0,originStep=0,epoch=0;window.scheduledStepTimes=[];
function audio(){if(!ctx){ctx=new (window.AudioContext||window.webkitAudioContext)();masterGain=ctx.createGain();masterGain.connect(ctx.destination)}if(ctx.state==='suspended')ctx.resume();masterGain.gain.setTargetAtTime(state.master/100,ctx.currentTime,.01)}
function env(g,t,a,d,peak=1){g.gain.setValueAtTime(0,t);g.gain.linearRampToValueAtTime(peak,t+a);g.gain.exponentialRampToValueAtTime(.0001,t+a+d)}
function noise(t,d,filter,vol,bright){let n=ctx.createBufferSource(),b=ctx.createBuffer(1,ctx.sampleRate*d,ctx.sampleRate),x=b.getChannelData(0);for(let i=0;i<x.length;i++)x[i]=Math.random()*2-1;n.buffer=b;let f=ctx.createBiquadFilter();f.type=filter;f.frequency.setValueAtTime(bright||filter==='highpass'? (bright||5000):1200,t);let g=ctx.createGain();g.gain.setValueAtTime(0,t);g.gain.linearRampToValueAtTime(vol,t+.001);g.gain.exponentialRampToValueAtTime(.0001,t+d);n.connect(f).connect(g).connect(masterGain);n.start(t);n.stop(t+d+.02)}
function osc(t,f,d,type,vol,slide){let o=ctx.createOscillator(),g=ctx.createGain();o.type=type;o.frequency.setValueAtTime(f,t);if(slide)o.frequency.exponentialRampToValueAtTime(slide,t+d*.45);env(g,t,.002,d,vol);o.connect(g).connect(masterGain);o.start(t);o.stop(t+d+.03)}
function hit(kind,t,vel){let v=state.volumes[kind]*(.65+.35*vel);if(kind===0){let o=ctx.createOscillator(),g=ctx.createGain();o.type='sine';o.frequency.setValueAtTime(155,t);o.frequency.exponentialRampToValueAtTime(48,t+.13);env(g,t,.002,.42,v);o.connect(g).connect(masterGain);o.start(t);o.stop(t+.5)}
if(kind===1){noise(t,.22,'bandpass',v*.7,2200);osc(t,185,.13,'triangle',v*.22,110)}
if(kind===2)noise(t,.065,'highpass',v*.62,6500);
if(kind===3)noise(t,.42,'highpass',v*.58,5800);
if(kind===4){[0,.018,.036].forEach((q,i)=>noise(t+q,.13,'bandpass',v*(i? .38:.7),1800))}
if(kind===5)osc(t,92,.34,'sine',v*.8,62)}
/* ===================== LOOKAHEAD SCHEDULER ===================== */
function stepDuration(){return 60/state.bpm*CFG.STEP_BEATS}
function scheduledTime(index){let d=stepDuration(),base=origin+(index-originStep)*d;return base+(index%2?d*state.swing/100:0)}
function schedule(){if(!playing)return;let now=ctx.currentTime;while(scheduledTime(nextStep)<now+CFG.SCHEDULE_AHEAD){let t=scheduledTime(nextStep),step=nextStep%16;window.scheduledStepTimes.push({step,time:t,late:t<=now});if(window.scheduledStepTimes.length>160)window.scheduledStepTimes.shift();/* A throttled tab may miss the lookahead window: advance the absolute counter, but never start a source in the past. */if(t>now){state.pattern.forEach((row,k)=>{let val=row[step];if(val&&!state.mutes[k])hit(k,t,val===2?1:.72)})}nextStep++;} }
function scheduler(){schedule();timer=setInterval(schedule,CFG.LOOKAHEAD_MS)}
function start(){audio();if(playing)return;playing=true;epoch++;origin=ctx.currentTime+.05;originStep=0;nextStep=0;window.scheduledStepTimes=[];scheduler();document.getElementById('play').classList.add('active');document.getElementById('play').textContent='❚❚ PLAYING';document.getElementById('lamp').classList.add('on');document.getElementById('status').textContent='RUNNING / AUDIO CLOCK'}
function stop(){if(!ctx)return;playing=false;clearInterval(timer);timer=null;nextStep=0;document.getElementById('play').classList.remove('active');document.getElementById('play').textContent='▶ PLAY';document.getElementById('lamp').classList.remove('on');document.getElementById('status').textContent='READY / AUDIO OFF';document.querySelectorAll('.playing').forEach(x=>x.classList.remove('playing'))}
function tempoChanged(){let was=playing;if(was){let now=ctx.currentTime,oldD=stepDuration(),cur=Math.max(0,Math.floor((now-origin)/oldD));originStep=cur;origin=now;nextStep=cur;epoch++}save()}
/* ===================== AUDIO-CLOCK PLAYHEAD ===================== */
function animate(){document.querySelectorAll('.playing').forEach(x=>x.classList.remove('playing'));if(playing&&ctx){let d=stepDuration(),loop=d*16,rel=(ctx.currentTime-origin)%loop;if(rel<0)rel+=loop;let s=0;for(let i=0;i<16;i++)if(rel>=i*d+(i%2?d*state.swing/100:0))s=i;document.querySelectorAll(`[data-s="${s}"]`).forEach(x=>x.classList.add('playing'));document.querySelectorAll('.stepNo').forEach(x=>x.style.color=+x.dataset.step===s?'#fff':'');}requestAnimationFrame(animate)}requestAnimationFrame(animate);
/* ===================== CONTROLS / PERSISTENCE ===================== */
document.getElementById('play').onclick=start;document.getElementById('stop').onclick=stop;document.getElementById('bpm').oninput=e=>{state.bpm=+e.target.value;document.getElementById('bpmVal').textContent=state.bpm;tempoChanged()};document.getElementById('swing').oninput=e=>{state.swing=+e.target.value;document.getElementById('swingVal').textContent=state.swing;save()};document.getElementById('master').oninput=e=>{state.master=+e.target.value;if(masterGain)masterGain.gain.setTargetAtTime(state.master/100,ctx.currentTime,.01);save()};document.getElementById('clear').onclick=()=>{state.pattern=state.pattern.map(r=>r.map(()=>0));render();save()};document.getElementById('random').onclick=()=>{state.pattern=state.pattern.map((r,k)=>r.map((_,s)=>{let p=[.28,.2,.5,.18,.18,.12][k];return Math.random()<p?(Math.random()<.15?2:1):0}));render();save()};
window.addEventListener('beforeunload',save);window.pulseGrid={state,start,stop,schedule,scheduledTime};
</script></body></html>
<!-- agent-meta {"model":"openai/gpt-5.6-luna-pro","provider":"openrouter","persona":"full","sessionId":"15c85847-0086-4467-bfd9-2150b1a80fd1","tokensIn":794552,"tokensOut":40234,"tokensTotal":834786,"turns":17,"toolCalls":25,"failedToolCalls":0,"timestamp":"2026-07-31T00:22:22.308Z"} -->