Graduate Studio: Technology A [Class Notebook] (DES-720A-02)

Week 12: Animation & Interaction

This week we will look into all kinds of different inputs and interactions you can create with p5.js, as well as how to animate your sketches to make them more dynamic and engaging.

Arduino (Arduino)



Edit this page on GitHub

Custom Libraries

Therer are many p5.js libraries that would receive live inputs from different sensors and devices.

Assignment

Due: Nov 18, 2025

Submit Assignment

Begin by identifying the community you wish to engage and the environment in which your system will exist. Observe how participation naturally occurs within this context and consider how your design might introduce new forms of interaction that unfold over time.

Consider what kinds of inputs best capture participation or environmental change: sound, motion, gesture, light, text, or network data. Experiment with simple prototypes to test how these inputs might be sensed and translated into a dynamic response.

Examples

Tutorials & Resources

Class Notebook

Binjia Li

I learned how to combine keyboard interaction with mouse-tracking to create a responsive animated cat.

Flora Fang

I learned how to create interactive effects using p5.js, which was really fun.

Kate Chon

This week I learned how different types of interactions can create completely different experiences, even when starting from a similar idea. I also realized how small changes in input, like finger movement,

Lin Kim

I wasn’t yet able to create a piece that responds sensitively to noise or environmental changes. So by next week, I hope to develop a version that reacts more immediately and dynamically. Still, working in Unity allowed me to build a real-time, game-like interactive environment, which was a valuable experience. I plan to continue improving and expanding this project.

Lina Lee

I wanted to implement a process where signing on a monitor would display and accumulate those signatures on screen, but I'm experiencing trial and error—the hand is being detected, but the motion isn't being drawn on the monitor.

Nancy Scanlon

I got to learn about how live inputs are incorporated in our everyday lives!! I also have more of a question about how the camera can catch on to accessories. Sometimes my code can be fidgety. Because I am working on glasses-- a secondary thing over eyes.

Richard Fu

There are 468 points in the facemesh topology. Relatively complex data analyses can actually go through with the amount of point there are to work with.

Sarena Yadav

Through developing this project, I learned how dynamic and unpredictable the environment becomes once it becomes the input itself. I discovered how an interactive system can both respond to a space and also shape how people behave within it. Experimenting with real-time color extraction taught me how sensitive cameras are to lighting, proximity, and movement, and how these variables constantly shift the palette. I also began examining the difference between capturing colors versus capturing actual surface qualities, leading me to question what information can be abstracted without being altered. While colors can be distilled into simplified palettes, textures behave differently they contain direction, depth, and complexity that resist reduction. This led me to understand that abstracting texture is not just a technical challenge, but a conceptual one: it raises questions about accuracy versus interpretation, compression versus essence. I am now considering whether textures should be preserved exactly as they appear or translated into symbolic representations. This reflection helped me understand that abstraction is not only about removing information, but about deciding what information matters, and how transformation can become its own kind of truth.

Yiling Yang

This week I learned how to create some simple interactive projects and conducted many related experiments. I found it really interesting.

Zoe Liu

I originally wanted to create something that I thought would look really cool, like a human figure made up of many flowing lines that continuously move and flow. But after many attempts, those lines would only form a huge rectangle around the body part. I think this might be a problem caused by having too few points in the body section. Perhaps if I want to achieve that effect, I would need to import other body models with more points and surfaces.