Module 3 Formstorming

Weekly Activity Template

Yawen Qiao

This project is a fusion of physical materials from my everyday life with digital interactions using p5.js and Makey Makey. From the first activity of experimenting with different codes, to the second activity of adding real life materials to make codes using makeymakey to be able to connect up the two elements together. This project considered the intertwining and combining of digital media as well as physical interaction, using objects and materials around us to make the design more colorful. I think the end result is a tactile, multi-material interface. This invites the user to rhythmically interact with everyday objects, demonstrating how sound and interaction can emerge from creative reuse and imaginative design.

Project 3

Module 3

In this project, we explored physical interaction using Makey Makey to interact with p5js code. Connecting the lines to the code to implement human-computer interaction explores more different ways of doing this. The code I tried was not limited to snakes, simple obstacle avoidance games, etc., which gave me experience with interactive design. During the experience, using makey makey for precise control takes practice, and I think I will learn more skills in the next activity.

Activity 1

This is my first attempt at an interactive design demonstration using makeymakey. The concept of it is to change the shape of the model just by using MakeyMakey's buttons, and the spacebar to change the color.

This one is a simple shape interaction I made using makeymakey. Clicking on different buttons will change the shape of the model.

This is me using makeymakey to control the walking path of the orb. Up and down, left and right control the direction, and the spacebar controls jumping.

This is a code demo made with makeymakey. A blue ball touching a red square is considered a point.

This is my Snake game. Use makeymakey to control the direction to score points.

Here's a demo of the controls I used to play the game with makeymakey. Survive by maneuvering the left and right buttons to dodge the red falling ball.

This is a demo of the game controls for jumping over obstacles.

This is a demo of how to jump over obstacles. It's different from the previous one in that it adds a score mechanic. If you hit a yellow ball, you will get an extra point.

This is my first code demo which I think is important. It's about the actions represented by the different keys.

This is my first code demo which I think is important. It is about the actions represented by the different keys.

This is a demo screen of me using makeymakey to operate tutorial 1.

This is the demo screen of my tutorial 2 on how to use makeymakey.

This is a live demo of me using makeymakey to manipulate the first code I made.

This is a demo of how I use makeymakey to manipulate shape transformations and color transformations.

This is a demo of my attempt to manipulate up, down, left, right, and jump using makeymakey.

This is a demo of how I use makeymakey to manipulate forward and shape interactions.

This is a demo of me using makeymakey to try to play Snake. As you can see I got a point.

This is a demo of me using makeymakey to try to play dodge falling objects.

This is the demo screen of my attempt to play Dodge the Drop using makeymakey.

This is a demo of me using makeymakey to try and jump over obstacles.

This is me using the keyboard to maneuver the Snake game. You can see that it is allowed to be operated by different devices.

This is a demo of me using makeymakey to try to jump over obstacles and score points.

This is a demonstration of me using the keyboard to operate the greedy jumping over obstacles game. You can see that it is allowed to operate on different devices.

Activity 2

This is me using copper tape on the inside of the glass. When water is poured in and touches the tape, it triggers the button.

This is what it looks like when the glass is filled with water.

This is what the makeymakey installation looks like for the glass experiment.

This is me clipping the connection to the watch so I can trigger the button directly with my right hand.

This is the matching style for the right hand and left hand.

This is the trigger condition when I pressed the button with gloves on.

This is the design of the fingers on the reverse side of the glove.

This is a demonstration of the operation of filling a water cup.

This is a demonstration of using the right and left hands.

This is a demo operation to show that it is possible to wear the glove without the right hand.

This is a demonstration of how to use the glove.

This is to show off the controller I made. It has wire attached to the head so it conducts electricity.

This is showing my controller and the four copper tapes that control the direction.

This is the conductive string I tied to the ring so I could touch the mechanism directly.

This is my model of the command. I taped copper tape to the cap of the pen so I could use the pen to interact.

This is my model using the plastic bottle to link the copper tape.

Here you can see that I added the copper tape under the plastic bottle. This way when I place them in the appropriate position they will trigger the mechanism.

Here is a full view of my controller model.

This is how I used the controller model.

This is a demo video of me using the conductive ring.

This is a demo video of me using the conductor model.

This is a demo video of me using the conductive bottle.

Project 3

Final Project 3 Design

For my final design, I wanted to make an interactive piece that could work with different materials and tools. I've been really into drums lately, so I wanted to incorporate p5js with props from my life to realize the activity of playing a drum. For this design I chose to use as many materials as possible. Because I wanted to show the diversity of the interaction. I used conductive thread, reflective fabric, conductive tape, stones, cardboard and copper tape. I also wrapped non-woven fabric underneath some of the props in order to avoid excessive crashing sounds while banging. This reduces the sound.

Description of materials: I am using my chopsticks to represent the drumsticks and different props for the other drums. The first drum uses a stone and has copper tape wrapped around it and then linked makeymakey. the second drum uses a glass as a carrier and has non-woven fabric and reflective fabric wrapped around it. The third drum is my desk lamp. Wrap nonwoven fabric and conductive tape around the top. The last pedal uses cardboard as my on/off switch, which is triggered when I step on it.