ergz
/
simple-synth
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

trying to add the waveform, but no luck yet

This commit is contained in:
Emanuel Rodriguez 2023-10-09 23:56:17 -07:00
parent 8111ea2daa
commit 22de4dac14
2 changed files with 80 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
synth.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
<title>simple-synth</title>
</head>
<body class="bg-gray-100 p-10 mb-5">
@ -46,6 +46,14 @@
<input id="filtervoice1" type="range" min="700" max="1500" value="1000" step="1" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<span id="filtervoice1display" class="text-sm text-gray-700 ml-2">0</span>
</div>
<div class="flex-container flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
<div class="canvas-container">
<canvas id="waveform1viz"></canvas>
</div>
<!-- Rest of your HTML for this container... -->
</div>
<button id="activateVoice1" class="bg-green-700 hover:bg-green-600 text-white font-bold text-sm py-1 px-2 rounded">On</button>
</div>

72
synth.js
View File

@ -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;
}