# How to fill indivdual shapes with different colours in a for loop

**URL:** <https://discourse.processing.org/t/how-to-fill-indivdual-shapes-with-different-colours-in-a-for-loop/34271>\
**Category:** Beginners\
**Created:** [December 23, 2021, 11:27pm UTC](https://discourse.processing.org/t/how-to-fill-indivdual-shapes-with-different-colours-in-a-for-loop/34271 "2021-12-23T23:27:00Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![UltimateDoug9](https://avatars.discourse-cdn.com/v4/letter/u/8491ac/32.png) [@UltimateDoug9](https://discourse.processing.org/u/UltimateDoug9)\
**Post date:** [December 23, 2021, 11:27pm UTC](https://discourse.processing.org/t/how-to-fill-indivdual-shapes-with-different-colours-in-a-for-loop/34271/1 "2021-12-23T23:27:01Z")

</div>

I’m making a drawing program and I want a sidebar that shows the colour options. How would I make each rectangle a different colour if there in a for loop?

for (int j = 1; j\<= 3; j++)  
{  
for (int i = 1; i\<= 2; i++)  
{  
rect (i_40-28, j_70+30, 35, 35);  
}  
}

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 23, 2021, 11:39pm UTC](https://discourse.processing.org/t/how-to-fill-indivdual-shapes-with-different-colours-in-a-for-loop/34271/2 "2021-12-23T23:39:10Z")

</div>

You can make a array of colors and then in the for loop increment an int variable as an index for it

**example 1**

```auto

color[] colorList = {

  color(0), // black 
  color(255), // white 

  // Red,Green,Blue 
  color(255, 0, 0), 
  color(0, 255, 0), 
  color(0, 0, 255), 

  // colors inbetween 1 (with 55)
  color(55, 255, 255), 
  color(255, 55, 255), 
  color(255, 255, 55), 

  // colors inbetween 2 (with 0)
  color(0, 255, 255), 
  color(255, 0, 255), 
  color(255, 255, 0)
};

void setup() {
  size(1100, 600);
  background(111);
}//func 

void draw() {

  final int sizeRect=70; // size of one rectangle 
  int x=20; // x position 

  // loop over all colors
  for (color currentColor : colorList) {
    // display rect with that color
    fill(currentColor); 
    rect(x, 100, sizeRect, sizeRect);

    // increment x position 
    x+=sizeRect+10;
  }//for
}//func 
//

```

**and for your code**

```auto

color[] colorList = {

  color(0), // black 
  color(255), // white 

  // Red,Green,Blue 
  color(255, 0, 0), 
  color(0, 255, 0), 
  color(0, 0, 255), 

  // colors inbetween 1 (with 55)
  color(55, 255, 255), 
  color(255, 55, 255), 
  color(255, 255, 55), 

  // colors inbetween 2 (with 0)
  color(0, 255, 255), 
  color(255, 0, 255), 
  color(255, 255, 0)
};

void setup() {
  size(1100, 600);
  background(111);
}//func 

void draw() {

  int k=0; 

  // loop over all colors
  for (int j = 1; j <= 3; j++)
  {
    for (int i = 1; i <= 2; i++)
    {
      fill(colorList[k%11]); 
      rect (i*40-28, j*70+30, 
        35, 35);
      k++;
    }
  }
}//func 
//

```

---

<div class="post-metadata">

**Author:** ![rapatski](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rapatski/32/5164_2.png) [@rapatski](https://discourse.processing.org/u/rapatski)\
**Post date:** [December 25, 2021, 11:38am UTC](https://discourse.processing.org/t/how-to-fill-indivdual-shapes-with-different-colours-in-a-for-loop/34271/3 "2021-12-25T11:38:31Z")

</div>

Hi Doug,

Indeed. What @Chrisir said probably makes the most sense. However, because it is Christmas, and I was looking for something to do, here’s an example that generates swatch colours off the HSB wheel:

```auto

int numSwatchesX = 12;
int numSwatchesY = 3;

int marginX = 50;
int marginY = 50;

int swatchSize = 40;
int swatchSpacing = 5;

void setup()
{
  size(800, 800);

  for(int i = 0; i < numSwatchesX; i++)
  {
    for(int j = 0; j < numSwatchesY; j++)
    {
      float alignBottom = height - (marginY + (swatchSize+swatchSpacing) * numSwatchesY);
      
      float swatchX = marginX + i * (swatchSize+swatchSpacing);
      float swatchY = alignBottom + j * (swatchSize+swatchSpacing);
      
      colorMode(HSB, 360, 255, 255);
      fill(360.f / numSwatchesX * i, 255, 255 - j * (255 / numSwatchesY));
      rect(swatchX, swatchY, swatchSize, swatchSize);
    }
  }

}
  

```

---

<div class="post-metadata">

**Author:** ![UltimateDoug9](https://avatars.discourse-cdn.com/v4/letter/u/8491ac/32.png) [@UltimateDoug9](https://discourse.processing.org/u/UltimateDoug9)\
**Post date:** [December 26, 2021, 11:11pm UTC](https://discourse.processing.org/t/how-to-fill-indivdual-shapes-with-different-colours-in-a-for-loop/34271/4 "2021-12-26T23:11:32Z")

</div>

thank you very much. Happy holidays

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 26, 2021, 11:12pm UTC](https://discourse.processing.org/t/how-to-fill-indivdual-shapes-with-different-colours-in-a-for-loop/34271/5 "2021-12-26T23:12:28Z")

</div>

I added 2 examples to my initial post

Happy holidays!