PostcARds

Yvonne Ng, Britney Phan, Alokik Kinra, Ariel Lin (me)

Experience the magic of augmented reality, bringing postcards to life.

Experience memories in a whole new dimension with our PostcARds app! Transform your photos into immersive, animated experiences that bring your memories to life like never before. Share, create, and cherish moments in a unique and magical way!

Live Demo

Source Code

Initial Concept Sketches

In the concept sketch phase, I collaborated with ChatGPT to select and sketch out intriguing and feasible ideas. These sketches are a blend of innovative concepts stemming from ChatGPT's insights.

Dynamic Language Translators

Real-time language translators that project translated text or subtitles directly into the air between two individuals speaking different languages. It enables seamless communication without the need for wearable devices or smartphones.

Interactive 3D Mind Maps

Create an immersive 3D mind mapping tool where users can collaboratively brainstorm ideas. They can place nodes in a virtual space, link them together, and add multimedia elements like images, videos, and text.

Gesture-Based Communication

Develop tools that recognize and interpret gestures for communication purposes. This could be particularly useful for individuals with disabilities or in situations where verbal communication is limited.

Avatar-Based Communication

Allow users to create avatars to represent themselves and communicate via gestures, voice, and text chat.

Emotionally Intelligent Chat Interface

Develop an AI-powered chat interface that uses sentiment analysis and emotional intelligence to better understand and respond to users' emotional states during communication. The interface adapts its tone, suggestions, and responses based on the emotional context of the conversation, promoting empathy and understanding.

Virtual Team Building Activities

Create immersive environments for team-building exercises that combine elements of gaming and collaboration. For instance, a virtual escape room where participants need to work together to solve challenges and puzzles.

Medical Training Simulations

Build interactive simulations for medical students to practice procedures or scenarios in a realistic yet safe environment.

Interactive Stories

Create narrative-driven experiences where users can explore and influence the storyline through their actions in the virtual environment.

Interactive Learning Environments

Build virtual classrooms or labs where students and teachers can interact with 3D models, conduct experiments, or explore historical sites.

Virtual Events and Exhibitions

Create spaces for hosting conferences, art exhibitions, or cultural events, allowing attendees to explore and interact with content in a more immersive way.

Choice of Concept

We initially being drawn to Britney's idea of "Geolocation Stickers", which then sparked the inspiration for Yvonne to craft a more immersive and concrete idea centered around "AR / VR postcards", ultimately becoming our chosen direction due to its enhanced interactivity and experiential value.

Refinement

During our refinement design process, each team member contributed by creating refined sketches for the chosen concept.

Selected refined sketches are shown in the gallery below.

Street View Stickers & Voiced Stickers - Britney

Combining geolocation-based augmented reality with interactive audio elements, allowing users to creatively share and narrate their surroundings through immersive, location-specific experiences.

Sticker Wall & Postcard Wall - Britney

Converging physical and digital realms, to curate a dynamic, ever-evolving gallery where personal stories, creativity, and memories converge in a visually captivating and interactive space.

2D to 3D Postcards - Britney

Transforms static images into immersive, tactile experiences, allowing recipients to explore rich, multidimensional narratives from a simple piece of mail.

Stamp Collection & Virtual Tour Guide - Britney

Merging nostalgia with innovation, offering interactive, educational journeys through historical landmarks and cultural narratives.

AR Location-Based Postcard - Yvnonne

Unlocking immersive narratives and personalized content when accessed from specific geographical locations.

AR Write / View Postcard - Yvonne

Enables users to craft personalized messages and then explore augmented reality content when recipients view the postcard.

AR Postcard Interface - Alokik

Conceptualizing opening cards with a captivating mail/postcard view into a fantastical augmented reality world.

Customizable Postcard - Alokik

Customizable postcard where users can send messages with illustrations, or coupled with trivia and random location-based information.

AR Business Card - Ariel

Enhancing networking experiences by seamlessly integrating interactive digital content, enabling personalized connections and dynamic information sharing.

AR Menu - Ariel

Revolutionizes dining experiences by offering an immersive and visually enticing way to explore dishes, ingredients, and customizable options.

AR Invitation - Ariel

Transforms traditional event invites into engaging and personalized experiences, allowing recipients to interact with dynamic content and seamlessly RSVP.

AR Postcard - Ariel

Merges the nostalgia of traditional mail with interactive experiences, offering recipients an immersive journey through augmented reality, bringing the message to life.

Final Design & Implementation

Final Design

After careful consideration and a democratic poll, Britney's ingenious "2D to 3D postcard with voiced message" idea emerged as the victor, becoming our final design choice for its innovative and engaging features.

However, due to time constraints, we focused on implementing the 2D to 3D transition without the addition of the voiced message, opting instead for regular text input in our final design. Technological limitations led us to pivot from a full 2D to 3D image conversion to utilizing Teachable Machine for identifying user-input photos, shaping our final implementation.

The final design boasts several key features that redefine the traditional postcard communication experience.

Instant Send and Receive
Users can send and receive postcards instantly, facilitating swift communication and sharing experiences in real time.
3D Landmarks
Transforms regular postcards into immersive 3D experiences, offering users a vivid and engaging experience.
Multi-User Viewing
Supports multi-user interaction, allowing many individuals to view and engage with the same postcard simultaneously.

Rotosketches

Implementation

For our app implementation, we hosted our web app on Glitch, employing HTML, CSS, and JavaScript for coding. We integrated the Teachable Machine to predict user input photos, incorporated socket.io for real-time user communication, and leveraged A-Frame for VR rendering.

Contribution

Throughout the project, my primary focus revolved around designing intuitive GUI interfaces and laying the groundwork in code using HTML, CSS, and JavaScript. My involvement extended to integrating socket.io and handling a portion of the A-frame styling, ensuring a cohesive and interactive platform. Collaborated closely with Britney to integrate 2D to 3D landmark identification and rendering immersive components into the app. Additionally, I helped in sketching out a part of the rotosketches, and was involved in capturing footage for our project videos.

Resources

All referenced sites, 3D models, and attributions have been cited within README in the source code.