let tiles;          

let font;           

​

​

function preload() {

  font = loadFont('FreeSansBold.otf');

}

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

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

  let pg = createGraphics(width, height);

  pg.background(255,0,0);

  pg.textFont(font);            

  pg.textAlign(CENTER, CENTER); 

  pg.textSize(300);             

  pg.fill(20,16,27);

  pg.noStroke();

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

  pg.textLeading(100);

​

  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,0,0);

}

​

​

​

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() {

​

    push();

    translate(this.x, this.y);

    rotate(sin(frameCount*0.1)*0.1);

    scale(tan(frameCount*0.01),sin(frameCount*0.1));

    image(this.img, 0,0);

    pop();

  }

}

​