# Code for cycling through specified colour values
**URL:** https://discourse.processing.org/t/code-for-cycling-through-specified-colour-values/35418
**Category:** Coding Questions
**Created:** [February 24, 2022, 10:53am UTC](https://discourse.processing.org/t/code-for-cycling-through-specified-colour-values/35418 "2022-02-24T10:53:28Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@zerohstudio](https://discourse.processing.org/u/zerohstudio)
#### Post date: [February 24, 2022, 10:53am UTC](https://discourse.processing.org/t/code-for-cycling-through-specified-colour-values/35418/1 "2022-02-24T10:53:28Z")
Hello,
I am new to Processing and my first personal challenge is to write a small program that cycles through 50 specific colour values and then loops. I managed to write something that displays and changes colour from other peoples code but I have no control over the colour values. thank you
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [February 24, 2022, 11:36am UTC](https://discourse.processing.org/t/code-for-cycling-through-specified-colour-values/35418/2 "2022-02-24T11:36:38Z")
You can also make an array of colors and store your colors therein:
color[] listCol = {
color (234,111,7),
…
};
---
### Author:  [@zerohstudio](https://discourse.processing.org/u/zerohstudio)
#### Post date: [February 24, 2022, 11:42am UTC](https://discourse.processing.org/t/code-for-cycling-through-specified-colour-values/35418/3 "2022-02-24T11:42:12Z")
> [@Chrisir](#):
>
> color listCol = {
>
> color (234,111,7),
thank you, i dont understand how to use this Chrisir. is there some code missing?
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [February 24, 2022, 11:46am UTC](https://discourse.processing.org/t/code-for-cycling-through-specified-colour-values/35418/4 "2022-02-24T11:46:41Z")
Read the tutorial on array
Have the code above before setup ()
in draw() say fill(listCol[col\_i]);
col\_i is the index for the array
col\_i++;
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [February 24, 2022, 12:52pm UTC](https://discourse.processing.org/t/code-for-cycling-through-specified-colour-values/35418/5 "2022-02-24T12:52:20Z")
Hello,
Processing resources are here:
> **[Welcome to Processing!](https://processing.org/)**
>
> Processing is a flexible software sketchbook and a language for learning how to code. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology…
An array of colors:
> [@Declare and use array of colors](https://discourse.processing.org/t/declare-and-use-array-of-colors/30785/3):
>
> “Wonder is the beginning of wisdom.” - Socrates The Processing website has resources (tutorials, references and examples) here: [https://processing.org/](https://processing.org/) The fill() function accepts: Reference for the color datatype: [color \ Language (API) \ Processing 3+](https://www.processing.org/reference/color_datatype.html) Example: color c = #FF00FF; //Fuchsia color[] col = { color(255, 0, 0), // Red 0xFF00FF00, // Green #0000FF, // Blue c };slight_smile
`:)`
---
### Author:  [@zerohstudio](https://discourse.processing.org/u/zerohstudio)
#### Post date: [February 24, 2022, 3:14pm UTC](https://discourse.processing.org/t/code-for-cycling-through-specified-colour-values/35418/6 "2022-02-24T15:14:06Z")
thank you, I will look into arrays,
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [February 24, 2022, 3:25pm UTC](https://discourse.processing.org/t/code-for-cycling-through-specified-colour-values/35418/7 "2022-02-24T15:25:12Z")
```auto
//
color c = #FF00FF; //Fuchsia
color[] listCol = {
color(255, 0, 0), // Red
0xFF00FF00, // Green
#0000FF, // Blue
c
};
int index;
void setup() {
size(600, 400);
}
void draw() {
background(245);
textSize(18);
fill(listCol[index]);
stroke(0);
text("<- click mouse", 150, 360);
}
void mousePressed() {
index++;
}
```
---
### Author:  [@hsm](https://discourse.processing.org/u/hsm)
#### Post date: [February 28, 2022, 9:12am UTC](https://discourse.processing.org/t/code-for-cycling-through-specified-colour-values/35418/8 "2022-02-28T09:12:55Z")
Building off of Chrisir, you would then just need to reset the index once you’ve gone through the array to make it loop.
---
### Author:  [@zerohstudio](https://discourse.processing.org/u/zerohstudio)
#### Post date: [February 28, 2022, 9:57am UTC](https://discourse.processing.org/t/code-for-cycling-through-specified-colour-values/35418/9 "2022-02-28T09:57:36Z")
Thank you both.
the code does change the colour but it creashes when i run it.
I teamed up with someone to create this:
String colors[] = {
“edcf9e”,
“f5c988”,
“f7c16e”,
“f8b75b”,
“f8a723”,
“ffab00”,
“ffc663”,
“ffc27a”,
“ffb765”,
“ff9a00”,
“f69426”,
“f58729”,
“ef7b30”,
“f7995f”,
“fba875”,
“f9b58d”,
“f3c2a1”,
“ecd0b9”,
“fde2cf”,
“f7e9dd”,
“e5d7cc”,
“e2dbd9”,
“F1E9E0”,
“eeefe7”,
“f4e7b3”,
“ebf1e5”,
“e1e2d3”,
“d8eee4”,
“e5efeb”,
“e2edec”,
“d2dedd”,
“b2c4b5”,
“9ebfa4”,
“83b693”,
“6bb283”,
“4da772”,
“008346”,
“aed09c”,
“a4d18c”,
“93c874”,
“69a048”,
“119d5e”,
“70c88a”,
“88ce9d”,
“9fd2aa”,
“94d4bd”,
“a2e6cd”,
“bce9d7”,
“97d3b3”,
“79cca6”
};
int width, height, colorIndex = 0;
void setup() {
width = 633;
height = 1266;
size(633, 1266);
background(0);
smooth();
noStroke();
println(“There are “+colors.length+” colors.”);
}
void draw() {
// The box height and with
int boxWidth = 633, boxHeight = 1266;
// Transform the string hexadecimal to int
color c = unhex(colors[colorIndex++%colors.length]);
fill((c \>\> 16) & 0xFF, (c \>\> 8) & 0xFF, c & 0xFF);
pushMatrix();
// Draw the rectangle in the middle of the screen
rect((width - boxWidth) / 2, (height- boxHeight) / 2, boxWidth, boxHeight);
popMatrix();
// Wait for 2 seconds
delay(2000);
}
which works well but i do want to explore having a version where you have to click the mouse to get the colour to change but im not that advanced yet.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [February 28, 2022, 10:10am UTC](https://discourse.processing.org/t/code-for-cycling-through-specified-colour-values/35418/10 "2022-02-28T10:10:15Z")
> [@zerohstudio](#):
>
> but it creashes when i run it.
That’s true
I left that to you. Why haven’t you fixed it? This is what programming is about.
It works but then index is too high or something
Use `if` to catch it
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [February 28, 2022, 11:14am UTC](https://discourse.processing.org/t/code-for-cycling-through-specified-colour-values/35418/11 "2022-02-28T11:14:08Z")
**For my old Sketch above**
> [@hsm](#):
>
> Building off of Chrisir, you would then just need to reset the index once you’ve gone through the array to make it loop.
HERE
```auto
//
color c = #FF00FF; //Fuchsia
color[] listCol = {
color(255, 0, 0), // Red
0xFF00FF00, // Green
#0000FF, // Blue
c
};
int index;
void setup() {
size(600, 400);
}
void draw() {
background(245);
textSize(18);
fill(listCol[index]);
stroke(0);
text("<- click mouse", 150, 360);
}
void mousePressed() {
index++;
if (index>=listCol.length)
index=0;
}
```
* * *
**AND with your colors:**
see function `mousePressed()`.
- In the Sketch above I reset the index when it’s too big (using `if()` in `mousePressed()`).
- In the Sketch below this is not necessary because we say: `colorIndex%colors.length` to keep colorIndex within range.
you can store hex data using `#` and use data type color then.
```auto
color[] colors = {
#edcf9e,
#f5c988,
#f7c16e,
#f8b75b,
#f8a723,
#ffab00,
#ffc663,
#ffc27a,
#ffb765,
#ff9a00,
#f69426,
#f58729,
#ef7b30,
#f7995f,
#fba875,
#f9b58d,
#f3c2a1,
#ecd0b9,
#fde2cf,
#f7e9dd,
#e5d7cc,
#e2dbd9,
#F1E9E0,
#eeefe7,
#f4e7b3,
#ebf1e5,
#e1e2d3,
#d8eee4,
#e5efeb,
#e2edec,
#d2dedd,
#b2c4b5,
#9ebfa4,
#83b693,
#6bb283,
#4da772,
#008346,
#aed09c,
#a4d18c,
#93c874,
#69a048,
#119d5e,
#70c88a,
#88ce9d,
#9fd2aa,
#94d4bd,
#a2e6cd,
#bce9d7,
#97d3b3,
#79cca6
};
int colorIndex = 0;
void setup() {
size(633, 1266);
background(0);
smooth();
noStroke();
println("There are "+colors.length+" colors.");
}
void draw() {
// The box height and with
int boxWidth = width, boxHeight = height;
fill(colors[colorIndex%colors.length]);
// Draw the rectangle in the middle of the screen
rect((width - boxWidth) / 2, (height- boxHeight) / 2,
boxWidth, boxHeight);
}
void mousePressed() {
colorIndex++;
}
```
---
### Author:  [@zerohstudio](https://discourse.processing.org/u/zerohstudio)
#### Post date: [February 28, 2022, 12:57pm UTC](https://discourse.processing.org/t/code-for-cycling-through-specified-colour-values/35418/12 "2022-02-28T12:57:53Z")
thank you so much, and for the // notes that you left.
i am on a steep learning curve and this has really helped me thank you.