How do I change the color of a rectangle once clicked?

Hello! I was trying to create many squares with different colors on them. I succeeded in doing so, but one thing I wanted to do is that once you click on a colored square, the color of that square would change into another color. For example, if the color of a square was red, once someone clicks on it, it would turn to green, and then if you click it again, it would turn to blue. I tried very hard in doing so, but somehow it didnt end up working. This is my code:

void setup(){
size(250,250);
smooth();
colorMode(HSB);
}

void draw(){
loop();
stroke(255);
fill(#A40DBC); //purple
rect(0,0,50,50); //row 1 column 1
fill(#EA132C); //red
rect(0,50,50,50); //row 2 column 1
fill(#137DEA); //blue
rect(0,100,50,50); //row 3 column 1
fill(#E59DE4); //pink
rect(0,150,50,50); //row 4 column 1
fill(#14C126); //green
rect(0,200,50,50); //row 5 column 1

fill(#137DEA);
rect(50,0,50,50); //row 1 column 2
fill(#E59DE4);
rect(50,50,50,50); //row 2 column 2
fill(#14C126);
rect(50,100,50,50); //row 3 column 2
fill(#A40DBC);
rect(50,150,50,50); //row 4 column 2
fill(#EA132C);
rect(50,200,50,50); //row 5 column 2

fill(#14C126);
rect(100,0,50,50); //row 1 column 3
fill(#A40DBC);
rect(100,50,50,50); //row 2 column 3
fill(#EA132C);
rect(100,100,50,50); //row 3 column 3
fill(#137DEA);
rect(100,150,50,50); //row 4 column 3
fill(#E59DE4);
rect(100,200,50,50); //row 5 column 3

fill(#EA132C);
rect(150,0,50,50); //row 1 column 4
fill(#137DEA);
rect(150,50,50,50); //row 2 column 4
fill(#E59DE4);
rect(150,100,50,50); //row 3 column 4
fill(#14C126);
rect(150,150,50,50); //row 4 column 4
fill(#A40DBC);
rect(150,200,50,50); //row 5 column 4

fill(#E59DE4);
rect(200,0,50,50); //row 1 column 5
fill(#14C126);
rect(200,50,50,50); //row 2 column 5
fill(#A40DBC);
rect(200,100,50,50); //row 3 column 5
fill(#EA132C);
rect(200,150,50,50); //row 4 column 5
fill(#137DEA);
rect(200,200,50,50); //row 5 column 5

}

Thank you very much for your help!

You get a pineapple. :pineapple: You have posted your code, but it is not formatted properly. Use the </> button to format it. You have asked a question on how to do something, but the code you’ve posted doesn’t seem like you’ve tried to make it happen. It does, however, give us enough information to gauge your skill level, which is the most helpful.

It must have taken you a long time to write that code. Just looking at it makes my hands hurt. Would you be surprised if I said there was an easier way of doing the same thing with less code?

The first new thing you are going to need to learn about are loops. Loos let us do the same thing several times. Since you are drawing 5 rows of 5 squares, we will need two loops - one to do 5 rows, and one to do 5 squares in a row:

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

void draw(){
  for( int row = 0; row < 5; row++ ){ // Do five rows.
    // In each row,
    for( int square = 0; square < 5; square++ ){ // Do five squares.
      // For each square, draw it.
      rect( 50 * square, 50 * row, 50, 50 );
      // Notice the position depends on which square this is
      // and it also depends on which row that square is in!
    }
  }
}

Ignore the colors for now. Just realize that there are 25 squares, and only three lines of code to do them all.


Now we are going to do some colors. But before we do that, we are going to number the colors we are using. Purple will be 0. Red will be 1. And so on in that manner. To make sure that the colors work, we will color the squares in each row. The first square will be the first color. And so on:

color[] colors = new color[5];

void setup(){
  size(250,250);
  colorMode(HSB);
  colors[0] = color(#A40DBC);
  colors[1] = color(#EA132C);
  colors[2] = color(#137DEA);
  colors[3] = color(#E59DE4);
  colors[4] = color(#14C126);
}

void draw(){
  for( int row = 0; row < 5; row++ ){ // Do five rows.
    // In each row,
    for( int square = 0; square < 5; square++ ){ // Do five squares.
      // The color to use will correspond to this square's position in the row.
      // So the first square in the row will be the first color in the colors array,
      // the second square in the row will be the second color in the colors array,
      /// and so on.
      fill( colors[ square ] );    
      // For each square, draw it.
      rect( 50 * square, 50 * row, 50, 50 );
      // Notice the position depends on which square this is
      // and it also depends on which row that square is in!
    }
  }
}

This is not the only way we could color them! We could also base the color to use on which ROW the square is in:

color[] colors = new color[5];

void setup(){
  size(250,250);
  colorMode(HSB);
  colors[0] = color(#A40DBC);
  colors[1] = color(#EA132C);
  colors[2] = color(#137DEA);
  colors[3] = color(#E59DE4);
  colors[4] = color(#14C126);
}

void draw(){
  for( int row = 0; row < 5; row++ ){ // Do five rows.
    // In each row,
    for( int square = 0; square < 5; square++ ){ // Do five squares.
      // The color to use will correspond to this square's row.
      // So the first row will all  be the first color in the colors array,
      // the second row will be the second color in the colors array,
      /// and so on.
      fill( colors[ row ] );    
      // For each square, draw it.
      rect( 50 * square, 50 * row, 50, 50 );
      // Notice the position depends on which square this is
      // and it also depends on which row that square is in!
    }
  }
}

Notice that this is easy to do because the array of colors let’s us pick a color to do simply by specifying a number - the index into our array of colors that we want to use.


Next, we want to do the custom pattern that you had before. What we will need is a 2D array of indexs - one for each square in the 2D grid of squares - that represent which color to use for a square in that position. This is more confusing to say that it is to show you. Look:

color[] colors = new color[5];


// Notice that 0's are the purple squares, 1's are the blue squares, and so on.
int[][] indexes = {
  { 0, 1, 2, 3, 4 }, 
  { 3, 4, 0, 1, 2 }, 
  { 1, 2, 3, 4, 0 }, 
  { 4, 0, 1, 2, 3 }, 
  { 2, 3, 4, 0, 1 }
};

void setup() {
  size(250, 250);
  colorMode(HSB);
  stroke(255);
  colors[0] = color(#A40DBC);
  colors[1] = color(#137DEA);
  colors[2] = color(#14C126);
  colors[3] = color(#EA132C);
  colors[4] = color(#E59DE4);
}

void draw() {
  for ( int row = 0; row < 5; row++ ) { // Do five rows.
    // In each row,
    for ( int square = 0; square < 5; square++ ) { // Do five squares.
      // The color to use will correspond to this square's row.
      // So the first row will all  be the first color in the colors array,
      // the second row will be the second color in the colors array,
      /// and so on.
      fill( colors[ indexes[row][square] ] );    
      // For each square, draw it.
      rect( 50 * square, 50 * row, 50, 50 );
      // Notice the position depends on which square this is
      // and it also depends on which row that square is in!
    }
  }
}

So now it looks… exactly the same as what your code did. So why did we even bother doing this?!?

This is why: It lets us add the click-to-change-color logic very easily. Since the color for a square now only depends on the index stored at that position in our 2D array of indexes, if we change the value in one of those locations, we also change which color the square in that position will be drawn in.

color[] colors = new color[5];
int[][] indexes = {
  { 0, 1, 2, 3, 4 }, 
  { 3, 4, 0, 1, 2 }, 
  { 1, 2, 3, 4, 0 }, 
  { 4, 0, 1, 2, 3 }, 
  { 2, 3, 4, 0, 1 }
};

void setup() {
  size(250, 250);
  colorMode(HSB);
  stroke(255);
  colors[0] = color(#A40DBC);
  colors[1] = color(#137DEA);
  colors[2] = color(#14C126);
  colors[3] = color(#EA132C);
  colors[4] = color(#E59DE4);
}

void draw() {
  for ( int row = 0; row < 5; row++ ) {
    for ( int square = 0; square < 5; square++ ) {
      fill( colors[ indexes[row][square] ] );    
      rect( 50 * square, 50 * row, 50, 50 );
    }
  }
}

void mousePressed(){
  // Find where the mouse was clicked.
  int x = mouseX / 50;
  int y = mouseY / 50;
  // If that is a valid position,
  if( x >= 0 && x < 5 && y >= 0 && y < 5 ){
    // Go to the next color in this position.
    indexes[y][x]++;
    // Loop around to the first color if needed.
    indexes[y][x]%=colors.length;
  }
}
1 Like

that’s awesome! I have a question though. What if we wanted to do the same thing but just with one dimensional array instead of multi dimensional. How will we make the code to change colors using the one dimensional array which will determine the rows and columns. thanks in advance!