|
|
|
|
@@ -0,0 +1,692 @@
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
|
|
|
<title>Sovereign Sound — Playground</title>
|
|
|
|
|
<style>
|
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
|
html, body { height: 100%; overflow: hidden; }
|
|
|
|
|
body {
|
|
|
|
|
background: #050510;
|
|
|
|
|
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
|
|
|
color: #fff;
|
|
|
|
|
cursor: none;
|
|
|
|
|
user-select: none;
|
|
|
|
|
-webkit-user-select: none;
|
|
|
|
|
touch-action: none;
|
|
|
|
|
}
|
|
|
|
|
canvas { display: block; position: fixed; top: 0; left: 0; }
|
|
|
|
|
.piano {
|
|
|
|
|
position: fixed; bottom: 0; left: 0; right: 0;
|
|
|
|
|
height: 80px; display: flex;
|
|
|
|
|
background: rgba(0,0,0,0.3);
|
|
|
|
|
backdrop-filter: blur(10px);
|
|
|
|
|
-webkit-backdrop-filter: blur(10px);
|
|
|
|
|
z-index: 10;
|
|
|
|
|
}
|
|
|
|
|
.key {
|
|
|
|
|
flex: 1; border-right: 1px solid rgba(255,255,255,0.05);
|
|
|
|
|
display: flex; align-items: flex-end; justify-content: center;
|
|
|
|
|
padding-bottom: 8px; font-size: 9px; opacity: 0.3;
|
|
|
|
|
transition: all 0.1s; position: relative;
|
|
|
|
|
}
|
|
|
|
|
.key.black {
|
|
|
|
|
background: rgba(0,0,0,0.5);
|
|
|
|
|
height: 50px; margin: 0 -8px; width: 60%; z-index: 1;
|
|
|
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
|
|
|
}
|
|
|
|
|
.key.active {
|
|
|
|
|
background: rgba(255,255,255,0.15);
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
transform: scaleY(0.98);
|
|
|
|
|
transform-origin: bottom;
|
|
|
|
|
}
|
|
|
|
|
.hud {
|
|
|
|
|
position: fixed; top: 16px; left: 16px;
|
|
|
|
|
font-size: 9px; letter-spacing: 3px;
|
|
|
|
|
text-transform: uppercase; opacity: 0.2;
|
|
|
|
|
line-height: 2.2; z-index: 10;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
.mode-switch {
|
|
|
|
|
position: fixed; top: 16px; right: 16px;
|
|
|
|
|
display: flex; gap: 4px; z-index: 10;
|
|
|
|
|
}
|
|
|
|
|
.mode-dot {
|
|
|
|
|
width: 6px; height: 6px; border-radius: 50%;
|
|
|
|
|
background: rgba(255,255,255,0.15);
|
|
|
|
|
cursor: pointer; transition: all 0.3s;
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
}
|
|
|
|
|
.mode-dot.active { background: rgba(255,255,255,0.6); transform: scale(1.4); }
|
|
|
|
|
.toast {
|
|
|
|
|
position: fixed; top: 50%; left: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
font-size: 10px; letter-spacing: 6px;
|
|
|
|
|
text-transform: uppercase; opacity: 0;
|
|
|
|
|
transition: opacity 0.4s; pointer-events: none; z-index: 20;
|
|
|
|
|
}
|
|
|
|
|
.toast.show { opacity: 0.4; }
|
|
|
|
|
.rec-dot {
|
|
|
|
|
position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
|
|
|
|
|
width: 8px; height: 8px; border-radius: 50%;
|
|
|
|
|
background: #ff0040; opacity: 0;
|
|
|
|
|
transition: opacity 0.3s; z-index: 10;
|
|
|
|
|
}
|
|
|
|
|
.rec-dot.on { opacity: 1; animation: pulse 1s infinite; }
|
|
|
|
|
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<canvas id="c"></canvas>
|
|
|
|
|
|
|
|
|
|
<div class="hud" id="hud">
|
|
|
|
|
<div id="h-mode">FREE</div>
|
|
|
|
|
<div id="h-pal">AURORA</div>
|
|
|
|
|
<div id="h-notes">0 notes</div>
|
|
|
|
|
<div id="h-chord">—</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="mode-switch" id="modes"></div>
|
|
|
|
|
<div class="rec-dot" id="rec"></div>
|
|
|
|
|
<div class="toast" id="toast"></div>
|
|
|
|
|
|
|
|
|
|
<div class="piano" id="piano"></div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
// SOVEREIGN SOUND — PLAYGROUND v3
|
|
|
|
|
// The ultimate interactive audio-visual experience.
|
|
|
|
|
// Zero dependencies. Pure craft.
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
|
|
|
|
|
const canvas = document.getElementById('c');
|
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
|
let W, H;
|
|
|
|
|
|
|
|
|
|
function resize() {
|
|
|
|
|
W = canvas.width = innerWidth;
|
|
|
|
|
H = canvas.height = innerHeight;
|
|
|
|
|
ctx.fillStyle = '#050510';
|
|
|
|
|
ctx.fillRect(0, 0, W, H);
|
|
|
|
|
}
|
|
|
|
|
addEventListener('resize', resize); resize();
|
|
|
|
|
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
// AUDIO ENGINE
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
|
|
|
|
|
let ac = null, master = null, analyser = null;
|
|
|
|
|
|
|
|
|
|
function initAudio() {
|
|
|
|
|
if (ac) return;
|
|
|
|
|
ac = new AudioContext();
|
|
|
|
|
master = ac.createGain(); master.gain.value = 0.4;
|
|
|
|
|
|
|
|
|
|
const wet = ac.createGain(); wet.gain.value = 0.2;
|
|
|
|
|
[0.037, 0.059, 0.083, 0.127].forEach(t => {
|
|
|
|
|
const d = ac.createDelay(1); d.delayTime.value = t;
|
|
|
|
|
const fb = ac.createGain(); fb.gain.value = 0.22;
|
|
|
|
|
master.connect(d); d.connect(fb); fb.connect(d); d.connect(wet);
|
|
|
|
|
});
|
|
|
|
|
wet.connect(ac.destination);
|
|
|
|
|
|
|
|
|
|
analyser = ac.createAnalyser();
|
|
|
|
|
analyser.fftSize = 512;
|
|
|
|
|
analyser.smoothingTimeConstant = 0.8;
|
|
|
|
|
master.connect(analyser);
|
|
|
|
|
master.connect(ac.destination);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function freq(name) {
|
|
|
|
|
const n = { C:0,'C#':1,D:2,'D#':3,E:4,F:5,'F#':6,G:7,'G#':8,A:9,'A#':10,B:11 };
|
|
|
|
|
const nm = name.replace(/\d/,'');
|
|
|
|
|
const oct = parseInt(name.match(/\d/)?.[0] || 4);
|
|
|
|
|
return 440 * Math.pow(2, (n[nm] + (oct-4)*12 - 9) / 12);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function tone(f, type='sine', dur=0.5, vol=0.1) {
|
|
|
|
|
initAudio();
|
|
|
|
|
const t = ac.currentTime;
|
|
|
|
|
const o = ac.createOscillator();
|
|
|
|
|
const g = ac.createGain();
|
|
|
|
|
o.type = type; o.frequency.value = f;
|
|
|
|
|
g.gain.setValueAtTime(0, t);
|
|
|
|
|
g.gain.linearRampToValueAtTime(vol, t + 0.01);
|
|
|
|
|
g.gain.exponentialRampToValueAtTime(vol*0.3, t+dur*0.4);
|
|
|
|
|
g.gain.exponentialRampToValueAtTime(0.001, t+dur);
|
|
|
|
|
o.connect(g); g.connect(master);
|
|
|
|
|
o.start(t); o.stop(t+dur);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function kick() { initAudio(); const t=ac.currentTime; const o=ac.createOscillator(), g=ac.createGain(); o.type='sine'; o.frequency.setValueAtTime(80,t); o.frequency.exponentialRampToValueAtTime(30,t+0.12); g.gain.setValueAtTime(0.4,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.15); o.connect(g); g.connect(master); o.start(t); o.stop(t+0.15); }
|
|
|
|
|
function snare() { initAudio(); const t=ac.currentTime; const len=ac.sampleRate*0.06; const buf=ac.createBuffer(1,len,ac.sampleRate); const d=buf.getChannelData(0); for(let i=0;i<len;i++) d[i]=(Math.random()*2-1)*0.25; const s=ac.createBufferSource(); s.buffer=buf; const g=ac.createGain(); g.gain.setValueAtTime(0.2,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.08); s.connect(g); g.connect(master); s.start(t); }
|
|
|
|
|
function hat() { initAudio(); const t=ac.currentTime; const len=ac.sampleRate*0.025; const buf=ac.createBuffer(1,len,ac.sampleRate); const d=buf.getChannelData(0); for(let i=0;i<len;i++) d[i]=(Math.random()*2-1)*0.12; const s=ac.createBufferSource(); s.buffer=buf; const g=ac.createGain(); g.gain.setValueAtTime(0.1,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.025); s.connect(g); g.connect(master); s.start(t); }
|
|
|
|
|
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
// SCALES & PALETTES
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
|
|
|
|
|
const SCALES = {
|
|
|
|
|
AURORA: { colors:['#ff6b6b','#ff9f43','#feca57','#48dbfb','#54a0ff','#5f27cd','#ff9ff3','#00d2d3'], notes:['C5','D5','E5','F5','G5','A5','B5','C6','D6','E6','C4','D4','E4','F4','G4','A4','B4','C5','D5','E5','F5','C2','D2','E2','F2','G2'], bg:[6,6,16], glow:'#ff9ff3' },
|
|
|
|
|
OCEAN: { colors:['#0077b6','#00b4d8','#90e0ef','#48cae4','#023e8a','#ade8f4'], notes:['D5','E5','F#5','G5','A5','B5','C#6','D6','E6','D4','E4','F#4','G4','A4','B4','C#5','D5','E5','D3','E3','F#3','D2','E2','F#2','G2','A2'], bg:[4,12,22], glow:'#48cae4' },
|
|
|
|
|
EMBER: { colors:['#ff4500','#ff6347','#ff7f50','#dc143c','#cd5c5c','#f08080'], notes:['C5','Eb5','F5','G5','Ab5','Bb5','C6','D5','Eb5','C4','Eb4','F4','G4','Ab4','Bb4','C5','D5','Eb5','C3','Eb3','F3','C2','Eb2','F2','G2','Ab2'], bg:[14,5,5], glow:'#ff6347' },
|
|
|
|
|
FOREST: { colors:['#2d6a4f','#40916c','#52b788','#74c69d','#95d5b2','#b7e4c7'], notes:['E5','F#5','G5','A5','B5','C6','D6','E6','F#6','E4','F#4','G4','A4','B4','C5','D5','E5','F#5','E3','F#3','G3','E2','F#2','G2','A2','B2'], bg:[4,12,6], glow:'#52b788' },
|
|
|
|
|
NEON: { colors:['#ff00ff','#00ffff','#ffff00','#ff0080','#00ff80','#8000ff'], notes:['C5','D5','E5','G5','A5','C6','D6','E6','G6','C4','D4','E4','G4','A4','C5','D5','E5','G5','C3','D3','E3','C2','D2','E2','G2','A2'], bg:[8,2,16], glow:'#00ffff' },
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
let palName = 'AURORA';
|
|
|
|
|
let pal = SCALES[palName];
|
|
|
|
|
const PAL_NAMES = Object.keys(SCALES);
|
|
|
|
|
let palIdx = 0;
|
|
|
|
|
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
// MODES
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
|
|
|
|
|
const MODES = ['FREE','GRAVITY','RAIN','CONSTELLATION','BPM','MIRROR'];
|
|
|
|
|
let modeIdx = 0, mode = MODES[0];
|
|
|
|
|
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
// STATE
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
|
|
|
|
|
let notes = []; // permanent painted notes
|
|
|
|
|
let particles = []; // transient particles
|
|
|
|
|
let ripples = []; // ripple effects
|
|
|
|
|
let raindrops = [];
|
|
|
|
|
let mouseX = W/2, mouseY = H/2;
|
|
|
|
|
let mouseDown = false;
|
|
|
|
|
let time = 0;
|
|
|
|
|
let ambientOn = false;
|
|
|
|
|
let ambientStep = 0;
|
|
|
|
|
let ambientTimer = null;
|
|
|
|
|
let screenShake = 0;
|
|
|
|
|
let lastPaintTime = 0;
|
|
|
|
|
let recentNotes = [];
|
|
|
|
|
let recording = false;
|
|
|
|
|
let recordedNotes = [];
|
|
|
|
|
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
// PIANO KEYBOARD — visual at bottom
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
|
|
|
|
|
const KEYS = 'qwertyuiopasdfghjklzxcvbnm';
|
|
|
|
|
const IS_BLACK = [false,true,false,true,false,false,true,false,true,false,true,false,
|
|
|
|
|
false,true,false,true,false,false,true,false,true,false,true,false,false,false];
|
|
|
|
|
|
|
|
|
|
function buildPiano() {
|
|
|
|
|
const piano = document.getElementById('piano');
|
|
|
|
|
piano.innerHTML = '';
|
|
|
|
|
KEYS.split('').forEach((k, i) => {
|
|
|
|
|
const div = document.createElement('div');
|
|
|
|
|
div.className = 'key' + (IS_BLACK[i] ? ' black' : '');
|
|
|
|
|
div.dataset.key = k;
|
|
|
|
|
div.textContent = k.toUpperCase();
|
|
|
|
|
div.addEventListener('mousedown', () => triggerKey(k));
|
|
|
|
|
div.addEventListener('touchstart', (e) => { e.preventDefault(); triggerKey(k); });
|
|
|
|
|
piano.appendChild(div);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
buildPiano();
|
|
|
|
|
|
|
|
|
|
// Mode/palette dots
|
|
|
|
|
const modesDiv = document.getElementById('modes');
|
|
|
|
|
MODES.forEach((m, i) => {
|
|
|
|
|
const dot = document.createElement('div');
|
|
|
|
|
dot.className = 'mode-dot' + (i===0?' active':'');
|
|
|
|
|
dot.onclick = () => { modeIdx=i; mode=MODES[i]; updateDots(); toast(m); };
|
|
|
|
|
modesDiv.appendChild(dot);
|
|
|
|
|
});
|
|
|
|
|
PAL_NAMES.forEach((p, i) => {
|
|
|
|
|
const dot = document.createElement('div');
|
|
|
|
|
dot.className = 'mode-dot';
|
|
|
|
|
dot.style.background = SCALES[p].glow;
|
|
|
|
|
dot.style.opacity = '0.2';
|
|
|
|
|
if (i===0) { dot.classList.add('active'); dot.style.opacity='0.6'; }
|
|
|
|
|
dot.onclick = () => { palIdx=i; palName=p; pal=SCALES[p]; updateDots(); toast(p); };
|
|
|
|
|
modesDiv.appendChild(dot);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function updateDots() {
|
|
|
|
|
modesDiv.querySelectorAll('.mode-dot').forEach((d, i) => {
|
|
|
|
|
if (i < MODES.length) {
|
|
|
|
|
d.classList.toggle('active', i===modeIdx);
|
|
|
|
|
} else {
|
|
|
|
|
const pi = i - MODES.length;
|
|
|
|
|
d.classList.toggle('active', pi===palIdx);
|
|
|
|
|
d.style.opacity = pi===palIdx ? '0.6' : '0.2';
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
document.getElementById('h-mode').textContent = mode;
|
|
|
|
|
document.getElementById('h-pal').textContent = palName;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
// PAINT & PLAY
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
|
|
|
|
|
function paint(x, y, color, noteFreq, noteType, size=25) {
|
|
|
|
|
// Permanent splash
|
|
|
|
|
ctx.save();
|
|
|
|
|
ctx.globalAlpha = 0.06;
|
|
|
|
|
ctx.fillStyle = color;
|
|
|
|
|
ctx.beginPath(); ctx.arc(x, y, size*2, 0, Math.PI*2); ctx.fill();
|
|
|
|
|
|
|
|
|
|
ctx.globalAlpha = 0.3;
|
|
|
|
|
ctx.beginPath();
|
|
|
|
|
const pts = 6+Math.floor(Math.random()*6);
|
|
|
|
|
for (let i=0; i<=pts; i++) {
|
|
|
|
|
const a = (i/pts)*Math.PI*2;
|
|
|
|
|
const r = size*(0.5+Math.random()*0.5);
|
|
|
|
|
i===0 ? ctx.moveTo(x+Math.cos(a)*r, y+Math.sin(a)*r) : ctx.lineTo(x+Math.cos(a)*r, y+Math.sin(a)*r);
|
|
|
|
|
}
|
|
|
|
|
ctx.closePath(); ctx.fill();
|
|
|
|
|
|
|
|
|
|
ctx.globalAlpha = 0.8;
|
|
|
|
|
ctx.beginPath(); ctx.arc(x, y, size*0.12, 0, Math.PI*2); ctx.fill();
|
|
|
|
|
ctx.restore();
|
|
|
|
|
|
|
|
|
|
notes.push({ x, y, radius: size, color, freq: noteFreq, type: noteType });
|
|
|
|
|
if (notes.length > 4000) notes.splice(0, 500);
|
|
|
|
|
|
|
|
|
|
// Particles
|
|
|
|
|
for (let i=0; i<12; i++) {
|
|
|
|
|
const a = Math.random()*Math.PI*2;
|
|
|
|
|
const s = 1+Math.random()*4;
|
|
|
|
|
particles.push({ x, y, vx:Math.cos(a)*s, vy:Math.sin(a)*s, size:1+Math.random()*3, life:1, color });
|
|
|
|
|
}
|
|
|
|
|
if (particles.length > 400) particles.splice(0, 100);
|
|
|
|
|
|
|
|
|
|
ripples.push({ x, y, color, size: size*0.3, maxSize: size*3, life:1 });
|
|
|
|
|
if (ripples.length > 25) ripples.shift();
|
|
|
|
|
|
|
|
|
|
if (noteType === 'sawtooth' && noteFreq < 200) screenShake = 6;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function triggerKey(key) {
|
|
|
|
|
const i = KEYS.indexOf(key);
|
|
|
|
|
if (i < 0) return;
|
|
|
|
|
|
|
|
|
|
const noteName = pal.notes[i % pal.notes.length];
|
|
|
|
|
const noteFreq = freq(noteName);
|
|
|
|
|
const isBass = i >= 21;
|
|
|
|
|
const noteType = isBass ? 'sawtooth' : (i%3===0 ? 'triangle' : 'sine');
|
|
|
|
|
|
|
|
|
|
tone(noteFreq, noteType, isBass ? 0.3 : 0.6, isBass ? 0.18 : 0.12);
|
|
|
|
|
|
|
|
|
|
const x = mouseX + (Math.random()-0.5)*50;
|
|
|
|
|
const y = mouseY + (Math.random()-0.5)*50;
|
|
|
|
|
paint(x, y, pal.colors[i % pal.colors.length], noteFreq, noteType, isBass ? 35+Math.random()*15 : 20+Math.random()*15);
|
|
|
|
|
|
|
|
|
|
// Piano visual
|
|
|
|
|
const pianoKey = document.querySelector(`.key[data-key="${key}"]`);
|
|
|
|
|
if (pianoKey) {
|
|
|
|
|
pianoKey.classList.add('active');
|
|
|
|
|
pianoKey.style.background = pal.colors[i % pal.colors.length] + '30';
|
|
|
|
|
setTimeout(() => { pianoKey.classList.remove('active'); pianoKey.style.background = ''; }, 200);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Track for chord detection
|
|
|
|
|
recentNotes.push({ freq: noteFreq, time: Date.now() });
|
|
|
|
|
if (recentNotes.length > 10) recentNotes.shift();
|
|
|
|
|
detectChord();
|
|
|
|
|
|
|
|
|
|
// Recording
|
|
|
|
|
if (recording) recordedNotes.push({ key, time: Date.now(), x, y });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
// CHORD DETECTION
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
|
|
|
|
|
function detectChord() {
|
|
|
|
|
const now = Date.now();
|
|
|
|
|
const recent = recentNotes.filter(n => now-n.time < 1500);
|
|
|
|
|
if (recent.length < 2) { document.getElementById('h-chord').textContent = '—'; return; }
|
|
|
|
|
|
|
|
|
|
const freqs = recent.map(n => n.freq).sort((a,b) => a-b);
|
|
|
|
|
const ratios = [];
|
|
|
|
|
for (let i=1; i<freqs.length; i++) ratios.push(Math.round(1200*Math.log2(freqs[i]/freqs[0])));
|
|
|
|
|
|
|
|
|
|
const patterns = { 'major':[0,400,700],'minor':[0,300,700],'7':[0,400,700,1000],'maj7':[0,400,700,1100],'min7':[0,300,700,1000],'power':[0,700],'sus4':[0,500,700],'sus2':[0,200,700],'dim':[0,300,600],'aug':[0,400,800] };
|
|
|
|
|
|
|
|
|
|
let best = '—', bestScore = 0;
|
|
|
|
|
for (const [name, pat] of Object.entries(patterns)) {
|
|
|
|
|
let score = 0;
|
|
|
|
|
for (const p of pat) if (ratios.some(r => Math.abs(r-p) < 60)) score++;
|
|
|
|
|
score /= pat.length;
|
|
|
|
|
if (score > bestScore && score > 0.5) { bestScore = score; best = name; }
|
|
|
|
|
}
|
|
|
|
|
document.getElementById('h-chord').textContent = best;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
// MOUSE PLAYBACK — play notes by hovering
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
|
|
|
|
|
let lastPlayed = null, lastPlayT = 0;
|
|
|
|
|
function checkPlay(x, y) {
|
|
|
|
|
const now = Date.now();
|
|
|
|
|
if (now-lastPlayT < 50) return;
|
|
|
|
|
let closest = null, closestD = Infinity;
|
|
|
|
|
for (const n of notes) {
|
|
|
|
|
const d = Math.hypot(x-n.x, y-n.y);
|
|
|
|
|
if (d < n.radius*1.4 && d < closestD) { closest = n; closestD = d; }
|
|
|
|
|
}
|
|
|
|
|
if (closest && closest !== lastPlayed) {
|
|
|
|
|
const vol = 0.05 + (1-closestD/closest.radius)*0.1;
|
|
|
|
|
tone(closest.freq, closest.type, 0.2, vol);
|
|
|
|
|
ripples.push({ x:closest.x, y:closest.y, color:closest.color, size:closest.radius*0.2, maxSize:closest.radius*1.5, life:1 });
|
|
|
|
|
for (let i=0; i<3; i++) {
|
|
|
|
|
const a = Math.random()*Math.PI*2;
|
|
|
|
|
particles.push({ x:closest.x, y:closest.y, vx:Math.cos(a)*1.5, vy:Math.sin(a)*1.5, size:1.5, life:1, color:closest.color });
|
|
|
|
|
}
|
|
|
|
|
lastPlayed = closest;
|
|
|
|
|
lastPlayT = now;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
// AMBIENT BEAT
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
|
|
|
|
|
function ambientTick() {
|
|
|
|
|
if (!ambientOn) return;
|
|
|
|
|
const bpm = [72,60,80,66,128,90][palIdx];
|
|
|
|
|
const stepDur = 60000/bpm/4;
|
|
|
|
|
const beat = ambientStep % 16;
|
|
|
|
|
|
|
|
|
|
if (beat%4===0) { kick(); screenShake=2; }
|
|
|
|
|
if (beat===4||beat===12) snare();
|
|
|
|
|
if (beat%2===1) hat();
|
|
|
|
|
|
|
|
|
|
if (beat===0) {
|
|
|
|
|
const chords = [
|
|
|
|
|
[freq('C4'),freq('E4'),freq('G4')],
|
|
|
|
|
[freq('A3'),freq('C4'),freq('E4')],
|
|
|
|
|
[freq('F3'),freq('A3'),freq('C4')],
|
|
|
|
|
[freq('G3'),freq('B3'),freq('D4')]
|
|
|
|
|
];
|
|
|
|
|
chords[Math.floor(ambientStep/16)%4].forEach(f => tone(f,'triangle',0.7,0.05));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (beat%2===0) {
|
|
|
|
|
const i = Math.floor(Math.random()*KEYS.length);
|
|
|
|
|
const k = KEYS[i];
|
|
|
|
|
const noteName = pal.notes[i % pal.notes.length];
|
|
|
|
|
paint(W/2+(Math.random()-0.5)*400, H/2+(Math.random()-0.5)*300,
|
|
|
|
|
pal.colors[i%pal.colors.length], freq(noteName), i>=21?'sawtooth':'sine', 10+Math.random()*8);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ambientStep++;
|
|
|
|
|
ambientTimer = setTimeout(ambientTick, stepDur);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
// INPUT
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
|
|
|
|
|
function toast(msg) {
|
|
|
|
|
const el = document.getElementById('toast');
|
|
|
|
|
el.textContent = msg; el.classList.add('show');
|
|
|
|
|
setTimeout(() => el.classList.remove('show'), 1200);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
document.addEventListener('keydown', e => {
|
|
|
|
|
const k = e.key.toLowerCase();
|
|
|
|
|
|
|
|
|
|
if (k===' ') { e.preventDefault(); ambientOn=!ambientOn; ambientOn?(ambientStep=0,ambientTick(),toast('AMBIENT ON')):(clearTimeout(ambientTimer),toast('AMBIENT OFF')); return; }
|
|
|
|
|
if (k==='backspace') { e.preventDefault(); ctx.fillStyle='#050510'; ctx.fillRect(0,0,W,H); notes=[]; ripples=[]; particles=[]; raindrops=[]; toast('CLEARED'); return; }
|
|
|
|
|
if (k==='tab') { e.preventDefault(); modeIdx=(modeIdx+1)%MODES.length; mode=MODES[modeIdx]; updateDots(); toast(mode); return; }
|
|
|
|
|
if (k==='r') { recording=!recording; document.getElementById('rec').classList.toggle('on',recording); toast(recording?'REC ON':'REC OFF'); if(!recording&&recordedNotes.length) replayRecording(); return; }
|
|
|
|
|
if (k==='s') { e.preventDefault(); saveCanvas(); return; }
|
|
|
|
|
if (k>='1' && k<='5') { palIdx=parseInt(k)-1; palName=PAL_NAMES[palIdx]; pal=SCALES[palName]; updateDots(); toast(palName); return; }
|
|
|
|
|
|
|
|
|
|
triggerKey(k);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
canvas.addEventListener('mousemove', e => {
|
|
|
|
|
mouseX = e.clientX; mouseY = e.clientY;
|
|
|
|
|
checkPlay(mouseX, mouseY);
|
|
|
|
|
if (mouseDown && Date.now()-lastPaintTime > 40) {
|
|
|
|
|
const i = Math.floor(Math.random()*KEYS.length);
|
|
|
|
|
triggerKey(KEYS[i]);
|
|
|
|
|
lastPaintTime = Date.now();
|
|
|
|
|
}
|
|
|
|
|
if (Math.random()>0.65) {
|
|
|
|
|
particles.push({ x:mouseX, y:mouseY, vx:(Math.random()-0.5)*0.5, vy:(Math.random()-0.5)*0.5, size:1+Math.random()*1.5, life:1, color:'rgba(255,255,255,0.3)' });
|
|
|
|
|
if (particles.length>400) particles.splice(0,80);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
canvas.addEventListener('mousedown', e => { mouseDown=true; triggerKey(KEYS[Math.floor(Math.random()*KEYS.length)]); });
|
|
|
|
|
canvas.addEventListener('mouseup', () => mouseDown=false);
|
|
|
|
|
|
|
|
|
|
// Touch
|
|
|
|
|
canvas.addEventListener('touchmove', e => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
const t = e.touches[0];
|
|
|
|
|
mouseX = t.clientX; mouseY = t.clientY;
|
|
|
|
|
checkPlay(mouseX, mouseY);
|
|
|
|
|
if (Date.now()-lastPaintTime > 60) {
|
|
|
|
|
triggerKey(KEYS[Math.floor(Math.random()*KEYS.length)]);
|
|
|
|
|
lastPaintTime = Date.now();
|
|
|
|
|
}
|
|
|
|
|
}, { passive: false });
|
|
|
|
|
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
// MODE EFFECTS
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
|
|
|
|
|
function applyGravity() {
|
|
|
|
|
for (const n of notes) {
|
|
|
|
|
const dx = mouseX-n.x, dy = mouseY-n.y;
|
|
|
|
|
const d = Math.hypot(dx, dy);
|
|
|
|
|
if (d>10 && d<300) { n.x += dx*0.2/d; n.y += dy*0.2/d; }
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function spawnRain() {
|
|
|
|
|
if (Math.random()>0.2) return;
|
|
|
|
|
const i = Math.floor(Math.random()*KEYS.length);
|
|
|
|
|
raindrops.push({ x:Math.random()*W, y:-20, vy:1.5+Math.random()*3, color:pal.colors[i%pal.colors.length], freq:freq(pal.notes[i%pal.notes.length]), type:i>=21?'sawtooth':'sine', size:8+Math.random()*12, played:false });
|
|
|
|
|
if (raindrops.length>40) raindrops.shift();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updateRain() {
|
|
|
|
|
for (let i=raindrops.length-1; i>=0; i--) {
|
|
|
|
|
const r = raindrops[i]; r.y += r.vy;
|
|
|
|
|
if (!r.played) for (const n of notes) {
|
|
|
|
|
if (Math.hypot(r.x-n.x, r.y-n.y) < n.radius) {
|
|
|
|
|
tone(r.freq, r.type, 0.3, 0.06);
|
|
|
|
|
ripples.push({ x:r.x, y:r.y, color:r.color, size:5, maxSize:25, life:1 });
|
|
|
|
|
r.played = true; break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (r.y > H) {
|
|
|
|
|
if (!r.played) { paint(r.x, H-20, r.color, r.freq, r.type, r.size); tone(r.freq, r.type, 0.3, 0.05); }
|
|
|
|
|
raindrops.splice(i, 1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function drawConstellation() {
|
|
|
|
|
ctx.save();
|
|
|
|
|
for (let i=0; i<notes.length; i++) {
|
|
|
|
|
for (let j=i+1; j<notes.length; j++) {
|
|
|
|
|
const d = Math.hypot(notes[i].x-notes[j].x, notes[i].y-notes[j].y);
|
|
|
|
|
if (d < 180) {
|
|
|
|
|
ctx.globalAlpha = (1-d/180)*0.12;
|
|
|
|
|
ctx.strokeStyle = notes[i].color;
|
|
|
|
|
ctx.lineWidth = 0.5;
|
|
|
|
|
ctx.beginPath();
|
|
|
|
|
ctx.moveTo(notes[i].x, notes[i].y);
|
|
|
|
|
ctx.lineTo(notes[j].x, notes[j].y);
|
|
|
|
|
ctx.stroke();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
ctx.restore();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function drawBPMGrid() {
|
|
|
|
|
const bpm = 120;
|
|
|
|
|
const beat = (time % (60/bpm)) / (60/bpm);
|
|
|
|
|
ctx.save();
|
|
|
|
|
ctx.strokeStyle = pal.colors[0];
|
|
|
|
|
ctx.lineWidth = 0.5 + beat;
|
|
|
|
|
ctx.globalAlpha = 0.02 + beat*0.03;
|
|
|
|
|
for (let x=0; x<W; x+=80) { ctx.beginPath(); ctx.moveTo(x,0); ctx.lineTo(x,H); ctx.stroke(); }
|
|
|
|
|
for (let y=0; y<H; y+=80) { ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(W,y); ctx.stroke(); }
|
|
|
|
|
ctx.restore();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function drawMirror() {
|
|
|
|
|
// Mirror notes across vertical axis
|
|
|
|
|
ctx.save();
|
|
|
|
|
ctx.globalAlpha = 0.08;
|
|
|
|
|
for (const n of notes) {
|
|
|
|
|
ctx.fillStyle = n.color;
|
|
|
|
|
ctx.beginPath();
|
|
|
|
|
ctx.arc(W-n.x, n.y, n.radius*0.6, 0, Math.PI*2);
|
|
|
|
|
ctx.fill();
|
|
|
|
|
}
|
|
|
|
|
ctx.restore();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
// RECORDING & EXPORT
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
|
|
|
|
|
function replayRecording() {
|
|
|
|
|
if (!recordedNotes.length) return;
|
|
|
|
|
toast(`REPLAY ${recordedNotes.length} notes`);
|
|
|
|
|
const start = recordedNotes[0].time;
|
|
|
|
|
recordedNotes.forEach(n => {
|
|
|
|
|
setTimeout(() => triggerKey(n.key), n.time - start);
|
|
|
|
|
});
|
|
|
|
|
recordedNotes = [];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function saveCanvas() {
|
|
|
|
|
const link = document.createElement('a');
|
|
|
|
|
link.download = `sovereign-${Date.now()}.png`;
|
|
|
|
|
link.href = canvas.toDataURL();
|
|
|
|
|
link.click();
|
|
|
|
|
toast('SAVED');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
// RENDER LOOP
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
|
|
|
|
|
|
function render() {
|
|
|
|
|
time += 0.016;
|
|
|
|
|
|
|
|
|
|
if (screenShake > 0) { ctx.save(); ctx.translate((Math.random()-0.5)*screenShake,(Math.random()-0.5)*screenShake); screenShake*=0.85; if(screenShake<0.5)screenShake=0; }
|
|
|
|
|
|
|
|
|
|
// Mode effects
|
|
|
|
|
if (mode==='GRAVITY') applyGravity();
|
|
|
|
|
if (mode==='RAIN') { spawnRain(); updateRain(); }
|
|
|
|
|
if (mode==='CONSTELLATION') drawConstellation();
|
|
|
|
|
if (mode==='BPM') drawBPMGrid();
|
|
|
|
|
if (mode==='MIRROR') drawMirror();
|
|
|
|
|
|
|
|
|
|
// Ripples
|
|
|
|
|
for (let i=ripples.length-1; i>=0; i--) {
|
|
|
|
|
const r = ripples[i];
|
|
|
|
|
r.size += (r.maxSize-r.size)*0.07;
|
|
|
|
|
r.life -= 0.02;
|
|
|
|
|
if (r.life<=0) { ripples.splice(i,1); continue; }
|
|
|
|
|
ctx.globalAlpha = r.life*0.3;
|
|
|
|
|
ctx.strokeStyle = r.color;
|
|
|
|
|
ctx.lineWidth = 1.5*r.life;
|
|
|
|
|
ctx.beginPath(); ctx.arc(r.x,r.y,r.size,0,Math.PI*2); ctx.stroke();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Rain
|
|
|
|
|
for (const r of raindrops) {
|
|
|
|
|
ctx.globalAlpha = 0.4;
|
|
|
|
|
ctx.fillStyle = r.color;
|
|
|
|
|
ctx.beginPath(); ctx.arc(r.x,r.y,r.size*0.2,0,Math.PI*2); ctx.fill();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Particles
|
|
|
|
|
for (let i=particles.length-1; i>=0; i--) {
|
|
|
|
|
const p = particles[i];
|
|
|
|
|
p.x+=p.vx; p.y+=p.vy; p.vx*=0.96; p.vy*=0.96; p.life-=0.014;
|
|
|
|
|
if (p.life<=0) { particles.splice(i,1); continue; }
|
|
|
|
|
ctx.globalAlpha = p.life*0.5;
|
|
|
|
|
ctx.fillStyle = p.color;
|
|
|
|
|
ctx.beginPath(); ctx.arc(p.x,p.y,p.size*p.life,0,Math.PI*2); ctx.fill();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Audio-reactive
|
|
|
|
|
if (analyser) {
|
|
|
|
|
const data = new Uint8Array(analyser.frequencyBinCount);
|
|
|
|
|
analyser.getByteFrequencyData(data);
|
|
|
|
|
let energy = 0;
|
|
|
|
|
for (let i=0; i<data.length; i++) energy += data[i];
|
|
|
|
|
energy /= data.length*255;
|
|
|
|
|
|
|
|
|
|
if (energy > 0.08) {
|
|
|
|
|
const grad = ctx.createRadialGradient(W/2,H/2,0,W/2,H/2,200+energy*200);
|
|
|
|
|
grad.addColorStop(0, pal.glow+'08');
|
|
|
|
|
grad.addColorStop(1, 'transparent');
|
|
|
|
|
ctx.fillStyle = grad;
|
|
|
|
|
ctx.globalAlpha = 0.3+energy*0.3;
|
|
|
|
|
ctx.fillRect(0,0,W,H);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Edge frequency bars
|
|
|
|
|
ctx.globalAlpha = 0.03;
|
|
|
|
|
for (let i=0; i<data.length; i++) {
|
|
|
|
|
const v = data[i]/255;
|
|
|
|
|
if (v<0.08) continue;
|
|
|
|
|
ctx.fillStyle = pal.colors[i%pal.colors.length];
|
|
|
|
|
ctx.fillRect((i/data.length)*W, H-v*40-80, 2, v*40); // above piano
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (screenShake > 0) ctx.restore();
|
|
|
|
|
|
|
|
|
|
// Cursor
|
|
|
|
|
ctx.save();
|
|
|
|
|
ctx.strokeStyle = '#fff';
|
|
|
|
|
ctx.lineWidth = 1;
|
|
|
|
|
ctx.globalAlpha = 0.5;
|
|
|
|
|
ctx.beginPath();
|
|
|
|
|
ctx.moveTo(mouseX-8,mouseY); ctx.lineTo(mouseX-3,mouseY);
|
|
|
|
|
ctx.moveTo(mouseX+3,mouseY); ctx.lineTo(mouseX+8,mouseY);
|
|
|
|
|
ctx.moveTo(mouseX,mouseY-8); ctx.lineTo(mouseX,mouseY-3);
|
|
|
|
|
ctx.moveTo(mouseX,mouseY+3); ctx.lineTo(mouseX,mouseY+8);
|
|
|
|
|
ctx.stroke();
|
|
|
|
|
|
|
|
|
|
// Color ring when hovering note
|
|
|
|
|
for (const n of notes) {
|
|
|
|
|
if (Math.hypot(mouseX-n.x, mouseY-n.y) < n.radius*1.4) {
|
|
|
|
|
ctx.strokeStyle = n.color;
|
|
|
|
|
ctx.globalAlpha = 0.35;
|
|
|
|
|
ctx.beginPath(); ctx.arc(mouseX, mouseY, 12, 0, Math.PI*2); ctx.stroke();
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ctx.globalAlpha = 0.8;
|
|
|
|
|
ctx.fillStyle = '#fff';
|
|
|
|
|
ctx.beginPath(); ctx.arc(mouseX,mouseY,1.5,0,Math.PI*2); ctx.fill();
|
|
|
|
|
ctx.restore();
|
|
|
|
|
|
|
|
|
|
// HUD
|
|
|
|
|
document.getElementById('h-notes').textContent = `${notes.length} notes`;
|
|
|
|
|
|
|
|
|
|
requestAnimationFrame(render);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render();
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
