Dynamic (exploding!) Grid Maker

December 29th, 2007 : Nik Rowell

I realize how potentially boring a ‘Dynamic Grid Maker’ might sound, but it is mainly a precursor to some more exciting experiments (some of which are done but are awaiting an official Technology Translated introduction). And just to keep your attention, I’ve added a function that allows you to ‘explode’ the grid.

I wanted a way to programatically create a grid based on a few variables: cell width and height, number of rows, number of columns and, just for fun, whether or not to display the grid lines. Most importantly, though, I wanted control over each individual cell. From a programming standpoint, this is actually quite straight forward.

The basic steps are as follows:

  1. Declare the desired variables - cell dimensions, grid specifics etc
  2. Loop through your rows and columns:
    “for each row …. run this block of code for every one of your columns”

    • create a variable to hold reference to the current cell in the iteration
    • set all your properties for that cell (x position, y position etc etc)
    • Add interactivity as desired
    • add the current cell to an array (basically a ’set’ or list of variables) that holds reference to each of our individual cells.
  3. Explode everything

Grid Explosion!

I didn’t feel like making an ‘implode’ or ‘restore’ function… so enjoy your 1-time grid explosion (or refresh the page ;)

Tags:

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • ThisNext
  • Furl
  • Reddit
  • Slashdot
  • Technorati

Leave a Reply:

Subscribe without commenting