You get a 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?!?