sketch1a

sketch1b

This code is aimed for creating some virus to simulate Covid-19 virus. I used the poseNet to track the position of nose with webcam. And I also code the class and array to draw floating virus in the air. Then I try to make the nose to attract the virus. The interaction is similar to the process that a person affect the Covid-19.

Code Link: p5.js Web Editor | Nosy honeysuckle (p5js.org)

Reference:

  1. https://www.youtube.com/watch?v=OIo-DIOkNVg
  2. examples | p5.js (p5js.org

Sketch 1 – Head Controller – Tyler

headcrop

Full Screen: https://editor.p5js.org/tbeattyOCAD/full/7cYwInKpR

Editor: https://editor.p5js.org/tbeattyOCAD/sketches/7cYwInKpR

This sketch has two parts:

  1. Cropping only the head of one person on the camera (using Posenet nose and eye locations). Once the x and y position of the nose is taken, and the distance between eyes are measured, the Image.get() function is able to capture only the desired pixels.
    – This was inspired by Lazano Hemmer‘s zoom pavilion. Getting the position and size of the head could be used for interaction that deals with the perspective of the audience (localizing where they are). In our screen space project we are considering using machine learning to identify masks or not, this method will be important for isolating parts of faces.
  2. Measuring head twist and tilt. Given the nose position relative to the eyes, the twist amount is a basic map calculation. The tilt works, but not well, comparing nose to eye-line distance to eye spacing. I think it would be better to compare the nose y position with the ear position. I show this data by moving the cropped head, so that you are always looking at yourself, but it looks like the person is simply translating their head. A better effect may be found for this input.
    – This turns your head into a (ineffective) mouse. But it could be used to estimate where on a big wall someone is looking.

Resources used:

Sketch 1 – Night’s Owl – Maryam Dehghani

untitled-1

In the sketch, I tried to make the mouse look like an owl’s eye, when the mouse is clicked the background image turns black and the owl’s face appears so we can hear its sound.
Edit Link:  https://editor.p5js.org/dehghani.maryam69/sketches/qYT-oOy7g

Here are the codes I use:
https://p5js.org/examples/sound-preload-soundfile.html 
https://p5js.org/reference/#/p5/strokeJoin
https://happycoding.io/tutorials/p5js/input

 

sketchoneghosthandrqs2

Sketch 1 – GhostHand – Ricardo “Ricky” QS

 

Edit Link: https://editor.p5js.org/ricardokiza654/sketches/YPGb5siwa

For this sketch, I wanted to play and experiment with concepts like relativity and dimension control in the Screen Space; also, generate variables and adaptive resources that would permutate/fit according to the screen size. A core concept I wanted to try was to translate the mapping of the hand, outside of the ”hand”, a sort of ghost hand.

After playing with that, I followed by mapping the tips of the middle and index finger,  creating interactivity by switching the opacity of resources in the space in accordance to the distance between those elements. The stroke color also changes each time the hand appears/disappears.

 

Sketch 1 – NoseBoop – Tamika Yamamoto

sketch1-lowres7

For this sketch, I wanted to explore two things. First, a “Start Screen” which when triggered, initializes the interactive experience. Second, using GIFs in an array, how to isolate objects in that array such that events happen to one moving object at a time. In this case, booping bubbles one by one with your nose.

Editor: https://editor.p5js.org/tamikayamamoto/sketches/fPOO2pJv2

Sketch 1 – Burst The Bubble – Rim Armouch

started by creating an ellipse that changes colors as a basic p5js exercise. Following that, I decided to add some more features based on the in-class and individual experimentations with a webcam and sound triggers. 

I chose to control both the size and color variations of the bubble using the area/ distance between my wrists. 

The reason why I decided to use my wrists is because it felt more realistic, and were easily detected by the webcam. It reminded me of how we hold a ball. In addition, seeing the bubble constantly grow, it only felt natural to me to make it pop and trigger a sound. 

burst-the-bubble-1 burst-the-bubble-2

Recommendations for optimal experience:

+ Leave some distance between you and the screen

+ Stand in the middle

+ Move your wrists away from each other

+ Make sure to have the volume on

 

Full screen

Code

Sketch1 – Zaheen Sandhu

Sketch1 - Zaheen Sandhu

For this sketch, I played around with the keyIsPressed event and random function. The ellipses change their size through the random function and when the allocated keys are pressed, you can interact with the colors by moving the cursor on the x and y-axis. Also, I didn’t want the cursor to be visible, so found a way to change it into an ellipse!
Press keys ‘1’ and ‘2’ to interact

Link to Code

Interact on the fullscreen