 # Generating a new color for each circle

Hi. I have been following a tutorial and I came up with the following code. However, it’s not doing what I wanted. I would expect that everything individual circle would change a different color, but instead they’re all changing to the same color. Any idea why?
https://editor.p5js.org/epignosis567/sketches/b8lydRI2Y

``````var xOffset = 0;
var yOffset = 0;
var zOffset = 0;

function setup()
{
createCanvas(400, 400);
frameRate(24);
}

function draw()
{
background(255);

var r = map(noise(xOffset),0,1,1,255);
var g = map(noise(yOffset),0,1,1,255);
var b = map(noise(zOffset),0,1,1,255);

xOffset+=0.01;
yOffset+=0.02;
zOffset+=0.03;

var diameter = 50;

for
(
var counter1=0;           //init var value
counter1<width/diameter;  //if
counter1=counter1+1       //then
)
{
for
(
var counter2=0;
counter2<height/diameter;
counter2=counter2+1
)
{
fill(r,g,b)
ellipse
(
counter1*diameter+diameter/2,
counter2*diameter+diameter/2,
diameter*noise(frameCount/10+counter1+counter2),
diameter*noise(frameCount/10+counter2+counter1)
)
}

}

}
``````

You are setting the fill color to the same thing for every circle.

By the time you get to the for loops that draw the circles, the values of `r`, `g`, and `b` are already determined, and do not change!

You should move the code that determines & changes these values inside your for loops, thus generating a new color for each circle.

Increasing the offsets inside the for, they will get different colors.

``````         fill(r,g,b);
//  fill(map(noise(xOffset),0,1,1,255),
//       map(noise(yOffset),0,1,1,255),
//      map(noise(zOffset),0,1,1,255))
ellipse
(
counter1*diameter+diameter/2,
counter2*diameter+diameter/2,
diameter*noise(frameCount/10+counter1+counter2),
diameter*noise(frameCount/10+counter2+counter1)
)

xOffset+=0.01;
yOffset+=0.02;
zOffset+=0.03;
``````

Mmmm, but I think this is not a question about the function noise 