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

As you can see, each ellipse is part of a wave object and the fill is getting applied on each frame over and over and giving this blinking effect on all ellipses. I want to take a random colour and assign to each ellipse when it is drawn so that it remains with that fill colour instead of defining a new colour at each frame. I tried a lot but couldn't achieve that. Any help would be appreciated.

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>

CodePudding user response：

Create a list of about 20 colors for each wave. Use color() to create a 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);
}

Use this color to draw the waves. Use the % (modulo) operator to compute the rest of an integra division. The colors are repeated after every 20 points:

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>