​

let str = "I wish to wash my Irish wristwatch";

let charShow = 0;

​

//let c = 0;

let positions = [];

​

function setup() {

  createCanvas(400, 400);

  //textAlign(LEFT, TOP);

  textSize(30);

​

  //createP(str);

​

  // Assign random positions and speeds for each character

  for (let c = 0; c < str.length; c++) {

    positions.push({

      x: random(width),

      y: random(height),

      speedX: random(-2, 2),

      speedY: random(-2, 2),

    });

  }

}

​

function draw() {

  background(255);

​

  if (frameCount % 15 == 0 && charShow < str.length) {

    charShow++;

  }

​

  for (let c = 0; c < charShow; c++) {

    //grab character at index 'c'

    let chr = str.charAt(c);

    let pos = positions[c];

​

    pos.x += pos.speedX;

    pos.y += pos.speedY;

​

    // Bounce off edges

    if (pos.x > width || pos.x < 0) {

      pos.speedX *= -1;

    }

    if (pos.y > height || pos.y < 0) {

      pos.speedY *= -1;

    }

    //draw the character

    text(chr, pos.x, pos.y);

  }

​

  // //get textwidth of character

  // let w = textWidth(chr);

​

  //   x += w;

  //   c++;

  //   c %= str.length;

​

  //   //if longer than width, draw a new line

  //   if (x > width - w) {

  //     y += textAscent() + textDescent();

  //     x = 0;

  //   }

​

  /*  

  for (let c = 0 ; c < str.length ; c++){

    let chr = str.charAt(c);

    let x = 0;

    let y = 0;

    x += textWidth(chr);

    text(chr,x,y);

  }

*/

}

​