Loop Through Array Question

Julo

How do I divide array squ into 2 sets of new Square [3] new Square [4]and loop through everything without having to declare everything everytime in setup and draw? (coz' I might have 100 of them in the future)

Square [] squ = new Square[7];

int [] numberX0 = { 12, 12, 12, 12, 30, 30, 30};
int [] numberY0 = { 10, 50, 105, 173, 215, 280,426};

void setup() {
  size(500, 500);
  for (int i = 0; i<squ.length; i++) {
    squ[i] = new Square(numberX0[i], numberY0[i]);
  }
}

void draw() {
  background(242, 242, 240);
  for (int i = 0; i<squ.length; i++) {
    squ[i].bsq();
  }
}

what I have is below, but I know this should be cleaner, otherwise when I have 100 of them, it will be a mess, but I couldn't figure it out how to increase squ number hereSquare [] squ = new Square[3];and X,Y number here

        int [] numberX = {12};
        int [] numberY = {10, 50, 105};
        int [] numberX1 = {30};
        int [] numberY1 = {173, 215, 280, 426};

at the same time... and in setup and draw too...

Square [] squ = new Square[3];
Square [] squ1 = new Square[4];
int [] numberX = {12};
int [] numberY = {10, 50, 105};
int [] numberX1 = {30};
int [] numberY1 = {173, 215, 280, 426};

void setup() {
  size(500, 500);

  for (int i = 0; i<squ.length; i++) {
    squ[i] = new Square(numberX[0], numberY[i]);
  }
    for (int i = 0; i<squ1.length; i++) {
    squ1[i] = new Square(numberX1[0], numberY1[i]);
  }
}

void draw() {
  background(242, 242, 240);
 for (int i = 0; i<squ.length; i++) {
    squ[i].bsq();
  }
   for (int i = 0; i<squ1.length; i++) {
    squ1[i].bsq();
  }

}

class Square {
  float x, y;

  Square(float _x, float _y) {
    x = _x;
    y = _y;
  }

  void bsq() {
    fill(54, 80, 172);
    rect(x, y, 10, 10);
  }
}

Julo

class Square {
  float x, y;

  Square(float _x, float _y) {
    x = _x;
    y = _y;
  }

  void bsq() {
    fill(54, 80, 172);
    rect(x, y, 10, 10);
  }
}

Chrisir

I don't understand what you want to achieve...?

What is your problem?

why not stick to

Square [] squ = new Square[3000];

?

No need to split it up, really. Why?

hints

you can append data to the array using append() - see reference

or use an ArrayLIst in the 1st place (you can add items easily here, when you don't know how many items you'll have in the end)

the initial lines with the values

when your issue are those lines:

int [] numberY1 = {173, 215, 280, 426};

• you can make them as long as you want and also insert line breaks inside of them

• or you store those data in a text file and load it in a for-loop

Chrisir ;-)

Julo

I mean if I have 3000 numbers in one array, wouldn't that be hard to find, let's say, the number on spot 349? Or I just use println to find out? The reason why I wanted to separate values into different array is because I will be easier to find like my attachment x,y value for the second column 4th square when I have 100 columns and a lot more squares.

Chrisir

no...

I see your problem....

but your solution is not wise

you can let the square println out it's position when you click on it with the mouse

Chrisir

there are also techniques to tell each square not only the x,y position (in pixels) but also to tell it the column and row it has (when you think of a grid)

Chrisir

here

// make a grid of rectangles by using nested for loops. 

Box [] boxes = new Box[26]; 

void setup() { 
  size(600, 600); 
  // smooth();

  // Create a 4x4 grid of boxes
  int x = 10;  // dist left  
  int y = 10;  // dist top
  int k=0;

  for (int i = 0; i < 5; i += 1) { 
    for (int j = 0; j < 5; j += 1) {

      color strokeColor1 = color (random(255), random(255), random(255));   

      boxes[k] = new Box(x+i*53, y+j*53, 
      50, 11*(j+1), 
      strokeColor1, 
      i, j);

      k++;
    } // for
  } // for
  //
} // setup()

/////////////

void draw() { 
  background(255);

  // display the boxes 
  for (int i = 0; i < 25; i++) { 
    boxes[i].display();
    print (i);
    print ("  ");
  } // for
} // draw()

// ==============================

class Box {

  float x;
  float y; 

  float w=50;
  float h=50; 

  color colorBox;

  int column;
  int row;

  // constr 
  Box ( float x, float y, 
  float w, float h, 
  color colorBox, 
  int column, int row) {
    this.x=x;
    this.y=y;

    this.w=w;
    this.h=h;

    this.colorBox=colorBox;

    this.column=column;
    this.row=row;
  } // constr 

  void display() {
    stroke(colorBox);
    noFill();
    //fill(colorBox);
    //strokeWeight(3);
    rect (x, y, w, h);
    fill(0);
    text (column+"/"+row, x+5, y+15);
    println (x);
  } // method
} // class 
//

Julo

hmm... yes, I do have println out my mouseX and mouseY ... but I think a grid system is what I need. So I can have access to each individual square, say make square 1,2,3 move, but not 4,5,6,7...

sorry, let me think it through before I have other questions, I don't wanna waste your time when I don't even know what I wanna ask...thanks.

Julo

Got the grid code, will study those too, thanks Chrisir, again!

Chrisir

it depends what you are aiming at of course...

I mean if I have 3000 numbers in one array, wouldn't that be hard to find, let's say, the number on spot 349?

do you want to find it with the mouse?

or does your sketch have to find the rect's number? And the sketch shows one attachment then?

Chrisir

yes, you can let your sketch check

• whether a square was clicked (using mouseX and mouseY) and also

• which square was clicked

and then it's selected

and you can drag and drop it

or show its data

GoToLoop

Various online grid examples: :bz

• http://studio.processingtogether.com/sp/pad/export/ro.98-pSvW97Q-RE/latest
• http://studio.processingtogether.com/sp/pad/export/ro.9ABG0RKl9D2Bx/latest
• http://studio.processingtogether.com/sp/pad/export/ro.93MhRWK35nIP8/latest
• http://studio.processingtogether.com/sp/pad/export/ro.9L5jAtga7SpyF/latest
• http://studio.processingtogether.com/sp/pad/export/ro.9vAkI4JDuLs8s/latest
• http://studio.processingtogether.com/sp/pad/export/ro.91FXxn8BG2fPL/latest
• http://studio.processingtogether.com/sp/pad/export/ro.9A9O52aqsIjdx/latest

Chrisir

here you got some fancy drag and drop

// make a grid of rectangles by using nested for-loops. 

Box [] boxes = new Box[26]; 

// here we store the selected cell
boolean mouseHoldLeftButton=false;   // is there a selected cell? Left mouse button 
boolean mouseHoldRightButton=false;  // is there a selected cell? Right mouse button
int mouseHoldIndex = -1;   // which cell?

void setup() { 
  size(600, 600); 
  // smooth();

  // Create a 4x4 grid of boxes
  int x = 10;  // dist left  
  int y = 10;  // dist top
  int k=0;

  for (int i = 0; i < 5; i += 1) { 
    for (int j = 0; j < 5; j += 1) {

      color strokeColor1 = color (random(255), random(255), random(255));   

      boxes[k] = new Box(x+i*53, y+j*53, 
      50, 11*(j+1), 
      strokeColor1, 
      i, j, 
      "My Name is "+i+"|"+j+".");

      k++;
    } // for
  } // for
  //
} // setup()

/////////////

void draw() { 
  background(255);

  // display the boxes 
  for (int i = 0; i < 25; i++) { 
    if (mouseHoldLeftButton && mouseHoldIndex==i)
      boxes[i].display( true );
    else 
      boxes[i].display( false );
    //print (i);
    //print ("  ");
  } // for

  // when we hold the mouse 
  if (mouseHoldLeftButton) {
    // we show data 
    text (boxes[mouseHoldIndex].getData(), 20, height-20);
    boxes[mouseHoldIndex].x += mouseX-pmouseX;
    boxes[mouseHoldIndex].y += mouseY-pmouseY;
  }
  else if (mouseHoldRightButton) {
    // we show text top of the box
    stroke(0); 
    fill(244, 233, 43);
    rect (boxes[mouseHoldIndex].x+7, boxes[mouseHoldIndex].y-60, 
    150, 70);
    fill(0); 
    text ( boxes[mouseHoldIndex].getData(), 
    boxes[mouseHoldIndex].x+12, boxes[mouseHoldIndex].y-60, 
    150, 200);
  }
} // draw()

// -------------------------------------------------
// mouse functions 

void mousePressed() {
  // function gets called automatically on mouse pressed;
  // check the boxes 
  for (int i = 0; i < 25; i++) {
    // if mouse is inside
    if (boxes[i].mouseOver()) {
      if (mouseButton==LEFT) {
        // print its data
        boxes[i].printData();
        mouseHoldIndex=i;
        mouseHoldLeftButton=true;
      } 
      else {
        mouseHoldIndex=i;
        mouseHoldRightButton=true; 
        // text ( boxes[i].getData(), boxes[i].x+7, boxes[i].y-10, 150, 300);
      } 
      // leave the for-loop 
      break;
    } // if
  } // for
} // function

void mouseReleased () {
  // function gets called automatically on mouse released;
  mouseHoldLeftButton=false;
  mouseHoldRightButton=false;
  mouseHoldIndex=-1;
} // function

// ==============================

class Box {

  float x;
  float y; 

  float w=50;
  float h=50; 

  color colorBox;

  int column;
  int row;

  String textBox;

  // constr 
  Box ( float x, float y, 
  float w, float h, 
  color colorBox, 
  int column, int row, 
  String textBox) {
    this.x=x;
    this.y=y;

    this.w=w;
    this.h=h;

    this.colorBox=colorBox;

    this.column=column;
    this.row=row;

    this.textBox = textBox;
  } // constr 

  void display(boolean isSelected) {
    // displays the cell. The var isSelected
    // says whether we hold it with the mouse. 
    stroke(colorBox);
    noFill();
    if (isSelected) {
      fill(colorBox);
    }
    //strokeWeight(3);
    rect (x, y, w, h);
    fill(0);
    text (column+"/"+row, x+5, y+15);
    // println (x);
  } // method

  boolean mouseOver() {
    // returns whether the mouse is over this rect or not
    boolean result = false; 
    result = mouseX>=x && mouseX<=x+w && 
      mouseY>=y && mouseY<=y+h;
    return result;
  } // method

  void printData() {
    // just prints 
    println (getData());
  } // method

  String getData() {
    // returns a data set
    return "Positon in grid is column "
      +column
      +" and row "
      +row
      +". Screen pos is "
      +x+","
      +y+". " 
      +textBox;
  } // method
  //
} // class 
//