# A repeated color pattern

**URL:** https://discourse.processing.org/t/a-repeated-color-pattern/2928
**Category:** Coding Questions
**Created:** [August 24, 2018, 12:53pm UTC](https://discourse.processing.org/t/a-repeated-color-pattern/2928 "2018-08-24T12:53:07Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![suptoabha](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@suptoabha](https://discourse.processing.org/u/suptoabha)
#### Post date: [August 24, 2018, 12:53pm UTC](https://discourse.processing.org/t/a-repeated-color-pattern/2928/1 "2018-08-24T12:53:07Z")

</div>

I have written this code.

```auto
void setup(){
  size(800,400);
  background(0);
}
void draw(){
  cave();
  stone();
}

void cave(){
  noStroke();
  fill(160);
  rect(0,100,width,200);
}

void stone(){
  for(int i=0;i<width;i+= 30){
    stroke(0);
    fill(255,0,0);
    rect(i,100,30,30);
    rect(i,300,30,30);
    
    
  }
  
}

```

how can i make this 1st stone red, then green and then blue repeatedly? please help me with this.

---

<div class="post-metadata">

### Author: ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [August 24, 2018, 1:02pm UTC](https://discourse.processing.org/t/a-repeated-color-pattern/2928/2 "2018-08-24T13:02:28Z")

</div>

You have 2 ways of doing it.

The first one is to draw 3 bricks at a time in your `for loop` and this way you draw one red, one green and one blue.

The second way is to have a variable that keep track of the color you want and in your `for loop` you check the value of that variable and set the color accordingly. At the end of the `for loop` you would then need to change the value of the variable.

---

<div class="post-metadata">

### Author: ![suptoabha](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@suptoabha](https://discourse.processing.org/u/suptoabha)
#### Post date: [August 24, 2018, 1:22pm UTC](https://discourse.processing.org/t/a-repeated-color-pattern/2928/3 "2018-08-24T13:22:47Z")

</div>

would u plz give me an example of the second way

---

<div class="post-metadata">

### Author: ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [August 24, 2018, 1:27pm UTC](https://discourse.processing.org/t/a-repeated-color-pattern/2928/4 "2018-08-24T13:27:05Z")

</div>

There you go.  
It is a bit different than your code because I’m using the `draw()` function to simulate your `for loop` but the idea stays the same:

```auto
int col;

void setup() {
  col = 0;
  frameRate(2);
}

void draw() {
  if (col == 0) {
    background(255,0,0);
  } else if (col == 1) {
    background(0,255,0);
  } else if (col == 2) {
    background(0,0,255);
  }
  
  col++;
  if (col == 3) {
    col = 0;
  }
}

```

---

<div class="post-metadata">

### Author: ![Kayno](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kayno/32/1207_2.png) [@Kayno](https://discourse.processing.org/u/Kayno)
#### Post date: [August 24, 2018, 1:27pm UTC](https://discourse.processing.org/t/a-repeated-color-pattern/2928/5 "2018-08-24T13:27:45Z")

</div>

You want something like that ?

```auto
color c[] = new color[3];
int n=0;

void setup() {
  size(800, 400);
  background(0);
  c[0]=color(255, 0, 0); // first color
  c[1]=color(0, 255, 0); // second
  c[2]=color(0, 0, 255); // third
}

void draw() {
  cave();
  stone();
}

void cave() {
  noStroke();
  fill(160);
  rect(0,100,width,200);
}

void stone() {
  for(int i=0; i<width; i+=30){
    stroke(0);
    fill(c[n]);
    rect(i,100,30,30);
    rect(i,300,30,30);
    n++;
    if(n>2) n=0;
  }
}

```

---

<div class="post-metadata">

### Author: ![suptoabha](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@suptoabha](https://discourse.processing.org/u/suptoabha)
#### Post date: [August 24, 2018, 2:42pm UTC](https://discourse.processing.org/t/a-repeated-color-pattern/2928/6 "2018-08-24T14:42:24Z")

</div>

Thanks for ur great help