Module 3 Formstorming

Weekly Activity Template

Sanren Zhou

Project 3

Module 3

Project 3 starts by experimenting with input methods using the Makey Makey and some provided P5.js code connecting input with output. This will be the basis for further inverstigation and experimentation.

Activity 1

Use the code from Tutorial 1 to test whether the connection with Makey Makey is smooth. I modified the provided code so that I can use the arrow keys on the Makey Makey to control the movement path of the circle. I further modified the code to make the circle's trail more visible. I think adding some sound effects here could create a game-like experience. In this code, I can use the arrow keys on the Makey Makey to control the rotation direction and speed of the cube. I really like this design because it reminds me of a fidget spinner—the visuals feel very relaxing. I adjusted some of the parameters to make the cube rotate in a more consistent pattern and made the color changes more noticeable. My original intention was to create a smooth transition between the cube and the sphere, but the final result turned out as shown in the GIF. Still, the effect is pretty cool—maybe adding some sound effects during each transformation could make the overall design more dynamic and fun. In this exercise, I tried to use sound to control the position and blinking frequency of the light element. The effect is there, but I didn’t find an opportunity to incorporate Makey Makey controls into this exercise. I modified the previous code and this time used the click key on the Makey Makey to control the visuals. When click is held down, more light dots appear and blink faster. Unfortunately, I still haven’t found a way to combine Makey Makey with sound input. In this exercise, Makey Makey is used to control the color of the circle, while different sound frequencies control the size of the circle. I made the changes more noticeable by adjusting the parameters, but I still feel that this exercise lacks artistic expression. I continued to tweak the parameters to make the visuals more responsive to sound, resulting in a more chaotic yet still rhythmic effect. In this exercise, the arrow keys on the Makey Makey control the color of the lines, while the wave motion of the lines responds to the sound captured by the microphone. I wanted to give the arrow keys on the Makey Makey more meaningful functionality. So in this code, the wavy lines only fall from the top of the screen when the down arrow key is activated, simulating the motion of water falling. The wave fluctuations are influenced by the sound captured by the microphone. Similarly, in this exercise, the up arrow key makes the lines grow from the bottom, while the other keys can change the background color. In this exercise, the curves appear and flow in response to the sound captured by the microphone, while the arrow keys control the speed of their movement. In this design, the arrow keys on the Makey Makey control the number of circles, while the size of their expansion is determined by the sound captured by the microphone. The original idea for this design was that each click using Makey Makey would add a new cube. Although the intended effect wasn’t fully achieved, we can still use the arrow keys on the Makey Makey to rotate the cube, and I’m quite satisfied with the visual result. In this design, each circle can rotate in a different direction depending on which arrow key is pressed on the Makey Makey. I started thinking about how to integrate Project 2 with Makey Makey, so I modified some parameters to let the Makey Makey keys influence the circle’s expansion. Every time I press a key, the circle changes color and creates a diffusion effect. In this version of the code, sound still affects the color changes of the circles, but Makey Makey can be used to alter the overall color scheme of the design. I created a breathing light effect where the size of the square changes in response to sound, while its color and position on the canvas are controlled by the Makey Makey. Building on previous exercises, in this visual, the arrow keys change the direction of the ball’s movement, while its size is determined by the sound frequency captured by the microphone. In this design, the frequency and amplitude of the sound affect how rapidly the lines bounce, while the rotation direction of the lines can be controlled using Makey Makey. I explored more options on the back of the Makey Makey, and when I press the W, A, S, and D keys, the corresponding letters appear on the screen. I combined sound input with Makey Makey controls—sound controls the size of the circles in the background, while different Makey Makey keys activate different geometric shapes.

Activity 2

In this experiment, I wanted to use two plastic rods—one connected to the ground wire and the other to different Makey Makey keys—and made a small ball out of aluminum foil. The idea was that as the ball rolled between the two rods, it would complete the circuit and trigger different sounds. However, the experiment showed that I couldn’t control the ball very well, and the contact time between the ball and the aluminum foil was too short, often failing to trigger the sounds in time. In this attempt, I drew some sound-associated objects from Project 2 on paper, moistened the paper to make it conductive, and connected it to the ground wire. I then wrapped different pens with aluminum foil and connected each to a different sound. When the foil on the pens touched the wet paper, it would trigger a sound. However, the paper couldn't be evenly moistened, which made conductivity unreliable, and the drawings would blur due to the water. So I decided to make further improvements to this experiment. This time, I replaced the paper canvas with aluminum foil and drew directly on it. When the foil-wrapped pen tip touched the foil canvas, it triggered a sound. However, the setup turned out to be single-use only, so I don’t plan to pursue this idea any further. The usage of this sound-interactive canvas experiment is demonstrated in the GIF. Inspired by 3D pinball, I wanted to use a rubber band to launch a small aluminum foil ball and have it hit different conductive areas to trigger different sounds. However, after some trials, the contact time between the ball and the conductors was too short to successfully trigger the sounds, so this turned out to be a failed experiment. Inspired by my previous attempts, I created a maze where each wall is connected to a different sound. The player tilts the box to control an aluminum foil ball, and when the ball touches a wall, it completes the circuit and triggers a corresponding sound. Here is the front view of the maze, where you can see that the base of each wall is made of an insulating material. This ensures that the circuit remains open when the ball is not in contact with the walls. The way the maze is played is shown in the GIF. I applied copper tape to each wooden landmark to make them conductive, allowing users to trigger corresponding sounds and P5.js visual effects by touching different landmarks. As shown in the GIF, users trigger sounds and visuals by touching the metal parts. However, this setup doesn’t allow the landmarks to be securely fixed to the map, which affects the overall aesthetics and completeness of the piece. Therefore, I decided to keep the idea of vertically attaching the landmarks to the map. By applying metal conductors to the wooden blocks, viewers can touch the conductors to trigger sounds and visual effects representing the different landmarks. Incorporating knowledge from Project 1, I created a paper switch that triggers different keys when the paper is folded into various positions. As shown in the GIF, folding different sections triggers different functions, making this switch a good prototype for designing more complex interactions. In this attempt, I used a plush toy as the trigger, attaching wires to different parts of it. I programmed a simple design in P5.js so that when the circuit is completed at a specific part, the corresponding word for that body part appears on the screen. This was my first time experimenting with the Adafruit 5-key Capacitive Touch Sensor Board. Initially, I thought I needed to insert the wires directly into the sensor, but it didn’t work as expected. In the second attempt, my teammate and I thought we needed to use alligator clips to clamp onto the metal touch points on the sensor. However, this also didn’t work well, as the clips kept slipping off. After our instructor's explanation, we finally understood the correct way to place the wires. From these attempts, we learned an important lesson: when encountering something new, asking someone with experience is often the most efficient way to move forward. After assembling the sensor, we experienced yet another failure. Since the setup took us a long time, the computer stopped responding to the Makey Makey. I even modified the code, thinking something was wrong—only to realize later that simply refreshing the page would have solved the issue. A hard-earned success—this class exercise helped us finally learn how to properly assemble the sensor, which will be valuable for the design and exploration of our final project. Another attempt at completing a circuit: I placed copper tape on the table, with each strip connected to a different key, triggering different effects. Using this as a prototype, I could design something similar to a piano. Inspired by the previous attempt, I wanted to reposition the keyboard—from the table to my hands—so I wrapped copper tape around my fingers. However, I forgot that our bodies are already conductive, and the copper tape wasn’t necessary. In fact, this unnecessary step taught me a valuable lesson: it's important to think things through before taking action to avoid wasting time. This GIF demonstrates my “Finger Piano” in action. I noticed the Makey Makey packaging sleeve and wanted to do something with it. Taking advantage of its ability to be compressed, I placed copper tape on specific parts so that when the box is pressed down, the circuit is completed, and when released, the box springs back, breaking the circuit. Building on that idea, I added an extra strip of copper tape so that users can trigger different keys depending on the direction in which they press the box. This GIF demonstrates how the bidirectional switch works in action.

Project 3

Final Project 3 Design

Please click on the link in the PDF to watch the Final Design demo

For my final design, I merged a real-world map with data to create and present a laser-cut piece that conveys my interpretation of the spatial, architectural, and design characteristics of a specific place, illustrating the connection between people and space. The design centers on a map of my hometown, crafted using laser-cutting technology, and enhanced with interactive sound elements and P5.js-based digital visualizations. This fusion of tangible art and digital interaction aims to offer a deep sensory experience, connecting the audience to the place on multiple levels.
×

Powered by w3.css