Using Grids in Creative Coding

Originally published by George Gally on March 3rd 2017 1,821 reads

Using Grids in Creative Coding: How to create a reusable grid system in Javascript. The code and libraries for these tutorials can be found here: https://://github.com/GeorgeGally/creative_coding/Creative_Coding. The code is pretty simple really. We have the number of items we want horizontally, and vertically, as well as the grid’s width and height. We create a createGrid() function that loops through the x and y points to create our grid, and pushes them onto an array.

@radarboy3000
George Gally

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

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 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 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 system to make it easy (if you haven’t been following along, see here on how to create one). Let’s build a grid of particles like so:

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:

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:

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

See previous editions of Introduction to Creative Coding here: https://hackernoon.com/@radarboy3000

Follow me on Instagram here: https://www.instagram.com/radarboy3000/

Follow me on Twitter here: 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

Enter The Decentralized Internet Writing Contest

Using Grids in Creative Coding

@radarboy3000George Gally

How to create a reusable grid system in Javascript

Tags

@radarboy3000
George Gally