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 name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> <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> <title>simple-synth</title>
</head> </head>
<body class="bg-gray-100 p-10 mb-5"> <body class="bg-gray-100 p-10 mb-5">
@ -48,8 +47,8 @@
</div> </div>
<div class="flex-container flex-grow border-2 border-gray-800 rounded-md p-4 m-4"> <div class="flex-container flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
<div class="canvas-container"> <div id = "wave1viz" class="canvas-container">
<canvas id="waveform1viz"></canvas> <canvas id ="wave1canvas"></canvas>
</div> </div>
<!-- Rest of your HTML for this container... --> <!-- Rest of your HTML for this container... -->
</div> </div>

103
synth.js
View File

@ -334,68 +334,61 @@ window.onload = function () {
} }
}); });
}); });
};
function setup() { // do the viz
let wave1Canvas = document.getElementById("waveform1viz"); const vizCanvas = document.getElementById("wave1canvas");
if (synth) { const ctx = vizCanvas.getContext("2d");
analyserNode = synth.audioContext.createAnalyser(); const analyser = synth.audioContext.createAnalyser();
analyserNode.smoothingTimeConstant = 1; analyser.fftSize = 2048;
signalData = new Float32Array(analyserNode.fftSize); let osc = synth.oscillators[0].osc;
synth.oscillators[0].osc.connect(analyserNode); osc.connect(analyser);
canvas1 = createCanvas( const bufferLength = analyser.fftSize;
wave1Canvas.clientWidth, const dataArray = new Uint8Array(bufferLength);
wave1Canvas.clientHeight,
wave1Canvas
);
}
}
function draw() { function draw() {
background("black"); // Get the waveform data
const dim = min(height, width); analyser.getByteTimeDomainData(dataArray);
if (synth) {
if (synth.audioContext) {
if (analyserNode) {
analyserNode.getFloatTimeDomainData(signalData);
const signal = rmss(signalData); // Clear the canvas
const scale = 0.015; ctx.clearRect(0, 0, vizCanvas.width, vizCanvas.height);
const size = dim * scale * signal;
const redOffset = map(signal, 0, 0.5, -50, 200); ctx.fillStyle = "black";
const blueOffset = map(signal, 0, 0.5, 255, -30); ctx.fillRect(0, 0, vizCanvas.width, vizCanvas.height);
const fillAlpha = map(signal, 0, 0.5, 0, 200); // Set up the drawing parameters
ctx.lineWidth = 2;
ctx.strokeStyle = "rgb(0, 200, 100)";
stroke(Math.min(50 + redOffset, 256), 10, 0 + blueOffset); // Set up the glowing effect
fill(Math.min(50 + redOffset, 256), 10, 0 + blueOffset, fillAlpha); ctx.shadowBlur = 12; // Adjust the level of glow by changing this value
// noFill(); ctx.shadowColor = "rgb(0, 200, 100)"; // Make sure the shadow color matches the stroke color
strokeWeight(10); // Optionally, you can offset the shadow if desired
// circle(width / 2, height / 2, size); ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 5;
let numPoints = 100; // Begin the path
let radius = 100; ctx.beginPath();
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); const sliceWidth = (vizCanvas.width * 1.0) / bufferLength;
} let x = 0;
endShape();
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) { x += sliceWidth;
let rms = 0; }
for (let i = 0; i < data.length; i++) {
rms += data[i] * data[i]; ctx.lineTo(vizCanvas.width, vizCanvas.height / 2);
ctx.stroke();
requestAnimationFrame(draw);
} }
rms = Math.sqrt(rms / data.length);
return rms; draw();
} };