PERFORMATIVE MEDIA （WEEKLY LEARN
PERFORMATIVE MEDIA
———
Ding Jiaqi/0379388
Performative Media/ Bachelor of interactive spatial design
——
WEEK 2
This week, the teacher first reviewed last week’s content, including the concept of performance media and the input–process–output interaction model, and then guided us to explore “expressive media” in more depth. The main topics covered creative coding and generative art, emphasizing how a balance between “rules + randomness” and continuous iteration can create complex and engaging artistic results through human–computer collaboration.
Next, we downloaded and learned to use TouchDesigner, an interactive creation software. At first, the dense network of nodes on the interface felt overwhelming, but with the teacher’s guidance, I followed the steps carefully — for example, selecting the “Noise 1” node to generate dynamic visuals, adjusting colors and parameters, and correctly linking the nodes. In the end, I successfully created my first visual animation, which felt very rewarding. Finally, the teacher divided us into groups to discuss the topic for “Project 1,” preparing us for the upcoming creative process.
WEEK 3
1. Review of Core Ideas
Generative Art:
This type of art is made using rules, algorithms, and computer systems.
It often includes randomness and repetition — repeating rules to create new shapes or patterns.
Common examples are fractals, random walks, and particle systems.
TOP vs. CHOP Operators:
We reviewed the difference between these two tools:
TOP (Texture Operators): Work with images and pixels — used for things like noise textures and image blending. They have green icons.
CHOP (Channel Operators): Work with numbers and signals — used for tasks like waveform or LFO generation. They have bubble-shaped icons.
2. Key Tools and Practice
Using TOP Operators:
We practiced using basic TOP tools such as Composite, Multiply, and Transform.
These help us layer images, control size and position, and match different resolutions.
Hands-on Example:
We combined banana images, text, and circular patterns step by step using Composite.
Then we used Transform to adjust their position (move along X/Y axes).
Finally, we used Multiply to mix black backgrounds and images, creating a clean final visual.
Parameter and Detail Control:
We learned to:
Change layer order in Composite so important elements stay visible.
Use small value changes (like 0.01) in Transform for precise control.
Fix image stretching problems by turning on “Refit” to match resolutions properly.
WEEK 4
WEEK 5
1. Key Operations of the Three Core Operators
• TOPs (Purple): Used for visual generation through operators such as Circle and Over (for shapes and layer blending). Feedback loops are applied to create evolving and textured overlay effects.
• CHOPs (Green): Utilizes Mouse to obtain cursor coordinates, Map to remap value ranges, Lagto smooth transitions, and Math for numerical calculations.
• Control Tools: Keyboard keys (1/2/3) are used to switch colors, while Logic and Countoperators manage functions such as circle disappearance on click and looping counters.
2. Two Interactive Projects
• Controlled the circle’s position using the mouse and changed its color using keyboard inputs, creating input-driven visual responses.
• Extracted audio data to make the circle scale dynamically with the rhythm of the music and switch positions (left, center, right) based on sound triggers.
WEEK 6
Through case studies and theoretical discussion, the instructor guided us to rethink the concept of interaction, moving beyond traditional input devices such as the mouse and keyboard. Instead, the human body itself was presented as the most natural and effective medium for interaction.
One particularly fascinating example introduced by the instructor was an interactive shadow installation located in a city central square. The design was inspired by the perceptual techniques of Dutch painters and used cameras to capture ground shadows at a rate of 20 frames per second. When the shadow of a passerby matched a predefined portrait outline, the corresponding hotspot would turn white and briefly trigger a black screen, after which a new portrait would appear in a different location.
What impressed me the most was the sense of naturalness in the interaction. Participants did not need any prior instruction or guidance. They instinctively adjusted their body movements and shadows, often striking creative and expressive poses. This resulted in a truly barrier free interactive experience.
The instructor also highlighted three essential principles of effective interaction design.
First, intuitiveness. Users should be able to engage naturally without complicated learning processes.
Second, thematic relevance. For example, the use of shadows reinforces the artistic theme of perception and observation, ensuring that interaction and concept remain closely connected.
Third, surprise. Elements such as sudden black screens and the appearance of new portraits continuously attract users and prevent the interaction from becoming monotonous.
The instructor further explained the logic behind achieving dynamic visual feedback. The core mechanism involves frame comparison through buffer storage.
Initially, a frame cache is created in which the program stores the most recent 32 or 128 frames, effectively preserving visual history.
Next, two frames are selected for comparison, such as the current frame and one captured six frames earlier. The differences between them are calculated to detect dynamic changes.
Then, a threshold value is applied to filter out background noise, allowing only significant moving edges such as hand or body motion to remain.
Finally, visual effects such as blur, displacement, and saturation adjustment are added to ensure smoother and more natural feedback, reducing any sense of abruptness in the visuals.
WEEK 7
This was the seventh week of our TouchDesigner hands on class. I learned advanced uses of the MediaPipe plugin and completed a hand controlled interactive visual project. The instructor first reviewed key interaction principles, emphasizing that interactions should be natural, intuitive, theme related, and not overly complex. They also mentioned that gamification can enhance user engagement.
The focus then moved to the MediaPipe plugin, which supports face, hand, body, and object tracking. We were advised to enable only the necessary features to maintain system performance. During practice, I connected the camera and used hand tracking to control a circle’s position and size. Lag CHOP was added for smoothing, while Range and Limit were used to adjust values. We further enhanced the visuals with Displace TOP, Noise TOP, color overlays, and refined the circle into an outline for a more polished effect.
We were given 30 minutes to experiment independently, using the second hand to control visual elements such as brightness and color. The instructor concluded by mentioning that details for the second assignment and final project would be explained later, along with feedback on our creative ideas.
WEEK 8
This week marked a critical stage in the project development. The instructor emphasized that our priority is to transform ideas into concrete, feasible, and demonstrable outcomes. The class focused on three key aspects: refining the concept, structuring interaction design, and planning space, materials, and prototyping. We were reminded to return to the core question of what emotion and experience the work should convey, ensuring that all interactions support the central theme rather than simple functional triggers.
We were guided to clarify the interaction structure through the process of input, process, output, and meaning, and to create clear flowcharts. The physical space and materials were also highlighted as extensions of the concept, with prototypes needing clarity and functionality rather than visual perfection.
In the latter part of the class, the instructor stressed that next week’s presentation must focus on completing core interactions. Our initial Disney inspired idea was encouraged to evolve into an original magical world with its own narrative. Overall, the key takeaway was that the prototype stage prioritizes clear, practical, and concept driven interaction over perfect visual aesthetics.
________________________________________________________________________
PERFORMATIVE MEDIA : ASSIGNMENT 2: CONCEPT PROPOSAL & EARLY PROTOTYPING
———
Ding Jiaqi/0379388
Performative Media/ Bachelor of interactive spatial design
——
Introduction：
WEEK 6：
The instructor gave a detailed explanation of the assignment. The core of the second task is “transforming ideas into verifiable solutions”, which is divided into three parts:
1. Concept Presentation
Create a simple slideshow without overloading it with details. Clearly explain what type of interaction you want to create, your source of inspiration, and the feeling or mood you aim to convey.
2. Supporting Documents
Provide detailed documentation, including audience analysis, a thorough explanation of the inspiration with clearly defined reference points, team role allocation, and if the inspiration has changed, an explanation of the reasons behind the transition.
3. Prototype Creation
Do not strive for perfection; instead, focus on building the core interaction. Emphasise documenting the experimental process, such as tool adjustments and parameter modifications. Trying new tools can be very helpful.
At first, our group envisioned an interaction where raising a hand would trigger fireworks. However, we soon realised that this approach was too simple and lacked visual impact and narrative depth, making it unable to provide a meaningful experience.
WEEK 7：
In the seventh week, I introduced the concept of "Children from the Stars," a charity project to help children with autism. Our idea was that users could pick up stars from a constellation to symbolize love and hope. However, this interactive approach was still relatively simple and couldn't support a more complete storyline.
WEEK 8：
Outside of class, we continued our discussion, thinking about Disney and the Wizarding World. Based on this idea, we came up with three plans.
But in class, Max gave us a crucial piece of advice: don't rely on existing IPs, but instead build a more original and imaginative magical universe with a complete story. Based on these requirements, we created "The Echoing Curtain." In this world, when users enter the camera's field of view, their figures appear as floating particles that mimic their movements; when they wave their hands, they can summon magical light effects.
Moodboard：
We frequently connected the wrong nodes, which caused the entire system to malfunction. Since each operator had different input and output requirements, even a minor mistake could disrupt the entire chain. Often, we did not realise the problem immediately, which allowed errors to accumulate and eventually affected everything that followed. We also experienced many frustrating moments, such as misaligned coordinates, missing nodes, and incorrectly configured parameters. Each issue felt like another challenge that tested our patience.
Thankfully, the interactive techniques taught by our lecturer were extremely helpful. For instance, our magical visual effect was inspired by the interaction demonstrated in Week 6. By combining Mr. Max’s guidance with additional support from AI, we were able to successfully complete the TouchDesigner prototype for Project 2. However, this version is only temporary. For the final project, we plan to further enhance the visuals and incorporate background elements and music to create a more immersive overall experience.
WEEK 9：
This week we finished our presentation slides and received valuable feedback from our teacher. They really liked our ideas and thought the interactive effects we implemented in TouchDesigner were fantastic, which made us very happy. Of course, what's lacking is a richer backstory. The current premise is: "Pull back a thin veil, and you enter a magical world where you can easily cast spells." But this description still feels a bit thin, and we will further expand and deepen the story in the third phase of the project.
Concept Proposal Presentation：
Supporting Document：
Project 2 (separate link)：
________________________________________________________________________
WEEK 9
This class was dedicated to presentations. Learning from our lack of preparation last time, we rehearsed the night before, which allowed the formal presentation to proceed smoothly. In addition to Teacher Max, another instructor who taught this course last semester also joined in providing feedback. Our current prototype features two separate interactive components: one where particles follow the movement of the human body, and another where a hand gesture triggers a light effect. However, the teachers noted that the particle effects appear somewhat scattered, and the gesture-triggered lighting feels sluggish, requiring further refinement. Overall, they felt our concept was strong, but emphasized that the narrative background needs to be more complete and coherent to enhance the immersion of the experience.
After the presentation, our group immediately began discussing possible directions for revising Project 3. Later, Mr. Zoen also came to the classroom. Following his feedback, he introduced the exhibitions we are expected to participate in at the end of the semester and explained the related requirements.
Comments
Post a Comment