let messageX;

let messageY;

const xSpeed = 2;

const ySpeed = 25;

const amplitude = 20;

const verticalLetterSpacing = 10;

let font;

let points;

let bounds;

let label   = "Letter BZZ by RICHARD OO";

​

function preload() {

  font = loadFont('Akira Expanded Demo.otf');

}

​

function setup() {

  createCanvas(1080, 1080);

  textFont(font);  

  const n = 'bugs';

  const s = 200;

  messageX = width;

    points = font.textToPoints(n, 0, 0, s, {

    sampleFactor: 1,

    simplifyThreshold: 0.0

  });

  bounds = font.textBounds(n, 0, 0, s);

  console.log(bounds)

​

}

​

function draw() {

  background("#b6b7b9");

  fill("#cdff00");

  translate(width/2, height/2);

  textSize(100);

    let v0 = map(sin(frameCount*0.60),-1,1,10,20);

​

    messageX -= xSpeed;

  if (messageX < - textWidth(message)) {

    messageX = width + 5;

  }

  for (let i = 0; i < message.length; i++) {

    const letterX = messageX + textWidth(message.substring(0, i));

​

    const letterOffset = i * verticalLetterSpacing;

    const letterY = height / 3 -

      sin((frameCount - letterOffset) * ySpeed) * amplitude;

​

    text(message[i], letterX, letterY);

  }

  for (let i = 0; i < message.length; i++) {

    const letterX = messageX + textWidth(message.substring(0, i));

​

    const letterOffset = i * verticalLetterSpacing;

    const letterY = height / 6 +

      sin((frameCount - letterOffset) * ySpeed) * amplitude;

​

    text(message[i], letterX, letterY);

  }

​

    for (let i = 0; i < message.length; i++) {

    const letterX = messageX + textWidth(message.substring(0, i));

​

    const letterOffset = i * verticalLetterSpacing;

    const letterY = height / 2 +

      sin((frameCount - letterOffset) * ySpeed) * amplitude;

    text(message[i], letterX, letterY);

  }

    for (let i = 0; i < message.length; i++) {

    const letterX = messageX + textWidth(message.substring(0, i));

​

    const letterOffset = i * verticalLetterSpacing;

    const letterY = height / -3 -

      sin((frameCount - letterOffset) * ySpeed) * amplitude;

​

    text(message[i], letterX, letterY);

  }

  for (let i = 0; i < message.length; i++) {

    const letterX = messageX + textWidth(message.substring(0, i));

​

    const letterOffset = i * verticalLetterSpacing;

    const letterY = height / -6 +

      sin((frameCount - letterOffset) * ySpeed) * amplitude;

​

    text(message[i], letterX, letterY);

  }

​

    for (let i = 0; i < message.length; i++) {

    const letterX = messageX + textWidth(message.substring(0, i));

​

    const letterOffset = i * verticalLetterSpacing;

    const letterY = height / -2 +

      sin((frameCount - letterOffset) * ySpeed) * amplitude;

    text(message[i], letterX, letterY);

  }

​

​

  messageX -= xSpeed;

  if (messageX < - textWidth(message)) {

    messageX = width + 10;

  }

    messageY -= ySpeed;

  if (messageY < - textWidth(message)) {

    messageY = width + 10;

  }

        for (let rectY = -700; rectY <= 1080; rectY += 20) {

  let c = color('#b6b7b9');

  noStroke();

  fill(c);

  rect(rectY, -805, 10, 4000);

    }

​

    drawLetterVertex();

}

​

function drawLetterVertex() {

  stroke(0,100);

  fill("#cdff00");

  push();

  translate(-bounds.w/2, bounds.h/2);

  beginShape();

  let x = 0;

  let y = 0;

  let n = points.length;

  let angle = TWO_PI / (n);

  for (let a = 0; a < n; a += 10) {

    x = points[a].x + cos((frameCount + a) * 0.4) * 20;

    y = points[a].y;

    vertex(x, y);

  }

  endShape(CLOSE);

  pop();

​

}

​

​

function keyPressed() {

  if (key === "s") {

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

      saveSVG(label + ".svg");

    } else {

      saveCanvas(label + ".png");

    }

  }

}

​

​