# Generating a new color for each circle

**URL:** <https://discourse.processing.org/t/generating-a-new-color-for-each-circle/13163>\
**Category:** Coding Questions\
**Created:** [August 3, 2019, 11:25pm UTC](https://discourse.processing.org/t/generating-a-new-color-for-each-circle/13163 "2019-08-03T23:25:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![epignosis567](https://avatars.discourse-cdn.com/v4/letter/e/d78d45/32.png) [@epignosis567](https://discourse.processing.org/u/epignosis567)\
**Post date:** [August 3, 2019, 11:25pm UTC](https://discourse.processing.org/t/generating-a-new-color-for-each-circle/13163/1 "2019-08-03T23:25:26Z")

</div>

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](https://editor.p5js.org/epignosis567/sketches/b8lydRI2Y)

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

  }
  

}

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [August 3, 2019, 11:41pm UTC](https://discourse.processing.org/t/generating-a-new-color-for-each-circle/13163/2 "2019-08-03T23:41:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Waboqueox](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/waboqueox/32/5643_2.png) [@Waboqueox](https://discourse.processing.org/u/Waboqueox)\
**Post date:** [August 5, 2019, 10:37am UTC](https://discourse.processing.org/t/generating-a-new-color-for-each-circle/13163/3 "2019-08-05T10:37:13Z")

</div>

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

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