p5.js：为组中的每个椭圆分配静态唯一颜色

Question

正如您所看到的，每个椭圆都是波浪对象的一部分，填充被一遍又一遍地应用到每一帧上，并在所有椭圆上产生这种闪烁效果。我想采用随机颜色并在绘制时分配给每个椭圆，以便它保留该填充颜色，而不是在每一帧定义新颜色。我尝试了很多但无法实现。任何帮助将不胜感激。

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>

Answer 1

为每个波创建一个包含大约 20 种颜色的列表。使用 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);
}

用这个颜色画波浪。使用 %（取模）运算符计算积分除法的其余部分。每 20 个点重复一次颜色：

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>

p5.js：为组中的每个椭圆分配静态唯一颜色

p5.js: Assigning a static unique colour to each ellipse in a group

javascript

p5.js