magic 8ball redux

 I made an interactive Halloween costume this year - The Magic 8-Ball!

I had a friend who makes drummer and equipment gear construct a wearable iPad harness, and then using P5.js I wrote a fullscreen webpage to pick one of the classic 20 answers and display it in the classic triangle: toys.alienbill.com/8ball/

It was fun to iterate on from a usability and "surprise and delight" standpoint:

1. I didn't really want to "shake for new answer", so I did a simple tap that made the new answer fade in and rotate into place. I then added some logic to have the cursor or finger shove the blanked + dimmed triangle around until released (just for a little showmanship as the person was thinking of their question)

2. I made variants to rotate everything 90 degrees so by locking the screen rotation, the straps could obscure the status bar.

3. At the party, I thought of one great feature: a cheat mode. Now, tapping inside the circle gives you a fair answer, but if you click outside the circle, the top half of the screen gives you one of the 10 positive answers, and the lower half gives you one of the 5 negative responses. So based on the question someone asks, you can covertly trigger a yes or no answer based on whatever is funniest.


So, classic example of the importance of testing and iterating!


(I am still on a jobhunt, so if your team might use a UI Engineer who can do the bread and butter React/Node/Typescript as well as throw in a Canvas curveball like this, hit me up!)