Category Archives: Uncategorized

Sketch 5 – Wentian Zhu

Leap Motion and Touch Designer

td-screenshot

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: https://drive.google.com/drive/folders/1wk9JfA8lo1ICsoC15DdlgkWdrMKPcXlY?usp=share_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.

screenshot-2022-11-22-004849

Here is the code:

https://editor.p5js.org/mufaromukoki/sketches/74c8zJoHM

Sketch 5 – Zaheen Sandhu

img_1371

 

 

 

 

 

 

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. 

References: https://makeabilitylab.github.io/physcomp/communication/p5js-serial.html 

https://medium.com/@yyyyyyyuan/tutorial-serial-communication-with-arduino-and-p5-js-cd39b3ac10ce

Code: https://github.com/zaheensandhu/Sketch5-C-C.git

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: https://youtu.be/JvPE5-jWPME

Link to the code: https://editor.p5js.org/zhuwentianzz/sketches/qbX96y5yI

 

213

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: https://youtu.be/IEqRVuOWZhw

Link to the code: https://editor.p5js.org/zhuwentianzz/sketches/d9KfobS3d

 

sketch02

catrnaval-ricky-qs

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

Edit Link: https://editor.p5js.org/ricardokiza654/sketches/3ehu_nZC0

Screen: https://editor.p5js.org/ricardokiza654/full/3ehu_nZC0

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.

Reference: https://www.youtube.com/watch?v=3gXpk2mvTWk

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 :https://drive.google.com/file/d/1kSmlTg1VZmBuNK3oM4STXjRmJZVbJHbI/view?usp=sharing%e6%88%aa%e5%b1%8f2022-10-03-23-55-54

File folder (google drive link): https://drive.google.com/drive/folders/1PBOfNjaZnzzpvM1FSJvJej0QJKIh6EdQ?usp=sharing

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.

Video:

https://youtu.be/Z3Ywnogivkw

 

Code:

https://editor.p5js.org/Nickygg/sketches/i-QnAq6Ce

20 Screens – Group 1

74d39dd2-ac2e-45a6-b76f-e8afef3d8fd4

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.

Team:

Wentian Zhu / Nicky Guo/ Divyanka Sadaphule/ Firass Khan

 

Link to Code: https://editor.p5js.org/zhuwentianzz/sketches/qHrKc-vVV

Video Link: https://youtu.be/HNujv2ElpqM