Draw an array of objects left to right, move to the beginning of "next line" after Nth object

Smithy

Hello. New to the forums and processing.js. The title probably doesn't explain well what I'm trying to do, I wasn't sure how to formulate it better. Sorry about that.

I'm drawing books (rectangle, title, star rating), left to right. Each book is an object in an array. Right now, the books are drawing like this:

1 2 3 4 5 6 ...

What I'd like to do is have the code draw 4 books left to right, then move the 5th book down some amount of pixels and to the X position of book 1. Like this.

1 2 3 4

5 6 7 8

9 10, 11

I've tried fiddling with nested loops and split(), to no avail. Any help would be appreciated. Thanks.

Chrisir

// book shelf

// global vars 
color[][] colors = new color[8][8];

//------------------------------------------------
// MAIN functions  

void setup() {
  // init 
  size(660, 660);
  //
  // init 
  for (int y=0; y < colors.length; y++) { 
    for (int x=0; x < colors.length; x++) {
      colors[x][y]= color(255, 0, 0);
    }
  }
  //
  strokeWeight(.2);
  showAGrid(colors, 28);
  strokeWeight(1);
}

void draw() {
  // empty
}

//------------------------------------------------
// Tools 

void showAGrid(color[][] colorsLocal, int xOffSet) {

  // distance between  
  int distanceCell = 41; 

  // size of a cell 
  int sizeCellX = 19;
  int sizeCellY = 27;

  // nested for loop
  for (int y=0; y < colorsLocal.length; y++) { 
    for (int x=0; x < colorsLocal.length; x++) 
    {
      fill(colorsLocal[x][y]);
      stroke(255);
      rect(x*distanceCell+xOffSet, y*distanceCell+18, 
      sizeCellX, sizeCellY);
    }
  }
}

//------------------------------------------------
//

Chrisir

ah, this is processing, not js

adapt it....

;-)

Chrisir

there is a tutorial on 2 dimensional arrays (a grid like a checcboard)

Smithy

Alrighty. Thanks for the tip.

Chrisir

the core is line 42 and 43

those are row and column number

you can multiply them with distanceCell to have a grid (distance between cells)

you then can add something to have a border to the screen (x: xOffSet and y: 18)

Chrisir

// book shelf: 1D array (list) - displayed in a grid 

// global vars 
color[] colors = new color[25];

//------------------------------------------------
// MAIN functions  

void setup() {
  // init 
  size(660, 660);
  //
  // init 
  for (int y=0; y < colors.length; y++) { 
    colors[y]= color(255, y*9, 0);
  }
  // show it 
  strokeWeight(.2);
  showAGrid(28);
  strokeWeight(1);
}

void draw() {
  // empty
}

//------------------------------------------------
// Tools 

void showAGrid(int xOffSet) {

  // distance of the cells  
  int distanceCell = 41;

  // size of a cell  
  int sizeCellX = 19;
  int sizeCellY = 27;

  int i=1;

  int xScreen=xOffSet;
  int yScreen=18;

  // one for-loop
  for (int x=0; x < colors.length; x++) {

    fill(colors[x]);
    stroke(0);
    rect(xScreen, yScreen, 
    sizeCellX, sizeCellY);

    fill(255);
    text(i, xScreen+3, yScreen+16);

    // just move to the right 
    xScreen = xScreen + distanceCell;

    // after 5 times: new line
    if ((x>0) && (i%5==0)) {
      xScreen=xOffSet;   // back to left side again
      yScreen=yScreen + distanceCell;  //  new line
    } // if

    i++;
  } // for
} // func 

//------------------------------------------------
//

Chrisir

this new version has not a 2D array colors, but a 1D array (a List)

Hence the for-loop is a simple for-loop not a nested for-loop

the line-feed is done by xScreen and yScreen which you just have to give the correct values (see above)

Smithy

Thanks for all your input. A lot to chew on for a beginner :). Reading up on 2d arrays right now. I'll go over your code shortly.

Chrisir

it's not much

just ask if you need something

;-)

GoToLoop

http://forum.Processing.org/two/discussions/tagged/2darray

Smithy

Success. Ended up using 1D array (2nd example). This is the result
https://www.khanacademy.org/computer-programming/dull-as-rock-bookshelf/5678308290330624

Trying to draw the star rating in the same manner was giving me a headache. I first had to group the stars, then spread them out... and this line xScreen /*in my project it's starX*/ = xOffSet
was no longer working, so I had to use starX -= 400 to get the groups of stars to line up at the beginning of the shelf (took me a while).

I also had to change
if((x > 0) && (i % 0 == 5))
to
if((x > 0) && (i % 4 === 3))
Not sure why (fyi, KA doesn't accept ==).

Thanks for the help.

Chrisir

Great