Working With A Grid

Many simple games take place on grids – Tetris or Minesweeper are examples. So how can we do that? We’ll want to use a grid to keep track of what’s going on.

Something we can use, is what’s called a 2-dimensional array. We can declare one of those like this:

int[][] grid = new int[width][height]

See the similarity?

We’re going to use that here to make a gradient of red and blue. We’ll divide our applet into a grid, and increase the amount of red in one direction, and the amount of blue in the other.

We’ll need some variables:

int sqsize = 10;
int wh = 500;
int n;

int[][] rgrid;
int[][] bgrid;

In our setup() method, we’ll fill the arrays with values, like this:

void setup() {
  size(500, 500);
  noLoop();
  n = wh/10;
  rgrid = new int[n][n];
  bgrid = new int[n][n];

  // give initial values to first row of red and first column of blue
  for (int i = 0; i < n; i++) {
      bgrid[0][i] = 1;
      rgrid[i][0] = 1;
  }

  // now calculate the rest of them
  for (int i = 1; i < n; i++) {
      for (int j = 0; j < n; j++) {
         int r = rgrid[j][i-1] + 5;
         if (r > 255) {
            r = 1;
         }
         rgrid[j][i] = r;

         int b = bgrid[i-1][j] + 5;
         if (b > 255) {
             b = 1;
         }
         bgrid[i][j] = b;
      }
  }
}

Then, in our draw method we can set the color using the value from that point in the grid.

void draw() {
   // use r and b values to pick color
  for (int i = 0; i < n; i++) {
     for (int j = 0; j < n; j++) {
        stroke(255);
        fill(rgrid[i][j], 0, bgrid[i][j]);
        rect(i*sqsize, j*sqsize, sqsize-2, sqsize-2);
     }
  }
}

How’s that look? I added some green to mine – can you work out how I did it? What happens when we change how much we increase the color (in setup()). What other cool things can we do using this?

Grid

Grid

One Response to Working With A Grid

  1. Pingback: Processing » Archive » Pacman

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>