let tiles;          // list of tiles, created in setup()

let font;           // font we'll use

​

​

function preload() {

  font = loadFont('FreeSansBold.otf');

}

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  p=('\n\nNOT\nAGAIN\nBILLY')

  // draw the text to a graphics object

  let pg = createGraphics(width, height);

  pg.background(255);

  pg.textFont(font);            // note we have to start all

  pg.textAlign(CENTER, CENTER); // commands with the name of

  pg.textSize(300);             // the graphics object

  pg.fill(20,16,27);

  pg.noStroke();

  pg.text(p, pg.width/2, pg.height/2-408);

  pg.textLeading(100);

​

​

  // split the graphics object into tiles

  tiles = [];

  for (let y=0; y<pg.height; y+=tileSize) {

    for (let x=0; x<pg.width; x+=tileSize) {

      let tile = new Tile(x, y, tileSize, pg);

      tiles.push(tile);

    }

  }

  background(255);

}

​

​

// display the tiles (real work is in the

// Tile class below)

function draw() {

  for (let i=0; i<tiles.length; i++) {

    tiles[i].display();

  }

}

​

​

// a simple class for the tiles

// this lets us more easily create images

// from the graphics we made in setup(),

// handle displaying them, etc though you

// could definitely do this without a class

class Tile {

  constructor(x, y, w, pg) {

    this.x = x;

    this.y = y;

    // create an empty image and copy from

    // the graphics object we made above!

    this.img = createImage(w, w);

    this.img.copy(pg, x,y, w,w, 0,0, w,w);

  }

  // display tiles

  display() {

​

    push();

    translate(this.x, this.y);

    rotate(sin(frameCount*0.05)*sin(frameCount*0.05));

    scale(cos(frameCount*0.05));

    image(this.img, 0,0);

    pop();

  }

}

​