Module 3 Formstorming

Weekly Activity Template

Xinyu Lu

Project 3

Module 3

In this project, I created an interactive Christmas-themed display using p5.js and Makey Makey. The main feature is a digitally-rendered Christmas tree that users can interact with using simple controls. By connecting Makey Makey to various buttons, users can activate different visual and sound effects, such as changing the tree’s color, playing Christmas music, and triggering light animations. This setup not only brought the festive spirit to life but also demonstrated how physical interactions can be seamlessly integrated with digital responses to create an engaging and interactive experience. The project aimed to blend creativity with technology, offering users a fun and immersive way to explore digital art and interaction.

Activity 1

How did I engage with the project theme?
I engaged with the project theme by creating interactive visual effects using p5.js. This involved programming shapes, movements, and responses to user input via keyboard and Makey Makey, allowing for real-time manipulation of the visuals.

What was successful?
The successful part of the project was the ability to integrate interactive elements effectively. I was able to make the shapes respond to keyboard commands, changing their properties like color, size, and position, which made the interaction quite dynamic and engaging.

What was challenging?
The challenging part was ensuring smooth and responsive interactions, especially when integrating with Makey Makey. Sometimes, it was tricky to get the desired responsiveness and to debug issues where the shapes didn't behave as expected.

How did you explore the lecture content?
I explored the lecture content by applying the concepts of loops, conditionals, and functions in JavaScript to create animations. This hands-on application helped reinforce my understanding of programming concepts and how they can be used creatively in web-based projects.

In this animated GIF, I control a white circle navigating through several red circles on a black background using a Makey Makey device. By pressing the arrow keys connected to the Makey Makey, I can move the white circle in different directions, creating a simple yet engaging interactive visual experience. The screenshot shows the code I wrote in JavaScript for creating an interactive visual effect using p5.js. The code initializes a controlled ball and multiple random balls that move within the canvas. This image captures my setup using a Makey Makey device connected to my computer while running a p5.js sketch. I use the Makey Makey to control the movement of a red ball on the screen by pressing the arrow keys. This GIF demonstrates the interactive animation I created, where I control a red ball navigating through other floating balls on a dark background. Each interaction influences the movement of the red ball directly. This screenshot shows the JavaScript code I wrote for creating an interactive drawing application using p5.js. In this code, I set up different brush sizes and colors to draw on a canvas, allowing me to switch colors and brush sizes with keyboard inputs. In this photo, I am using a Makey Makey device to control a drawing application displayed on my laptop screen. I drew spirals and other shapes in red and blue by pressing the arrow keys to change the direction and color of the brush. This GIF captures a drawing session where I dynamically change brush sizes and colors to create an abstract pattern. I used a simple interface to control the drawing parameters, resulting in a fluid and colorful display of digital art. This screenshot displays the JavaScript code I've written to create a visual effect using p5.js. The code dynamically generates colorful shapes on the canvas, which react to keyboard inputs to change properties such as color and movement. In this photo, I'm using a Makey Makey device to interact with a colorful visual application displayed on my laptop screen. By pressing the arrow keys on the Makey Makey, I can manipulate the shapes appearing on the screen, making the interaction playful and visually engaging. This GIF shows a dynamic visual effect I created where different colored shapes move and interact on a dark background. The animation cycles through various geometric transformations, showcasing a simple yet captivating display of motion graphics. This screenshot shows the JavaScript code I have developed for an interactive digital storybook using p5.js. It outlines how I manipulate the content and background color of the story pages based on user inputs, enhancing the interactive narrative experience. In this photo, I'm interacting with a digital story displayed on my laptop screen, where the text changes as I press the arrow keys on the Makey Makey device. This setup allows me to navigate through different parts of the story, changing the scene with each press. This GIF demonstrates the digital storybook I created, where text changes on a colored background to tell a story. As I navigate through the story, the background and the text dynamically change to reflect the narrative's progress. This screenshot displays the JavaScript code I wrote for creating an interactive fireworks display using p5.js. The code allows for creating and animating fireworks with different colors and effects, which I control through keyboard inputs. In this photo, I'm using a Makey Makey device connected to my laptop to interact with a fireworks simulation displayed on the screen. By pressing different keys, I can launch fireworks in various colors, adding excitement and interaction to the visual display. This GIF captures a vibrant fireworks display I created using p5.js, where multiple fireworks explode in succession, lighting up the dark background with bursts of color. Each firework spreads into numerous particles, creating a dazzling visual effect. This screenshot shows the JavaScript code I developed for creating an interactive fireworks display using p5.js. In this code, fireworks are updated and displayed in a loop, and they disappear when they are done. In this photo, I'm using my laptop to run a dynamic fireworks simulation. By pressing the arrow keys, I can change the patterns and colors of the fireworks, making the display vivid and interactive. This GIF captures the vibrant fireworks display I created, where colorful fireworks explode against a dark background, creating a spectacular visual effect. Each firework bursts into colorful patterns, adding beauty to the digital night sky. This screenshot displays the JavaScript code I developed for a simple animation using p5.js. In the code, I program an ellipse that changes color and moves according to keyboard inputs. The setup function initializes the canvas and default color. In this photo, I'm interacting with a basic animation displayed on my laptop screen. The animation shows an ellipse that changes colors and moves across the screen based on my key presses, creating a playful and dynamic visual. This GIF captures the animation I created, where a multi-colored ellipse moves around a black background. Each arrow key press changes the ellipse's direction and updates its color, making the visual experience interactive and vibrant. This screenshot displays the JavaScript code I wrote using p5.js. It shows how I set up a simple interactive animation where shapes like ellipses, rectangles, and triangles can be drawn on the canvas. The shapes change based on keyboard inputs. In this photo, I'm using my laptop to run an interactive p5.js sketch that displays different geometric shapes on the screen. As I press keys, the shapes switch between a rectangle, a triangle, and an ellipse, each in a different color. This GIF captures the interactive animation I created, where a red ellipse transitions between various shapes including a rectangle and a triangle. The shapes change dynamically against a black background as I press different keys.

Activity 2

How did I engage with the project theme?
I engaged with the project theme by using the Makey Makey board to turn everyday objects and materials into interactive tools. I experimented with materials like fabric and copper tape to create touch-sensitive interfaces, which allowed me to control digital applications directly from these improvised devices.

What was successful?
What was successful in this project was the ability to effectively convert simple touches on materials into digital actions on my computer. This was evident in the way the copper tape on the fabric could control games and trigger visual effects on the screen, demonstrating the project's effectiveness in creating an engaging and functional interface.

What was challenging?
One challenging aspect was ensuring reliable connectivity and consistent response from the materials used. Sometimes, the connections between the alligator clips, copper tape, and the Makey Makey board required adjustments to maintain consistent functionality, which required careful handling and testing.

How did you explore the lecture content?
I explored the lecture content by applying the concepts of conductivity and user interface design learned in class. By integrating these principles, I experimented with different configurations and tested the interactive potential of various materials, which helped deepen my understanding of physical computing and its application in creating interactive experiences.

I have set up my Makey Makey board with colorful alligator clips attached to copper strips on a yellow fabric. This configuration is part of an experiment to turn the fabric into a touch-sensitive control surface, allowing me to send commands to my computer through simple touches. I am demonstrating the functionality of my setup by touching the copper strips on the yellow fabric. This interaction is used to send signals to the Makey Makey board, which then communicates with my laptop. It's a practical way to explore how different materials can be used to control digital applications. The results of my interaction are visible on the laptop screen, showing a red zigzag pattern that responds to my touches on the yellow fabric. This image captures the immediate effect of my inputs on the digital display, illustrating the potential of DIY electronics projects for interactive technology. The gif shows my hand actively pressing the copper tape strips on the fabric, which causes dynamic visual effects on the laptop screen. Each touch creates a vibrant explosion of colors, demonstrating the interactive and fun nature of using Makey Makey to connect everyday materials with digital technology. In the setup, there is a Makey Makey board connected to strips of conductive material through colorful alligator clips. The setup is used for creating an interactive electronic project, allowing the connection of everyday objects to computer programs. On a desk, the Makey Makey setup is connected to a laptop, which displays a colorful interactive game. When the conductive materials are touched, they control the game shown on the laptop screen, demonstrating how physical interaction can manipulate digital environments. Copper tapes are attached to paper and connected with alligator clips to form a simple touch interface. This DIY electronic project can turn touches into inputs for a computer, allowing one to control software or create music with just a tap. A colorful visual effect is displayed on a laptop screen, triggered by touches on the connected Makey Makey setup. This visual is an example of how interactive technology can create engaging and beautiful digital art in real-time. In my setup, I have a Makey Makey board connected to a laptop, showing a colorful snake game on the screen. The board is hooked up to several pieces of copper tape on a textured surface, which are used as controls for the game. When I touch these copper strips, it causes the snake on the screen to move. The Makey Makey board is seen with many colorful wires connected to it. Each wire is clipped to a copper strip that is attached to a bubbly textured pad. This setup allows me to interact with my computer in a unique way by touching these copper contacts. This image shows copper tape strips attached to a bubbly textured pad. I use this setup to control various functions on my computer through physical touch, making it a simple yet effective tool for interactive projects. I have set up a series of copper strips on a purple board, each connected to a colorful alligator clip. This is part of my electronics project with Makey Makey, where I use these connections to turn physical touches into digital inputs. In my experiment, I use a Makey Makey board connected to various wires. Each wire is attached to a different button on the board, allowing me to control specific actions on my computer through these simple connections. In a demonstration, I touch the copper strips connected to the Makey Makey board, and each touch triggers a beautiful fireworks display on my computer screen. This shows how physical actions can interact with digital applications in real time. I have connected my Makey Makey board to my laptop, which displays colorful geometric shapes on the screen. I use decorative wooden flowers attached to a colorful hand-painted map as interactive buttons. Each flower is connected to the Makey Makey with alligator clips, turning them into touch-sensitive controls. In this close-up, you can see the wooden flowers placed on a hand-painted map. Each flower is connected to the Makey Makey via alligator clips, which are attached to small pieces of copper tape on the back of each flower. This setup allows me to interact with digital programs by simply touching these flowers. In this demonstration, I am pressing the wooden flowers on the hand-painted map. Each touch activates different actions on my computer, showing how simple touches can control digital interfaces effectively. This setup combines art and technology, making interaction both fun and visually appealing. I have connected colorful gift-wrapped boxes to my Makey Makey board using alligator clips. Each box is wrapped in shiny paper and acts as a touch-sensitive button. When I touch these boxes, they send signals to the computer, allowing me to interact with digital applications in a fun and festive way. In this setup, my laptop displays a colorful screen with floating bubbles. The gift-wrapped boxes connected to the Makey Makey board lie in front of the laptop. Each time I touch one of these boxes, it controls the movement or interaction on the screen, adding a playful element to my digital tasks. In this demonstration, I am pressing on the gift-wrapped boxes. Each touch triggers different actions on my computer, creating a direct interaction between the physical touch of the boxes and the digital responses on the screen. This experiment shows how everyday objects can be transformed into interactive tools using Makey Makey. In my project, I use colorful pipe cleaners connected to a Makey Makey board via alligator clips. These serve as playful, tactile elements that control different commands on my computer. Each touch on these pipe cleaners translates into an input signal, which is fun and interactive. The Makey Makey board is visible here, showing various wires connected to the colorful pipe cleaners. This setup allows me to experiment with different interactive projects, combining creativity and technology to make unique digital interactions. In this view, my laptop screen displays vibrant, animated graphics that react to my inputs from the pipe cleaners. This makes my interaction with the computer screen both visually appealing and engaging, bringing a simple touch interface to life. I am actively using the pipe cleaners attached to the Makey Makey board to interact with my laptop. Touching these colorful elements causes changes in the digital animations displayed on my screen, highlighting how simple materials can become effective tools for digital interaction. In this demonstration, I manipulate the pipe cleaners to control activities on my laptop screen. Each movement and touch creates dynamic visual effects, showcasing the seamless integration of physical and digital interaction in my project.

Project 3

Final Project 3 Design

My Interactive Christmas Tree project uniquely merges tactile interactions with a physical, colorful Christmas tree and responsive digital effects. By touching different elements on the tree, users trigger corresponding animations and sounds on a webpage, creatively blending traditional holiday decor with modern technology to enhance the festive experience.

test2Lorem ipsum dolor sit amet, consectetur adipiscing elit
×

Powered by w3.css