let te, bu;

let offset = 20;

let fonts = ['Georgia', 'Helvetica', 'Times New Roman', 'Courier New'];

​

function setup() {

  angleMode(DEGREES);

​

  createCanvas(600, 600);

​

  te = createInput('Type in the text box for input');

  bu = createButton("submit");

  te.size(600, 50);

​

  img = createImage(width, height);

​

  reDrawNoise();

}

​

function reDrawNoise() {

  img.loadPixels();

  for (let i = 0; i < height * width * 4; i += 4) {

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

      img.pixels[i + j] = random(255);

    }

  }

  img.updatePixels();

​

  // console.log('pixels updated');

​

  image(img, 0, 0);

}

​

function mousePressed() {

  background(255);

​

  let msg = split(te.value(), ' ');

  let x = offset,

    y = offset + 10;

​

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

    let fontsize = random(20, 25);

    push();

    fill(0, random(170, 255));

    textFont(fonts[int(random(fonts.length))]);

    textSize(fontsize);

    text(msg[i], x, y + random(-5, 5));

    pop();

​

    x += msg[i].length * fontsize / random(1, 2);

    if (x % (width - offset) < x) {

      y += offset * 2;

      x = offset;

    } else if (x + msg[i].length * fontsize >= width) {

      x = offset;

      y += offset * 2;

    }

  }

​

  reDrawNoise();

}