After experimenting with JavaScript, I've managed to create a visually appealing sine wave animation but it's causing performance issues due to the high number of vectors being generated.
My current setup involves utilizing the p5js library. Below is a snippet of my progress so far. Are there any ways to optimize this for better performance without compromising on detail and smoothness?
function setup () {
let size = Math.min(windowWidth, windowHeight) * 0.96;
size = Math.floor(size);
createCanvas(windowWidth, windowHeight);
noiseSeed(Math.random() * 50);
frameRate(25);
noFill();
}
function windowResized () {
let size = Math.min(windowWidth, windowHeight);
size = Math.floor(size);
resizeCanvas(windowWidth, windowHeight);
noiseSeed(Math.random() * 50);
frameRate(25);
draw();
}
function draw () {
clear();
beginShape();
const _o = millis() * 0.0005;
const amount = 20;
const ampl = (630 / (windowHeight) * 100) + 120;
for(var k=0; k<amount; k++) {
beginShape();
const offset = (1 - k / amount) * 3;
const detail = 10;
for(var i=0; i<(width+detail); i+=detail) {
let y = height * 0.5;
y += Math.sin(i * 0.01 - _o + (k / 50) + offset) * ampl;
y += Math.sin(i * 0.005 - _o + 5 + offset + noise(50)) * ampl;
console.log(i,y);
vertex(i, y);
}
stroke(255, 255, 255, (k/(amount - 1) * 100));
frameRate(25);
endShape();
}
}
Codepen example: https://codepen.io/craiell/pen/zYGbLKm
Currently, I'm relying on the P5js library for this project. However, I am willing to explore other libraries or methods for optimization. Any suggestions or tips would be highly valued.