Update on Week 11: The Invisible Clock

Before we dive into the details for this week’s project, let’s face admit that leaving your unsaved p5.js file open on the laptop is NOT a good idea, because you might accidentally delete it. 👋

So for this week, we are finally integrating the physical interfaces into programming. I chose to use one of my previously made p5js projects and use a press button as the control unit. The idea was straightforward, the image doesn’t show up until the button is pressed.

For the physical interface setup, it took a few tries for me to figure out the right circuit arrangement. Here are the pictures of the steps I took to achieve the final result…

Step 1: Doing it completely wrong

Step 2: Mostly right but forgetting the ground wire

Step 3: Finally getting it right

After successfully setting up the button to receive outputs of 0s and 1s, I connected it to the p5js file of my very first self-portrait, and designed it to only show the purple background when the button is not pressed, and show the face when the button is pressed.

HOWEVER, I forgot to save the new file and accidentally deleted both the new file and the original self-portrait file!!! Life 🤷‍♀️

After spending a few minutes panicking and calming myself down, I changed it to one of my other p5js files (The clock) instead. And here is the final result:

And here’s the link to my p5js:

https://editor.p5js.org/xc2028/present/W-_-WRYqK

Reference:

https://www.youtube.com/playlist?list=PLnkvii1uWBvEprzkCJZbSAWsiqncWodoQ