I want the color follow with the array, not to change the color every frame, Like the second code color show on the array, but it is colorMode.
I don't know how making the colorMode to be the picked color, or Picked color follow with array motion. How can I do?
https://editor.p5js.org/fruit66677788/sketches/8wiulg7m7
https://editor.p5js.org/fruit66677788/sketches/vnH3tYpJO
In order for each curve to have a consistent color from frame to frame you need to either deterministically select the same color based on the value of x, or you need to reset the random seed so that the random sequence of colors are selected in the same order each frame.
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>In setup()
seed = random(0, 9999999);
In draw() prior to the for loop:
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>