Add Bitcoin-reactive mouse synth playground

Merge pull request #6 from metacube2/codex/erstelle-seite-fur-top-10-altkos
Add MA200 signal overview for top altcoins
2025-11-17 16:49:21 +01:00 · 2025-11-17 16:17:14 +01:00
2 changed files with 440 additions and 0 deletions
@@ -0,0 +1,178 @@
+<?php
+$btcPrice = null;
+$btcChange = null;
+$btcSource = 'https://api.coindesk.com/v1/bpi/currentprice/USD.json';
+try {
+    $response = @file_get_contents($btcSource);
+    if ($response !== false) {
+        $payload = json_decode($response, true);
+        if (isset($payload['bpi']['USD']['rate_float'])) {
+            $btcPrice = (float) $payload['bpi']['USD']['rate_float'];
+        }
+        if (isset($payload['chartName'])) {
+            $btcChange = $payload['chartName'];
+        }
+    }
+} catch (Throwable $e) {
+    // Silently ignore network failures, we degrade gracefully in the UI.
+}
+$btcLabel = $btcPrice ? number_format($btcPrice, 2) . ' $' : 'unbekannt';
+?>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mouse Synth Lab</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            color-scheme: dark;
+            font-family: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            background: radial-gradient(circle at top, #10152b, #050608 60%);
+            color: #e4f6ff;
+        }
+        body {
+            margin: 0;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 2rem;
+            padding: 2rem;
+        }
+        .panel {
+            background: rgba(15, 18, 40, 0.85);
+            border: 1px solid rgba(102, 204, 255, 0.25);
+            border-radius: 20px;
+            padding: 2rem;
+            width: min(960px, 100%);
+            box-shadow: 0 30px 60px rgba(5, 10, 50, 0.55);
+            backdrop-filter: blur(10px);
+        }
+        h1 {
+            margin: 0 0 1rem 0;
+            font-size: clamp(2rem, 4vw, 3rem);
+            letter-spacing: 0.04em;
+            text-transform: uppercase;
+        }
+        p {
+            margin: 0 0 1rem 0;
+            line-height: 1.6;
+        }
+        .synth-pad {
+            border-radius: 24px;
+            background: linear-gradient(135deg, rgba(35, 58, 122, 0.9), rgba(161, 92, 255, 0.75));
+            border: 1px solid rgba(255,255,255,0.2);
+            height: 320px;
+            position: relative;
+            overflow: hidden;
+            cursor: crosshair;
+        }
+        .synth-pad::after {
+            content: "";
+            position: absolute;
+            inset: 1rem;
+            border: 1px dashed rgba(255,255,255,0.2);
+            border-radius: 18px;
+        }
+        .pad-indicator {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            border: 2px solid #ffffff;
+            pointer-events: none;
+            transform: translate(-50%, -50%);
+            transition: transform 0.1s ease-out;
+        }
+        .controls {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+            gap: 1rem;
+            margin-top: 1.5rem;
+        }
+        label {
+            font-size: 0.85rem;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            color: rgba(255,255,255,0.65);
+        }
+        input[type="range"] {
+            width: 100%;
+        }
+        button {
+            border: none;
+            border-radius: 999px;
+            padding: 0.85rem 1.8rem;
+            font-size: 1rem;
+            cursor: pointer;
+            background: linear-gradient(135deg, #6a5af9, #32d9ff);
+            color: #050608;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.08em;
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+        }
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 20px 30px rgba(50, 217, 255, 0.3);
+        }
+        .status {
+            font-size: 0.9rem;
+            color: rgba(255,255,255,0.7);
+            display: flex;
+            flex-direction: column;
+            gap: 0.3rem;
+        }
+        .status span {
+            font-weight: 600;
+            color: #7fffd4;
+        }
+    </style>
+</head>
+<body data-btc-price="<?= htmlspecialchars((string) ($btcPrice ?? '')) ?>">
+    <div class="panel">
+        <h1>Mouse Synth Lab</h1>
+        <p>
+            Zieh deine Maus durch den Pad und verwandle Bewegungen in Klang. Drei LFOs,
+            FM-Experimente und ein Delay/Distortion-Hybrid werden live verschaltet.
+            Der aktuelle Bitcoin-Kurs (<strong><?= htmlspecialchars($btcLabel) ?></strong>)
+            steuert, wie aggressiv der Mix moduliert und rückgekoppelt wird.
+        </p>
+        <div class="status" id="btc-status">
+            <div>Bitcoin Quelle: <span><?= htmlspecialchars($btcSource) ?></span></div>
+            <div>Letzter Wert: <span><?= htmlspecialchars($btcLabel) ?></span></div>
+        </div>
+        <div class="controls">
+            <div>
+                <label for="fm-depth">FM-Intensität</label>
+                <input id="fm-depth" type="range" min="10" max="800" value="320">
+            </div>
+            <div>
+                <label for="lfo-speed">LFO-Speed</label>
+                <input id="lfo-speed" type="range" min="0.05" max="18" value="6" step="0.05">
+            </div>
+            <div>
+                <label for="texture">Texture Morph</label>
+                <input id="texture" type="range" min="0" max="1" step="0.01" value="0.4">
+            </div>
+            <div style="display:flex;align-items:end;gap:0.75rem;">
+                <button id="start-btn">Synth starten</button>
+                <button id="randomize-btn" type="button">Chaos Patch</button>
+            </div>
+        </div>
+        <div class="synth-pad" id="synth-pad">
+            <div class="pad-indicator" id="pad-indicator" style="left:50%;top:50%;"></div>
+        </div>
+        <p style="font-size:0.9rem;color:rgba(255,255,255,0.65);margin-top:1.5rem;">
+            Tipp: Halte die Maus gedrückt, damit der AudioContext aktiv bleibt, und lass den Cursor
+            Kreise fahren. Je nach Bitcoin-Laune schalten sich neue Rückkopplungen zu.
+        </p>
+    </div>
+    <script src="synth.js" type="module"></script>
+</body>
+</html>
@@ -0,0 +1,262 @@
+const btcPrice = parseFloat(document.body.dataset.btcPrice || 'NaN');
+const normalizedCoin = Number.isFinite(btcPrice)
+  ? Math.min(Math.max((btcPrice - 15000) / 25000, 0), 1)
+  : 0.5;
+
+const pad = document.getElementById('synth-pad');
+const indicator = document.getElementById('pad-indicator');
+const fmDepthInput = document.getElementById('fm-depth');
+const lfoSpeedInput = document.getElementById('lfo-speed');
+const textureInput = document.getElementById('texture');
+const startBtn = document.getElementById('start-btn');
+const randomizeBtn = document.getElementById('randomize-btn');
+
+class MouseSynth {
+  constructor(options = {}) {
+    const AudioContext = window.AudioContext || window.webkitAudioContext;
+    this.ctx = new AudioContext();
+    this.started = false;
+
+    this.coinBlend = options.coinBlend ?? 0.5;
+
+    this.setupNodes();
+    this.#bindEvents();
+  }
+
+  setupNodes() {
+    const ctx = this.ctx;
+
+    this.masterGain = ctx.createGain();
+    this.masterGain.gain.value = 0.0;
+
+    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;
+
+    // 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);
+
+    const wet = ctx.createGain();
+    const dry = ctx.createGain();
+    this.distortion.connect(dry).connect(this.masterGain);
+    this.distortion.connect(this.delay);
+    this.delay.connect(this.feedback).connect(this.delay);
+    this.delay.connect(this.coinMorph);
+    this.coinMorph.connect(wet);
+    wet.connect(this.reverb);
+    this.reverb.connect(this.reverbGain).connect(this.masterGain);
+
+    this.masterGain.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.8, this.ctx.currentTime + 0.5);
+    this.started = true;
+  }
+
+  #bindEvents() {
+    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));
+    });
+
+    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);
+  }
+
+  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 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);
+  }
+
+  #updateTexture(value, x = 0.5, y = 0.5) {
+    const amount = parseFloat(value);
+    const drive = 150 + amount * 850 + this.coinBlend * 400;
+    this.#setDrive(drive);
+    const morph = amount * (0.6 + this.coinBlend * 0.8);
+    this.distortion.oversample = morph > 0.5 ? '4x' : '2x';
+    this.reverbGain.gain.setTargetAtTime(0.15 + morph * 0.6, 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;
+  }
+}
+
+const synth = new MouseSynth({ coinBlend: normalizedCoin });
+
+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());
+
+if (!Number.isFinite(btcPrice)) {
+  const status = document.getElementById('btc-status');
+  if (status) {
+    status.insertAdjacentHTML('beforeend', '<div style="color:#ffa3a3;">BTC Feed nicht erreichbar – Synth läuft im Fantasy-Modus.</div>');
+  }
+}
+
Author	SHA1	Message	Date
admin	aa8ea8c6f2	Add Bitcoin-reactive mouse synth playground	2025-11-17 16:49:21 +01:00
admin	206125854a	Merge pull request #6 from metacube2/codex/erstelle-seite-fur-top-10-altkos Add MA200 signal overview for top altcoins	2025-11-17 16:17:14 +01:00