Merge branch 'main' into codex/create-advanced-mouse-synthesizer-in-synth-folder-235xid

This commit is contained in:
2025-11-18 11:15:26 +01:00
committed by GitHub
5 changed files with 5817 additions and 437 deletions
+12
View File
@@ -0,0 +1,12 @@
{
"name": "Mein Webserver",
"host": "192.168.178.88",
"protocol": "sftp",
"port": 22,
"username": "root",
"password": "934290",
"remotePath": "/var/www/html/",
"uploadOnSave": true,
"useTempFile": false,
"openSsh": false
}
+1720
View File
File diff suppressed because it is too large Load Diff
+4045
View File
File diff suppressed because it is too large Load Diff
+23 -85
View File
@@ -1,39 +1,34 @@
<?php
$btcCoindeskPrice = null;
$btcCoinmarketcapPrice = null;
$btcPrice = null;
$btcChange = null;
$btcSource = 'https://api.coindesk.com/v1/bpi/currentprice/USD.json';
$btcCmcSource = 'https://api.coinmarketcap.com/v1/ticker/bitcoin/?convert=USD';
$fetchJson = static function (string $url) {
try {
$response = @file_get_contents($url);
$response = @file_get_contents($btcSource);
if ($response !== false) {
return json_decode($response, true);
$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) {
// Ignore network failures we fall back to fantasy values.
}
return null;
};
$coindeskPayload = $fetchJson($btcSource);
if (isset($coindeskPayload['bpi']['USD']['rate_float'])) {
$btcCoindeskPrice = (float) $coindeskPayload['bpi']['USD']['rate_float'];
// Silently ignore network failures, we degrade gracefully in the UI.
}
$coinmarketcapPayload = $fetchJson($btcCmcSource);
if (is_array($coinmarketcapPayload) && isset($coinmarketcapPayload[0]['price_usd'])) {
$btcCoinmarketcapPrice = (float) $coinmarketcapPayload[0]['price_usd'];
}
$btcLabel = $btcCoindeskPrice ? number_format($btcCoindeskPrice, 2) . ' $' : 'unbekannt';
$btcCmcLabel = $btcCoinmarketcapPrice ? number_format($btcCoinmarketcapPrice, 2) . ' $' : 'unbekannt';
$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>
@@ -102,7 +97,7 @@ $btcCmcLabel = $btcCoinmarketcapPrice ? number_format($btcCoinmarketcapPrice, 2)
}
.controls {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin-top: 1.5rem;
}
@@ -143,42 +138,22 @@ $btcCmcLabel = $btcCoinmarketcapPrice ? number_format($btcCoinmarketcapPrice, 2)
font-weight: 600;
color: #7fffd4;
}
select,
option {
font-size: 1rem;
border-radius: 999px;
padding: 0.4rem 0.75rem;
border: 1px solid rgba(255,255,255,0.15);
background: rgba(5, 6, 8, 0.4);
color: inherit;
}
</style>
</head>
<body data-btc-price="<?= htmlspecialchars((string) ($btcCoindeskPrice ?? '')) ?>" data-btc-cmc-price="<?= htmlspecialchars((string) ($btcCoinmarketcapPrice ?? '')) ?>">
<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.
Die Bitcoin-Feeds von Coindesk (<strong><?= htmlspecialchars($btcLabel) ?></strong>)
und CoinMarketCap (<strong><?= htmlspecialchars($btcCmcLabel) ?></strong>)
mischen das Routing zusätzlich sogar die Uhrzeit entscheidet, welches Instrument
sich meldet und wie die Resonanzen pulsieren.
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>Coindesk: <span><?= htmlspecialchars($btcLabel) ?></span></div>
<div>CoinMarketCap: <span><?= htmlspecialchars($btcCmcLabel) ?></span></div>
<div id="clock-info">Lokale Zeit: <span>---</span></div>
<div>Bitcoin Quelle: <span><?= htmlspecialchars($btcSource) ?></span></div>
<div>Letzter Wert: <span><?= htmlspecialchars($btcLabel) ?></span></div>
</div>
<div class="controls">
<div>
<label for="instrument">Instrument</label>
<select id="instrument">
<option value="supersaw">Supersaw Orbit</option>
<option value="fm-bell">FM Bell</option>
<option value="pulse-pluck">Pulse Pluck</option>
</select>
</div>
<div>
<label for="fm-depth">FM-Intensität</label>
<input id="fm-depth" type="range" min="10" max="800" value="320">
@@ -191,42 +166,6 @@ $btcCmcLabel = $btcCoinmarketcapPrice ? number_format($btcCoinmarketcapPrice, 2)
<label for="texture">Texture Morph</label>
<input id="texture" type="range" min="0" max="1" step="0.01" value="0.4">
</div>
<div>
<label for="noise-level">Noise Lift</label>
<input id="noise-level" type="range" min="0" max="1" step="0.01" value="0.2">
</div>
<div>
<label for="chorus-depth">Chorus Orbit</label>
<input id="chorus-depth" type="range" min="0" max="1" step="0.01" value="0.45">
</div>
<div>
<label for="phaser-mix">Phaser Drift</label>
<input id="phaser-mix" type="range" min="0" max="1" step="0.01" value="0.5">
</div>
<div>
<label for="crusher-fold">Bitcrush Fold</label>
<input id="crusher-fold" type="range" min="2" max="32" step="1" value="12">
</div>
<div>
<label for="delay-mix">Delay Mix</label>
<input id="delay-mix" type="range" min="0" max="1" step="0.01" value="0.6">
</div>
<div>
<label for="reverb-mix">Reverb Mix</label>
<input id="reverb-mix" type="range" min="0" max="1" step="0.01" value="0.35">
</div>
<div>
<label for="clock-reactivity">Zeit-Reaktivität</label>
<input id="clock-reactivity" type="range" min="0" max="1" step="0.01" value="0.5">
</div>
<div>
<label for="coin-reactivity">BTC Morph</label>
<input id="coin-reactivity" type="range" min="0" max="1" step="0.01" value="0.5">
</div>
<div>
<label for="drive">Drive Ceiling</label>
<input id="drive" type="range" min="0" max="1" step="0.01" value="0.35">
</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>
@@ -237,8 +176,7 @@ $btcCmcLabel = $btcCoinmarketcapPrice ? number_format($btcCoinmarketcapPrice, 2)
</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 (Coindesk + CoinMarketCap) und Tageszeit schalten
sich neue Instrumente, Delays und Resonanzen zu.
Kreise fahren. Je nach Bitcoin-Laune schalten sich neue Rückkopplungen zu.
</p>
</div>
<script src="synth.js" type="module"></script>
+15 -350
View File
@@ -1,30 +1,15 @@
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
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 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 chorusInput = document.getElementById('chorus-depth');
const phaserInput = document.getElementById('phaser-mix');
const crusherInput = document.getElementById('crusher-fold');
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 = {}) {
@@ -33,13 +18,6 @@ class MouseSynth {
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.chorusAmount = chorusInput ? parseFloat(chorusInput.value) : 0.45;
this.phaserAmount = phaserInput ? parseFloat(phaserInput.value) : 0.5;
this.crushFold = crusherInput ? parseFloat(crusherInput.value) : 12;
this.setupNodes();
this.#bindEvents();
@@ -51,15 +29,6 @@ class MouseSynth {
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';
@@ -106,52 +75,6 @@ class MouseSynth {
this.distortion = ctx.createWaveShaper();
this.#setDrive(400);
this.chorusDelay = ctx.createDelay(0.05);
this.chorusDelay.delayTime.value = 0.018;
this.chorusDepthGain = ctx.createGain();
this.chorusDepthGain.gain.value = 0.003;
this.chorusLfo = ctx.createOscillator();
this.chorusLfo.frequency.value = 0.25;
this.chorusLfo.connect(this.chorusDepthGain).connect(this.chorusDelay.delayTime);
this.chorusDry = ctx.createGain();
this.chorusDry.gain.value = 0.6;
this.chorusWet = ctx.createGain();
this.chorusWet.gain.value = 0.4;
this.chorusSum = ctx.createGain();
this.phaserInput = ctx.createGain();
this.phaserDry = ctx.createGain();
this.phaserDry.gain.value = 0.5;
this.phaserWet = ctx.createGain();
this.phaserWet.gain.value = 0.5;
this.phaserLfo = ctx.createOscillator();
this.phaserLfo.frequency.value = 0.12;
this.phaserLfoGain = ctx.createGain();
this.phaserLfoGain.gain.value = 280;
this.phaserStages = Array.from({ length: 4 }, (_, index) => {
const stage = ctx.createBiquadFilter();
stage.type = 'allpass';
stage.frequency.value = 300 + index * 220;
stage.Q.value = 2.5;
return stage;
});
this.phaserStages.forEach((stage, index, arr) => {
if (index > 0) {
arr[index - 1].connect(stage);
}
this.phaserLfoGain.connect(stage.frequency);
});
this.phaserLfo.connect(this.phaserLfoGain);
this.postPhaser = ctx.createGain();
this.crusher = ctx.createWaveShaper();
this.#updateCrusher(this.crushFold);
this.crusherDry = ctx.createGain();
this.crusherDry.gain.value = 0.55;
this.crusherWet = ctx.createGain();
this.crusherWet.gain.value = 0.45;
this.crusherOutput = ctx.createGain();
this.coinMorph = ctx.createGain();
this.coinMorph.gain.value = this.coinBlend;
@@ -160,11 +83,6 @@ class MouseSynth {
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);
@@ -176,24 +94,17 @@ class MouseSynth {
this.filter.connect(this.distortion);
this.noise.connect(this.noiseGain).connect(this.filter);
this.distortion.connect(this.chorusDry).connect(this.chorusSum);
this.distortion.connect(this.chorusDelay).connect(this.chorusWet).connect(this.chorusSum);
this.chorusSum.connect(this.phaserInput);
this.phaserInput.connect(this.phaserDry).connect(this.postPhaser);
this.phaserInput.connect(this.phaserStages[0]);
this.phaserStages[this.phaserStages.length - 1].connect(this.phaserWet).connect(this.postPhaser);
this.postPhaser.connect(this.crusherDry).connect(this.crusherOutput);
this.postPhaser.connect(this.crusher).connect(this.crusherWet).connect(this.crusherOutput);
this.crusherOutput.connect(this.dryGain).connect(this.masterGain);
this.crusherOutput.connect(this.delay);
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(this.delayWet);
this.delayWet.connect(this.reverb);
this.coinMorph.connect(wet);
wet.connect(this.reverb);
this.reverb.connect(this.reverbGain).connect(this.masterGain);
this.masterGain.connect(this.panner).connect(this.compressor).connect(ctx.destination);
this.masterGain.connect(ctx.destination);
this.carrier.start();
this.harmonic.start();
@@ -202,25 +113,16 @@ class MouseSynth {
this.filterLfo.start();
this.sampleHold.start();
this.noise.start();
this.chorusLfo.start();
this.phaserLfo.start();
}
async start() {
if (this.started) return;
await this.ctx.resume();
this.masterGain.gain.linearRampToValueAtTime(0.65, this.ctx.currentTime + 0.5);
this.masterGain.gain.linearRampToValueAtTime(0.8, 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);
});
@@ -235,43 +137,6 @@ class MouseSynth {
this.#updateTexture(parseFloat(textureInput.value));
});
noiseInput.addEventListener('input', () => {
this.setNoiseLevel(parseFloat(noiseInput.value));
});
chorusInput.addEventListener('input', () => {
this.setChorusDepth(parseFloat(chorusInput.value));
});
phaserInput.addEventListener('input', () => {
this.setPhaserMix(parseFloat(phaserInput.value));
});
crusherInput.addEventListener('input', () => {
this.setCrusherFold(parseFloat(crusherInput.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());
}
@@ -293,10 +158,7 @@ class MouseSynth {
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.chorusLfo.frequency.setTargetAtTime(0.1 + x * 2.4, this.ctx.currentTime, 0.2);
this.phaserLfo.frequency.setTargetAtTime(0.05 + y * 1.2 + this.phaserAmount * 0.4, this.ctx.currentTime, 0.2);
this.#updateTexture(textureInput.value, x, y);
this.tickClock();
}
handlePointerLeave() {
@@ -306,11 +168,6 @@ class MouseSynth {
}
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);
@@ -323,53 +180,15 @@ class MouseSynth {
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 chorusAmt = Math.random();
chorusInput.value = chorusAmt.toFixed(2);
this.setChorusDepth(chorusAmt);
const phaserAmt = Math.random();
phaserInput.value = phaserAmt.toFixed(2);
this.setPhaserMix(phaserAmt);
const crushFold = Math.floor(2 + Math.random() * 30);
crusherInput.value = crushFold.toString();
this.setCrusherFold(crushFold);
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));
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.1 + morph * 0.5, this.ctx.currentTime, 0.3);
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);
@@ -385,18 +204,6 @@ class MouseSynth {
this.distortion.curve = curve;
}
#updateCrusher(levels) {
const steps = Math.max(2, levels);
const curve = new Float32Array(1024);
for (let i = 0; i < curve.length; i++) {
const x = (i / (curve.length - 1)) * 2 - 1;
const normalized = (x + 1) / 2;
const quantized = Math.round(normalized * (steps - 1)) / (steps - 1);
curve[i] = quantized * 2 - 1;
}
this.crusher.curve = curve;
}
#createNoise() {
const buffer = this.ctx.createBuffer(1, this.ctx.sampleRate * 4, this.ctx.sampleRate);
const data = buffer.getChannelData(0);
@@ -421,139 +228,9 @@ class MouseSynth {
}
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;
}
setChorusDepth(amount) {
this.chorusAmount = amount;
const depth = 0.001 + amount * 0.01;
this.chorusDepthGain.gain.setTargetAtTime(depth, this.ctx.currentTime, 0.2);
const wet = 0.15 + amount * 0.85;
const dry = Math.max(0.15, 1 - wet * 0.8);
this.chorusWet.gain.setTargetAtTime(wet, this.ctx.currentTime, 0.2);
this.chorusDry.gain.setTargetAtTime(dry, this.ctx.currentTime, 0.2);
}
setPhaserMix(amount) {
this.phaserAmount = amount;
this.phaserWet.gain.setTargetAtTime(amount, this.ctx.currentTime, 0.2);
this.phaserDry.gain.setTargetAtTime(1 - amount, this.ctx.currentTime, 0.2);
this.phaserLfo.frequency.setTargetAtTime(0.05 + amount * 1.2, this.ctx.currentTime, 0.3);
this.phaserLfoGain.gain.setTargetAtTime(120 + amount * 620, this.ctx.currentTime, 0.3);
}
setCrusherFold(levels) {
const fold = Math.max(2, Math.round(levels));
this.crushFold = fold;
this.#updateCrusher(fold);
const wet = Math.min(0.85, 0.2 + fold / 40);
this.crusherWet.gain.setTargetAtTime(wet, this.ctx.currentTime, 0.2);
this.crusherDry.gain.setTargetAtTime(1 - wet * 0.7, this.ctx.currentTime, 0.2);
}
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));
}
if (chorusInput) {
synth.setChorusDepth(parseFloat(chorusInput.value));
}
if (phaserInput) {
synth.setPhaserMix(parseFloat(phaserInput.value));
}
if (crusherInput) {
synth.setCrusherFold(parseFloat(crusherInput.value));
}
const synth = new MouseSynth({ coinBlend: normalizedCoin });
startBtn.addEventListener('click', () => synth.start());
@@ -576,22 +253,10 @@ pad.addEventListener('pointerup', (event) => {
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: <span>${formatted}.${now.getMilliseconds().toString().padStart(3, '0')}</span>`;
}
synth.tickClock();
}
setInterval(updateClockStatus, 1000);
updateClockStatus();
if (!coinPool.length) {
if (!Number.isFinite(btcPrice)) {
const status = document.getElementById('btc-status');
if (status) {
status.insertAdjacentHTML('beforeend', '<div style="color:#ffa3a3;">BTC Feeds nicht erreichbar Synth läuft im Fantasy-Modus.</div>');
status.insertAdjacentHTML('beforeend', '<div style="color:#ffa3a3;">BTC Feed nicht erreichbar Synth läuft im Fantasy-Modus.</div>');
}
}