Yunho Lee Text Visualization Assignment – Text Rain

My first intention was to display simultaneously the input by users to the screen. The task could be solved by referring to the materials from the class of the example of creating a “Letter” Object and adding an extra “Letter” object in the Array of Letters. The result is the following.

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;
}
}

The next step was to make letters fall when the screen is clicked. I decided to do this by adding a boolean in letters to change to true when the screen is clicked.

function mousePressed(){
for (let i=0; i<myString.length; i++){
mycharArr[i].isfall = true;
}
}

I included BACKSPACE to delete the last input made by users, Enter to reset the position of the letters after falling, and TAB to clear the screen and reset the input by the user.

The final result is the following.