# Changing Colours after X iterations

**URL:** https://discourse.processing.org/t/changing-colours-after-x-iterations/17881
**Category:** Coding Questions
**Created:** [February 17, 2020, 1:40pm UTC](https://discourse.processing.org/t/changing-colours-after-x-iterations/17881 "2020-02-17T13:40:54Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![ChrisHaz3ll](https://avatars.discourse-cdn.com/v4/letter/c/b4bc9f/32.png) [@ChrisHaz3ll](https://discourse.processing.org/u/ChrisHaz3ll)
#### Post date: [February 17, 2020, 1:40pm UTC](https://discourse.processing.org/t/changing-colours-after-x-iterations/17881/1 "2020-02-17T13:40:54Z")

</div>

Hi guys,

So essentially I’m trying to figure out how to cycle through colours assigned within an array.  
I would like for every 50 frames/iterations, for the colour to change to the next one in the array (ie, 0-50 = yellow, 51-100 = lightBlue etc…)

Code below is where I’ve got with it.

How can this be done? Is a while loop even necessary/correct or are there other more appropriate ways? I’m new to Processing so apologies in advance!

Thanks

```auto
color yellow = #ede777;
color lightBlue = #49cae8;
color blue = #3a55d8;
color grey = #aaaaaa;
color darkGrey = #555555;
color brown = #664d31;
color pink = #e57797;
color burgundy = #960909;
color crimson = #e03b3b;
color violet = #d58aed;
color green = #99dd64;

int[] colors = {yellow, lightBlue, blue, grey, darkGrey, brown, pink, burgundy, crimson, violet, green};

void setup() {
  size(600, 600);
  background(#dddddd);
  translate(width/2, height/2);
  rectMode(CENTER);
  noStroke();
}

void draw() {

  int i = 0;
  while (i <= 50) {
    fill(colors[1]);
    i++;
  }
square(width/2, height/2, 100);
}

```

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [February 17, 2020, 2:48pm UTC](https://discourse.processing.org/t/changing-colours-after-x-iterations/17881/2 "2020-02-17T14:48:41Z")

</div>

Hello,

Welcome to the Processing forum.

Check out all the basic tutorials, references, etc. on the [Processing](https://processing.org/) site.

_draw()_ updates every 1/60 of a second; default _frameRate_ is 60 fps.

Your _while()_ loop is not doing anything other than selecting _LightBlue_ 51 times.

Explore these references:  
[https://processing.org/reference/frameCount.html](https://processing.org/reference/frameCount.html)  
[https://processing.org/reference/modulo.html](https://processing.org/reference/modulo.html) This operator is useful and worth the investment in learning!  
[https://processing.org/reference/frameRate\_.html](https://processing.org/reference/frameRate_.html)  
[https://processing.org/reference/Array.html](https://processing.org/reference/Array.html)  
[https://processing.org/reference/println\_.html](https://processing.org/reference/println_.html)

Example code (you will begin to understand this after reading references):

```auto
//GLV Template

void setup() 
  {
  size(200, 200);
  }

void draw() 
  {
  background(0);

  if (frameCount%10 == 0) 
    {
   // Do something! 
   // print frameCount to the console to see what this is doing.
   // Increment a counter and use that to access the element of an array.
    }
  }

```

’ 🙂 ’