* Creative Coding Workshop #4 Demo - Tiles with Class

 *

 * Jack B. Du (github@jackbdu.com)

 */

​

// initialize an empty array to keep tile objects

let tiles = [];

​

function setup() {

  createCanvas(400, 400);

  // specify numbers of cols and rows

  let cols = 10;

  let rows = 10;

  let tileWidth = width/cols;

  let tileHeight = height/rows;

  // initialize tiles in a grid

  for (let r = 0; r < rows; r++) {

    for (let c = 0; c < cols; c++) {

      let x = (c+0.5)*tileWidth;

      let y = (r+0.5)*tileHeight;

      tiles.push(new Tile(x, y, tileWidth, tileHeight));

    }

  }

}

​

function draw() {

  background(220);

  // display each tile

  for (let tile of tiles) {

    tile.display();

  }

}

​

// a class (a template, a blueprint) for tile

class Tile {

  // constructor for initializing the object with these provided parameters

  constructor(x, y, w, h) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

  }

  // display current tile

  display() {

    rectMode(CENTER);

    rect(this.x, this.y, this.w, this.h);

  }

}