How to find cellsize in 4 * 4 grid of canvas size 1280*720?

Kaashdivitre

I have been trying to execute a program where I will insert images in each cell. Considering it is a 4 * 4 grid, each cell size would be 360*180. How do I represent that in equation?

Whenever I implement the following code I get this result (http://imgur.com/a/y5Kx9). I don't want the gapes and not bleed off at the borders. What am i doing wrong?

Following is the code:-

PImage[] pieces=new PImage[16];



void setup() {
  size(1280, 720);
  for (int i=1; i<pieces.length; i++) {

    pieces[i]=loadImage(""+i+".jpg");
  }
  frameRate(1);
  imageMode(CORNER);
}
void draw() {
  float gridsize=4;

  float cellsize=(width/4); //calculating the cellsize to insert images in it

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

      int index=int(random(1, pieces.length));
      image(pieces[index], i*cellsize, j*cellsize);
      //image(pieces[index],cellsize*i,cellsize*j);
      //image(pieces[index],i*180,360*j);
    }
  }
}

Alex_Pr

You are using cellsize for both width and height of your cells. Either write 2*cellsize for the width or declare a new variable. You should also check the image dimensions to fit inside the cells

jeremydouglass

To echo Alex_Pr, your code will be even clearer if instead of cellsize you create one variable cellwidth and a second variable cellheight. You might also want to consider changing gridsize to gridwidth and gridheight -- they can each be 4 and 4, but if you decide to later make your layout 4x3 or 3*8 then coding the grid units for height and width separately makes this easy to change.

Kaashdivitre

@jeremydouglas Thanks, your answer was really helpful.