Performative Media AS3

 Name: TANG YUYING

Student ID: 0370676

Programmed: Interactive special design

Module name: Performative Media (202504-LLecture)

Introduction    

    In this blog, I will document what I’ve learned in each class, my reflections, the progress and collaboration of group assignments, as well as the feedback given by our lecturer. I hope that through this record, we can continuously improve the quality of our group project and witness how our work grows step by step.

Table of Content

1. Week10—Projection equipment setup and introduction & Feedback
2. Week11-12：Discussion and Suggestions
3. Week13：Setup our Installation 
4. Week14：Setup our Installation and presentation
5.  AS3

Week10—Projection equipment setup and introduction & Feedback

In this class, the focus was mainly on how to adjust the projector to fit the screen size, as well as how to set up the projector’s position and configure Touch Designer so that it displays a dedicated output page for projection. To be honest, I found this part quite challenging.

Because of that, our group decided to use TV screens instead of a projector, which saves us the trouble of figuring out projector placement, angle, calibration, and installation. If we couldn't manage to set up the projector ourselves, we would’ve had to spend extra money hiring someone to help, which isn’t ideal given our budget and time constraints.

Feedback:

Materials:

• Screens: 2 units
  (Originally, we planned for 3 screens, but we had to scale it down. Too many or too large screens would be difficult to transport. We also had to consider the budget and whether we could rent them. The lecturer will lend us a 32-inch screen, and we’ll rent the second one ourselves.)

• LED light strip (10m)

• Wire mesh (3–4m)

• Adapters: 2 HDMI, 1 USB

• Cable ties (40–50 pieces)

• Black wire (10m)

Touch Designer:

• The current level of interaction is not sufficient

• We need to show how the interaction leads into the second phase (i.e., how the system reacts and transitions)

This feedback helped us realize that both the technical setup and interactivity need more detailed planning.

Week11-12：Discussion and Suggestions

Over the past two weeks, our main focus has been building the setup in TouchDesigner. Our group plans to create three stages, with each stage having its own TouchDesigner file. The key interactivity will take place in Stage 2 and Stage 3.

During the development, we encountered a few challenges — one of them was implementing CCTV-style interaction, where the computer automatically detects and tracks the percentage of a person’s presence in front of the screen.

As for Stage 3, our concept is that once the machine has recognized and learned about the human, it begins to mimic or attempt to become human — but eventually fails. To bring this idea to life, we explored several tutorial videos and ultimately decided that we would import a human model into TouchDesigner and then apply effects to represent this transformation and failure.

This stage will rely heavily on visual effects and symbolic interaction, and we’re now working on integrating that into our system.

First stage:

（I added hand and face tracking, so now the sphere can follow the user's movements）

Second stage:

（CCTV tracks and identifies humans）

Third stage：

（This is the imported model, which is used as a metaphor for a machine's attempt to become human but failing）

Week13：Setup our Installation 

This week, we went to GMBB to begin assembling and testing our installation. Honestly, when we first saw all the equipment and materials, it felt a bit overwhelming — but we’re really grateful that our lecturer was there to guide us through the setup and troubleshooting. The best part was that the teacher provided us with essential equipment like a 32-inch screen, metal stands, and HDMI cables, which helped us a lot.

Our main task during this session was to test our Touch Designer setup and make sure it could properly project onto the TV screen. Most of our time was spent building the initial structure, and another teacher advised us not to decorate anything yet — instead, we should finish building the framework first, then focus on the decorative parts later.

Here’s what we managed this week:

• Assembled the basic structure

• Discussed with the teacher what we still need (e.g., another metal stand, a base, and how to securely mount the TV screen and display onto the frame)

Tasks for next week:

• Bring the display screen

• Prepare the camera

• Finalize and prepare the presentation slides (Final PPT)

(Set up and test Touch Designer)

Week14：Setup our Installation & Presentation

In Week 14, we visited GMBB twice to focus on completing the installation setup and making final adjustments to the details.

On Monday:

We focused on:

• Wrapping the wires

• Installing the LED light strips

• Decorating the structure with wire mesh

• Mounting the smaller TV screen

During this session, our lecturer helped us troubleshoot some issues with Touch Designer. Since my group mate's file couldn’t run properly on my laptop, we had to use two computers to display different parts of the project. However, on my computer, Touch Designer wasn’t able to track properly due to some camera-related problems. Thankfully, the teacher helped me fix those tracking issues, which allowed us to run the installation across both computers smoothly.

On Wednesday:

We went to GMBB again, mainly to refine the details:

• We organized and hid all the visible wires to make everything look tidier

• Adjusted the positions of the wiring and LED strips

• Went downstairs to purchase aluminum foil, which we used to wrap around the metal frames. The idea was that when light hits the foil, it would reflect and create interesting lighting effects, making the overall visual presentation more dynamic and engaging.

These final touches really helped enhance the overall aesthetic of our installation.

（Basically, it can be considered as completed）

(Wrapping foil)

On Sunday-Presentation:

During the presentation that day, our group encountered a few minor issues. I had forgotten where the teacher had saved the adjusted Touch Designer file for me, so when I went to look for it, I got a bit flustered and accidentally opened the wrong file, which wasted some time. But thankfully, everything was resolved smoothly in the end, and I’m really grateful for that.

After our presentation, the teacher also gave us some feedback:

• Increase the number of design sketches

• Add a visitor position indicator area (to help visitors know where to stand for the best interaction with the camera — this also allows the camera to better capture their movements for screen interaction)

• Add a timeline

• Add a budget

• Update the images used for interactive display

• Include personal reflections

• Add a mood board

• Add a diagram showing the materials used in the installation

Final PPT Link: Canvas

（ECHO）

(Interactive video)

This entire learning experience was very special for me, as it was my first time creating an installation from scratch and being involved from beginning to end. It gave me a real sense of how challenging it is to design an installation on my own, and I also experienced the difficulties of coordinating different aspects like time, materials, and the exhibition space.

Of course, I’m very grateful to our teacher, who supported us throughout the process — helping us arrange the exhibition area, lending us materials, and assisting us in solving problems we faced in TouchDesigner. Thanks to all this support, we were able to successfully present our final work.

I believe this was a truly valuable experience for all of us who aspire to become designers in the future. It’s something we can proudly share in future job interviews or design portfolios. So I sincerely thank every teacher who helped us, and I also appreciate the teamwork and cooperation among all our group members — without which this final installation wouldn’t have been possible.