Module 3 Formstorming

Weekly Activity Template

Tzu Yu Hwa

Project 3

Module 3

For Activity 1, I explored interactive visual forms using P5.js and Makey Makey, focusing on how different inputs could generate dynamic motion and abstract animations. My experiments included waveforms, particle effects, organic morphing shapes, and rhythmic geometric patterns, all designed to respond fluidly to user interaction. This process helped me understand the relationship between input control, animation behavior, and aesthetic expression, forming the foundation for integrating physical and digital interaction.

Activity 1

I used Makey Makey to test basic interactions in P5.js, making the black square move based on key inputs. This helped me confirm that the keyboard inputs were working properly. This time, I switched to a circular shape and experimented with different color combinations to add more visual depth. I also tested whether Makey Makey could consistently control the movement. I explored triggering different areas of the grid using key inputs, possibly for a rhythm-based or pattern interaction. This test helped me understand how Makey Makey could be used for structured visual feedback. I tested how Makey Makey could manipulate a 3D wireframe shape in P5.js. Pressing keys seemed to influence the torus’s structure, adding an interactive layer to the design. I experimented with using key inputs to control multiple 3D objects. This helped me understand how Makey Makey could impact object placement and interaction in a 3D environment. I experimented with a layered circular structure that dynamically scales into a cone shape. The transition effect makes it feel like the shape is growing or collapsing in 3D space. I created a smooth, flowing wave motion that reacts dynamically. This test explores organic movement, inspired by sound waves or fluid motion. I worked on a 3D ring system with orbiting spheres, trying to create a visually rhythmic effect. This design plays with movement and depth to enhance interactivity. I explored how different 3D objects interact by placing a floating ring inside a torus. The movement makes it feel like a mechanical or futuristic interface. I tested a combination of geometric forms, using a torus and a cube, to explore how simple shapes can create a more complex and dynamic interaction. I wanted to create a digital rain effect, where blue rectangles fall like raindrops and form ripples on the ground. This gives a dynamic and calming atmospheric effect. I explored particle movement by making two clusters react to an external force. The white sphere in the middle acts as an interactive element, possibly controlling or disturbing the clusters. This is an experiment with a structured but dynamic movement, where cubes rotate and expand outward in layers. It gives a futuristic and hypnotic vibe. I created a playful animation with soft, floating bubbles in pastel colors. The movement mimics organic motion, similar to molecules or dreamy particles. This animation represents a starry sky effect, with small white dots floating in different directions, creating a deep space illusion. I wanted to create a relaxing scene with autumn leaves drifting in the wind. The slow, organic movement gives it a peaceful, nature-inspired aesthetic. I explored an animated waveform inspired by an electrocardiogram (ECG). The jagged peaks and drops create a sense of energy and pulse, almost like it's reacting to sound or movement. This is a more emotional, expressive animation. I designed the heart to appear as if it’s beating, with soft particles around it enhancing the dreamy, romantic atmosphere. I experimented with organic forms that morph and expand. The soft, blobby animation gives a liquid-like effect, making it feel alive. I created a playful, abstract animation where various shapes float and rotate in space. The randomness adds a fun and chaotic feel to the movement. I combined floating bubbles with a smooth, flowing wave to create a dreamlike effect. The interaction between the two elements makes it feel like sound waves or water ripples. I experimented with a simple yet dynamic wave, focusing on fluidity and movement. The smooth motion gives it a calming, meditative feel. I wanted to create an abstract form that constantly shifts and evolves, mimicking something organic. The soft pink tone makes it feel delicate and alive. This is a study in texture and motion. I created a growing circle with subtle rough edges, making it feel like an ink blot or natural surface expanding. I designed this animation to explore continuous motion with spirals. The smooth expansion of the loops gives a hypnotic and rhythmic visual effect.

Activity 2

I carefully inserted the jumper wires into the breadboard, making sure each connection was in the right place. I connected the Makey Makey board and watched the lights turn on — everything was coming to life! After wiring things up, I pressed the keys and saw shapes popping up on screen. It felt so rewarding! I tested my p5.js animation — each time I tapped Makey Makey, the shapes responded like I was painting with touches I added copper tape to my paper drawing to make it conductive, then used Makey Makey to turn the artwork into interactive buttons! I'm connecting wires to the Makey Makey and testing them with a touchpad, activating animations on the screen. I’m experimenting with different connections and testing how touching the breadboard triggers a visual response on my p5.js sketch. I use copper tape on paper to design interactive shapes. When I touch them, they trigger animations through Makey Makey. This animation reacts instantly when I tap the connected surface, showing how simple touch inputs can create engaging effects. I’m fine-tuning the connections and verifying that each touchpoint successfully activates the interactive sketch. Using Makey Makey, I connected conductive materials to create simple key triggers, which activate interactive visuals on the screen. This setup shows a successful circuit connection using Makey Makey and a breadboard to simulate digital input through physical touch. With copper tape arranged on a printout, I created a custom input pad that controls animations on the screen through the Makey Makey system. I test various connections with different materials to explore how physical touch can trigger creative p5.js respond This scene captures a fully functional interactive system where touch on copper tape elements leads to immediate visual feedback on screen. The animation responds to touch input using Makey Makey. When triggered, visual patterns pulse across the screen, showcasing an abstract light interaction. This sketch reacts to user input with shifting colors and lines. When Makey Makey is touched, animated shapes ripple outward like a calm wave. An interactive moment with a soft pastel animation. The visual changes with Makey Makey touch, simulating the soothing motion of a flower blooming. This piece activates bright visual bursts when triggered via Makey Makey. It gives the impression of dreamy fireworks illuminating the night sky. Upon Makey Makey activation, a bubble-inspired animation fills the screen. The gentle motion and color shift represent a calming, magical interaction. I used Makey Makey with copper tape to turn a paper design into an interactive interface. Touching it triggered visuals on the screen. I connected different copper shapes to Makey Makey. Each touch changed the animation on my laptop. This setup let me control visuals by tapping copper paths on paper. It felt like drawing that reacts. I tested touch inputs with copper tape again, and it responded instantly on screen—really fun to experiment with. For this one, I refined the layout and interaction. Each touch triggered a unique digital response.

Project 3

Final Project 3 Design

Click here

When a user touches one of the photos, the system sends a signal through Makey Makey to my custom p5.js program, triggering a specific sound and animation. To me, this isn’t just an interaction — it’s a gentle way of calling a memory back to life. Every touch feels like I’m reaching out and bringing a precious moment closer, as if I’m holding that memory in my hands again.
×

Powered by w3.css