Making a Palette using for loops and arrays [COMPLICATED]

Processing Coding Questions
1

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:

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);
}
1 Like
2

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

3

Hereā€™s the fixed code where the color palette works:

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);
}
4

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

5

first step:
try some FOR loops:

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?

2 Likes
6

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.

7

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.

2 Likes
8

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.

9

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 
//_______________________________________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();
}
2 Likes
10

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?

11

Continues on next thread by Isa

1 Like
12

What? Iā€™m not sure what this means. Whatā€™s Isa?

13

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.)

3 Likes
14

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.

15

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.

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

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

  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

use the array.length info.

the

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
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 ?

3 Likes
16

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

1 Like