let message = 'variable',

  font,

  bounds=[], // holds x, y, w, h of the text's bounding box

  fontsize = 60,

  x,

  y; // x and y coordinates of the text

​

// let msg4= 'a moving text', bounds4;

let letters=message.split('');

​

function preload() {

  font = loadFont('Roboto-Regular.ttf');

​

​

}

​

function setup() {

createCanvas(windowWidth, windowHeight);

  textSize(fontsize);

​

  // // get the width and height of the text so we can center it initially

  // bounds = font.textBounds(message, 0, 0, fontsize);

​

​

  // x1 = width / 2 - bounds.w / 2;

  // y1 = height / 2 - bounds.h / 2;

​

​

​

}

​

function draw() {

  clear();

  background(0);

  push();

    // scale(1.5);

​

   let totalWordWidth = 0;

​

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

   let currentWordWidth = textWidth(letters[i]);

   text(letters[i], totalWordWidth,100);

   totalWordWidth += currentWordWidth + 8;

  bounds[i] = font.textBounds(letters[i], x, y, fontsize);

     // check if the mouse is inside the bounding box and tickle if so

  if (

    mouseX >= bounds[i].x &&

    mouseX <= bounds[i].x + bounds[i].w &&

    mouseY >= bounds[i].y &&

    mouseY <= bounds[i].y + bounds[i].h

  ) {

    x += random(-5, 5);

    y += random(-5, 5);

  }

​

  }

  pop();

  tint(255,250); 

  fill(255);

  // text(message, x1, y1);

​

  // text(msg4, x4, y4);

​

  // bounds = font.textBounds(message, x, y, fontsize);

​

  // bounds4 = font.textBounds(msg4, x4, y4, fontsize);

​

​

  // // check if the mouse is inside the bounding box and tickle if so

  // if (

  //   mouseX >= bounds.x &&

  //   mouseX <= bounds.x + bounds.w &&

  //   mouseY >= bounds.y &&

  //   mouseY <= bounds.y + bounds.h

  // ) {

  //   x1 += random(-5, 5);

  //   y1 += random(-5, 5);

  // }

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

  if (

    mouseX >= bounds[i].x &&

    mouseX <= bounds[i].x + bounds[i].w &&

    mouseY >= bounds[i].y &&

    mouseY <= bounds[i].y + bounds[i].h

  ) {

    x += random(-5, 5);

    y += random(-5, 5);

  }

​

  }

}

​

​