From 22de4dac14c772f1a989d7824bfe5698bbb29245 Mon Sep 17 00:00:00 2001 From: ergz Date: Mon, 9 Oct 2023 23:56:17 -0700 Subject: [PATCH] trying to add the waveform, but no luck yet --- synth.html | 10 +++++++- synth.js | 72 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 80 insertions(+), 2 deletions(-) diff --git a/synth.html b/synth.html index 70c6818..b246fc9 100644 --- a/synth.html +++ b/synth.html @@ -5,7 +5,7 @@ - + simple-synth @@ -46,6 +46,14 @@ 0 + +
+
+ +
+ +
+ diff --git a/synth.js b/synth.js index e7dc24c..eb812e7 100644 --- a/synth.js +++ b/synth.js @@ -1,3 +1,7 @@ +let canvas; +let analyserNode; +let signalData; + function noteToHz(note) { switch (note) { case "C": @@ -119,6 +123,8 @@ class Synth { } } +let synth = new Synth(); + function updateFrequency( event, synth, @@ -197,8 +203,8 @@ function setupOctaveControls(voiceIndex, synth) { }); } +// onload ------------------------------------------------------------------ window.onload = function () { - let synth = new Synth(); // start button document @@ -329,3 +335,67 @@ window.onload = function () { }); }); }; + +function setup() { + let wave1Canvas = document.getElementById("waveform1viz"); + if (synth) { + analyserNode = synth.audioContext.createAnalyser(); + analyserNode.smoothingTimeConstant = 1; + signalData = new Float32Array(analyserNode.fftSize); + synth.oscillators[0].osc.connect(analyserNode); + canvas1 = createCanvas( + wave1Canvas.clientWidth, + wave1Canvas.clientHeight, + wave1Canvas + ); + } +} + +function draw() { + background("black"); + const dim = min(height, width); + if (synth) { + if (synth.audioContext) { + if (analyserNode) { + analyserNode.getFloatTimeDomainData(signalData); + + const signal = rmss(signalData); + const scale = 0.015; + const size = dim * scale * signal; + + const redOffset = map(signal, 0, 0.5, -50, 200); + const blueOffset = map(signal, 0, 0.5, 255, -30); + const fillAlpha = map(signal, 0, 0.5, 0, 200); + + stroke(Math.min(50 + redOffset, 256), 10, 0 + blueOffset); + fill(Math.min(50 + redOffset, 256), 10, 0 + blueOffset, fillAlpha); + // noFill(); + strokeWeight(10); + // circle(width / 2, height / 2, size); + + let numPoints = 100; + let radius = 100; + let glitchMagnitude = 150; + beginShape(POINTS); + for (let i = 0; i <= numPoints; i++) { + let angle = (TWO_PI / numPoints) * i; + let r = radius + (size / 2) * glitchMagnitude + Math.random() * 10; + let x = width / 2 + r * cos(angle); + let y = height / 2 + r * sin(angle); + + vertex(x, y); + } + endShape(); + } + } + } +} + +function rmss(data) { + let rms = 0; + for (let i = 0; i < data.length; i++) { + rms += data[i] * data[i]; + } + rms = Math.sqrt(rms / data.length); + return rms; +}