Category Archives: Uncategorized

Sketch 5 – Wentian Zhu

Leap Motion and Touch Designer


I used Leap Motion to get the data of my hand (x/y/x parameters) to control the rotation and the size of the model.

Video link:

Sketch 5: Mufaro

For this sketch, I attempted to use p5.Party to create a p5.js sketch that many users can interact with at the same time, from different browsers. My attempt wasn’t very successful but I will continue to work to figure it out.


Here is the code:

Sketch 5 – Zaheen Sandhu








img_1367      img_1368      img_1364
The main goal for this sketch was to understand how to make p5.js and Arduino talk to each other and communicate; by taking the input value from the sensor and reflecting it on the p5.js sketch. Through serial communication, I am using the potentiometer to change the size of the circle. 



Sketch03 – PoseNet and Audio Level

I combine both of audio and poseNet in the sketch3.

The poseNet tracks the position of the participant’s face (ear,nose,mouth,eyes), and detects the audio level of the participant, if the participant is talking then the mouth will open.

Link to the video:

Link to the code:



Sketch02- Firefly

Many things are going on in the scene. When the top firefly stops flying, then the instruction text would show up and tell the participant what to do next. And after the participant moves his fingertip inside the range of the top firefly’s tail part, then it’s mate would appear and fly to its location.


Link to the video:

Link to the code:




Sketch 3 – Cat-rnaval – Ricardo “Ricky” QS

Edit Link:


For this sketch I wanted to create ”popping appearing” textures with .pngs all around the screen, with different values and ways of appearing. This sketch also explores extracting and drawing info from a .png, that can be used to be re-drawed pixel by pixel and then re modified, such as altering its color.


Sketch 1: Magic Bubbles

I applied ml5.js poseNet to the project. The bubbles follow both of my wrists, and once their alpha value turns to zero, the bubbles would fade out and delete from the array.

gif link :

File folder (google drive link):

I was inspired by the coding train tutorials and the Twitter video that Xuan posted on the Pages site (link

Sketch 1 – Nicky Guo

screen-shot-2022-10-03-at-8-13-34-pm screen-shot-2022-10-03-at-8-13-58-pm


The concept of this sketch is to showcase the different facial expressions of each individual. Initially, I created this sketch to explore the process of showing different emotions on the screen based on users’ interactions, which is something I have to understand in the group project.




20 Screens – Group 1


The idea behind this was to understand the color with emotions. The emoji colors change into various different other colors and people with the same one win.


Wentian Zhu / Nicky Guo/ Divyanka Sadaphule/ Firass Khan


Link to Code:

Video Link: