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

added osc visualizer

This commit is contained in:
Emanuel Rodriguez 2023-10-10 23:15:55 -07:00
parent 22de4dac14
commit c7c545ab0d
2 changed files with 50 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
synth.html
View File

@ -5,7 +5,6 @@
<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">
@ -48,8 +47,8 @@
</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 id = "wave1viz" class="canvas-container">
<canvas id ="wave1canvas"></canvas>
</div>
<!-- Rest of your HTML for this container... -->
</div>

103
synth.js
View File

@ -334,68 +334,61 @@ 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
);
}
}
// do the viz
const vizCanvas = document.getElementById("wave1canvas");
const ctx = vizCanvas.getContext("2d");
const analyser = synth.audioContext.createAnalyser();
analyser.fftSize = 2048;
let osc = synth.oscillators[0].osc;
osc.connect(analyser);
const bufferLength = analyser.fftSize;
const dataArray = new Uint8Array(bufferLength);
function draw() {
background("black");
const dim = min(height, width);
if (synth) {
if (synth.audioContext) {
if (analyserNode) {
analyserNode.getFloatTimeDomainData(signalData);
function draw() {
// Get the waveform data
analyser.getByteTimeDomainData(dataArray);
const signal = rmss(signalData);
const scale = 0.015;
const size = dim * scale * signal;
// Clear the canvas
ctx.clearRect(0, 0, vizCanvas.width, vizCanvas.height);
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);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, vizCanvas.width, vizCanvas.height);
// Set up the drawing parameters
ctx.lineWidth = 2;
ctx.strokeStyle = "rgb(0, 200, 100)";
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);
// Set up the glowing effect
ctx.shadowBlur = 12; // Adjust the level of glow by changing this value
ctx.shadowColor = "rgb(0, 200, 100)"; // Make sure the shadow color matches the stroke color
// Optionally, you can offset the shadow if desired
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 5;
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);
// Begin the path
ctx.beginPath();
vertex(x, y);
}
endShape();
const sliceWidth = (vizCanvas.width * 1.0) / bufferLength;
let x = 0;
for (let i = 0; i < bufferLength; i++) {
const v = dataArray[i] / 128.0;
const y = (v * vizCanvas.height) / 2;
if (i === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
}
}
}
function rmss(data) {
let rms = 0;
for (let i = 0; i < data.length; i++) {
rms += data[i] * data[i];
x += sliceWidth;
}
ctx.lineTo(vizCanvas.width, vizCanvas.height / 2);
ctx.stroke();
requestAnimationFrame(draw);
}
rms = Math.sqrt(rms / data.length);
return rms;
}
draw();
};