​

function setup() {

  createCanvas(600, 600);

  // load a monospaced font

  textFont("Courier New", 25);

}

​

function draw() {

  background(255);

​

  // draw entire string

  // push and pop to draw the text aligned center,

  // but not to affect the characters drwaing later on

  push();

  textAlign(CENTER);

  text(myString, width / 2, height * 0.25);

  pop();

​

  // drawing each character

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

    // get the char at each index in the string

    let c = myString.charAt(i);

    // find the starting point for everything

    // this is the middle of the screen minus half the width of the entire string

    let startPoint = width / 2 - textWidth(myString) / 2;

    // need to space them out based on the width of each character

    // use i for this

    let xLoc = startPoint + textWidth(c) * i;

    text(c, xLoc, height * 0.5);

​

    // drawing each character individually allows us to do cool stuff with the text

    // like use the noise from the noiseRects example to move the characters around:

    let noiseValue = noise(frameCount * 0.01, i * 0.05);

    // then change the range from 0 to 1 into -0.5 to 0.5

    // then multiply that by 100 to get values that are between -50 and 50

    let scaledNoise = (noiseValue - 0.5) * 100;

    text(c, xLoc, height * 0.75 + scaledNoise);

  }

}

​