It's clear that each ellipse is part of a wave object, with the fill color applied on every frame causing a blinking effect. I'm trying to assign a random color to each ellipse when it's drawn, so it maintains that fill color instead of changing with each frame. Despite my efforts, I haven't been able to achieve this. Any assistance would be greatly appreciated.
class Wave {
constructor(amp, period, phase) {
this.amplitude = amp;
this.period = period;
this.phase = phase;
}
evaluate(x) {
return sin(this.phase + (TWO_PI * x) / this.period) * this.amplitude;
}
update() {
this.phase += 0.05;
}
}
let waves = [];
let y;
function setup() {
createCanvas(600, 400);
for (let i = 0; i < 5; i++) {
waves[i] = new Wave(random(20, 80), random(100, 600), random(TWO_PI));
}
}
function draw() {
background(0);
for (let x = 0; x < width; x += 10) {
for (let wave of waves) {
y = wave.evaluate(x);
noStroke();
fill(random(255), random(255), random(255));
ellipse(x, y + height / 2, 6);
}
}
for (let wave of waves) {
wave.update();
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>