let’s be young again

Summary

My experiments with p5.js and ML revolve around reviving the fun games I played when I was young and exploring the curiosity generated while conducting these experiments. Additionally, the objective of the experiments (ones I set for myself) was to understand the level of transformation that could be possible with just plain data coming in from the Posenet tool and to see if math can still be fun for me.

These activities and coding after so many years made me realise that its okay to be rusty especially when you have a tool like p5.js. Although I had to depend a lot on the reference docs and examples, towards then end, creating own functions seem to be possible. All these days, I kept experimenting with motion however, I missed out playing with audios and I can imagine how interactive that can become! My learning from this exercise is that there is still lots to explore in the area of creative coding.

Crucial learning – Fully read the reference manual and any connected resources! In a couple of experiments, I had to do some math. My first approach was to depend on high school math to bring in trigonometry and vector algebra. After spending a ton of time, I realized there are far more easier ways using some ready functions and could have saved a ton of time.

Experiment 1 – Fly away!

3196419_plane

Remember spreading out your hands and pretending that you were a plane when you were young? This interactive piece tracks those exact poses and moves the plane left and right. Control the plane to avoid the obstacles that come up one after another at a random spot.

Link to editable code

Link to interaction

Experiment 2 – Superman is here

3196419_superman

Take your glass off to be reveal the superman. The code measures the relative position of the wrist with the nose and based on that decides to either show or hide the superman. The next step for this code was to add in movements to the arms to mimic your hands when you put-on or take-off your spectacles.

Link to editable code

Link to interaction

Experiment 3 – Lights out

3196419_candle

This interactive code tracks the movement of your hand to detect a wave. Be sure to use your right hand and wave close to yourself rather than the camera. One wave tries to blow off the candle and waiting for a returns the flame to its state. You can never take the light away.

Link to the editable code

Link to interaction

Experiment 4 – Perspectives

3196419_perspective

This interactive code is a bit different that others. Sorry, you don’t get to play. However, from where ever you try to look at the box, it will try to adjust its shape to make it look like its opening is facing you. This code required a bit of trial and error along with matrix multiplication to make it work. The black dot and the farther side of the box moves in the opposite direction to create a simple distortion. Please note, the box isn’t moving as a whole but the corners move independently.

Link to the editable code

Link to interaction