Module 3 Formstorming

Weekly Activity Template

Jiarui Yao / Sunny

Project 3

Module 3

This activity explored what five buttons could generate across ten P5.js sketches, using a consistent ice cream and soda colour palette as a visual thread from start to finish. Each simple version isolated one core idea — colour change, 2D movement, 3D rotation, or camera navigation — while each final version layered multiple behaviours together, such as ripple rings on keypress, morphing 3D shapes, and ribbon confetti filling a navigable space. The greatest leap came in Sketch5 final, where microphone amplitude was added as a sixth invisible input, fading the torus in and out with sound. Throughout, the Makey Makey replaced the keyboard without any code changes, confirming the system was built for physical integration from the start.

Activity 1

Hand holds Makey Makey up to a laptop running a pink circle on a blue P5.js canvas. Hand holds Makey Makey while the laptop screen shows a dark canvas with a glowing amber ripple. Hand holds Makey Makey as the laptop displays a white flat card shape rotating in 3D space. Laptop shows a pale torus with ribbon confetti flying outward, Makey Makey resting beside it. Hand holds Makey Makey while a pink torus and falling ribbons play on the screen with a mic button visible. Sketch1 simple — a single circle shifts through five pastel ice cream colours each time a key is pressed. Sketch2 simple — a soft glow circle moves across a dark background and pulses in scale as each arrow key is held. Sketch3 simple — a mint-coloured 3D torus rotates slowly and changes tube thickness with every key press. Sketch4 simple — a camera orbits a pastel torus in 3D space, changing colour and tube size with each key. Sketch5 simple — a torus spins inside falling ribbons while glowing particles burst outward when the camera moves. Laptop screen shows code on the left and a pink circle on a blue canvas on the right, Makey Makey arrows pointed up. Laptop shows a dark canvas with warm golden concentric ripple rings expanding outward, Makey Makey in hand. Laptop displays a white diagonal flat plane rotating in WEBGL 3D space, Makey Makey held sideways. Code editor fills the left panel while a partial torus result is visible in the P5.js preview window. Laptop shows a pink torus surrounded by scattered ribbon confetti, Makey Makey connected via red cable. Code editor shows a particle system sketch with gravity and wind variables declared at the top. Code editor displays a keyDown function with RGB colour-shift logic mapped to each arrow key. Code editor shows a 3D camera sketch using createCamera and currCamera.move calls for arrow key navigation. Code editor shows a class-based Ribbon particle with reset, update, and display methods for the falling ribbon effect. Code editor shows the final sketch integrating p5.Amplitude, p5.AudioIn, and microphone fade logic for the torus. Sketch1 final — glowing HSB particles stream from the centre, drifting with gravity and wind on each key press. Sketch2 final — ripple rings radiate outward from the circle's position each time a directional key is pressed. Sketch3 final — the 3D shape morphs between a flat box, a full torus, and a thin ring as keys are pressed. Sketch4 final — the camera flies through a rain of tumbling ice cream coloured ribbon confetti in 3D space. Sketch5 final — the torus breathes in and out with microphone amplitude while ribbons fall and particles trail on movement.

Activity 2

The image displays a floral-patterned box connected to the Makey Makey via colored wires resting on a laptop keyboard, using iron wire loops as the five conductive input buttons. The image displays a laptop showing a blank white canvas while the Makey Makey sits beside it with wires spread across the keyboard, testing the initial circuit connection before interaction. The image displays a close-up side view of the floral box top edge showing five iron wire loops pushed vertically through the surface, using bent iron wire as the raised conductive buttons. The image displays a laptop screen showing a white 3D torus ring shape with the Makey Makey and wired interface beside it, confirming the iron wire loops are triggering the sketch correctly. The image displays a hand pressing the iron wire loop buttons on the floral box while a visual response appears on the laptop screen, using iron wire and copper tape as the conductive trigger system. The image displays a flat white paper card with five pencil-drawn directional arrow symbols and alligator clips clamped onto the heavily shaded graphite areas, using pencil graphite as the conductive material. The image displays a laptop showing a white tilted flat plane rotating in 3D space with the pencil-drawn arrow card placed below, confirming graphite marks are successfully triggering the WEBGL sketch. The image displays the pencil arrow card lying flat beside the Makey Makey board with a 3D torus visible on the laptop screen, using pencil graphite as the five-point directional conductive interface. The image displays a close-up of the pencil-drawn card showing five directional arrow shapes with alligator clips biting into the thickest graphite-filled areas, using pencil graphite as the conductive trigger points. The image displays a hand touching the pencil-drawn graphite arrow buttons triggering a shifting visual on the laptop screen, using pencil graphite as the conductive input material. The image displays the floral box viewed from a low angle showing iron wire loops along the top and colored wires exiting the front face, using iron wire as the five conductive buttons. The image displays a laptop showing a blank canvas with the floral box interface placed in front of it, testing the wire loop connections before any interaction begins. The image displays the Makey Makey board placed on the desk with five colored alligator clip wires fanning outward, showing the full wiring layout before connecting to the physical interface. The image displays a top-down view of the blue floral box sitting on the laptop with the Makey Makey positioned below it and wires connecting both, showing the integrated physical setup from above. The image displays a hand interacting with the floral box interface under warm lamp light, pressing the wire loop buttons and triggering a glowing visual response on the laptop screen, using iron wire as the conductive input. The image displays the yellow Hungry Panda takeout box with copper tape strips arranged in a directional cross pattern and alligator clips attached at each end, using copper tape as the five conductive button zones. The image displays a laptop screen showing a dark canvas with a small glowing amber dot while the yellow copper tape box sits connected below, confirming the copper tape interface is triggering the glow sketch. The image displays a top-down view of the Makey Makey board with multiple colored alligator clip wires spreading outward toward the yellow box interface, showing the full circuit wiring layout. The image displays the yellow box viewed from above with the copper tape cross pattern visible and alligator clips attached at the edges, using copper tape strips as the directional conductive trigger surface. The image displays a hand pressing the copper tape strips on the yellow box and triggering a glowing dot that shifts color on the dark laptop screen, using copper tape as the five-button conductive interface. The image displays the blue floral box lying flat showing five copper tape strips each topped with a circular magnet aligned in a row, combining copper tape and magnets as a composite conductive button system. The image displays a laptop showing a dark canvas with a blue glowing circle while the blue floral box with magnet-topped copper tape buttons sits connected below, using copper tape and magnets as the combined input interface. The image displays a laptop with tangled colored wires leading to the blue floral box partially visible in frame, showing the wiring in progress during setup of the magnet and copper tape system. The image displays a close side-angle view of the blue floral box showing copper tape strips with circular magnets mounted on top and alligator clip wires exiting from below, using copper tape bridged with magnets as the conductive contact points. The image displays a hand pressing the magnet-topped copper tape buttons on a camouflage-patterned box while a warm orange glow pulses on the laptop screen, using copper tape and magnets as the combined conductive trigger system.

Project 3

Final Project 3 Design

PLACEHOLDER TEXT, replace this with an actual description

test2Lorem ipsum dolor sit amet, consectetur adipiscing elit
×

Powered by w3.css