Touchdesigner & React app development
Working closely with creative technologists on software development and projection mapping, collaborating with UX/UI designers on motion design, and participating in brainstorming, design development and prototyping.
#1: Interactive wall software development & prototyping
#2: Interactive laser installation visual design & prototyping
#3: Data visualization conceptual design
TIME: May 2019 — Aug. 2019 | 11 Weeks
TEAM: Gensler Digital Experience Design (Team of 30)
ROLE: Programming, Projection Mapping, Motion Design
TOOL: TouchDesigner, React.js, MadMapper, AfterEffect, Cinema4D
#1 Interactive Wall Software Development & Prototyping
Welcome Wall is a real-time projection-mapped wall built on the main reception floor of the client’s new headquarter building, where the clients can setup their play schedule and manage the content projected on it through an online calendar.
My role: Collaborate with software development director on the development of a Content Management System (CMS) for the schedule management and a dynamic web component controlled by TouchDesigner on the backend for content update and display. Work on projector study and full-scaled projection mapping prototyping.
Tools: TouchDesigner, React.js, MadMapper, C4D
1. When the clients set up their play schedule through the online calendar (CMS), all the data including uploaded images, customized messages, and colors used for replacing preset colors in videos will be packaged and synced with the React App.
2. The real-time running React App will communicate with TouchDesigner through websocket. When receive messages (data) from the app, TouchDesigner will process videos, update real-time information, match app content with selected videos, and output composition of the two to projectors.
Web Development - React App
Web Development - React App
#2 Interactive Laser Installation Mockup
Define a branded digital experience that aligns with, and extends beyond, the client’s vision. The experience must actively engage the public, capture their interest, encourage curiosity, and reward engagement.
The experience will be a benevolent feedback loop tangibly connecting brand expression to human experience.
My role: Visualize client’s brand values through lasers/light.
Tools: TouchDesigner, AfterEffect
Our mission is to translate client’s brand values into actionable digital experiences, the following are some visual examples representing speed, low latency, high resolution, and connectivity.
#3 Data Visualization Conceptual Design and Mockup
Out client is leveraging its entrepreneurial spirit and roots in innovation to accommodate dramatic shifts in people’s content engagement and expectations, creating an elevated advertising experience that’s propelling the industry forward to make advertising matter.
This innovative and elevated approach warrants an equally innovative and elevated client briefing experience.
My role: Collaborate with digital experience designers on the data visualization mockups to show the brand values and the marketing power of our client.
Tools: TouchDesigner, AfterEffects
All projects here are partially documented due to confidentiality agreement, if you are interested in them or my experience at Gensler in general, let's chat!
Coffee or Tea?