Week 14: Cyberbnetics and Playtest

What is an algorithm beyond its technical definition? How do computational and cybernetic modes of thinking influence the ways we organize, participate, and relate to one another? How can algorithmic processes be used to create more open and evolving forms of community interaction?

Cookie (Cybernetics: Or Control and Communication in the Animal and the Machine by Nobert Wiener (1948))

Assignment

Due: Dec 2, 2025

Submit Assignment (closed; archived)

Keep working on your community protocol, set it up in the desired environemnt and invite participations through playtesting.

For the final presentation, you will need to:

Create a fully working digital prototype and share it through a live link, either on GitHub or a custom domain. Your prototype must run cleanly and should not display the default p5 banner.
Before presenting, make sure your sketch includes some saved results from earlier experiments or interactions.
During your presentation, you will walk us through both the previously saved results and the interactive prototype so we can see how the system behaves over time.
You will also prepare an object label for the Open Classroom showcase that clearly introduces your project and helps viewers understand what they are seeing.

This is the continuing process of our project 3: Community Protocol. We will continue to refine and develop this project over the next few weeks. The full description is here.

Tutorials & Resources

Class Notebook

Bella Tsai

Through the design of this little game, I started by exploring how to create the effect of fire using particles. I used class to store objects and then put one object into another class (particles—fire—fire jet). Each layer had its own executive purpose. I discovered that deciding which function to place and execute requires a lot of experience and trial and error. For example, there are many details to consider in order to create small fires that spread. The fire extinguisher also uses a (particles-foam-foam spray) structure, but they have totally different executive purpose and function. Additionally, there's keyboard movement function, such as a simple operation involving many intricate design details (release, hold, simultaneous presses, etc.). This project felt like a summary and review of the course throughout the semester. From variables, loops, maps, custom functions, floor, arrays, push, mousePressed, keyPressed, vectorCreate, and velocity, I used them all in this project. I used AI to assist me with some complicated parts, but by reading each piece that it helps generate, I'm proud that I can understand over 90% of the code and adjust the values to achieve the desired effect. The process made me get more familiar with computational languages. Realizing that even a seemingly simple interactive game is full of design details. This project gave me a deeper understanding of the world created by programming languages, and also deepened my admiration and respect for them.

↳ Munus:

I'm so happy to hear that. I don't make games myself, but I find them illuminating because they embody so much of the computational thinking involved in creating rules and designing interactions!

Binjia Li

I learned how to build an interactive scene where a cat with three movement styles chases a yarn ball that follows the mouse.

Kate Chon

This week, I learned how small interactions can shape the behavior of a system. I explored how changes in scale, motion, and audio can make an environment feel more alive and responsive. I also realized that designing interaction is less about perfect control and more about creating space for curiosity and unexpected outcomes.

Lin Kim

Through this project, I gained a deep understanding of the Unity WebGL build structure, the limitations of the browser environment, and the entire process of implementing Mediapipe-based motion recognition logic directly on the web. In particular, the most challenging part was resolving seemingly minor details—such as the file structure required by WebGL, differences between local and deployment environments, camera permission issues, CDN script version conflicts, and path errors introduced during compression—that could completely break the application. However, by pushing through countless errors, black screens, 404s, and rendering failures, I developed a much clearer grasp of the overall web deployment workflow, debugging strategies, and the practical skills needed to create a fully functional interactive web experience.

↳ Munus:

I am so impressed. Wrestling with digital infrastructure can be frustrating, but I’m glad you were able to work through it. It would be really interesting if you could share some of the prompts the AI returned and document what you learned in more detail.

Lina Lee

I learned how to create a new website.

Nancy Scanlon

I have questions with preload and adding pngs to be glasses into my code.

↳ Munus:

Let's discuss in Office Hours then!

Zoe Liu

For performance reasons, some aspects of the project had to be compromised. I initially intended to make the background contours more detailed, but frequent re-rendering caused significant performance issues. As a result, the movement of the figures and lighting effects became less fluid. To fix this, I simplified the contour system to improve responsiveness and maintain a smoother interactive experience.

↳ Munus:

Designing with compromises is something designers do all the time. It is always a dance within limitations.