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

## Issue

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>``

## Solution

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>``

Answered By – Rabbid76

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0