16. Exploding Typo

​

​

let font;

​

let inputStr = '';

let txtStr = 'GOODLUCK';

​

let explodingChars = [];

​

function preload() {

  font = loadFont('Salma.otf');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  textFont(font);

  textAlign(CENTER);

​

  initialize();

}

​

function initialize() {

  explodingChars = [];

​

  let interval = width / txtStr.length;

  let padding = interval / 2;

​

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

    let ch = txtStr.charAt(i);

    let x = i * interval + padding;

    let y = height/2 - random(-180, 180);

    let explodingChar = new ExplodingChar(x, y, ch);

    explodingChars.push(explodingChar);

  }

}

​

function draw() {

  background(0);

​

  for(let ch of explodingChars) {

    ch.show();

  }

​

  noFill();

  stroke(255);

  line(width/2-200, height-40, width/2+200, height-40);

  fill(255);

  textSize(60);

  text(inputStr, width/2, height-50);

}

​

class ExplodingChar {

  constructor(x, y, ch) {

    this.x = x;

    this.y = y;

    this.ch = ch;

    let ds = dist(this.x, this.y, width/2, height/2);

    this.numSteps = map(ds, 0, width/2, 40, 120);

  }

​

  show() {

    for(let i=0; i<this.numSteps; i++) {

      noFill();

      let alpha = map(i, 0, this.numSteps, 120, 0);

      stroke(210, 85, 20, alpha);

      strokeWeight(1);

      textSize(140);

      let sx = map(i, 0, this.numSteps, this.x, width/2);

      let sy = map(i, 0, this.numSteps, this.y, height/2);

      text(this.ch, sx, sy);

    }

    fill(255, 180);

    stroke(255, 180);

    text(this.ch, this.x, this.y);

  }

}

​

function keyTyped() {

  if(keyCode === ENTER) {

    txtStr = inputStr.toUpperCase();

    initialize();

​

    inputStr = '';

  } else {

    inputStr += key;

  }

}

​

function keyPressed() {

  if(keyCode === BACKSPACE) {

    inputStr = inputStr.substring(0, inputStr.length-1);

  }

}

​

// function keyTyped()

​