Generating a new color for each circle

p5.js Coding Questions
1

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)
        )
       }

  }
  

}
2

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.

3

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 :sweat_smile: