Inspiration/Concept
For this project, I created a fortune cookie application that gives a random fortune. I love getting fortune cookies and seeing my luck (even though I do not believe in them, it is still a fun activity), and I wanted to transfer that fun little moment into a web application. To create the effect of anticipation one gets when opening the cookie’s package I made a fortune come up as in a typewriter, letter by letter without revealing everything all at once.
The Product
I am really happy with the way it turned out, especially given that I was not really sure what I was going for when I just started the project. The product is really simple and minimalistic, and I love it this way because I want the focus to be on the fortune itself, which I think was achieved pretty nicely.
Challenges
The biggest challenge for me was restarting the typewriter when a user clicks on the mouse and the typewriter is done writing. Since my function is not blocking, I had multiple fortunes written on top of one another at some point. To solve this, I added a boolean printing that is set to True whenever I am about to enter the typeWriter function within start and set it back to False when I am about to leave it. Then, whenever a mouse is clicked, I first check whether the variable is true or not and print a new fortune when the previous one is done printing (or displaying) and the user clicks.
function start() {
if (printing == false) {
printing = true;
typeWriter(random(fortunes), 0, 50, height / 2, 80);
}
}
function mouseClicked() {
start();
}