let tiles;

let n = 20;

let bg, fg;

​

​

function preload() {

  font = loadFont("Smokum-Regular.ttf");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  bg = color(0);

  fg = color(255,20,147);

  tiles = [];

  let w = windowWidth/n;

  for (let i = 0; i < n; i++) {

    let tile = createGraphics(w, 500);

    tile.background(bg);

    tile.textFont(font);

    tile.textSize(110);

    tiles.push(tile);

  }

  console.log(document.getElementsByClassName("preview-nav").style)

}

​

function draw() {

  background(bg);

  scale(2.5 + sin(frameCount*0.001) * 2);

  translate(-width/6, -height / 5);

  lights();

​

  let w = windowWidth/n;

  tiles.forEach((tile, i) => {

    tile.background(bg);

    let x = (-sin((frameCount *i * 5) * 0.02)*10) - i * w;

    let y = 200 + ((frameCount + i * 10) * 0.01) * 10;

    tile.fill(fg);

    tile.text("BUFFER", x, y);

    push();

    translate(i * w, 200, i*w);

    rotateX((frameCount + i * 200) * 0.01);

    rotateY((frameCount + i * 20) * 0.01);

    translate(0, -200);

    image(tile, 0, 0);

    pop();

​

  });

​

}

​