Code for cycling through specified colour values

Processing Coding Questions
1

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

2

You can also make an array of colors and store your colors therein:

color[] listCol = {

color (234,111,7),
…
};

3

thank you, i dont understand how to use this Chrisir. is there some code missing?

4

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++;

5

Hello,

Processing resources are here:

An array of colors:

:)

6

thank you, I will look into arrays,

7 

//


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++;
}
1 Like
8

Building off of Chrisir, you would then just need to reset the index once you’ve gone through the array to make it loop.

9

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.

10

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

11

For my old Sketch above

HERE

//

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.

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++;
}
12

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.

1 Like