diff --git a/synth/index.php b/synth/index.php new file mode 100644 index 0000000..97dd173 --- /dev/null +++ b/synth/index.php @@ -0,0 +1,234 @@ + + + + + + + Mouse Synth Lab + + + + + + +
+

Mouse Synth Lab

+

+ Zieh deine Maus durch den Pad und verwandle Bewegungen in Klang. Drei LFOs, + FM-Experimente und ein Delay/Distortion-Hybrid werden live verschaltet. + Die Bitcoin-Feeds von Coindesk () + und CoinMarketCap () + mischen das Routing zusätzlich – sogar die Uhrzeit entscheidet, welches Instrument + sich meldet und wie die Resonanzen pulsieren. +

+
+
Coindesk:
+
CoinMarketCap:
+
Lokale Zeit: ---
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+

+ Tipp: Halte die Maus gedrückt, damit der AudioContext aktiv bleibt, und lass den Cursor + Kreise fahren. Je nach Bitcoin-Laune (Coindesk + CoinMarketCap) und Tageszeit schalten + sich neue Instrumente, Delays und Resonanzen zu. +

+
+ + + diff --git a/synth/synth.js b/synth/synth.js new file mode 100644 index 0000000..c76bc40 --- /dev/null +++ b/synth/synth.js @@ -0,0 +1,460 @@ +const btcPrice = parseFloat(document.body.dataset.btcPrice || 'NaN'); +const btcCmcPrice = parseFloat(document.body.dataset.btcCmcPrice || 'NaN'); +const coinPool = [btcPrice, btcCmcPrice].filter((value) => Number.isFinite(value)); +const normalizedCoin = coinPool.length + ? coinPool + .map((value) => Math.min(Math.max((value - 14000) / 28000, 0), 1)) + .reduce((acc, value) => acc + value, 0) / coinPool.length + : 0.5; + +const pad = document.getElementById('synth-pad'); +const indicator = document.getElementById('pad-indicator'); +const instrumentSelect = document.getElementById('instrument'); +const fmDepthInput = document.getElementById('fm-depth'); +const lfoSpeedInput = document.getElementById('lfo-speed'); +const textureInput = document.getElementById('texture'); +const noiseInput = document.getElementById('noise-level'); +const delayMixInput = document.getElementById('delay-mix'); +const reverbInput = document.getElementById('reverb-mix'); +const clockReactivityInput = document.getElementById('clock-reactivity'); +const coinReactivityInput = document.getElementById('coin-reactivity'); +const driveInput = document.getElementById('drive'); +const startBtn = document.getElementById('start-btn'); +const randomizeBtn = document.getElementById('randomize-btn'); +const clockInfo = document.getElementById('clock-info'); + +class MouseSynth { + constructor(options = {}) { + const AudioContext = window.AudioContext || window.webkitAudioContext; + this.ctx = new AudioContext(); + this.started = false; + + this.coinBlend = options.coinBlend ?? 0.5; + this.clockDepth = options.clockDepth ?? 0.5; + this.driveCeiling = options.driveCeiling ?? 0.35; + this.instrument = 'supersaw'; + this.instrumentNoiseScale = 1; + + this.setupNodes(); + this.#bindEvents(); + } + + setupNodes() { + const ctx = this.ctx; + + this.masterGain = ctx.createGain(); + this.masterGain.gain.value = 0.0; + + this.compressor = ctx.createDynamicsCompressor(); + this.compressor.threshold.value = -8; + this.compressor.knee.value = 12; + this.compressor.ratio.value = 12; + this.compressor.attack.value = 0.004; + this.compressor.release.value = 0.25; + + this.panner = ctx.createStereoPanner(); + + this.carrier = ctx.createOscillator(); + this.carrier.type = 'sawtooth'; + + this.harmonic = ctx.createOscillator(); + this.harmonic.type = 'triangle'; + this.harmonic.detune.value = 702; // perfect fifth + + this.fmOsc = ctx.createOscillator(); + this.fmGain = ctx.createGain(); + this.fmGain.gain.value = 320; + + this.ampLfo = ctx.createOscillator(); + this.ampLfo.type = 'sine'; + this.ampLfo.frequency.value = 6; + this.ampLfoGain = ctx.createGain(); + this.ampLfoGain.gain.value = 0.5; + + this.filterLfo = ctx.createOscillator(); + this.filterLfo.type = 'triangle'; + this.filterLfo.frequency.value = 0.5; + this.filterLfoGain = ctx.createGain(); + this.filterLfoGain.gain.value = 800; + + this.sampleHold = ctx.createOscillator(); + this.sampleHold.type = 'square'; + this.sampleHold.frequency.value = 8; + this.sampleHoldGain = ctx.createGain(); + this.sampleHoldGain.gain.value = 0.0025; + + this.filter = ctx.createBiquadFilter(); + this.filter.type = 'bandpass'; + this.filter.frequency.value = 600; + this.filter.Q.value = 8; + + this.delay = ctx.createDelay(1.2); + this.delay.delayTime.value = 0.45; + this.feedback = ctx.createGain(); + this.feedback.gain.value = 0.32; + + this.noise = this.#createNoise(); + this.noiseGain = ctx.createGain(); + this.noiseGain.gain.value = 0.0; + + this.distortion = ctx.createWaveShaper(); + this.#setDrive(400); + + this.coinMorph = ctx.createGain(); + this.coinMorph.gain.value = this.coinBlend; + + this.reverb = ctx.createConvolver(); + this.reverb.buffer = this.#makeImpulse(2.5); + this.reverbGain = ctx.createGain(); + this.reverbGain.gain.value = 0.25; + + this.dryGain = ctx.createGain(); + this.dryGain.gain.value = 1 - (delayMixInput ? parseFloat(delayMixInput.value) : 0.6); + this.delayWet = ctx.createGain(); + this.delayWet.gain.value = delayMixInput ? parseFloat(delayMixInput.value) : 0.6; + + // Connections + this.fmOsc.connect(this.fmGain).connect(this.carrier.frequency); + this.harmonic.connect(this.filter); + this.carrier.connect(this.filter); + this.ampLfo.connect(this.ampLfoGain).connect(this.masterGain.gain); + this.filterLfo.connect(this.filterLfoGain).connect(this.filter.frequency); + this.sampleHold.connect(this.sampleHoldGain).connect(this.filter.detune); + + this.filter.connect(this.distortion); + this.noise.connect(this.noiseGain).connect(this.filter); + + this.distortion.connect(this.dryGain).connect(this.masterGain); + this.distortion.connect(this.delay); + this.delay.connect(this.feedback).connect(this.delay); + this.delay.connect(this.coinMorph); + this.coinMorph.connect(this.delayWet); + this.delayWet.connect(this.reverb); + this.reverb.connect(this.reverbGain).connect(this.masterGain); + + this.masterGain.connect(this.panner).connect(this.compressor).connect(ctx.destination); + + this.carrier.start(); + this.harmonic.start(); + this.fmOsc.start(); + this.ampLfo.start(); + this.filterLfo.start(); + this.sampleHold.start(); + this.noise.start(); + } + + async start() { + if (this.started) return; + await this.ctx.resume(); + this.masterGain.gain.linearRampToValueAtTime(0.65, this.ctx.currentTime + 0.5); + this.started = true; + this.tickClock(); + } + + #bindEvents() { + if (instrumentSelect) { + instrumentSelect.addEventListener('change', () => { + this.setInstrument(instrumentSelect.value); + }); + } + + fmDepthInput.addEventListener('input', () => { + this.fmGain.gain.setTargetAtTime(parseFloat(fmDepthInput.value), this.ctx.currentTime, 0.05); + }); + + lfoSpeedInput.addEventListener('input', () => { + const rate = parseFloat(lfoSpeedInput.value); + this.ampLfo.frequency.setTargetAtTime(rate, this.ctx.currentTime, 0.1); + this.filterLfo.frequency.setTargetAtTime(rate * 0.25, this.ctx.currentTime, 0.1); + }); + + textureInput.addEventListener('input', () => { + this.#updateTexture(parseFloat(textureInput.value)); + }); + + noiseInput.addEventListener('input', () => { + this.setNoiseLevel(parseFloat(noiseInput.value)); + }); + + delayMixInput.addEventListener('input', () => { + this.setDelayMix(parseFloat(delayMixInput.value)); + }); + + reverbInput.addEventListener('input', () => { + this.setReverbMix(parseFloat(reverbInput.value)); + }); + + clockReactivityInput.addEventListener('input', () => { + this.setClockDepth(parseFloat(clockReactivityInput.value)); + }); + + coinReactivityInput.addEventListener('input', () => { + this.setCoinBlend(parseFloat(coinReactivityInput.value)); + }); + + driveInput.addEventListener('input', () => { + this.setDriveCeiling(parseFloat(driveInput.value)); + this.#updateTexture(parseFloat(textureInput.value)); + }); + + randomizeBtn.addEventListener('click', () => this.randomize()); + } + + handlePointer(event) { + if (!this.started) return; + const rect = pad.getBoundingClientRect(); + const x = (event.clientX - rect.left) / rect.width; + const y = (event.clientY - rect.top) / rect.height; + const freq = 120 + (1 - y) * 1080; + + this.carrier.frequency.setTargetAtTime(freq, this.ctx.currentTime, 0.05); + this.harmonic.frequency.setTargetAtTime(freq * 1.5, this.ctx.currentTime, 0.05); + this.filter.frequency.setTargetAtTime(200 + x * 5200, this.ctx.currentTime, 0.08); + this.filter.Q.setTargetAtTime(4 + y * 18, this.ctx.currentTime, 0.1); + this.noiseGain.gain.setTargetAtTime(x * 0.3, this.ctx.currentTime, 0.2); + + this.sampleHold.frequency.setTargetAtTime(4 + x * 20, this.ctx.currentTime, 0.1); + this.delay.delayTime.setTargetAtTime(0.15 + y * 0.6, this.ctx.currentTime, 0.2); + this.feedback.gain.setTargetAtTime(0.2 + x * 0.7 * this.coinBlend, this.ctx.currentTime, 0.2); + this.coinMorph.gain.setTargetAtTime(this.coinBlend * (0.4 + y * 0.6), this.ctx.currentTime, 0.3); + this.fmGain.gain.setTargetAtTime(parseFloat(fmDepthInput.value) + x * 200, this.ctx.currentTime, 0.05); + this.#updateTexture(textureInput.value, x, y); + this.tickClock(); + } + + handlePointerLeave() { + if (!this.started) return; + this.masterGain.gain.cancelScheduledValues(this.ctx.currentTime); + this.masterGain.gain.setTargetAtTime(0.15, this.ctx.currentTime, 0.5); + } + + randomize() { + const instruments = Array.from(instrumentSelect.options).map((option) => option.value); + const instrument = instruments[Math.floor(Math.random() * instruments.length)]; + instrumentSelect.value = instrument; + this.setInstrument(instrument); + + const fm = 80 + Math.random() * 720; + fmDepthInput.value = fm.toFixed(0); + this.fmGain.gain.setTargetAtTime(fm, this.ctx.currentTime, 0.1); + + const lfo = 0.1 + Math.random() * 16; + lfoSpeedInput.value = lfo.toFixed(2); + this.ampLfo.frequency.setTargetAtTime(lfo, this.ctx.currentTime, 0.2); + this.filterLfo.frequency.setTargetAtTime(lfo * 0.3, this.ctx.currentTime, 0.2); + + const texture = Math.random(); + textureInput.value = texture.toFixed(2); + this.#updateTexture(texture); + + const noise = Math.random(); + noiseInput.value = noise.toFixed(2); + this.setNoiseLevel(noise); + + const delayMix = Math.random(); + delayMixInput.value = delayMix.toFixed(2); + this.setDelayMix(delayMix); + + const reverbMix = Math.random(); + reverbInput.value = reverbMix.toFixed(2); + this.setReverbMix(reverbMix); + + const clockDepth = Math.random(); + clockReactivityInput.value = clockDepth.toFixed(2); + this.setClockDepth(clockDepth); + + const coinDepth = Math.random(); + coinReactivityInput.value = coinDepth.toFixed(2); + this.setCoinBlend(coinDepth); + + const drive = Math.random(); + driveInput.value = drive.toFixed(2); + this.setDriveCeiling(drive); + this.#updateTexture(texture); + } + + #updateTexture(value, x = 0.5, y = 0.5) { + const amount = parseFloat(value); + const drive = 150 + amount * 850 + this.coinBlend * 400; + const driveLimit = 150 + this.driveCeiling * 700; + this.#setDrive(Math.min(drive, driveLimit)); + const morph = amount * (0.6 + this.coinBlend * 0.8); + this.distortion.oversample = morph > 0.5 ? '4x' : '2x'; + this.reverbGain.gain.setTargetAtTime(0.1 + morph * 0.5, this.ctx.currentTime, 0.3); + const filterType = morph > 0.7 ? 'notch' : morph > 0.35 ? 'bandpass' : 'lowpass'; + this.filter.type = filterType; + this.coinMorph.gain.setTargetAtTime(this.coinBlend * (0.4 + morph), this.ctx.currentTime, 0.3); + this.delay.delayTime.setTargetAtTime(0.2 + morph * 0.4 + (x * y) * 0.2, this.ctx.currentTime, 0.2); + } + + #setDrive(amount) { + const curve = new Float32Array(1024); + for (let i = 0; i < curve.length; i++) { + const x = (i / curve.length) * 2 - 1; + curve[i] = Math.tanh(x * amount * 0.01); + } + this.distortion.curve = curve; + } + + #createNoise() { + const buffer = this.ctx.createBuffer(1, this.ctx.sampleRate * 4, this.ctx.sampleRate); + const data = buffer.getChannelData(0); + for (let i = 0; i < data.length; i++) { + data[i] = Math.random() * 2 - 1; + } + const noise = this.ctx.createBufferSource(); + noise.buffer = buffer; + noise.loop = true; + return noise; + } + + #makeImpulse(seconds) { + const rate = this.ctx.sampleRate; + const length = rate * seconds; + const impulse = this.ctx.createBuffer(2, length, rate); + for (let ch = 0; ch < 2; ch++) { + const data = impulse.getChannelData(ch); + for (let i = 0; i < length; i++) { + data[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / length, 2); + } + } + return impulse; + } + + setInstrument(mode) { + this.instrument = mode; + switch (mode) { + case 'fm-bell': + this.carrier.type = 'sine'; + this.harmonic.type = 'sine'; + this.harmonic.detune.setTargetAtTime(1200, this.ctx.currentTime, 0.2); + this.filter.Q.setTargetAtTime(14, this.ctx.currentTime, 0.2); + this.filter.type = 'bandpass'; + this.instrumentNoiseScale = 0.2; + break; + case 'pulse-pluck': + this.carrier.type = 'square'; + this.harmonic.type = 'square'; + this.harmonic.detune.setTargetAtTime(305, this.ctx.currentTime, 0.2); + this.filter.type = 'lowpass'; + this.filter.Q.setTargetAtTime(6, this.ctx.currentTime, 0.2); + this.instrumentNoiseScale = 0.6; + break; + default: + this.carrier.type = 'sawtooth'; + this.harmonic.type = 'triangle'; + this.harmonic.detune.setTargetAtTime(702, this.ctx.currentTime, 0.2); + this.filter.type = 'bandpass'; + this.filter.Q.setTargetAtTime(10, this.ctx.currentTime, 0.2); + this.instrumentNoiseScale = 1; + } + this.setNoiseLevel(parseFloat(noiseInput.value)); + } + + setNoiseLevel(amount) { + const scale = this.instrumentNoiseScale ?? 1; + this.noiseGain.gain.setTargetAtTime(amount * 0.6 * scale, this.ctx.currentTime, 0.1); + } + + setDelayMix(amount) { + this.dryGain.gain.setTargetAtTime(Math.max(0.05, 1 - amount), this.ctx.currentTime, 0.2); + this.delayWet.gain.setTargetAtTime(amount, this.ctx.currentTime, 0.2); + } + + setReverbMix(amount) { + this.reverbGain.gain.setTargetAtTime(0.05 + amount * 0.7, this.ctx.currentTime, 0.2); + } + + setCoinBlend(amount) { + this.coinBlend = amount; + this.coinMorph.gain.setTargetAtTime(amount * 0.8, this.ctx.currentTime, 0.2); + } + + setClockDepth(amount) { + this.clockDepth = amount; + this.tickClock(); + } + + setDriveCeiling(amount) { + this.driveCeiling = amount; + } + + tickClock() { + const now = new Date(); + const hourFactor = now.getHours() / 23 || 0; + const secondFactor = now.getSeconds() / 59 || 0; + const milliFactor = now.getMilliseconds() / 999 || 0; + const depth = this.clockDepth; + const detune = (hourFactor - 0.5) * 600 * depth; + this.filter.detune.setTargetAtTime(detune, this.ctx.currentTime, 0.4); + this.harmonic.detune.setTargetAtTime(702 + detune * 0.4, this.ctx.currentTime, 0.4); + const pan = (secondFactor - 0.5) * 1.8 * depth; + this.panner.pan.setTargetAtTime(pan, this.ctx.currentTime, 0.3); + const ampMod = 0.2 + hourFactor * 0.7 * depth; + this.ampLfoGain.gain.setTargetAtTime(ampMod, this.ctx.currentTime, 0.3); + const shRate = 2 + milliFactor * 14 * depth; + this.sampleHold.frequency.setTargetAtTime(shRate, this.ctx.currentTime, 0.2); + } +} + +const synth = new MouseSynth({ + coinBlend: normalizedCoin, + clockDepth: parseFloat(clockReactivityInput.value), + driveCeiling: parseFloat(driveInput.value), +}); + +coinReactivityInput.value = normalizedCoin.toFixed(2); +synth.setCoinBlend(normalizedCoin); +if (instrumentSelect) { + synth.setInstrument(instrumentSelect.value); +} +if (noiseInput) { + synth.setNoiseLevel(parseFloat(noiseInput.value)); +} +if (delayMixInput) { + synth.setDelayMix(parseFloat(delayMixInput.value)); +} +if (reverbInput) { + synth.setReverbMix(parseFloat(reverbInput.value)); +} + +startBtn.addEventListener('click', () => synth.start()); + +pad.addEventListener('pointerdown', async (event) => { + await synth.start(); + pad.setPointerCapture(event.pointerId); + indicator.style.opacity = '1'; +}); + +pad.addEventListener('pointermove', (event) => { + indicator.style.left = `${event.offsetX}px`; + indicator.style.top = `${event.offsetY}px`; + synth.handlePointer(event); +}); + +pad.addEventListener('pointerup', (event) => { + pad.releasePointerCapture(event.pointerId); + synth.handlePointerLeave(); +}); + +pad.addEventListener('pointerleave', () => synth.handlePointerLeave()); + +function updateClockStatus() { + const now = new Date(); + const formatted = now.toLocaleTimeString('de-DE', { hour12: false }); + if (clockInfo) { + clockInfo.innerHTML = `Lokale Zeit: ${formatted}.${now.getMilliseconds().toString().padStart(3, '0')}`; + } + synth.tickClock(); +} + +setInterval(updateClockStatus, 1000); +updateClockStatus(); + +if (!coinPool.length) { + const status = document.getElementById('btc-status'); + if (status) { + status.insertAdjacentHTML('beforeend', '
BTC Feeds nicht erreichbar – Synth läuft im Fantasy-Modus.
'); + } +} +