Trouble on array's [COMPLICATED]

IsaiahZ · November 14, 2019, 7:22pm

I’m making a palette where when I press on a square it will change to whatever color I have selected from the palette. Right now I’m having trouble with two things:

Making the array that when I select a circle or multiple circles, that entire row or column will fill with that color.
Having a counter for the number of moves I make. I need some type of boolean or something so that whenever my mouse is pressed in the window of the grid the counter will go up by 1. I also need it to clear when I press the key ‘c’.

Here is my code so far, thank you for helping in advance:

//_______________________________________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];
  }
}

void circleSelectors(){
  noFill();
  strokeWeight(1);
  stroke(255);
  //Row
  int xCircle = 60, yCircle = 80, circleDiam = 15;
  for (int i = 0; i < 8; i++)
    ellipse(xCircle+i*23, yCircle, circleDiam, circleDiam);
  //Columns
  xCircle = 30;
  yCircle = 110;
  for (int i = 0; i < 12; i++)
    ellipse(xCircle, yCircle+i*23, circleDiam, circleDiam);
}

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

//_______________________________________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();
  circleSelectors();
  numMoves();
}

void keyPressed() {
  if (key == 'c') 
  clear();
}

IsaiahZ · November 14, 2019, 7:48pm

Note*** Code provided by user ‘’‘kll’’’
Helped on another thread and have moved to this thread to focus on these specific problems.

Here’s URL to previous thread:
PREVIOUS THREAD FOR PALETTE HELP

paulgoux · November 14, 2019, 7:55pm

int count/counter = 0;

void mousePressed(){

count++
}

Chrisir · November 14, 2019, 8:04pm

Is that something that happens now falsely or is that something you want to happen but don’t know how to achieve it ?

IsaiahZ · November 15, 2019, 11:17am

Sorry, I couldn’t respond since I’m a new user and had to wait a couple hours and by then I had work. I don’t know how to achieve the row select.

Chrisir · November 15, 2019, 11:29am

You have now a code you don’t understand because you didn’t write it.

That’s why you don’t know what to do. You don’t know how to work with the code.

Go back, study your code and at least TRY it.

Then show your attempt

Hint: if I were you I would start by making a function mousePressed. See reference.

IsaiahZ · November 15, 2019, 12:31pm

So I’m trying to understand the code that kll provided. I finished the counter and believe I’ve done it correctly:

int count = 0;

void mousePressed(){
  if (mouseX > 23 && mouseX < 230 && mouseY < 375 && mouseY > 70)
  count++;
}

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

And I am also trying to replicate what he did with the grid, with the arrays, with the rows of circles. The entire code I have right now is this:

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

int xCircle = 60, yCircle = 80, circleDiam = 15;
int wide = 12, tall = 8;
Circle[] row = new Circle[wide];

void setRow(){
 for (int i = 0; i < row.length; i++)
   row[i] = new Circle(xCircle+i*23, yCircle, circleDiam, circleDiam);
}

void drawRow(){
 for (int i = 0; i < row.length; i++)
   row[i].display();
}

void clear() {
  for (int i = 0; i < many; i++)  
  myGrid[i].c = color(0);
  count = 0;
  println("clear after key [c]");
}

class Circle {
  color c;
  float xCircle, yCircle, circleDiam;
  
  Circle(float _xCircle, float _yCircle, float _circleDiam, color _c){
   c = _c;
   xCircle = _xCircle;
   yCircle = _yCircle;
   circleDiam = _circleDiam;
  }
  
  void display(){
   push();
   strokeWeight(1);
   stroke(200, 200, 200);
   if (over()){
    strokeWeight(3);
    stroke(mainc);
   }
   fill(c);
   ellipse(xCircle, yCircle, circleDiam, circleDiam);
   pop();
   sel();
  }
  
  boolean over(){
   return((xCircle - circleDiam) < mouseX && mouseX < (xCircle + circleDiam) && (yCircle - circleDiam) < mouseY && mouseY < (yCircle + circleDiam));
  }
  
  void sel(){
    if (over())
      if(mousePressed && mouseButton == LEFT)
        c = mainc;
  }
}

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];
  }
}

void circleSelectors(){
  noFill();
  strokeWeight(1);
  stroke(255);
  //Row
  int xCircle = 60, yCircle = 80, circleDiam = 15;
  for (int i = 0; i < 8; i++)
    ellipse(xCircle+i*23, yCircle, circleDiam, circleDiam);
  //Columns
  xCircle = 30;
  yCircle = 110;
  for (int i = 0; i < 12; i++)
    ellipse(xCircle, yCircle+i*23, circleDiam, circleDiam);
}

int count = 0;

void mousePressed(){
  if (mouseX > 23 && mouseX < 230 && mouseY < 375 && mouseY > 70)
  count++;
}

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

void drawImage(){
  PImage target;// create a variable that can point to an off-screen buffer
  String name = "target";
  x = 0;
  if (key == 'c'){
  x++;
  }
  String type = ".png";
  String png = name + x + type;// create filename
  target = loadImage(png);// load image file into off-screen buffer
  image(target, 275, 100, 170, 273);// display the buffer on canvas at location x, y
}

//_______________________________________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();
  circleSelectors();
  numMoves();
  drawImage();
}

void keyPressed() {
  if (key == 'c') 
  clear();
}

However, when I erase the code from the circleSelector function titled //Rows, my rows disappear.
I believe I have an error either in my array or my class.
Here’s array:

int xCircle = 60, yCircle = 80, circleDiam = 15;
int wide = 12, tall = 8;
Circle[] row = new Circle[wide];

void setRow(){
 for (int i = 0; i < row.length; i++)
   row[i] = new Circle(xCircle+i*23, yCircle, circleDiam, circleDiam);
}

void drawRow(){
 for (int i = 0; i < row.length; i++)
   row[i].display();
}

And here’s class:

class Circle {
  color c;
  float xCircle, yCircle, circleDiam;
  
  Circle(float _xCircle, float _yCircle, float _circleDiam, color _c){
   c = _c;
   xCircle = _xCircle;
   yCircle = _yCircle;
   circleDiam = _circleDiam;
  }
  
  void display(){
   push();
   strokeWeight(1);
   stroke(200, 200, 200);
   if (over()){
    strokeWeight(3);
    stroke(mainc);
   }
   fill(c);
   ellipse(xCircle, yCircle, circleDiam, circleDiam);
   pop();
   sel();
  }
  
  boolean over(){
   return((xCircle - circleDiam) < mouseX && mouseX < (xCircle + circleDiam) && (yCircle - circleDiam) < mouseY && mouseY < (yCircle + circleDiam));
  }
  
  void sel(){
    if (over())
      if(mousePressed && mouseButton == LEFT)
        c = mainc;
  }
}

Chrisir · November 15, 2019, 12:52pm

Where do check mouse against the circles? Does this work?Test this with println("here1");.

IsaiahZ · November 15, 2019, 12:54pm

I’m not sure what you mean by this. Are you asking me to add a println to print if my array/class code works?

Chrisir · November 15, 2019, 12:55pm

??

the circles are drawn nicely by kll.

Now, when you want the circles to do something on mouse press you have to ask whether the mouse has been clicked on a circle. Do you have this?

If so, does this work? You can finc out using println inside the if clause

IsaiahZ · November 15, 2019, 12:59pm

No I don’t believe I’ve added this.
As of right now I just simply want the circle to do what kll program each individual square to do using arrays and then move into using them to highlight rows/columns.

Chrisir · November 15, 2019, 1:26pm

then add it in mousePressed

Chrisir · November 15, 2019, 1:28pm

therefore you need to register a mouse click on a circle, right?

IsaiahZ · November 15, 2019, 1:33pm

Yes, sorry. I was still a little confused as to what you were asking. So I have my mouse Pressed function already in place for my counter however, that is a very broad range that includes everything in a box shape including the circles so yes, it does register I’ve clicked on circles.

void mousePressed(){
  if (mouseX > 23 && mouseX < 230 && mouseY < 375 && mouseY > 70)
  count++;
println("here1");
}

Now I have not pinpointed the location of each individual circle. Would I need to do that and if so would I have to do something similar to the above, setting a min and max on the mouseX and mouseY for each individual circle or is there a more efficient way to have it for all of them?

Chrisir · November 15, 2019, 1:51pm

please check how the circles are drawn

here the positions of the circles are calculated.

copy this into mousePressed. Then check mouseX,mouseY against these calculated positions

Chrisir · November 15, 2019, 1:53pm

as you can see where thecircles are drawn:

you need two for loops, one for the uppper row (---->) and one for the column on the left

IsaiahZ · November 15, 2019, 6:01pm

Sorry, again I couldn’t respond right away since my responses are limited due to me being a new user
So here I’ve attempted to do it with the rows:

void mousePressed(){
  if (mouseX > 23 && mouseX < 230 && mouseY < 375 && mouseY > 70)
  count++;
  
  for (int i = 0; i < 8; i++)
    ellipse(xCircle+i*23, yCircle, circleDiam, circleDiam);
    if((xCircle - circleDiam/2) < mouseX && mouseX < (xCircle + circleDiam/2) && (yCircle - circleDiam/2) < mouseY && mouseY < (yCircle + circleDiam/2))
      println("here1");
    
  
}

Is this on the right track? It prints here1 for the first circle in the row however it doesn’t for any other circle.

Chrisir · November 15, 2019, 7:21pm

Please look at the calculated position of the circle.

It’s xCircle+i*23

because xCircle is just the distance from the left border,
23 is the distance between the circles and i is the number of the circle. We multiply both to get the current position of each circle.

Please check against xCircle+i*23 - circleDiam/2 and not against (xCircle - circleDiam/2)

This goes for the first 2 checks:

if((xCircle - circleDiam/2) < mouseX && 
    mouseX < (xCircle + circleDiam/2) && 
    (yCircle - circleDiam/2) < mouseY && 
    mouseY < (yCircle + circleDiam/2))

All positions must match this:

ellipse(xCircle+i*23, yCircle, circleDiam, circleDiam);

Chrisir · November 15, 2019, 7:48pm

once you have this, we want to color all rects in that column

please note that I changed xour names to (or I introduced these vars before setup())

  gridX=8, // number of cells in x
  gridY=12, // and in y

The code for coloring the rects :

That’s actually pretty complicate, because we don’t use a 2D grid but a 1D grid

      // do something 
      println("xx"+i);
      count++;
      for (int i2=i; i2<i+gridY*gridX; i2+=gridX) {   // complicate 
        myGrid[i2].c=mainc;
      }
      return;

IsaiahZ · November 23, 2019, 4:22am

Sorry for the very late response. Things came up that I had to deal with but I’m back now. I’ve read this and I’m trying to wrap my head around how I’m supposed to apply this. Am I to put this in the over() boolean and if so how must I state ‘i’.

Topic		Replies	Views
Making a Palette using for loops and arrays [COMPLICATED] Coding Questions homework	15	1295	November 15, 2019
Arrays and colors Coding Questions	3	218	May 23, 2019
Change color of one rect in grid Coding Questions	3	257	March 3, 2020
I need help with filling in a grid Coding Questions	17	765	December 9, 2020
Questions about my Color Array Coding Questions	5	2378	September 3, 2018

Trouble on array's [COMPLICATED]

Related Topics