How to create a reusable grid system in Javascript
--------------------------------------------------

**I’m a massive fan of repetition. So I use grids pretty much every day. It’s a fast and easy way to layout things on the screen.**

All the code and libraries for these tutorials can be found here: [https://github.com/GeorgeGally/creative\_coding](https://github.com/GeorgeGally/creative_coding)

Grid creation is pretty simple really. We have the number of items we want horizontally, and vertically, as well as the grid’s width and height. Throw in a start position for good measure to place it nicely where we want it on the screen and we have our grid.

So let’s pass in those conditions to our grid creation function:

function Grid(\_num\_items\_horiz, \_num\_items\_vert, \_grid\_w, \_grid\_h, \_startx, \_starty){

   return this;

}

One thing I learned recently from [Javascript Hacks for Hipsters](https://hackernoon.com/javascript-hacks-for-hipsters-624d50c76e8e#.z23l3royd) is that your can use || to test is if a variable is _undefined_, instead of using an _if statement_, like so:

_// usual way_  
// if (\_num\_items\_horiz == undefined) \_num\_items\_horiz = 1;

_// hipster way_  
var num\_items\_horiz = \_num\_items\_horiz || 1;

We create a _createGrid()_ function that [loops](https://hackernoon.com/tagged/loops) through the x and y points to create our grid, and pushes them onto an array:

function Grid(\_num\_items\_horiz, \_num\_items\_vert, \_grid\_w, \_grid\_h, \_startx, \_starty){

  _// these are temp variables to store the original \_num\_items    
  // variables passed in the constructor_  var num\_items\_horiz = \_num\_items\_horiz || 1;  
  var num\_items\_vert = \_num\_items\_vert || 1;  
     
  this.horiz = 0;  
  this.vert = 0;

  this.start = {x: \_startx || 0 , y: \_starty || 0};

  this.grid\_w = \_grid\_w || w;  
  this.grid\_h = \_grid\_h || h;

  // empty arrays to store our grid positions   
  this.x = \[\];  
  this.y = \[\];

  _//work out how far apart the grid items are_  this.spacing\_x = this.grid\_w / this.num\_items\_horiz;  
  this.spacing\_y = this.grid\_h / this.num\_items\_vert;  
  

  **this.createGrid = function() {  
    for (var \_y = 0; \_y < this.grid\_h; \_y+=this.spacing\_y) {  
     for (var \_x = 0; \_x < this.grid\_w; \_x+=this.spacing\_x) {**

      _// we use spacing/2 so that the grid fits nicely   
      // in our defined area _**  
      this.x.push(this.start.x + this.spacing\_x/2 + \_x);  
      this.y.push(this.start.y + this.spacing\_y/2 + \_y);  
     }  
   }**

  createGrid();   
  return this;

}  
  

The only thing left to do was to create an add() function, so items can be added on the fly, so the final code look like this:

function Grid(\_num\_items\_horiz, \_num\_items\_vert, \_grid\_w, \_grid\_h, \_startx, \_starty){

  if (\_num\_items\_horiz == undefined) \_num\_items\_horiz = 1;  
  if (\_num\_items\_vert == undefined) \_num\_items\_vert = 1;  
  var \_horiz = \_num\_items\_horiz || 1;  
  var \_vert = \_num\_items\_vert || 1;

  this.spacing\_x;  
  this.spacing\_y;

  this.num\_items\_horiz = 0;  
  this.num\_items\_vert = 0;

  this.start = {x: \_startx || 0 , y: \_starty || 0};

  this.grid\_w = \_grid\_w || w;  
  this.grid\_h = \_grid\_h || h;

  this.x = \[\];  
  this.y = \[\];

  **this.add = function(\_horiz, \_vert) {**        _// if we don't pass a value just add 1 to the size_    **this.num\_items\_horiz += \_horiz || 1;  
    this.num\_items\_vert += \_vert || 1;  
    this.spacing\_x = this.grid\_w / this.num\_items\_horiz;  
    this.spacing\_y = this.grid\_h / this.num\_items\_vert;      
    this.createGrid();   
    return this;**

  **}**

  **this.setStart = function(\_x, \_y) {  
    this.start = {x: \_x || 0 , y: \_y || 0};  
    createGrid();  
    return this;  
  }**

    
 this.createGrid = function() {  
    for (var \_y = 0; \_y < this.grid\_h; \_y+=this.spacing\_y) {  
     for (var \_x = 0; \_x < this.grid\_w; \_x+=this.spacing\_x) {   
      this.x.push(this.start.x + this.spacing\_x/2 + \_x);  
      this.y.push(this.start.y + this.spacing\_y/2 + \_y);  
     }  
   };  
 }

 **this.add(\_horiz, \_vert);**

 return this;

}

Ok, end of the boring stuff. Let’s put our grid to use.

Let’s use a [particle](https://hackernoon.com/tagged/particle) system to make it easy (if you haven’t been following along, [see here on how to create one](https://hackernoon.com/how-to-make-particles-1cbeee937593)). Let’s build a grid of particles like so:

![](https://hackernoon.com/images/1*4urOk1pC8juMd0g6vFVAlg.gif)

To create our grid we could now do something like this:

// create grid  
var num\_grid\_horiz = 10;  
var num\_grid\_vert = 10;  
var grid\_w = 400;  
var grid\_h = 400;  
var grid\_startx = w/2 - grid\_w/2;  
var grid\_starty = h/2 - grid\_h/2;

var grid = new Grid(num\_grid\_horiz, num\_grid\_vert, grid\_w, grid\_h, grid\_startx, grid\_starty);

This will give us back a grid object can contains an array of x and y positions. Which are now easy to work with. We just iterate through our grid to get their positions, grid.x\[0\] and grid.y\[0\] to get their first position, grid.x\[1\] and grid.y\[1\] to get their second position,etc. The complete code looks like this:

var ctx = createCanvas("canvas1");

// create grid  
var num\_grid\_horiz = 10;  
var num\_grid\_vert = 10;  
var grid\_w = 400;  
var grid\_h = 400;  
var grid\_startx = w/2 - grid\_w/2;  
var grid\_starty = h/2 - grid\_h/2;

var grid = new Grid(num\_grid\_horiz, num\_grid\_vert, grid\_w, grid\_h, grid\_startx, grid\_starty);

console.log(grid);

// create particles  
var balls = \[\];  
**var number\_of\_balls = num\_grid\_horiz \* num\_grid\_vert;**

for (var i = 0; i < number\_of\_balls; i++) {  
  **addBall(grid.x\[i\], grid.y\[i\]);**  
}

function addBall(\_x, \_y){  
  var ball = {  
    x: \_x,  
    y: \_y,  
    speed\_x: random(1),  
    speed\_y: random(1),  
    size: 20,  
    colour: rgb(0),  
    angle: random(360)  
  }  
  balls.push(ball);  
}  
  

function draw(){  
  ctx.background(235, 0.5);  
  moveBall();  
  drawBall();  
}  
  

function moveBall(){

  for (var i = 0; i < balls.length; i++) {  
    var b = balls\[i\];  
    b.size = random(2, 30);  
  }

}  
  

function drawBall(){  
    
  for (var i = 0; i < balls.length; i++) {  
    var b = balls\[i\];  
    ctx.fillStyle = b.colour;  
    ctx.fillEllipse(b.x, b.y, b.size);  
  }

}

And there we have it. Let’s build on this and create something a little more complicated:

![](https://hackernoon.com/images/1*KtrJ4PH7HU4LUHUSWWwlLg.gif)

To create the image above, which is just a slight variation of header image. We change the size of the particle with a sin oscillation, and move our particle using sin and cos as per the [Math.sin and Math.cos tutorial](http://All%20the%20code%20and%20libraries%20for%20these%20tutorials%20can%20be%20found%20here:%20https://github.com/GeorgeGally/creative_coding):

var ctx = createCanvas("canvas1");

// create grid  
**var num\_grid\_horiz = 20;  
var num\_grid\_vert = 10;**

**var grid = new Grid(num\_grid\_horiz, num\_grid\_vert);**

console.log(grid);

// create particles  
var balls = \[\];  
var number\_of\_balls = num\_grid\_horiz \* num\_grid\_vert;  
for (var i = 0; i < number\_of\_balls; i++) {  
  addBall(grid.x\[i\], grid.y\[i\]);  
}

function addBall(\_x, \_y){  
  var ball = {  
    x: \_x,  
    y: \_y,  
    **startx: \_x,  
    starty: \_y,**  
    speed\_x: 1,  
    speed\_y: random(1),  
    size: 20,  
    colour: rgb(0),  
    angle: random(360)  
  }  
  balls.push(ball);  
}

function draw(){  
  ctx.background(235, 0.1);  
  moveBall();  
  drawBall();  
}

function moveBall(){

for (var i = 0; i < balls.length; i++) {  
    var b = balls\[i\];  
   ** b.angle += b.speed\_x/10;  
    b.x = b.startx + Math.cos(b.angle) \* 20;  
    b.y = b.starty + Math.sin(b.angle) \* 20;  
    b.size = 5 + Math.sin(b.angle) \* 20;**  
  }

}

function drawBall(){  
  for (var i = 0; i < balls.length; i++) {  
    var b = balls\[i\];  
    ctx.fillStyle = b.colour;  
    ctx.fillEllipse(b.x, b.y, b.size);  
  }  
}

And that’s it. We’re done. Happy repetitions.

As usual the full code is available on my github, this article is part 11 (be sure to do a pull every now and then, because I’m updating things often): [https://github.com/GeorgeGally/creative\_coding](https://github.com/GeorgeGally/creative_coding)

**See previous editions of Introduction to Creative Coding here:** [**https://hackernoon.com/@radarboy3000**](https://hackernoon.com/@radarboy3000)

**Follow me on Instagram here:** [**https://www.instagram.com/radarboy3000/**](https://www.instagram.com/radarboy3000/)

**Follow me on Twitter here:** [**https://twitter.com/radarboy\_japan**](https://twitter.com/radarboy_japan)

**And be nice and like my Facebook Page to get tutorial and workshop updates here:** [**https://www.facebook.com/radarboy3000**](https://www.facebook.com/radarboy3000)

Ball

Using Grids in Creative Coding

Too Long; Didn't Read

Companies Mentioned

@radarboy3000

RELATED STORIES