​

let mychar;

let mycharArr = [];

let gravity = 0.3;

​

function setup() {

  createCanvas(600, 600);

}

​

function draw() {

  background(0);

  stroke(255);

  noFill();

  rect(20, 50, 560, 470);

  fill("white");

  textFont("Courier New", 25);

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

    mycharArr[i].display();

    mycharArr[i].fall();

  }

  text("Click to make Letters Fall", 40, 40);

  text("Press Enter to reset position", 40, 550);

  text("Press TAB to clear letters.", 40, 580);

}

​

function mousePressed(){

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

    mycharArr[i].isfall = true;

  }

}

​

function keyTyped() {

  let lettercheck = key;

  if (lettercheck.length == 1){

    myString += lettercheck;

    mycharArr = [];

    let x=25;

    let y=80;

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

      if(x >= 560) {

        x = 25;

        y += 25;

      }

      mychar = new letter(x,y,myString[i])

      mycharArr.push(mychar);

      x += 15;

    }

  }

}

​

function keyPressed() {

  if (keyCode == BACKSPACE) {

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

    mycharArr = [];

    let x=25;

    let y=80;

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

      if(x >= 560) {

        x = 25;

        y += 25;

      }

      mychar = new letter(x,y,myString[i])

      mycharArr.push(mychar);

      x += 15;

    }

  }

  if (keyCode == ENTER) {

    mycharArr = [];

    let x=25;

    let y=80;

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

      if(x >= 560) {

        x = 25;

        y += 25;

      }

      mychar = new letter(x,y,myString[i])

      mycharArr.push(mychar);

      x += 15;

    }

  }

  if (keyCode == TAB){

    mycharArr = [];

    myString = "";

    mychar = new letter(20,20," ");

    mycharArr.push(mychar);

  }

}

​

class letter {

  constructor (x,y,letter){

    this.x = x;

    this.y = y;

    this.Letter = letter;

    this.speed = random (-1, -5);

    this.isfall = false;

  }

  display(){

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

  }

  fall(){

    if (this.isfall == true && this.y <= 500) {

      this.speed -= gravity;

      this.y -= this.speed;

    }

    else if (this.isfall == true && this.y > 500) {

      if (-3<this.speed && this.speed<3){

        this.isfall = false;

        this.speed = 0;

        this.y = 500;

      }  

      this.y = 500;

      this.speed = this.speed*0.85;

      this.speed = -this.speed;

      this.y -= this.speed;

    }

  }

}