# Making a Palette using for loops and arrays \[COMPLICATED\]

**URL:** <https://discourse.processing.org/t/making-a-palette-using-for-loops-and-arrays-complicated/15475>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [November 14, 2019, 1:36am UTC](https://discourse.processing.org/t/making-a-palette-using-for-loops-and-arrays-complicated/15475 "2019-11-14T01:36:28Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![IsaiahZ](https://avatars.discourse-cdn.com/v4/letter/i/8c91f0/32.png) [@IsaiahZ](https://discourse.processing.org/u/IsaiahZ)\
**Post date:** [November 14, 2019, 1:36am UTC](https://discourse.processing.org/t/making-a-palette-using-for-loops-and-arrays-complicated/15475/1 "2019-11-14T01:36:29Z")

</div>

So I am making a palette and am trying to learn for loops(nested loops) and arrays. I am having difficulty understanding the mechanics of them as well as how I am to implement them to this project.

I will explain first what I am trying to do.  
I need to draw a palette with 7 colors or more. Then draw an empty grid with circles covering each row and column (will explain later). I need to draw an identical grid next to the empty one however, instead of being empty I need each individual rectangle to have a random color out of the 7 colors I have chosen. This is because I want to program that the goal is to match the empty grid with that colored grid.  
I want to be able to, when I click on a rectangle, to fill that rectangle with whatever color I chose from the palette. And if I select a color and then a circle or multiple circles, I want to color in those entire rows or columns with that color. I also need a counter at the bottom which counts how many moves it takes me to successfully replicate the grid next to it.

As of now I need help turning my many lines of rect and ellipse code into for loops to make it better and help on how to code to color a square or row I want colored and also to make that second grid with the filled in random colors. I know this is a lot but I am stumped and confused.

I right now have it that when the mouse selects a color it just draws a line of the color it has selected as well as a lot of lines of code that I need to turn into for loops. Whoever has read this far and wants to help, I sincerely thank you for your services. Here’s my code so far:

```auto
final int PALETTE_HEIGHT = 30; //The height of the palette at the bottom
final int PALETTE_WIDTH = 30; //The width of EACH choice item in the palette
final int PALETTE_SPACING = 40;
final int RED_LEFT = 50; //The red button is right in the corner
final int GREEN_LEFT = RED_LEFT+PALETTE_SPACING; //The green button is next to it
final int BLUE_LEFT = RED_LEFT+2*PALETTE_SPACING; //Then the blue button
final int YELLOW_LEFT = RED_LEFT+3*PALETTE_SPACING; //Then the yellow button
final int PURPLE_LEFT = RED_LEFT+4*PALETTE_SPACING; //Then the purple button
final int PINK_LEFT = RED_LEFT+5*PALETTE_SPACING; //Then the pink button
final int ORANGE_LEFT = RED_LEFT+6*PALETTE_SPACING; //Then the orange button
final int PALETTE_RIGHT = ORANGE_LEFT+PALETTE_WIDTH; 

int rectWidth = 20, rectHeight = 20;
int ellipseDiam = 15;

void setup(){
  size(500,500);
  background(0);
  drawPalette();
  strokeWeight(1);
}

void draw(){
  mousePressed();
  grid();
  circleSelectors();
  numMoves();
}

void drawPalette(){
  fill(255,0,0); //The red button
  rect(RED_LEFT, 0, PALETTE_WIDTH, PALETTE_HEIGHT);
  fill(0,255,0); //The green button
  rect(GREEN_LEFT, 0, PALETTE_WIDTH, PALETTE_HEIGHT);
  fill(0,0,255); //The blue button
  rect(BLUE_LEFT, 0, PALETTE_WIDTH, PALETTE_HEIGHT);
  fill(#F4F539); //yellow
  rect(YELLOW_LEFT, 0, PALETTE_WIDTH, PALETTE_HEIGHT);
  fill(#EB39F5); //purple
  rect(PURPLE_LEFT, 0, PALETTE_WIDTH, PALETTE_HEIGHT);
  fill(#F716CF); //pink
  rect(PINK_LEFT, 0, PALETTE_WIDTH, PALETTE_HEIGHT);
  fill(#F7C316); //orange
  rect(ORANGE_LEFT, 0, PALETTE_WIDTH, PALETTE_HEIGHT);
}

void chooseColour(){
  if(mouseX < GREEN_LEFT-10)
    stroke(255, 0, 0); //It's left of green, so it's in the red button
  else if(mouseX < BLUE_LEFT-10 && mouseX > GREEN_LEFT)
    stroke(0, 255, 0); //Not far enough over for blue, so it's green
  else if(mouseX < YELLOW_LEFT-10 && mouseX > BLUE_LEFT)
    stroke(0, 0, 255);
  else if(mouseX < PURPLE_LEFT-10 && mouseX > GREEN_LEFT)
    stroke(#F4F539);
  else if(mouseX < PINK_LEFT-10 && mouseX > PURPLE_LEFT)
    stroke(#EB39F5);
  else if(mouseX < ORANGE_LEFT-10 && mouseX > PINK_LEFT)
    stroke(#F716CF);
  else if(mouseX < PALETTE_RIGHT && mouseX > ORANGE_LEFT)
    stroke(#F7C316);
}

void mousePressed(){
     //Don't do anything until the mouse button is pressed
   if(mousePressed) {
      //First test to see if the mouse is anywhere in the palette
      if(mouseX<PALETTE_RIGHT && 
         mouseX>RED_LEFT &&
         mouseY < (PALETTE_HEIGHT)) {
        //It's in the palette. Set the colour according to mouseX
        chooseColour();
      }//if mouse in palette
      else {
         //Mouse is not in the palette - draw a line in that case
         line(pmouseX,pmouseY,mouseX,mouseY);
      }
   }//if mouse pressed
}

void grid(){
  noFill();
  strokeWeight(1);
  stroke(255);
  //Column 1
  rect(50, 100, rectWidth, rectHeight);
  rect(50, 120, rectWidth, rectHeight);
  rect(50, 140, rectWidth, rectHeight);
  rect(50, 160, rectWidth, rectHeight);
  rect(50, 180, rectWidth, rectHeight);
  rect(50, 200, rectWidth, rectHeight);
  rect(50, 220, rectWidth, rectHeight);
  rect(50, 240, rectWidth, rectHeight);
  rect(50, 260, rectWidth, rectHeight);
  rect(50, 280, rectWidth, rectHeight);
  rect(50, 300, rectWidth, rectHeight);
  rect(50, 320, rectWidth, rectHeight);
  //Column 2
  rect(70, 100, rectWidth, rectHeight);
  rect(70, 120, rectWidth, rectHeight);
  rect(70, 140, rectWidth, rectHeight);
  rect(70, 160, rectWidth, rectHeight);
  rect(70, 180, rectWidth, rectHeight);
  rect(70, 200, rectWidth, rectHeight);
  rect(70, 220, rectWidth, rectHeight);
  rect(70, 240, rectWidth, rectHeight);
  rect(70, 260, rectWidth, rectHeight);
  rect(70, 280, rectWidth, rectHeight);
  rect(70, 300, rectWidth, rectHeight);
  rect(70, 320, rectWidth, rectHeight);
  //Column 3
  rect(90, 100, rectWidth, rectHeight);
  rect(90, 120, rectWidth, rectHeight);
  rect(90, 140, rectWidth, rectHeight);
  rect(90, 160, rectWidth, rectHeight);
  rect(90, 180, rectWidth, rectHeight);
  rect(90, 200, rectWidth, rectHeight);
  rect(90, 220, rectWidth, rectHeight);
  rect(90, 240, rectWidth, rectHeight);
  rect(90, 260, rectWidth, rectHeight);
  rect(90, 280, rectWidth, rectHeight);
  rect(90, 300, rectWidth, rectHeight);
  rect(90, 320, rectWidth, rectHeight);
  //Column 4
  rect(110, 100, rectWidth, rectHeight);
  rect(110, 120, rectWidth, rectHeight);
  rect(110, 140, rectWidth, rectHeight);
  rect(110, 160, rectWidth, rectHeight);
  rect(110, 180, rectWidth, rectHeight);
  rect(110, 200, rectWidth, rectHeight);
  rect(110, 220, rectWidth, rectHeight);
  rect(110, 240, rectWidth, rectHeight);
  rect(110, 260, rectWidth, rectHeight);
  rect(110, 280, rectWidth, rectHeight);
  rect(110, 300, rectWidth, rectHeight);
  rect(110, 320, rectWidth, rectHeight);
  //Column 5
  rect(130, 100, rectWidth, rectHeight);
  rect(130, 120, rectWidth, rectHeight);
  rect(130, 140, rectWidth, rectHeight);
  rect(130, 160, rectWidth, rectHeight);
  rect(130, 180, rectWidth, rectHeight);
  rect(130, 200, rectWidth, rectHeight);
  rect(130, 220, rectWidth, rectHeight);
  rect(130, 240, rectWidth, rectHeight);
  rect(130, 260, rectWidth, rectHeight);
  rect(130, 280, rectWidth, rectHeight);
  rect(130, 300, rectWidth, rectHeight);
  rect(130, 320, rectWidth, rectHeight);
  //Column 6
  rect(150, 100, rectWidth, rectHeight);
  rect(150, 120, rectWidth, rectHeight);
  rect(150, 140, rectWidth, rectHeight);
  rect(150, 160, rectWidth, rectHeight);
  rect(150, 180, rectWidth, rectHeight);
  rect(150, 200, rectWidth, rectHeight);
  rect(150, 220, rectWidth, rectHeight);
  rect(150, 240, rectWidth, rectHeight);
  rect(150, 260, rectWidth, rectHeight);
  rect(150, 280, rectWidth, rectHeight);
  rect(150, 300, rectWidth, rectHeight);
  rect(150, 320, rectWidth, rectHeight);
  //Column 7
  rect(170, 100, rectWidth, rectHeight);
  rect(170, 120, rectWidth, rectHeight);
  rect(170, 140, rectWidth, rectHeight);
  rect(170, 160, rectWidth, rectHeight);
  rect(170, 180, rectWidth, rectHeight);
  rect(170, 200, rectWidth, rectHeight);
  rect(170, 220, rectWidth, rectHeight);
  rect(170, 240, rectWidth, rectHeight);
  rect(170, 260, rectWidth, rectHeight);
  rect(170, 280, rectWidth, rectHeight);
  rect(170, 300, rectWidth, rectHeight);
  rect(170, 320, rectWidth, rectHeight);
  //Column 8
  rect(190, 100, rectWidth, rectHeight);
  rect(190, 120, rectWidth, rectHeight);
  rect(190, 140, rectWidth, rectHeight);
  rect(190, 160, rectWidth, rectHeight);
  rect(190, 180, rectWidth, rectHeight);
  rect(190, 200, rectWidth, rectHeight);
  rect(190, 220, rectWidth, rectHeight);
  rect(190, 240, rectWidth, rectHeight);
  rect(190, 260, rectWidth, rectHeight);
  rect(190, 280, rectWidth, rectHeight);
  rect(190, 300, rectWidth, rectHeight);
  rect(190, 320, rectWidth, rectHeight);
}

void circleSelectors(){
  noFill();
  strokeWeight(1);
  stroke(255);
  //Row
  ellipse(60, 80, ellipseDiam, ellipseDiam);
  ellipse(80, 80, ellipseDiam, ellipseDiam);
  ellipse(100, 80, ellipseDiam, ellipseDiam);
  ellipse(120, 80, ellipseDiam, ellipseDiam);
  ellipse(140, 80, ellipseDiam, ellipseDiam);
  ellipse(160, 80, ellipseDiam, ellipseDiam);
  ellipse(180, 80, ellipseDiam, ellipseDiam);
  ellipse(200, 80, ellipseDiam, ellipseDiam);
  
  //Column
  ellipse(30, 110, ellipseDiam, ellipseDiam);
  ellipse(30, 130, ellipseDiam, ellipseDiam);
  ellipse(30, 150, ellipseDiam, ellipseDiam);
  ellipse(30, 170, ellipseDiam, ellipseDiam);
  ellipse(30, 190, ellipseDiam, ellipseDiam);
  ellipse(30, 210, ellipseDiam, ellipseDiam);
  ellipse(30, 230, ellipseDiam, ellipseDiam);
  ellipse(30, 250, ellipseDiam, ellipseDiam);
  ellipse(30, 270, ellipseDiam, ellipseDiam);
  ellipse(30, 290, ellipseDiam, ellipseDiam);
  ellipse(30, 310, ellipseDiam, ellipseDiam);
  ellipse(30, 330, ellipseDiam, ellipseDiam);
}

void numMoves(){
  fill(255);
  textSize(18);
  rect(150, height-80, 200, 30);
  String word = "Num moves: ";
  int x = 0;
  String score = word + x;
  fill(0);
  text(score, 180, height-60);
}

```

---

<div class="post-metadata">

**Author:** ![IsaiahZ](https://avatars.discourse-cdn.com/v4/letter/i/8c91f0/32.png) [@IsaiahZ](https://discourse.processing.org/u/IsaiahZ)\
**Post date:** [November 14, 2019, 1:39am UTC](https://discourse.processing.org/t/making-a-palette-using-for-loops-and-arrays-complicated/15475/2 "2019-11-14T01:39:36Z")

</div>

Note\*\*\*\*\*\*\*  
I’ve just realized now that the palette no longer works for whatever reason  
I’m trying to diagnose the problem but if someone beats me to it let me know

---

<div class="post-metadata">

**Author:** ![IsaiahZ](https://avatars.discourse-cdn.com/v4/letter/i/8c91f0/32.png) [@IsaiahZ](https://discourse.processing.org/u/IsaiahZ)\
**Post date:** [November 14, 2019, 1:44am UTC](https://discourse.processing.org/t/making-a-palette-using-for-loops-and-arrays-complicated/15475/3 "2019-11-14T01:44:53Z")

</div>

Here’s the fixed code where the color palette works:

```auto
final int PALETTE_HEIGHT = 30; //The height of the palette at the bottom
final int PALETTE_WIDTH = 30; //The width of EACH choice item in the palette
final int PALETTE_SPACING = 40;
final int RED_LEFT = 50; //The red button is right in the corner
final int GREEN_LEFT = RED_LEFT+PALETTE_SPACING; //The green button is next to it
final int BLUE_LEFT = RED_LEFT+2*PALETTE_SPACING; //Then the blue button
final int YELLOW_LEFT = RED_LEFT+3*PALETTE_SPACING; //Then the yellow button
final int PURPLE_LEFT = RED_LEFT+4*PALETTE_SPACING; //Then the purple button
final int PINK_LEFT = RED_LEFT+5*PALETTE_SPACING; //Then the pink button
final int ORANGE_LEFT = RED_LEFT+6*PALETTE_SPACING; //Then the orange button
final int PALETTE_RIGHT = ORANGE_LEFT+PALETTE_WIDTH; 

int rectWidth = 20, rectHeight = 20;
int ellipseDiam = 15;

void setup(){
  size(500,500);
  background(0);
  drawPalette();
  grid();
  circleSelectors();
  numMoves();
  strokeWeight(2);
}

void draw(){
  mousePressed();
}

void drawPalette(){
  fill(255,0,0); //The red button
  rect(RED_LEFT, 0, PALETTE_WIDTH, PALETTE_HEIGHT);
  fill(0,255,0); //The green button
  rect(GREEN_LEFT, 0, PALETTE_WIDTH, PALETTE_HEIGHT);
  fill(0,0,255); //The blue button
  rect(BLUE_LEFT, 0, PALETTE_WIDTH, PALETTE_HEIGHT);
  fill(#F4F539); //yellow
  rect(YELLOW_LEFT, 0, PALETTE_WIDTH, PALETTE_HEIGHT);
  fill(#EB39F5); //purple
  rect(PURPLE_LEFT, 0, PALETTE_WIDTH, PALETTE_HEIGHT);
  fill(#F716CF); //pink
  rect(PINK_LEFT, 0, PALETTE_WIDTH, PALETTE_HEIGHT);
  fill(#F7C316); //orange
  rect(ORANGE_LEFT, 0, PALETTE_WIDTH, PALETTE_HEIGHT);
}

void chooseColour(){
  if(mouseX < GREEN_LEFT-10)
    stroke(255, 0, 0); //It's left of green, so it's in the red button
  else if(mouseX < BLUE_LEFT-10 && mouseX > GREEN_LEFT)
    stroke(0, 255, 0); //Not far enough over for blue, so it's green
  else if(mouseX < YELLOW_LEFT-10 && mouseX > BLUE_LEFT)
    stroke(0, 0, 255);
  else if(mouseX < PURPLE_LEFT-10 && mouseX > GREEN_LEFT)
    stroke(#F4F539);
  else if(mouseX < PINK_LEFT-10 && mouseX > PURPLE_LEFT)
    stroke(#EB39F5);
  else if(mouseX < ORANGE_LEFT-10 && mouseX > PINK_LEFT)
    stroke(#F716CF);
  else if(mouseX < PALETTE_RIGHT && mouseX > ORANGE_LEFT)
    stroke(#F7C316);
}

void mousePressed(){
     //Don't do anything until the mouse button is pressed
   if(mousePressed) {
      //First test to see if the mouse is anywhere in the palette
      if(mouseX<PALETTE_RIGHT && 
         mouseX>RED_LEFT &&
         mouseY < (PALETTE_HEIGHT)) {
        //It's in the palette. Set the colour according to mouseX
        chooseColour();
      }//if mouse in palette
      else {
         //Mouse is not in the palette - draw a line in that case
         line(pmouseX,pmouseY,mouseX,mouseY);
      }
   }//if mouse pressed
}

void grid(){
  noFill();
  stroke(255);
  //Column 1
  rect(50, 100, rectWidth, rectHeight);
  rect(50, 120, rectWidth, rectHeight);
  rect(50, 140, rectWidth, rectHeight);
  rect(50, 160, rectWidth, rectHeight);
  rect(50, 180, rectWidth, rectHeight);
  rect(50, 200, rectWidth, rectHeight);
  rect(50, 220, rectWidth, rectHeight);
  rect(50, 240, rectWidth, rectHeight);
  rect(50, 260, rectWidth, rectHeight);
  rect(50, 280, rectWidth, rectHeight);
  rect(50, 300, rectWidth, rectHeight);
  rect(50, 320, rectWidth, rectHeight);
  //Column 2
  rect(70, 100, rectWidth, rectHeight);
  rect(70, 120, rectWidth, rectHeight);
  rect(70, 140, rectWidth, rectHeight);
  rect(70, 160, rectWidth, rectHeight);
  rect(70, 180, rectWidth, rectHeight);
  rect(70, 200, rectWidth, rectHeight);
  rect(70, 220, rectWidth, rectHeight);
  rect(70, 240, rectWidth, rectHeight);
  rect(70, 260, rectWidth, rectHeight);
  rect(70, 280, rectWidth, rectHeight);
  rect(70, 300, rectWidth, rectHeight);
  rect(70, 320, rectWidth, rectHeight);
  //Column 3
  rect(90, 100, rectWidth, rectHeight);
  rect(90, 120, rectWidth, rectHeight);
  rect(90, 140, rectWidth, rectHeight);
  rect(90, 160, rectWidth, rectHeight);
  rect(90, 180, rectWidth, rectHeight);
  rect(90, 200, rectWidth, rectHeight);
  rect(90, 220, rectWidth, rectHeight);
  rect(90, 240, rectWidth, rectHeight);
  rect(90, 260, rectWidth, rectHeight);
  rect(90, 280, rectWidth, rectHeight);
  rect(90, 300, rectWidth, rectHeight);
  rect(90, 320, rectWidth, rectHeight);
  //Column 4
  rect(110, 100, rectWidth, rectHeight);
  rect(110, 120, rectWidth, rectHeight);
  rect(110, 140, rectWidth, rectHeight);
  rect(110, 160, rectWidth, rectHeight);
  rect(110, 180, rectWidth, rectHeight);
  rect(110, 200, rectWidth, rectHeight);
  rect(110, 220, rectWidth, rectHeight);
  rect(110, 240, rectWidth, rectHeight);
  rect(110, 260, rectWidth, rectHeight);
  rect(110, 280, rectWidth, rectHeight);
  rect(110, 300, rectWidth, rectHeight);
  rect(110, 320, rectWidth, rectHeight);
  //Column 5
  rect(130, 100, rectWidth, rectHeight);
  rect(130, 120, rectWidth, rectHeight);
  rect(130, 140, rectWidth, rectHeight);
  rect(130, 160, rectWidth, rectHeight);
  rect(130, 180, rectWidth, rectHeight);
  rect(130, 200, rectWidth, rectHeight);
  rect(130, 220, rectWidth, rectHeight);
  rect(130, 240, rectWidth, rectHeight);
  rect(130, 260, rectWidth, rectHeight);
  rect(130, 280, rectWidth, rectHeight);
  rect(130, 300, rectWidth, rectHeight);
  rect(130, 320, rectWidth, rectHeight);
  //Column 6
  rect(150, 100, rectWidth, rectHeight);
  rect(150, 120, rectWidth, rectHeight);
  rect(150, 140, rectWidth, rectHeight);
  rect(150, 160, rectWidth, rectHeight);
  rect(150, 180, rectWidth, rectHeight);
  rect(150, 200, rectWidth, rectHeight);
  rect(150, 220, rectWidth, rectHeight);
  rect(150, 240, rectWidth, rectHeight);
  rect(150, 260, rectWidth, rectHeight);
  rect(150, 280, rectWidth, rectHeight);
  rect(150, 300, rectWidth, rectHeight);
  rect(150, 320, rectWidth, rectHeight);
  //Column 7
  rect(170, 100, rectWidth, rectHeight);
  rect(170, 120, rectWidth, rectHeight);
  rect(170, 140, rectWidth, rectHeight);
  rect(170, 160, rectWidth, rectHeight);
  rect(170, 180, rectWidth, rectHeight);
  rect(170, 200, rectWidth, rectHeight);
  rect(170, 220, rectWidth, rectHeight);
  rect(170, 240, rectWidth, rectHeight);
  rect(170, 260, rectWidth, rectHeight);
  rect(170, 280, rectWidth, rectHeight);
  rect(170, 300, rectWidth, rectHeight);
  rect(170, 320, rectWidth, rectHeight);
  //Column 8
  rect(190, 100, rectWidth, rectHeight);
  rect(190, 120, rectWidth, rectHeight);
  rect(190, 140, rectWidth, rectHeight);
  rect(190, 160, rectWidth, rectHeight);
  rect(190, 180, rectWidth, rectHeight);
  rect(190, 200, rectWidth, rectHeight);
  rect(190, 220, rectWidth, rectHeight);
  rect(190, 240, rectWidth, rectHeight);
  rect(190, 260, rectWidth, rectHeight);
  rect(190, 280, rectWidth, rectHeight);
  rect(190, 300, rectWidth, rectHeight);
  rect(190, 320, rectWidth, rectHeight);
}

void circleSelectors(){
  noFill();
  strokeWeight(1);
  stroke(255);
  //Row
  ellipse(60, 80, ellipseDiam, ellipseDiam);
  ellipse(80, 80, ellipseDiam, ellipseDiam);
  ellipse(100, 80, ellipseDiam, ellipseDiam);
  ellipse(120, 80, ellipseDiam, ellipseDiam);
  ellipse(140, 80, ellipseDiam, ellipseDiam);
  ellipse(160, 80, ellipseDiam, ellipseDiam);
  ellipse(180, 80, ellipseDiam, ellipseDiam);
  ellipse(200, 80, ellipseDiam, ellipseDiam);
  
  //Column
  ellipse(30, 110, ellipseDiam, ellipseDiam);
  ellipse(30, 130, ellipseDiam, ellipseDiam);
  ellipse(30, 150, ellipseDiam, ellipseDiam);
  ellipse(30, 170, ellipseDiam, ellipseDiam);
  ellipse(30, 190, ellipseDiam, ellipseDiam);
  ellipse(30, 210, ellipseDiam, ellipseDiam);
  ellipse(30, 230, ellipseDiam, ellipseDiam);
  ellipse(30, 250, ellipseDiam, ellipseDiam);
  ellipse(30, 270, ellipseDiam, ellipseDiam);
  ellipse(30, 290, ellipseDiam, ellipseDiam);
  ellipse(30, 310, ellipseDiam, ellipseDiam);
  ellipse(30, 330, ellipseDiam, ellipseDiam);
}

void numMoves(){
  fill(255);
  textSize(18);
  noStroke();
  rect(150, height-80, 200, 30);
  String word = "Num moves: ";
  int x = 0;
  String score = word + x;
  fill(0);
  text(score, 180, height-60);
}

```

---

<div class="post-metadata">

**Author:** ![IsaiahZ](https://avatars.discourse-cdn.com/v4/letter/i/8c91f0/32.png) [@IsaiahZ](https://discourse.processing.org/u/IsaiahZ)\
**Post date:** [November 14, 2019, 1:45am UTC](https://discourse.processing.org/t/making-a-palette-using-for-loops-and-arrays-complicated/15475/4 "2019-11-14T01:45:47Z")

</div>

I moved the object functions where the strokes were affected into the setup function whereas they were in the draw function before.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 14, 2019, 2:30am UTC](https://discourse.processing.org/t/making-a-palette-using-for-loops-and-arrays-complicated/15475/5 "2019-11-14T02:30:19Z")

</div>

first step:  
try some FOR loops:

```auto
void setup() {
  size(500, 500);
  background(0);
  strokeWeight(1);
  noFill();
  stroke(255);
  grid();
  circleSelectors();
}

void draw() {
}

void grid() {
  int xr = 50, yr = 100, wr = 20, hr = 20, offr = 0, gridr = 8, manyr = gridr * 12; // rect grid setup
  for (int i = 0; i < manyr; i++)
    rect(xr+(i%gridr)*(wr+offr), yr+(floor(i/gridr))*(hr+offr), wr, hr); // or any other shape/text on that position
}

void circleSelectors() {
  int xc =60, yc =80, dc = 15; // circle setup
  for ( int i = 0; i < 8; i++ ) circle(xc+i*20, yc, dc); // ROW
  xc = 30; 
  yc = 110;
  for ( int i = 0; i<12; i++ ) circle(xc, yc+i*20, dc); // COL
}

```

so what is the question about the PALETTE?

color select and paint works already,  
but possibly restrict the painting over the rect grid area?

---

<div class="post-metadata">

**Author:** ![IsaiahZ](https://avatars.discourse-cdn.com/v4/letter/i/8c91f0/32.png) [@IsaiahZ](https://discourse.processing.org/u/IsaiahZ)\
**Post date:** [November 14, 2019, 2:40am UTC](https://discourse.processing.org/t/making-a-palette-using-for-loops-and-arrays-complicated/15475/6 "2019-11-14T02:40:38Z")

</div>

Thank you. So instead of drawing lines with the color of the selected line, I would like to select a color, then select a square which will completely fill to whatever color I selected.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 14, 2019, 2:44am UTC](https://discourse.processing.org/t/making-a-palette-using-for-loops-and-arrays-complicated/15475/7 "2019-11-14T02:44:01Z")

</div>

so the rectangles must have a memory of its fill color,

- make it a array of class.

- 
  - with its own mouse over and selected function

- and change from paint mode to draw mode

\_\_  
how does the circle selectors fit into that concept???  
was this the row col select for the rects?

can use, but just a mouse click on a rect would do the job too.

---

<div class="post-metadata">

**Author:** ![IsaiahZ](https://avatars.discourse-cdn.com/v4/letter/i/8c91f0/32.png) [@IsaiahZ](https://discourse.processing.org/u/IsaiahZ)\
**Post date:** [November 14, 2019, 2:57am UTC](https://discourse.processing.org/t/making-a-palette-using-for-loops-and-arrays-complicated/15475/8 "2019-11-14T02:57:32Z")

</div>

So the circle selectors is if I choose a color and the select lets say a circle hovering over a row, that entire row will fill with whatever I selected previously. And the same goes with a row if I select a circle that would color a row. I’m trying to make it that you can select multiple circles at once and then press a color to color all rows and columns selected.  
Essentially the circle means a row or column. So to select a circle would mean to select whatever row or column it hovers over.

Also I am not sure how I would go about using the arrays or paint/draw mode.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 14, 2019, 3:38am UTC](https://discourse.processing.org/t/making-a-palette-using-for-loops-and-arrays-complicated/15475/9 "2019-11-14T03:38:32Z")

</div>

> [@IsaiahZ](#):
>
> how I would go about using the arrays

arrays for the rectangle info like position, color, selected…  
are possible, but after that you will see that actually making

- a class first
- and a array of that rectangle class

much easier.

the used math from my FOR loop  
( position and size of the rectangles )  
will stay same, just stored into the rect class array

first check on some tutorial / video about class,

> **i would try this way**
>
> ```auto
> // _______________________________________ GRID array of class
> int x=50, y=100, w=20, h=w, off=3, grid=8, many=grid*12; // adjust grid ( only if picture files available! )
> Rect[] myGrid = new Rect[many]; // grid array
> 
> void set_grid() {
> for ( int i =0; i< myGrid.length; i++ ) 
> myGrid[i] = new Rect( x+(i%grid)*( w+off), y+(floor(i/grid))*(h+off), w, h, color(0, 0, 0) );
> }
> 
> void draw_grid() {
> for ( int i =0; i< myGrid.length; i++ ) myGrid[i].display();
> }
> 
> void clear() {
> for (int i = 0; i < many; i++) myGrid[i].c = color(0);
> println("clear after key [c]");
> }
> 
> class Rect {
> color c;
> float x, y, w, h;
> 
> Rect(float _x, float _y, float _w, float _h, color _c ) {
> c = _c;
> w = _w;
> h = _h;
> x = _x;
> y = _y;
> }
> 
> void display() {
> push();
> strokeWeight(1); 
> stroke(200, 200, 200);
> if ( over() ) { 
> strokeWeight(3); 
> stroke(mainc);
> }
> fill(c);
> rect(x, y, w, h);
> pop();
> sel();
> }
> 
> boolean over() {
> return( x < mouseX && mouseX < x+(w-off) && y < mouseY && mouseY < y+(h-off) );
> }
> 
> void sel() {
> if ( over() )
> if ( mousePressed && mouseButton == LEFT) c = mainc; // ___________________ get color setpoint from main program
> }
> } // end class
> 
> // _________________ color select tool
> color[] palette = { color(200, 200, 200), color(255, 0, 0), color(0, 255, 0), color(0, 0, 255), color(244, 245, 57), color(235, 57, 245), color(247, 22, 207), color(247, 195, 22) };
> color mainc = color(200, 200, 200);
> 
> void drawPalette() {
> int x0 = 50, x, y = 0, w = 30, h = 30, off = 40;
> for ( int i = 0; i < palette.length; i++ ) {
> fill(palette[i]);
> x = x0 + i*off;
> rect(x, y, w, h);
> if ( ( x < mouseX && mouseX < x+w && y < mouseY && mouseY < y+h ) && mousePressed ) mainc = palette[i];
> }
> }
> 
> // _______________________________________ main
> void setup() {
> size(500, 500);
> set_grid();
> println("click color palette to select fill color\nclick rect to fill\nkey [c] to clear");
> }
> 
> void draw() {
> background(0);
> drawPalette();
> draw_grid();
> }
> 
> void keyPressed() {
> if ( key == 'c' ) clear();
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![IsaiahZ](https://avatars.discourse-cdn.com/v4/letter/i/8c91f0/32.png) [@IsaiahZ](https://discourse.processing.org/u/IsaiahZ)\
**Post date:** [November 14, 2019, 5:26pm UTC](https://discourse.processing.org/t/making-a-palette-using-for-loops-and-arrays-complicated/15475/10 "2019-11-14T17:26:56Z")

</div>

So this is very helpful and I understand mostly everything. The two things I don’t fully understand is the entire class function and exactly what it is doing, as well as the myGrid.length or the palette.length in the for loops.  
Would you be able to elaborate on these?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 14, 2019, 7:38pm UTC](https://discourse.processing.org/t/making-a-palette-using-for-loops-and-arrays-complicated/15475/11 "2019-11-14T19:38:07Z")

</div>

Continues on next thread by Isa

---

<div class="post-metadata">

**Author:** ![IsaiahZ](https://avatars.discourse-cdn.com/v4/letter/i/8c91f0/32.png) [@IsaiahZ](https://discourse.processing.org/u/IsaiahZ)\
**Post date:** [November 14, 2019, 7:39pm UTC](https://discourse.processing.org/t/making-a-palette-using-for-loops-and-arrays-complicated/15475/12 "2019-11-14T19:39:26Z")

</div>

What? I’m not sure what this means. What’s Isa?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 14, 2019, 7:42pm UTC](https://discourse.processing.org/t/making-a-palette-using-for-loops-and-arrays-complicated/15475/13 "2019-11-14T19:42:25Z")

</div>

I just mentioned that you (Isa) started a new discussion with the same topic.

That’s necessary to mention so nobody is writing here.

It’s questionable why you started a new discussion. And also why you didn‘t give credit to kll (you wrote it’s your code. It’s not.)

---

<div class="post-metadata">

**Author:** ![IsaiahZ](https://avatars.discourse-cdn.com/v4/letter/i/8c91f0/32.png) [@IsaiahZ](https://discourse.processing.org/u/IsaiahZ)\
**Post date:** [November 14, 2019, 7:45pm UTC](https://discourse.processing.org/t/making-a-palette-using-for-loops-and-arrays-complicated/15475/14 "2019-11-14T19:45:46Z")

</div>

Oh. Sorry, I’m new to this forum. Not sure how the ettiquette works here. I’ll definitely put a note giving credit and yes… I’ve moved to a different thread solely focusing on Arrays involving just the circle selectors and counter as this thread was covering a broad spectrum of things so I’ve just narrowed it.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 15, 2019, 1:03am UTC](https://discourse.processing.org/t/making-a-palette-using-for-loops-and-arrays-complicated/15475/15 "2019-11-15T01:03:20Z")

</div>

well, i will go on in the thread, as here is the

- For loop
- class
- array

examples i give you to start study.

now if it is too early for you to start with classes is ok.  
most functionality can do with array and functions too.

* * *

> [@IsaiahZ](#):
>
> class function and exactly what it is doing

what is the biggest problem with old style arrays?  
you can make a INT array / list / matrix, but all values must be INT,  
if you want mix your list ( like you might in sql / CSV ( also processing table ) … )  
of a record type:  
struct(int x,int y,int w,int h,boolean set,color fillc)  
need minimum 3 … to 6 arrays ( of 3 different types )  
for a class that is easy.  
and a array ( or arrayList ) myArray  
of that class is a nice structured table  
`myArray[17].fillc`  
if you call it from “outside”

BUT  
class also have a very powerful option:  
( embedded ) functions call from “outside” with  
`myArray[17].draw()`  
and inside have that function

```auto
class MyItem {
  color fillc;
  draw() {
     fill(fillc);
  }
}

```

so the record structure ( class variables ) and the functions make a class  
a perfect object, ( if single or as array or arrayList )

* * *

for the array used for the palette and the rectangles  
and using a for loop over all entries in that array  
need to know how long it is.

YES can just write

```auto
  for ( int i = 0; i < 7; i++ ) {
    fill(palette[i]);
}

```

now if you change the array ( add one more color or delete )  
must change that number also  
OR

> **[Array / Reference](https://processing.org/reference/Array.html)**
>
> An array is a list of data. It is possible to have an array of any type of data. Each piece of data in an array is identified by an index number representing its position in the array. The first eleme…

use the array.length info.

* * *

the

> **[Reference](https://processing.org/reference/)**
>
> Find further documentation of the Processing language

link page can never cover ALL processing  
and spec. not the underlying JAVA commands you also can use.

but lots of things can find if you use the  
little search window top right  
like with  
`length`  
end up at google  
[https://www.google.com/search?as\_sitesearch=processing.org&as\_q=length](https://www.google.com/search?as_sitesearch=processing.org&as_q=length)  
and see there is one for array `.length` and one for string `.length()`  
later will learn there is a `.size()` for arrayList

anyhow, what i also want to say with this is:  
? did you search for it ?

---

<div class="post-metadata">

**Author:** ![IsaiahZ](https://avatars.discourse-cdn.com/v4/letter/i/8c91f0/32.png) [@IsaiahZ](https://discourse.processing.org/u/IsaiahZ)\
**Post date:** [November 15, 2019, 11:24am UTC](https://discourse.processing.org/t/making-a-palette-using-for-loops-and-arrays-complicated/15475/16 "2019-11-15T11:24:25Z")

</div>

Thank you, yes I watched some tutorials on class and arrays for processing. But this explanation made more sense than the tutorials I watched.