const rows = 12

const cols = 12

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  grid = makeGrid(cols, rows) 

}

​

let roboto;

​

function preload() {

  roboto = loadFont('roboto.ttf');

}

​

function draw() {

  background(0);

  const dim = Math.min(width, height)

  const margin = dim * 0.1; 

  const innerWidth = dim - margin * 2

  const innerHeight = dim - margin * 2

  const cellWidth = innerWidth / cols

  const cellHeight = innerHeight / rows

  translate(

    -innerWidth * 0.5 + cellWidth * 0.5, 

    -innerHeight * 0.5 + cellHeight * 0.5)

  grid.map(({x, y, index}, i) => {

    const sx = lerp(0, innerWidth, x)

    const sy = lerp(0, innerHeight, y)

    const t = millis() / 5000

    const ticker = ease(index, 1.2)

    const progress = fract(t - ticker)

    const changer = ease(progress, 2); 

    const elasticChanger = easeOutElastic(changer)

    const letter = i < 9 ? `0${i + 1}` : `${i + 1}`

​

    drawTile({

      x: sx, 

      y: sy, 

      width: cellWidth * 0.9, 

      height: cellHeight * 0.9,

      letter,

    }, elasticChanger)    

  })

}

​

function drawTile(tile, progress) {

  const {x, y, width, height, letter} = tile

​

  const r = lerp(0, Math.PI * 2, progress)   

  const thickness = 3

  push()

  translate(x, y)

  rotateX(r)

​

  // box

  stroke(255)

  fill(0)

  box(width, height, thickness)

  // text

  translate(0, 0, thickness + 0.1);

  textFont(roboto); 

  fill(255);

  textSize(14);

  textAlign(CENTER, CENTER); 

  text(letter, 0, 0);

  pop()  

}

​

function makeGrid(cols, rows) {

  return new Array(cols * rows)

    .fill(0)

    .map((_, i) => {

    const x = (i % cols) / cols

    const y = Math.floor(i / cols) / rows

    const index = ((x + y) * cols) / (cols + rows)

    return {x, y, index}

  })

}

​

function easeOutElastic(x) {

  const c4 = (2 * PI ) / 3;

  if(x <= 0) return 0;

  if(x >= 1) return 1;

  return Math.pow(2, -8 * x) * Math.sin(

    (x * 8 - 0.75) * c4) + 1;

}

​

function ease(p, g) {

  if (p < 0.5) {

       return 0.5 * Math.pow(2 * p, g);

  }

  return 1 - 0.5 * Math.pow(2 * (1 - p), g);

}

​

​

​