Take a look at my work in progress on jsfiddle:
https://jsfiddle.net/vzrandom/fkho6grf/8/
I'm experimenting with simplex-noise.js and dat.GUI to add movement to particles. Every 5 seconds, a simulated click occurs on the canvas triggering the start of a new animation. However, I'm facing an issue where the animation begins very abruptly. I'm looking for a way to smoothly fade in the particles upon each click.
Although it may seem like a simple problem, I'm struggling to figure out how to achieve a gradual fade in effect specifically for the elements within the canvas, not the entire canvas itself.
If you're interested in the full code, you can find it on jsfiddle. Here's the snippet of code responsible for handling the click event:
function onCanvasClick(e) {
context.save();
context.globalAlpha = 1;
context.fillStyle = Configs.backgroundColor;
context.fillRect(0, 0, screenWidth, screenHeight);
context.restore();
simplexNoise = new SimplexNoise();
}