p5js，如何使颜色跟随数组？

Question

我想让颜色跟着数组，而不是每一帧都改变颜色，和数组上第二个代码颜色显示一样，不过是colorMode.

我不知道如何让 colorMode 成为拾取的颜色，或者拾取的颜色跟随数组运动。我该怎么办？

https://editor.p5js.org/fruit66677788/sketches/8wiulg7m7

https://editor.p5js.org/fruit66677788/sketches/vnH3tYpJO

Answer 1

为了使每条曲线在帧与帧之间具有一致的颜色，您需要根据 x 的值确定性地 select 相同的颜色，或者您需要重置随机种子，以便随机颜色序列在每一帧中以相同的顺序 selected。

选项 1：

    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>

选项 2：

在setup()

      seed = random(0, 9999999);

在 for 循环之前的 draw() 中：

      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>

p5js，如何使颜色跟随数组？

p5js, How to make the color follow with the array?

javascript

p5.js

选项 1：

选项 2：