Lighting Interactive Design

Lighting Interactive Design - Weekly Journal

Week 1: Introduction (3/2/2025 - 5/2/2025)

Day 1: Course Introduction (3/2/2025)

The first class of Lightning Interactive Design was an introduction to the course. Unfortunately, I was unable to attend as I was in my hometown. However, my friends updated me on what was covered. The session introduced:

The assignment brief and course structure.
The topics we will explore throughout the semester.
Our lecturer, Mr. Zeon Wong, who will be guiding us in Projection Mapping.

Instructions Received

Go through the assignment brief and understand the expectations for each project.
Prepare for the site visit to Muzium Telekom

Feedback Received

Since this was an introductory session, there was no specific feedback. However, we were encouraged to start exploring Projection Mapping techniques.

Reflection

Although I couldn’t attend the class in person, my friends’ updates helped me catch up. Learning about the course structure gave me an overview of what to expect this semester, and I was particularly excited to explore Projection Mapping, as it is a field I haven't worked in before.

Day 2: Site Visit to Muzium Telekom & Rex KL (5/2/2025)

Lecture Summary

For the second class, we had a site visit to Muzium Telekom, where our final projection mapping project will take place. This visit was crucial in helping us understand:

The space and setup for projection mapping.
Projector placements and their impact on visuals.
The technical constraints we will face during our final project.

After visiting Muzium Telekom, we also went to Rex KL, where we experienced the immersive projection mapping show "Twilight." This show provided a more advanced and spatially immersive experience compared to the museum.

Instructions Received

Observe how projectors are placed and the different technical setups used.
Take note of the scale and budget required for projection mapping projects.
Learn how different locations affect the visual outcome of projections.

Feedback Received

No direct feedback was given, but we were encouraged to take inspiration from the Twilight show and apply what we learned to our own projects.

Reflection

The site visit gave me a much clearer understanding of projection mapping in real-world applications. Some key takeaways from this visit include:

The cost and equipment needed for projection mapping.
The role of high-performance PCs, each handling different tasks.
The reason why some projectors are placed in the middle of a wall instead of on top (to prevent image distortion).

Experiencing Twilight at Rex KL was incredibly inspiring, as it showed me the potential of immersive projection mapping beyond traditional screen-based visuals. This visit helped me understand how to approach my own final project and gave me ideas for creating engaging visual experiences.

Week 2: Learning About Projectors & Concept Development (10/2/2025)

Lecture Summary

In the third class, we delved deeper into projection mapping technology. We explored:

The different types of projectors, their specifications, and how their cost varies significantly.
The importance of projector placement and how it affects the final projection outcome.
Various case studies, which helped us understand how projection mapping is applied in different real-world settings.

A good projection mapping content should have:

Using white or light-colored canvases for better color consistency.
Working with complex surfaces that have minimal depth to allow for more deformation effects.
Ensuring a clear projection path from the projector to the canvas.
Designing a setup where the audience can fully experience the projection.

Measuring the building or canvas for accurate projection mapping.
Selecting the right projector using a projector calculator to determine the distance and coverage.
Setting up rigging and hardware to securely place projectors.

Instructions Received

Conduct case studies to make our concept more solid.
Develop a storyboard to visualize and refine our projection mapping idea.

Feedback Received

No direct feedback yet, but we were advised to analyze successful projection mapping projects and use them as references for our own concepts.

Reflection

This class provided a deeper understanding of projection mapping setup and execution. Learning about costly high-end projectors was eye-opening, as it highlighted the budget constraints that professionals face. Understanding the technical aspects of projection mapping—like measurement, projector selection, and rigging—will be crucial for our final project. Moving forward, I need to conduct more case studies and refine our storyboard to ensure our concept aligns with technical feasibility.

----------------------------------------------------------------------------------------------------------------------------

Week 3: Learning After Effects (19/2/2025)

Lecture Summary

This week, we were introduced to Adobe After Effects, a key software for creating motion graphics and animations. Since our project requires dynamic visuals, mastering this tool will be essential. The session covered:

Basic navigation of After Effects.
Essential tools for animation and visual effects.
Key techniques for motion graphics.

This foundational knowledge will be crucial as we move forward with our project development.

Instructions Received

Explore After Effects tools and experiment with basic animations.
Start applying motion graphics techniques to enhance our projection mapping concept.

Feedback Received

We were advised to practice regularly to become more comfortable with the software.
Emphasis was placed on understanding keyframe animation and how it can be used effectively in projection mapping.

Reflection

Learning After Effects felt overwhelming at first, but I realized how powerful it is for creating engaging motion graphics. As someone new to the software, I’ll need to practice consistently to get comfortable with the tools and effects. Moving forward, I plan to experiment with different animations to see what works best for our project.

----------------------------------------------------------------------------------------------------------------------------

Week 4 - Progress Update (24/2/2025)

Lecture Summary

This week, our lecturer introduced Assignment 2, where we need to create a mood board for our concept. We also explored how projection mapping is applied in advertising and entertainment, which helped us understand its real-world impact.

The key topics covered included:

Emotional Journey: Mapping out the emotional flow of our project, including background, conflict, climax, and resolution.
Mood Board: A visual tool to define the aesthetic and emotional direction before production begins.
Storyboard: A structured visual outline that helps transform our script into clear, sequential scenes.
Annotations & Scene Planning: Exploring different art styles to develop unique aesthetics for our project.

Instructions Received

Begin researching and compiling visuals for our mood board.
Develop a story outline that defines the emotional journey of our projection.
Start sketching a rough storyboard to visualize key sequences.

Feedback Received

We were advised to make sure our mood board aligns with our project’s theme and intended emotions.
The lecturer emphasized the importance of clarity in storytelling, ensuring that our projection has a cohesive flow.

Reflection

This week’s session deepened my understanding of storytelling in projection mapping. I realized that visuals alone aren’t enough—narrative flow plays a crucial role in making an engaging experience. Creating a mood board also helped me clarify the aesthetic direction of our project. Moving forward, I’ll focus on refining the story structure and emotional pacing to make our projection more immersive.

----------------------------------------------------------------------------------------------------------------------------

Week 5: Learning Layer Integration in After Effects (5/3/2025)

Lecture Summary

This week, we had a deep dive into layer integration in After Effects, focusing on how to seamlessly import Photoshop and Illustrator files while maintaining their individual layers. This is crucial for animating elements independently and adding complex effects.

Key topics covered:

Importing Photoshop Files to After Effects
- Footage Mode: Imports a single flattened layer.
- Composition Mode: Maintains layers but may slightly alter scaling.
- Pre-comp Mode: Groups layers for easier animation and modifications.
Masking Techniques
- Creating and adjusting masks to hide elements, create smooth transitions, and refine animations.
Effects and Presets
- CC Kaleida: Generates kaleidoscopic patterns.
- CC Repetile: Expands video edges.
- Keylight/Linear Color Key: Removes green screens.
- Immersive Video Effects: Used for VR content

Instructions Received

Practice importing and animating layered files in After Effects.
Experiment with masking techniques to enhance animation flow.
Start applying basic effects to our project to see how they integrate with our visuals.

Feedback Received

Ensure layer organization in Photoshop/Illustrator before importing to avoid confusion in After Effects.
Use pre-comp for grouped animations, but be mindful of scaling issues.
Try different masking techniques to improve visual transitions and scene blending.

Reflection

This week was incredibly technical yet rewarding. Understanding how to integrate Photoshop and Illustrator files into After Effects will significantly improve my workflow, allowing for more creative control in our projection mapping project. Learning about masking and effects also gave me insight into how professional animations are polished. Moving forward, I will practice more layer-based animations and experiment with advanced masking techniques to enhance the visual storytelling of our project.

----------------------------------------------------------------------------------------------------------------------------

Week 6: Advanced After Effects Techniques (12/3/2025)

Key Topics Covered

This week, we explored advanced After Effects techniques that will help us refine our projection mapping project. The session introduced new tools and workflows to enhance animation control, automate motion, and improve visual effects.

Techniques Learned

Alpha Mask & Pre-compose – For better control over complex compositions.

Puppet Tools – Used for small character animations by adding joints and moving them.

Expressions (like Wiggle) – Automating motion effects to create subtle, natural movement.

Motion Array – A useful resource for templates, assets, and motion graphics.

Rendering with Adobe Media Encoder – Allows multitasking while exporting videos.

Lecture Notes

Alpha Matte – Drag the curly icon in the Layers Panel to another layer to create a masking effect.

Blurry Effect – Use Gaussian Blur from the Effects Panel.

Rotoscoping – Use the Roto Brush to extract objects from a video

Keyframes Shortcut – Press “U” to show all keyframes on a layer.

Parenting & Linking – Drag the curly icon to link an item (e.g., leg, head) to a parent layer for smoother movement.

Wiggle Expression –Select a layer, Alt + Click the stopwatch beside a property.

Plugins – We explored third-party plugins from Motion Array & AE Scripts.

Rendering –Best Settings: Add to Render Queue, set output to H.264 and for Transparent Background: Use QuickTime format.

3D Digital Mockup – Click the icon beside "Quarter" to preview in 3D.

Reflection

This week was highly technical but incredibly useful. The wiggle expression and puppet tool were exciting discoveries, allowing for more natural and engaging animations. Learning about Alpha Masks, Rotoscoping, and Rendering Techniques will help in finalizing our projection mapping visuals.
----------------------------------------------------------------------------------------------------------------------------

Week 7: Final Preparations & Resolume Arena Training (17/3/2025)

Monday – Resolume Arena Basics & Projection Mapping Setup

This week marks the final stretch before our idea presentation at Muzium Telekom on Saturday. We are now focused on fine-tuning our content and technical setup to ensure a smooth showcase.At the end of the class we also got a chance to project part of our projection on a small mockup model that Mr Shakir prepared.

Resolume Arena Training

Today, we had an intensive session on Resolume Arena, a key tool for live projection mapping. Unlike Adobe software, Resolume is not layer-based but works with columns and clips for real-time visuals.

Key Learnings:

Exporting Footage

Proper steps for exporting video files for smooth playback in Resolume.

Projection Setup Workflow

MAV (Mixed Audio and Visual): Syncing sound and visuals.

Transitions: Creating smooth changes between clips.

Compositing Videos: Placing multiple videos into columns for a dynamic mix.

Adjusting Visual Settings: Tweaking brightness, contrast, and effects (similar to EDM concert visuals).

Control Options

Resolume supports multiple control inputs:Keyboard shortcuts, MIDI controllers, OSC (Open Sound Control), DMX (for stage lighting control)

Display Setup & Projection Mapping

Screen Setup:

Display 1 → Always set as the computer screen.

Additional Displays → Assigned to projectors.

Resolution & Canvas Size:

Understanding the projection area before importing templates.

Output Advanced (Slicing & Mapping):

Extracting sections of the video to assign to different projection areas.

Naming slices (e.g., “Left Screen”, “Right Screen”) and adjusting their positions accordingly.

Reflection

This session was incredibly practical, giving us hands-on experience in transitioning from content creation to real-world projection execution. Resolume Arena’s real-time compositing and mapping tools are essential for our final showcase.

Looking forward to applying these techniques and perfecting our projection mapping setup for Saturday’s presentation at Muzium Telekom!
----------------------------------------------------------------------------------------------------------------------------

Final Presentation Day

Some Showcase of other groups

On the final day, I had the opportunity to explore the works of many other groups, and I was truly impressed by their creativity and execution. Each project had its own unique approach, and I found myself inspired by the different storytelling techniques, visual styles, and technical innovations on display.

Seeing so many diverse ideas come to life made me reflect on my own creative journey. I realized how much I enjoy working on projects like this—bringing ideas to reality through visual storytelling and immersive experiences. While I loved collaborating with my team, I also hope to take on a similar project individually in the future. That way, I can fully explore my own ideas and push my creativity in new directions.

Overall, this experience reinforced my passion for creating engaging content, and I’m excited for the next opportunity to express myself through this medium.