* Creative Coding Workshop #4 Demo - Interactive Tiles - Colorful

 *

 * 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);

  // update and display each tile

  for (let tile of tiles) {

    tile.update();

    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;

    this.baseColor = color(255);

    this.c = this.baseColor;

  }

  // update color and dimension based on mouse positions

  update() {

    // if mouse is inside current tile

    if (mouseX > this.x-this.w/2 &&

        mouseX < this.x+this.w/2 &&

        mouseY > this.y-this.h/2 &&

        mouseY < this.y+this.h/2) {

      // assign a color based on current tile positions

      this.c = color(map(sin(this.x/2),-1,1,0,255),

                     map(sin(this.y/3),-1,1,0,255),

                     map(sin(this.x/4),-1,1,0,255));

      this.w = this.w*0.9;

      this.h = this.h*0.9;

    // if mouse is outside current tile

    } else {

      // assign a color by blending two colors

      this.c = lerpColor(this.c,

                         this.baseColor,

                         0.2);

    }

  }

  // display current tile

  display() {

    fill(this.c);

    rectMode(CENTER);

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

  }

}