let tiles;

let n = 10;

let bg, fg;

let time = 0;

​

function preload() {

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

}

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  bg = color(0);

  fg = color(51, 0, 255);

  tiles = [];

​

  let w = width / n;

  let h = height / n;

​

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

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

      let tile = createGraphics(w, h);

      tile.textFont(font);

      tile.textSize(100);

      tile.textStyle(BOLD)

      tiles.push(tile);

    }

  }

}

​

function draw() {

  background(bg);

​

  let tileIndex = 0;

  time += 0.5;

  translate(-465,-445)

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

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

      push();

      translate(i * width / n, j * height / n);

      drawTile(tileIndex, time);

      pop();

      tileIndex++;

    }

  }

}

​

function drawTile(index, t) {

  let tile = tiles[index];

  tile.background(bg);

  tile.fill(fg);

  tile.text("O", 10, height / (2 * n) + tan(t + index) * 20);

  image(tile, 0, 0);

}

​

function keyPressed() {

  if (key === 's' || key === 'S') {

    saveCanvas('scales 1_', 'png'); // Save the canvas as a svg file with the filename 'blank'

  }

}

​

function keyPressed() {

  if (key === 'f' || key === 'F') {

    enterFullscreen();

  }

}

​

/* enter fullscreen-mode via

 * https://editor.p5js.org/kjhollentoo/sketches/H199a0c-x

 */

function enterFullscreen() {

  var fs = fullscreen();

  if (!fs) {

    fullscreen(true);

  }

}

​

/* full screening will change the size of the canvas */

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

/* prevents the mobile browser from processing some default

 * touch events, like swiping left for "back" or scrolling

 * the page.

 */

document.ontouchmove = function(event) {

  event.preventDefault();

}