# Trouble on array's \[COMPLICATED\]

**URL:** <https://discourse.processing.org/t/trouble-on-arrays-complicated/15496>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [November 14, 2019, 7:22pm UTC](https://discourse.processing.org/t/trouble-on-arrays-complicated/15496 "2019-11-14T19:22:14Z")\
**Posts on this page:** 20\
**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, 7:22pm UTC](https://discourse.processing.org/t/trouble-on-arrays-complicated/15496/1 "2019-11-14T19:22:14Z")

</div>

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:

1. Making the array that when I select a circle or multiple circles, that entire row or column will fill with that color.
2. 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:

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

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

```

---

<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:48pm UTC](https://discourse.processing.org/t/trouble-on-arrays-complicated/15496/2 "2019-11-14T19:48:18Z")

</div>

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](https://discourse.processing.org/t/making-a-palette-using-for-loops-and-arrays-complicated/15475/13)

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [November 14, 2019, 7:55pm UTC](https://discourse.processing.org/t/trouble-on-arrays-complicated/15496/3 "2019-11-14T19:55:15Z")

</div>

```auto
int count/counter = 0;

void mousePressed(){

count++
}

```

---

<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, 8:04pm UTC](https://discourse.processing.org/t/trouble-on-arrays-complicated/15496/4 "2019-11-14T20:04:25Z")

</div>

> [@IsaiahZ](#):
>
> Making the array that when I select a circle or multiple circles, that entire row or column will fill with that color.

Is that something that happens now falsely or is that something you want to happen but don’t know how to achieve 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:17am UTC](https://discourse.processing.org/t/trouble-on-arrays-complicated/15496/5 "2019-11-15T11:17:44Z")

</div>

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.

---

<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 15, 2019, 11:29am UTC](https://discourse.processing.org/t/trouble-on-arrays-complicated/15496/6 "2019-11-15T11:29:14Z")

</div>

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.

---

<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, 12:31pm UTC](https://discourse.processing.org/t/trouble-on-arrays-complicated/15496/7 "2019-11-15T12:31:29Z")

</div>

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

```auto
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:

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

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:

```auto
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:

```auto
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;
  }
}

```

---

<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 15, 2019, 12:52pm UTC](https://discourse.processing.org/t/trouble-on-arrays-complicated/15496/8 "2019-11-15T12:52:27Z")

</div>

> [@Chrisir](#):
>
> when I select a circle or multiple circles, that entire row or column will fill with that color.

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

---

<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, 12:54pm UTC](https://discourse.processing.org/t/trouble-on-arrays-complicated/15496/9 "2019-11-15T12:54:06Z")

</div>

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?

---

<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 15, 2019, 12:55pm UTC](https://discourse.processing.org/t/trouble-on-arrays-complicated/15496/10 "2019-11-15T12:55:20Z")

</div>

??

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

---

<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, 12:59pm UTC](https://discourse.processing.org/t/trouble-on-arrays-complicated/15496/11 "2019-11-15T12:59:12Z")

</div>

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.

---

<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 15, 2019, 1:26pm UTC](https://discourse.processing.org/t/trouble-on-arrays-complicated/15496/12 "2019-11-15T13:26:31Z")

</div>

> [@IsaiahZ](#):
>
> No I don’t believe I’ve added this.

then add it in mousePressed

---

<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 15, 2019, 1:28pm UTC](https://discourse.processing.org/t/trouble-on-arrays-complicated/15496/13 "2019-11-15T13:28:28Z")

</div>

> [@IsaiahZ](#):
>
> the circle to do what kll program each individual square to do using arrays and then move into using them to highlight rows/columns.

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

---

<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, 1:33pm UTC](https://discourse.processing.org/t/trouble-on-arrays-complicated/15496/14 "2019-11-15T13:33:56Z")

</div>

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.

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

---

<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 15, 2019, 1:51pm UTC](https://discourse.processing.org/t/trouble-on-arrays-complicated/15496/15 "2019-11-15T13:51:02Z")

</div>

> [@IsaiahZ](#):
>
> circles

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

---

<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 15, 2019, 1:53pm UTC](https://discourse.processing.org/t/trouble-on-arrays-complicated/15496/16 "2019-11-15T13:53:22Z")

</div>

> [@IsaiahZ](#):
>
> is there a more efficient way to have it for all of them?

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

---

<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, 6:01pm UTC](https://discourse.processing.org/t/trouble-on-arrays-complicated/15496/17 "2019-11-15T18:01:32Z")

</div>

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:

```auto
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.

---

<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 15, 2019, 7:21pm UTC](https://discourse.processing.org/t/trouble-on-arrays-complicated/15496/18 "2019-11-15T19:21:02Z")

</div>

> [@IsaiahZ](#):
>
> however it doesn’t for any other circle

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:

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

```

All positions must match this:

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

```

---

<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 15, 2019, 7:48pm UTC](https://discourse.processing.org/t/trouble-on-arrays-complicated/15496/19 "2019-11-15T19:48:49Z")

</div>

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()`)

```auto
  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

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

```

---

<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 23, 2019, 4:22am UTC](https://discourse.processing.org/t/trouble-on-arrays-complicated/15496/20 "2019-11-23T04:22:33Z")

</div>

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

[Next page](https://discourse.processing.org/t/trouble-on-arrays-complicated/15496.md?page=2)