Concept & Creative Vision

In the Creative Coding course, I developed Mero is Live!, a web-based interactive visual novel built with p5.js. The protagonist, Mero, is my original character and the centerpiece of my ongoing indie game development. I chose p5.js as the medium because of its unique ability to deliver narrative experiences seamlessly through a web browser. In this project, the player takes on the role of a follower watching the streamer Mero’s livestream. As the interaction deepens, the game gradually unveils Mero’s background, eventually leading to a narrative twist that breaks the "fourth wall."

Technical Implementation & Visual Assets

To ensure a fluid storytelling experience, I implemented a state machine using conditional logic to manage UI transitions and program flow across different stages. The visual assets—including Mero’s bedroom and her diverse range of facial expressions and body postures—were pre-rendered in Blender and Unreal Engine. By utilizing arrays within the code, I dynamically mapped hundreds of dialogue lines to their corresponding image sequences, ensuring that Mero’s visual performance remains perfectly synchronized with the context of her speech.

Emotional Interaction & Future Development

The core interaction revolves around a simulated chat system. I integrated the ml5.js Sentiment Model to perform real-time natural language processing on user inputs; Mero responds differently based on the detected sentiment confidence of the player's messages. Additionally, a randomized quote system allows players to trigger "off-the-cuff" conversations. While the current version focuses on text-based interaction, I plan to incorporate Face and Hand Detection in future iterations, allowing Mero to sense the player’s physical expressions and gestures to complete the narrative bridge between the virtual screen and the real world.