THE PROCESSING IDE

GUIDE - GRID

 

 

ALL CODE FILES (ZIPPED)

 

Click here for the zipped file that contains all four guides found below.  You will need to unzip the file before being able to open the code in Processing.

 

 

GRID GUIDE 01 – A SIMPLE GRID

 

In this program, we have created a simple Grid object that is created based on location, size and number of rows and columns.

 

 

 

GRID GUIDE 02 – COLOURS IN CELLS (TILES)

 

In this program, we have used the Grid class from the previous example and also added a Tile class the holds the content of individual cells.  The complexity of this program is a fair bit higher than the previous one because we now have to work with a 2D array.

 

 

 

GRID GUIDE 03 – IMAGES IN TILES

 

In this program, we updated the Tile class to optionally include an image in the tile.  The jump in complexity from the previous guide to this one is actually a small one. 

 

Note that if the images have a transparent background, you would see the tile’s background colour. 

 

Note 2: The tiles are 64 by 64 in the example below to match the images that are also 64 by 64 pixels.

 

 

 

GRID GUIDE 04 – CLICKABLE TILES

 

In this program, we added new methods in both Grid and Tile to deal with clicks.  With this extra functionality, we can now alter the Grid’s content by clicking on it. 

Note: The Grid below is sensitive to clicks.  When you click on a tile, that tile colour is randomly changed.  Before the screen capture, I spent a bit of time clicking on the top three rows of tiles making all of them blue.

 

 

 

GRID GUIDE 04B – MAP BUILDER

 

This program is a minor tweak from Guide 04.  We simply changed the started colour for the tiles to be blue and made clicked tiles become green.  This creates an application similar to a map building program.

 

 

 

GRID GUIDE 05 – SELECTED TILE (CLICK)

 

In this program, we added a selected tile image to the grid that shows which tile it selected.  We can change the selected tile by clicking on a different tile.

 

 

 

GRID GUIDE 06 – SELECTED TILE (ARROW KEYS)

 

In this program, we added the ability to move the selector square around the grid using the keyboard’s arrow keys.