Performative media

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. Week 1-Introduction
2. Week 2- Software Introduction and Artist Introduction

Week 1-Introduction

    In the first week of class, I was really happy to see our two lecturers, Mr. Shakir and Mr. Zeon, again. I had previously taken the Lighting Interactive Design course with them and gained a lot from that experience. Since I’m already familiar with their teaching styles, it was easier for me to follow along this time.

    During this first week, the lecturers mainly introduced the overall course structure and the assignment requirements. They also announced our project theme for this semester — “Mirror.” When I first heard the theme, my mind immediately went back to our group project from last semester, which focused on mental illness and also incorporated the element of mirrors. Reusing the concept of "mirror" this semester feels like a big challenge, but it also opens up new possibilities for creative exploration.

    One of the most important parts this week was forming our groups. Just like last semester, the assignments will be done in teams, and we were given one week to either form or join a group. This time, however, there will be more frequent and structured peer evaluations within each team, and those evaluations will carry weight in the final grade. I feel this is a much fairer system, and I really appreciate the lecturers' thoughtful planning and understanding.

    Another pleasant surprise for me was discovering that our BISD program now has its own Instagram account. The account shares group photos and other moments from our journey, which made me really happy to see myself featured. It gave me a strong sense of belonging. More importantly, it serves as a great way to promote our program. Since BISD is still a relatively new major, having more exposure like this can help people better understand what it’s about and potentially attract more students to join us.

Week 2- Software Introduction and Artist Introduction

    In the second week of class, Mr. Shakir introduced us to the main software we’ll be using — Touch Designer. He explained some of its core features and gave a simple demonstration on how to operate it. This was especially helpful for those of us who are not confident in coding, as Touch Designer allows us to skip writing code and instead create visual effects by simply “connecting boxes.”

    While watching Mr. Shakir work with the software, I realized that the overall workflow is quite similar to programs like Blender and Unreal Engine — especially the process of adding materials. However, what truly amazed me was how Touch Designer can generate images or dynamic visuals and directly map them onto 3D models. The resulting effects felt seamless and visually compelling, which really caught my attention and sparked my interest in learning more.

    That said, one of the challenges was the large number of unfamiliar terms — I still need to memorize and understand the functions of each section (which can be a bit overwhelming, haha). But I’m grateful to Mr. Shakir, who patiently helps us both in class and online, saving us a lot of time trying to figure things out on our own.

    Another highlight of the session was Mr. Shakir’s introduction to interactive media artists from Malaysia, Southeast Asia, and around the world. He shared some of their design works with us, and it was truly eye-opening. The projects were incredibly creative and inspiring — many of them were based on simple, everyday ideas, yet the artists managed to turn them into sophisticated and unique pieces.

    For example, Jun Ong’s work really stood out to me. His use of light beams to create the feeling of light piercing through objects was striking. It gave a strong sense of spatial interaction and connection, and left a deep impression on me.

（This one is a light art installation that leans more towards a star）

    As I looked at more and more inspiring works, I truly felt the meaning behind the phrase, “Art comes from life.” It reminded me of the importance of training ourselves to develop an eye for discovering beauty in everyday things.

    At the same time, we also began working on our Assignment 1 this week. Each of us was tasked with researching one local, one Southeast Asian, and one international interactive designer. Our group’s plan is for everyone to find five potential artists, and then during class, we’ll consult the lecturer to help us narrow down the list. Once we get feedback, we’ll select the one with the most unique design style for our Assignment 1 — where we’ll analyze their works, design concepts, and creative process.

Week 3- Software Introduction and Artist Introduction

    In the third week, we mainly learned about the usage and functions of Touch Designer. During this process, the instructor explained the main features and various effects in great detail.

    For example, in the "OP Create Dialog," the instructor clearly demonstrated the functions and their visual effects. "TOP" is commonly used for image and video processing, compositing, and visual effects; "CHOP" handles timeline-related data, such as audio, animation keyframes, and sensor input; and "SOP" is used for 3D geometry modeling and transformation.

    During the instructor’s demonstration, we also followed along with the video exercises to observe how the effects change the video. The whole experience felt quite magical—especially the fact that we could achieve such effects without programming. It made me realize that it wasn't as difficult as I initially thought. Instead of feeling pressured, I became more interested in exploring these features and their possibilities.

（Practice special effects videos by yourself）

    After the class, the instructor helped us choose three artists for our AS1 assignment. Our group selected five artists from each region as potential candidates. We also kept records of their websites, notable works, artistic styles, and frequently used software, so the instructor could help us evaluate which artist would be the most suitable. We’re very grateful for the instructor’s help, as it allowed us to make a more accurate and appropriate choice for our artist analysis.

（The 15 artists we pre-selected）

Week 4- Practice operator "Top" section

In Week 4, we mainly learned about the "TOP" operators in Touch Designer. The instructor first gave us an explanation and then demonstrated the functions of each part. After that, we entered the interface to begin our first hands-on practice.

（The part of TOP）

In the hands-on practice, we mainly used operators such as "Mirror," "Blur," "Noise," "Composite," "Edge," etc. For me, it was really interesting—we experimented with different effects based on the images we initially adjusted ourselves, and in the end, everyone produced a completely different video. The whole exploration process was very engaging. Of course, while using the software, I also realized that some steps can effectively replace traditional programming, which makes it very beginner-friendly, especially for students like us who are not strong in coding.

Here are some images from my in-class practice：

（Initial animated video created on 5/14/2025）

（This is the result after adding multiple effects, created on 5/14/2025）

（This video was a result of an effect I discovered by chance during the practice session. I thought it looked great, so I decided to save it）

(This is the final product (5/14/2025)

The overall classroom experience gave me more confidence in completing the final project. It wasn’t as difficult as I had imagined, especially when adding various effects—since the process skipped over complex programming, it became much simpler.

Week 5- Learn the details of the "Chop"

In Week 5, we began learning about and exploring the functions of CHOP in Touch Designer. During the instructor’s explanation, we learned that CHOP mainly deals with control signals and animations. For example, operators like Face Track, Keyboard In, and Laser are used for control signals and can also be applied to external devices. Others like Delay and DMX are more related to video operations.

Compared to the TOP section, CHOP felt a bit more complex to me, as it often involves coordination with external hardware. However, in our upcoming installation project, we will be using some devices connected to projectors, lasers, and more, so it's important for us to understand and learn this part as well.

Later in the course, we were introduced to the requirements for Assignment 2 (AS2). In AS2, we first need to develop a clear storyline to explain our concept and what we want to express through our installation. We also need to prepare a sketch and estimate our budget—these are the tasks we need to complete at this stage. After that, we will move on to refining our design concept, gathering references, and so on.

So, this week we focused on group discussions about how to create an installation that represents the theme of “Mirror.” We talked about its overall structure, the materials and equipment we need to include in our work, and a rough budget. These are the key points we need to clearly present to our instructor in the coming week.

Week 6-Learn the Wacom

    This week, we had an online class where we learned some information about "Wacom." During the creation process, we mainly used TOP, CHOP, MAT, and COMP. The instructor focused on teaching us how to use our computer’s built-in camera to create special portrait effects using Touch Designer.

    At the beginning of the lesson, the instructor introduced us to some of the materials in the MAT section. These materials would later be used in the visual effects we were going to create.

（Material）

    Then, we used "Video In" as the starting point to activate the video input, and added the "Edge" operator to enhance the outlines in the video. This allowed us to adjust the lines—making them either thicker or thinner—to enrich the visual details.

    Due to the mirror reflection, the video appeared reversed, so we added a "Flip" operator to align the image with the actual orientation of the person. We also included some effects like "Feedback Edge" to make the visuals look more dynamic and visually rich.

    Later in the process, I used the "Constant" material from the MAT section. However, there seemed to be some issues during the linking process, which caused my visuals to look a bit different from the instructor's. Nonetheless, I’m still grateful that the final video effect turned out quite well.

(This is the final product (5/21/2025)

    The whole process was very interesting for me and gave me some confidence for the final project. The creation process wasn’t too difficult—once the basic sequence and key effects were set, the rest felt more like a personal creative exploration.

Week 7—Learn the Wacom and Meeting

    In today's class, we mainly reviewed the content from last week's online lesson. During the online session, it was quite difficult to follow along with the instructor, and some steps were challenging. There were also issues with certain details, and it was hard to explain the problems I encountered during the creation process—sometimes I didn’t even know where exactly the problem was myself, haha 😂.

    In this class, I managed to solve the issue I had with the MAT–Constant material from the previous lesson. Last time, I didn’t catch how the instructor turned the material into a wireframe-like effect with many lines, so my final result wasn’t very ideal. During this class, I learned that to create that effect, you need to enable "GPU Wireframe" in the Common tab.

   

 

After that, I added some Noise and Edge effects to make the visuals look more dynamic and detailed. Here’s what the final result looks like:

During the second half of the class, we shared our ideas for Project 2 with the instructor. In our group, each member came up with their own concept and sketched out their ideas. I encouraged everyone to write down their thoughts so that when we discussed with the instructor, we could share all the concepts and get feedback on which one he liked best and what suggestions he had.

In the end, we decided on the theme “Human–Machine Relationship”, as it’s a current and widely discussed topic. It also offers more depth and creative space to explore. For the concept, we mainly adopted one of my groupmate’s ideas, with some adjustments to highlight the machine’s struggle and continuous effort to become human.

So, my goal for this week is to complete the PowerPoint presentation and work with my group to finalize the storyline, mind map, and other planning elements.

（The concept of the group members）

Week8—Learn to use a Wacom  track the movements of your hands

Today in class, we mainly learned to use cameras to track the movement of hands to change the pictures in the video. First, we drag the file given to us by the teacher into touch desiger, and then we will find that the video starts to track our hands.

After that, we started adding elements like Blur, Material, Geometry, Selector, and more. Honestly, the most challenging part of this class was adjusting the parameters—many of them needed to be dragged into other operators, but since we’re still not very familiar with the process, it was easy to drop them in the wrong place, which caused some issues with the data.

Personally, I feel that more practice is needed to avoid these kinds of mistakes. Still, the overall process was very enjoyable and engaging.

(This part involved adding CHOP references to create coordination between the operators.)

Product display：

Personally, I feel that this class was quite meaningful for me. First, it helped me learn some new knowledge, and second, it gave me a sense of the kind of interactivity that technology can bring. The concepts we learned in this class can also be effectively applied to the interactive aspects of our final installation artwork, which is a big help for our assignment.

Week9 —Presentation & Feedback

在这一周是进行As2 的presentation，我们在课堂上呈现我们的装置草图，想法、 互动思路等等。然后根据老师们的反馈进行更改。

Feedback：

Idea是非常不错的，但是和我们设计的装置草图之间有没有很强的关联性
 

1. 为什么选择'huaman and machine relationship" 
2. As1 reference 要有1-2页ppt（学到了什么，有怎样的应用））
3. Timeline 计划接下来两周行程+计划（如何推进你们的project）
4. 需要增加touch designer详细步骤截图还有，所用op的list； 
5. 缺少交互（增加mediapipe）
6. 保留第三张草图，其他全部都要换
7. 故事线太长，是互动引发故事线
8. ppt连贯性有问题 
9. 视频（1min左右）

Week10—Projection equipment setup and introduction & Feedback

这节课比较多的是在介绍如何调整投影仪投射出屏幕的大小，以及如何设置投影仪的位置和调试touchdesigner的页面，能够有单独的一页出现给投影仪用。其实给我感觉是有些难度的。

因此我们组计划是用电视屏幕来代替投影仪，这样我们不太需要去考虑布置投影仪的位置、角度、设置、安装等。因为如果我们自己安装不到的话的，就需要额外花钱来雇佣其他人来帮忙安装。

Feedback:

材料：

1. -显示屏*2（我们原本计划是3个屏幕，但是在材料上还是要考虑，因为太多屏幕、太大都不方便我们搬运；其次我们也要考虑到经费和是否可以租借到；老师会借给我们一个32英寸的点视频）
2. -led 线（10m）
3. -铁丝网 wire mesh（3-4m）
4. -转接头： 2个htmi,,一个usb （）
5. -轧带（40-50个）
6. -纯黑电线 wire（10m）

Touch designer:

1.  交互不足够
2. 需要看到第二阶段是怎样转换

Week11-12：Discussion and Suggestions

在这两周我们主要做的就是制作Touchdesigner,； 我们组是预备做3个阶段，每个阶段都会对应一个Touchdesigner。 我们组的主要交互是的在第2和第3阶段，在制作的过程中，我们其实有一些问题，例如就是我们想会制作CCTV的交互，然后电脑会自动扫描的屏幕面前的人的百分比。

关于第三阶段，我们的讨论是，当机器识别和学习人之后，他就开始尝试变成人，但是最终失败。关于这个其实我们也是找了一些教学视频，最终还是觉得带入人的模型，然后制作效果。

第一阶段：

（我放入了hand

+face tracking  这样个球就可以的跟随人动）

第二阶段：

（CCTV追踪和识别人类）

第三阶段：

（这个就是导入模型，来比作机器想要变成人却失败）

Week13：Setup our Installation 

这周我们是前往GMBB去组装和调试我们的装置。其实刚看到那些器材和材料时候，是有点手足无措的，但是还是感恩老师有来帮助我们调试。当然最棒的还是老师有提供给我们很多的器材（32寸的、钢架和电线）

我们这节课的主要的任务还是调试我们的touchdesiger 让它可以投射到电视屏幕上。在课上的时候主要就是将大概的框架搭起来，另一位老师是建议我们先不要做装饰，等框架搭建好，再去做装饰。

然后我们大概就是将基础的框架搭建起来，然后将一些需求告诉老师（例如：我们还缺少一个钢架、底座、要研究如何将TV screen和显示屏挂到钢架上）

下周需要做：

1. 带显示屏过来
2. 摄像头
3. final-ppt

Week14：Setup our Installation