Como puede ver, cada elipse es parte de un objeto de onda y el relleno se aplica en cada fotograma una y otra vez y produce este efecto de parpadeo en todas las elipses. Quiero tomar un color aleatorio y asignarlo a cada elipse cuando se dibuja para que permanezca con ese color de relleno en lugar de definir un nuevo color en cada cuadro. Intenté mucho pero no pude lograr eso. Cualquier ayuda sería apreciada.
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>Cree una lista de unos 20 colores para cada ola. Usa color() para crear un color:
for (let i = 0; i < 5; i++) { waves[i] = new Wave(random(20, 80), random(100, 600), random(TWO_PI)); colors = []; for (let j = 0; j < 20; j++) { colors.push(color(random(255), random(255), random(255))) } waves_colors.push(colors); }Usa este color para dibujar las olas. Utilice el operador % (módulo) para calcular el resto de una división integral. Los colores se repiten cada 20 puntos:
for (let i = 0; i < 5; i++) { wave = waves[i]; colors = waves_colors[i]; for (let j = 0; j < width/10; j ++) { x = j*10; y = wave.evaluate(x); fill(colors[j % colors.length]); ellipse(x, y + height / 2, 6); } } 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 waves_colors = []; 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)); colors = []; for (let j = 0; j < 20; j++) { if (i % 2 == 1) colors.push(color(0, 0, 255, random(128,255))); else colors.push(color(random(255), random(255), random(255))) } waves_colors.push(colors); } } function draw() { background(0); noStroke(); for (let i = 0; i < 5; i++) { wave = waves[i]; colors = waves_colors[i]; for (let j = 0; j < width/10; j ++) { x = j*10; y = wave.evaluate(x); fill(colors[j % colors.length]); 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>