<- BACK TO WORKS

Actually I've already decided, But I still want to ask...

SOLO PROJECT / WEBCAM-BASED DIGITAL ORACLE

Playtest Link -> Project Video ->

Role Concept, Interaction Dev, Visual Design, 3D Modeling

Tools p5.js, ml5.js, Blender, Gemini, Illustrator

Format Webcam-based Digital Oracle

Year 2025

The Concept

This project is a playful reimagining of the traditional "Magic 8-Ball" or "Book of Answers" concept. It is an interactive web-based system built with p5.js and ml5.js that transforms the act of seeking advice into a whimsical, digital ritual.

Users interact with the system not just through typing, but through physical gestures—specifically, putting their hands together in a prayer-like motion—to summon an animated 3D angel model. The system provides random answers that can be "accepted" or, if unsatisfactory, "burned" away through a click interaction, offering a moment of digital catharsis. The project aims to create a healing, surprising, and engaging experience out of the simple everyday desire for guidance.

Interaction Mechanics

Seamless Input

The system features a text input listener that automatically triggers when a question mark ("?") is detected, eliminating redundant clicks and mimicking the fluid flow of a real conversation.

Motion Tracking

The system utilizes ml5.js to track the user's facial position and hand gestures via a webcam.

Parallax Follow

A paper angel model continuously follows the position of the audience's head in the 3D scene, creating a parallax effect.

Summoning Ritual

Users physically pose in a prayer-like motion (putting hands together); when the distance between the wrists is close enough (< 130px), the system triggers the function to summon the animated angel and deliver an answer.

Burn & Reset

If the user is unsatisfied with the given answer, they can click the screen to "burn" the answer away, releasing stress and resetting the system state.

The Execution & AI Integration

The project was built using p5.js with 3D rendering (WEBGL mode) and integrated ml5.js for computer vision recognition. Visual elements involved a mixed workflow: sketching initial forms, converting them into vector graphics in Illustrator, constructing origami-style 3D models in modelling software, and finally exporting them to p5.js.

AI was utilized as an assistant for code syntax and library integration, particularly in aligning ml5.js tracking data with the p5.js WEBGL coordinate system. AI helped generate the algorithm logic for dynamic text scaling (drawStretchedText) and assisted in refining the class structure for state management. All AI-generated code and content were rigorously tested, reviewed, and manually adjusted by the creator to ensure they fit the project's specific narrative and functional requirements.

Project Video