Quiero que el color siga con la matriz, no para cambiar el color en cada cuadro, como el segundo código de color que se muestra en la matriz, pero es colorMode.
No sé cómo hacer que el colorMode sea el color elegido, o el color elegido siga con el movimiento de la matriz. ¿Como lo puedo hacer?
https://editor.p5js.org/fruit66677788/sketches/8wiulg7m7
https://editor.p5js.org/fruit66677788/sketches/vnH3tYpJO
Para que cada curva tenga un color consistente de un cuadro a otro, debe seleccionar de forma determinista el mismo color en función del valor de x o debe restablecer la semilla aleatoria para que la secuencia aleatoria de colores se seleccione de la misma manera. ordenar cada cuadro.
stroke(colors[round(x - offset) % colors.length]); var colors = ["#ed3441", "#ffb03b", "#36acf5", "#ffd630", "#084e86", "#fcfeff"]; function setup() { createCanvas(500, 500); } function draw() { background(200); let offset = -width / 10; noFill(); let xStep = (height + offset * 2) / 75; for (let x = offset; x <= height - offset; x += xStep) { let num = int(1 + 1.25 * noise(x / 150, frameCount / 100)); let arr = [PI / 8]; for (let i = 0; i < num; i++) { let n = sq(sq(noise(x / 10, frameCount / 200))) * (width - offset * 75); n = max(n, 1); arr.push(n); } drawingContext.setLineDash(arr); drawingContext.lineDashOffset = x - frameCount / 10; strokeWeight(xStep / 0.8); strokeCap(ROUND); stroke(colors[round(x - offset) % colors.length]); beginShape(); for (let y = offset; y < width - offset; y += 5) { let nx = x + tan(y / 330 + x / 300) * 150 * cos(frameCount / 20) * sin(x / 300); vertex(y, nx); } endShape(); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> En setup()
seed = random(0, 9999999); En draw() antes del bucle for:
randomSeed(seed); var colors = ["#ed3441", "#ffb03b", "#36acf5", "#ffd630", "#084e86", "#fcfeff"]; let seed; function setup() { createCanvas(500, 500); seed = random(0, 9999999); } function draw() { randomSeed(seed); background(200); let offset = -width / 10; noFill(); let xStep = (height + offset * 2) / 75; for (let x = offset; x <= height - offset; x += xStep) { let num = int(1 + 1.25 * noise(x / 150, frameCount / 100)); let arr = [PI / 8]; for (let i = 0; i < num; i++) { let n = sq(sq(noise(x / 10, frameCount / 200))) * (width - offset * 75); n = max(n, 1); arr.push(n); } drawingContext.setLineDash(arr); drawingContext.lineDashOffset = x - frameCount / 10; strokeWeight(xStep / 0.8); strokeCap(ROUND); stroke(random(colors)); beginShape(); for (let y = offset; y < width - offset; y += 5) { let nx = x + tan(y / 330 + x / 300) * 150 * cos(frameCount / 20) * sin(x / 300); vertex(y, nx); } endShape(); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>