ART-A-HACK PROJECT PAGE LINK

CLICK TO CHECK FULL PROCESS



The Concept

Dream Collector is a web app and interactive installation that uses AI to turn scattered dream memories into vivid visuals. On the web app, a user types in fragments of a dream, and an AI engine generates three unique images. In the installation version, these images can be revealed and explored using real-time hand gestures tracked via Mediapipe and TouchDesigner.


My Role & Contribution

As the co-lead for UX/UI Design and Web Development, I was responsible for the entire technical execution of the web application. This included designing the user flow, building the front-end with HTML/CSS/JS, and integrating the OpenAI API. I collaborated closely with the TouchDesigner artists to ensure our web app could seamlessly feed its visuals into their interactive installation.

The Process

We began with a collaborative brainstorming session to define our core concept: "AI as a dream interpreter." I then mapped out the user journey and technical architecture. The process involved rapid prototyping of the UI in Figma, followed by front-end development and testing of the API connection, all within the compressed two-week timeline of Art-A-Hack.





Challenge & Solution

This project presented two main challenges: one in project scoping and another in technical interoperability.

Challenge 1: Deployment & Scoping
Our initial ambition was to deploy a live public website. However, due to the tight two-week deadline and specific library constraints, we realized a stable public launch was not feasible.

Solution
We strategically pivoted our goal from a public launch to creating a robust, well-documented prototype. This allowed us to focus on perfecting the core user experience and clearly demonstrating the project's concept, which taught me a valuable lesson in realistic project management.

Challenge2: Web to TouchDesigner Integration
A second hurdle was sending the AI-generated results from my web application to my teammates' TouchDesigner installation in real-time.

Solution
This challenge was overcome through collaborative problem-solving. Our team jointly researched and experimented with several real-time communication methods. Through a shared process of trial-and-error, we successfully engineered a stable data pipeline that allowed my web app to communicate directly with the TouchDesigner installation, seamlessly integrating the two parts of our project.


Key Takeaways

This project was an important lesson in what it means to be a 'translator' in creative technology:
taking an intimate human experience and turning it into a new, interactive form. 

Working with AI as a creative collaborator, rather than just a tool, was a key discovery for me. 
Reacting to the AI's surprising interpretations sparked a deep curiosity about human-computer co-creation,
and this entire experience has left me with a strong desire to further explore the field of Human AI Interaction and to ask how we can design systems where collaboration between a person and an AI leads to new forms of creativity and self reflection.


Type A


Type B



Mediapipe x Touchdesigner Interaction

Mediapipe x Touchdesigner Interaction - - Paintbrush to reveal dreams - hand 1 ( distance between pointer finger and thumb) - both hands up and spread to clear "painting" - Thumbs up = move forward through dream images - Thumbs down = move backwards through dream images