let fontRegular;

let fontBlack;

let nums = 6;

let boxes = [];

let index = 0;

​

let tx = 0;

let ntx = 1;

let ty = 0;

let nty = 1;

​

function preload() {

  fontRegular = loadFont("Lato-Regular.ttf");

  fontBlack = loadFont("Lato-Black.ttf");

}

​

function setup() {

  createCanvas(540, 540);

  textFont(fontRegular);

  textSize(15);

​

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

    let box = [];

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

      let x = random(width * 0.2, width * 0.8);

      let y = random(height * 0.2, height * 0.8);

      box.push({ x, y });

    }

    boxes.push(box);

  }

}

​

function draw() {

  tx += (ntx - tx) * 0.55;

  ty += (nty - ty) * 0.01;

​

  if (tx >= 0.01 && ty >= 0.95) {

    tx = 0;

    ty = 0;

    index++;

    index %= boxes.length;

  }

​

  background(0,2);

  noFill();

​

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

    let i0 = index;

    let i1 = index + 1;

    i1 %= boxes.length;

​

    let v0 = boxes[i0][i];

    let v1 = boxes[i1][i];

    let x1 = v0.x + (v1.x - v0.x) * tx;

    let y1 = v0.y + (v1.y - v0.y) * ty;

    let w = 500;

    let h = 120;

    let c = color(255);

    push();

    stroke(c);

    fill(255);

    translate(x1, y1);

​

    textAlign(CENTER);

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

      let offsetX = j * 10;

      let offsetY = 0;

      let textX = -w / 1 + offsetX;

      let textY = -h / 1 + offsetY;

      if (j % 2 === 0) {

        textFont(fontRegular);

      } else {

        textFont(fontBlack);

      }

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

      translate(50, sin(frameCount * 5.01) * 0, i, i);

      // text("Flying", textX, textY, w, h);

      // text("Stair", textX, textY + 200, w, h);

      text("slow", textX, textY, i * 100, w, h);

      text("fast", textX, textY + 200, i * 100, w, h);

      // text("up", textX, textY + 200, i * 100, w, h);

      // text("down", textX, textY + 200, i * 100, w, h);

      // text("center", textX, textY + 200, i * 100, w, h);

      }

// old code

//   for (let i = 0; i < 10; i++) {

​

//   translate(0, sin(frameCount * 0.01) * 20, i, i);

//   text("Flying", i * 10, -w / 1, -h / 1, w, h);

//   text("Stair", i * 10, -w / 5, -h / 10, w, h);

// }

    }

    pop();

  }

}

​

function mousePressed() {

  index++;

  index %= boxes.length;

}

​

let isShowGrid = false;

​

// enter fullscreen

​

function keyPressed() {

  if (key === "s") {

    if (this._renderer.elt.svg !== undefined) {

      saveSVG(label + ".svg");

    } else {

      saveCanvas(label + ".png");

    }

  }

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

    enterFullscreen();

  }

}

​

​

function enterFullscreen() {

  var fs = fullscreen();

  if (!fs) {

    fullscreen(true);

  }

}

​

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

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

​

​

​

​