Merge branch 'main' into codex/create-advanced-mouse-synthesizer-in-synth-folder-grrihv
This commit is contained in:
+1720
File diff suppressed because it is too large
Load Diff
+4045
File diff suppressed because it is too large
Load Diff
+21
-77
@@ -1,33 +1,22 @@
|
|||||||
<?php
|
<?php
|
||||||
$btcCoindeskPrice = null;
|
$btcPrice = null;
|
||||||
$btcCoinmarketcapPrice = null;
|
$btcChange = null;
|
||||||
$btcSource = 'https://api.coindesk.com/v1/bpi/currentprice/USD.json';
|
$btcSource = 'https://api.coindesk.com/v1/bpi/currentprice/USD.json';
|
||||||
$btcCmcSource = 'https://api.coinmarketcap.com/v1/ticker/bitcoin/?convert=USD';
|
try {
|
||||||
|
$response = @file_get_contents($btcSource);
|
||||||
$fetchJson = static function (string $url) {
|
if ($response !== false) {
|
||||||
try {
|
$payload = json_decode($response, true);
|
||||||
$response = @file_get_contents($url);
|
if (isset($payload['bpi']['USD']['rate_float'])) {
|
||||||
if ($response !== false) {
|
$btcPrice = (float) $payload['bpi']['USD']['rate_float'];
|
||||||
return json_decode($response, true);
|
}
|
||||||
|
if (isset($payload['chartName'])) {
|
||||||
|
$btcChange = $payload['chartName'];
|
||||||
}
|
}
|
||||||
} catch (Throwable $e) {
|
|
||||||
// Ignore network failures – we fall back to fantasy values.
|
|
||||||
}
|
}
|
||||||
return null;
|
} catch (Throwable $e) {
|
||||||
};
|
// Silently ignore network failures, we degrade gracefully in the UI.
|
||||||
|
|
||||||
$coindeskPayload = $fetchJson($btcSource);
|
|
||||||
if (isset($coindeskPayload['bpi']['USD']['rate_float'])) {
|
|
||||||
$btcCoindeskPrice = (float) $coindeskPayload['bpi']['USD']['rate_float'];
|
|
||||||
}
|
}
|
||||||
|
$btcLabel = $btcPrice ? number_format($btcPrice, 2) . ' $' : 'unbekannt';
|
||||||
$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';
|
|
||||||
?>
|
?>
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
@@ -102,7 +91,7 @@ $btcCmcLabel = $btcCoinmarketcapPrice ? number_format($btcCoinmarketcapPrice, 2)
|
|||||||
}
|
}
|
||||||
.controls {
|
.controls {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
}
|
}
|
||||||
@@ -143,42 +132,22 @@ $btcCmcLabel = $btcCoinmarketcapPrice ? number_format($btcCoinmarketcapPrice, 2)
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #7fffd4;
|
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>
|
</style>
|
||||||
</head>
|
</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">
|
<div class="panel">
|
||||||
<h1>Mouse Synth Lab</h1>
|
<h1>Mouse Synth Lab</h1>
|
||||||
<p>
|
<p>
|
||||||
Zieh deine Maus durch den Pad und verwandle Bewegungen in Klang. Drei LFOs,
|
Zieh deine Maus durch den Pad und verwandle Bewegungen in Klang. Drei LFOs,
|
||||||
FM-Experimente und ein Delay/Distortion-Hybrid werden live verschaltet.
|
FM-Experimente und ein Delay/Distortion-Hybrid werden live verschaltet.
|
||||||
Die Bitcoin-Feeds von Coindesk (<strong><?= htmlspecialchars($btcLabel) ?></strong>)
|
Der aktuelle Bitcoin-Kurs (<strong><?= htmlspecialchars($btcLabel) ?></strong>)
|
||||||
und CoinMarketCap (<strong><?= htmlspecialchars($btcCmcLabel) ?></strong>)
|
steuert, wie aggressiv der Mix moduliert und rückgekoppelt wird.
|
||||||
mischen das Routing zusätzlich – sogar die Uhrzeit entscheidet, welches Instrument
|
|
||||||
sich meldet und wie die Resonanzen pulsieren.
|
|
||||||
</p>
|
</p>
|
||||||
<div class="status" id="btc-status">
|
<div class="status" id="btc-status">
|
||||||
<div>Coindesk: <span><?= htmlspecialchars($btcLabel) ?></span></div>
|
<div>Bitcoin Quelle: <span><?= htmlspecialchars($btcSource) ?></span></div>
|
||||||
<div>CoinMarketCap: <span><?= htmlspecialchars($btcCmcLabel) ?></span></div>
|
<div>Letzter Wert: <span><?= htmlspecialchars($btcLabel) ?></span></div>
|
||||||
<div id="clock-info">Lokale Zeit: <span>---</span></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="controls">
|
<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>
|
<div>
|
||||||
<label for="fm-depth">FM-Intensität</label>
|
<label for="fm-depth">FM-Intensität</label>
|
||||||
<input id="fm-depth" type="range" min="10" max="800" value="320">
|
<input id="fm-depth" type="range" min="10" max="800" value="320">
|
||||||
@@ -191,30 +160,6 @@ $btcCmcLabel = $btcCoinmarketcapPrice ? number_format($btcCoinmarketcapPrice, 2)
|
|||||||
<label for="texture">Texture Morph</label>
|
<label for="texture">Texture Morph</label>
|
||||||
<input id="texture" type="range" min="0" max="1" step="0.01" value="0.4">
|
<input id="texture" type="range" min="0" max="1" step="0.01" value="0.4">
|
||||||
</div>
|
</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="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;">
|
<div style="display:flex;align-items:end;gap:0.75rem;">
|
||||||
<button id="start-btn">Synth starten</button>
|
<button id="start-btn">Synth starten</button>
|
||||||
<button id="randomize-btn" type="button">Chaos Patch</button>
|
<button id="randomize-btn" type="button">Chaos Patch</button>
|
||||||
@@ -225,8 +170,7 @@ $btcCmcLabel = $btcCoinmarketcapPrice ? number_format($btcCoinmarketcapPrice, 2)
|
|||||||
</div>
|
</div>
|
||||||
<p style="font-size:0.9rem;color:rgba(255,255,255,0.65);margin-top:1.5rem;">
|
<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
|
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
|
Kreise fahren. Je nach Bitcoin-Laune schalten sich neue Rückkopplungen zu.
|
||||||
sich neue Instrumente, Delays und Resonanzen zu.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<script src="synth.js" type="module"></script>
|
<script src="synth.js" type="module"></script>
|
||||||
|
|||||||
+14
-212
@@ -1,27 +1,15 @@
|
|||||||
const btcPrice = parseFloat(document.body.dataset.btcPrice || 'NaN');
|
const btcPrice = parseFloat(document.body.dataset.btcPrice || 'NaN');
|
||||||
const btcCmcPrice = parseFloat(document.body.dataset.btcCmcPrice || 'NaN');
|
const normalizedCoin = Number.isFinite(btcPrice)
|
||||||
const coinPool = [btcPrice, btcCmcPrice].filter((value) => Number.isFinite(value));
|
? Math.min(Math.max((btcPrice - 15000) / 25000, 0), 1)
|
||||||
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;
|
: 0.5;
|
||||||
|
|
||||||
const pad = document.getElementById('synth-pad');
|
const pad = document.getElementById('synth-pad');
|
||||||
const indicator = document.getElementById('pad-indicator');
|
const indicator = document.getElementById('pad-indicator');
|
||||||
const instrumentSelect = document.getElementById('instrument');
|
|
||||||
const fmDepthInput = document.getElementById('fm-depth');
|
const fmDepthInput = document.getElementById('fm-depth');
|
||||||
const lfoSpeedInput = document.getElementById('lfo-speed');
|
const lfoSpeedInput = document.getElementById('lfo-speed');
|
||||||
const textureInput = document.getElementById('texture');
|
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 startBtn = document.getElementById('start-btn');
|
||||||
const randomizeBtn = document.getElementById('randomize-btn');
|
const randomizeBtn = document.getElementById('randomize-btn');
|
||||||
const clockInfo = document.getElementById('clock-info');
|
|
||||||
|
|
||||||
class MouseSynth {
|
class MouseSynth {
|
||||||
constructor(options = {}) {
|
constructor(options = {}) {
|
||||||
@@ -30,10 +18,6 @@ class MouseSynth {
|
|||||||
this.started = false;
|
this.started = false;
|
||||||
|
|
||||||
this.coinBlend = options.coinBlend ?? 0.5;
|
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.setupNodes();
|
||||||
this.#bindEvents();
|
this.#bindEvents();
|
||||||
@@ -45,15 +29,6 @@ class MouseSynth {
|
|||||||
this.masterGain = ctx.createGain();
|
this.masterGain = ctx.createGain();
|
||||||
this.masterGain.gain.value = 0.0;
|
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 = ctx.createOscillator();
|
||||||
this.carrier.type = 'sawtooth';
|
this.carrier.type = 'sawtooth';
|
||||||
|
|
||||||
@@ -108,11 +83,6 @@ class MouseSynth {
|
|||||||
this.reverbGain = ctx.createGain();
|
this.reverbGain = ctx.createGain();
|
||||||
this.reverbGain.gain.value = 0.25;
|
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
|
// Connections
|
||||||
this.fmOsc.connect(this.fmGain).connect(this.carrier.frequency);
|
this.fmOsc.connect(this.fmGain).connect(this.carrier.frequency);
|
||||||
this.harmonic.connect(this.filter);
|
this.harmonic.connect(this.filter);
|
||||||
@@ -124,15 +94,17 @@ class MouseSynth {
|
|||||||
this.filter.connect(this.distortion);
|
this.filter.connect(this.distortion);
|
||||||
this.noise.connect(this.noiseGain).connect(this.filter);
|
this.noise.connect(this.noiseGain).connect(this.filter);
|
||||||
|
|
||||||
this.distortion.connect(this.dryGain).connect(this.masterGain);
|
const wet = ctx.createGain();
|
||||||
|
const dry = ctx.createGain();
|
||||||
|
this.distortion.connect(dry).connect(this.masterGain);
|
||||||
this.distortion.connect(this.delay);
|
this.distortion.connect(this.delay);
|
||||||
this.delay.connect(this.feedback).connect(this.delay);
|
this.delay.connect(this.feedback).connect(this.delay);
|
||||||
this.delay.connect(this.coinMorph);
|
this.delay.connect(this.coinMorph);
|
||||||
this.coinMorph.connect(this.delayWet);
|
this.coinMorph.connect(wet);
|
||||||
this.delayWet.connect(this.reverb);
|
wet.connect(this.reverb);
|
||||||
this.reverb.connect(this.reverbGain).connect(this.masterGain);
|
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.carrier.start();
|
||||||
this.harmonic.start();
|
this.harmonic.start();
|
||||||
@@ -146,18 +118,11 @@ class MouseSynth {
|
|||||||
async start() {
|
async start() {
|
||||||
if (this.started) return;
|
if (this.started) return;
|
||||||
await this.ctx.resume();
|
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.started = true;
|
||||||
this.tickClock();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#bindEvents() {
|
#bindEvents() {
|
||||||
if (instrumentSelect) {
|
|
||||||
instrumentSelect.addEventListener('change', () => {
|
|
||||||
this.setInstrument(instrumentSelect.value);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
fmDepthInput.addEventListener('input', () => {
|
fmDepthInput.addEventListener('input', () => {
|
||||||
this.fmGain.gain.setTargetAtTime(parseFloat(fmDepthInput.value), this.ctx.currentTime, 0.05);
|
this.fmGain.gain.setTargetAtTime(parseFloat(fmDepthInput.value), this.ctx.currentTime, 0.05);
|
||||||
});
|
});
|
||||||
@@ -172,31 +137,6 @@ class MouseSynth {
|
|||||||
this.#updateTexture(parseFloat(textureInput.value));
|
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());
|
randomizeBtn.addEventListener('click', () => this.randomize());
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -219,7 +159,6 @@ class MouseSynth {
|
|||||||
this.coinMorph.gain.setTargetAtTime(this.coinBlend * (0.4 + y * 0.6), this.ctx.currentTime, 0.3);
|
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.fmGain.gain.setTargetAtTime(parseFloat(fmDepthInput.value) + x * 200, this.ctx.currentTime, 0.05);
|
||||||
this.#updateTexture(textureInput.value, x, y);
|
this.#updateTexture(textureInput.value, x, y);
|
||||||
this.tickClock();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handlePointerLeave() {
|
handlePointerLeave() {
|
||||||
@@ -229,11 +168,6 @@ class MouseSynth {
|
|||||||
}
|
}
|
||||||
|
|
||||||
randomize() {
|
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;
|
const fm = 80 + Math.random() * 720;
|
||||||
fmDepthInput.value = fm.toFixed(0);
|
fmDepthInput.value = fm.toFixed(0);
|
||||||
this.fmGain.gain.setTargetAtTime(fm, this.ctx.currentTime, 0.1);
|
this.fmGain.gain.setTargetAtTime(fm, this.ctx.currentTime, 0.1);
|
||||||
@@ -246,41 +180,15 @@ class MouseSynth {
|
|||||||
const texture = Math.random();
|
const texture = Math.random();
|
||||||
textureInput.value = texture.toFixed(2);
|
textureInput.value = texture.toFixed(2);
|
||||||
this.#updateTexture(texture);
|
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) {
|
#updateTexture(value, x = 0.5, y = 0.5) {
|
||||||
const amount = parseFloat(value);
|
const amount = parseFloat(value);
|
||||||
const drive = 150 + amount * 850 + this.coinBlend * 400;
|
const drive = 150 + amount * 850 + this.coinBlend * 400;
|
||||||
const driveLimit = 150 + this.driveCeiling * 700;
|
this.#setDrive(drive);
|
||||||
this.#setDrive(Math.min(drive, driveLimit));
|
|
||||||
const morph = amount * (0.6 + this.coinBlend * 0.8);
|
const morph = amount * (0.6 + this.coinBlend * 0.8);
|
||||||
this.distortion.oversample = morph > 0.5 ? '4x' : '2x';
|
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';
|
const filterType = morph > 0.7 ? 'notch' : morph > 0.35 ? 'bandpass' : 'lowpass';
|
||||||
this.filter.type = filterType;
|
this.filter.type = filterType;
|
||||||
this.coinMorph.gain.setTargetAtTime(this.coinBlend * (0.4 + morph), this.ctx.currentTime, 0.3);
|
this.coinMorph.gain.setTargetAtTime(this.coinBlend * (0.4 + morph), this.ctx.currentTime, 0.3);
|
||||||
@@ -320,103 +228,9 @@ class MouseSynth {
|
|||||||
}
|
}
|
||||||
return impulse;
|
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({
|
const synth = new MouseSynth({ coinBlend: normalizedCoin });
|
||||||
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());
|
startBtn.addEventListener('click', () => synth.start());
|
||||||
|
|
||||||
@@ -439,22 +253,10 @@ pad.addEventListener('pointerup', (event) => {
|
|||||||
|
|
||||||
pad.addEventListener('pointerleave', () => synth.handlePointerLeave());
|
pad.addEventListener('pointerleave', () => synth.handlePointerLeave());
|
||||||
|
|
||||||
function updateClockStatus() {
|
if (!Number.isFinite(btcPrice)) {
|
||||||
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) {
|
|
||||||
const status = document.getElementById('btc-status');
|
const status = document.getElementById('btc-status');
|
||||||
if (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>');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user