WELCOME TO YORDANOS’ PLAYGROUND


Project: The Nostalgia Engine (Interactive Sliding Puzzle)

Role: Creative Director & Technologist
Live Experience: [Play Here]

The Insight: Intentional Friction in a Frictionless Feed

Social media platforms are designed for passive, infinite scrolling. To create a truly memorable brand moment, we have to introduce "intentional friction"—an experience that requires the user to stop, engage, and solve. Drawing on principles of cognitive psychology, this project leverages the Zeigarnik Effect: the human tendency to remember interrupted or incomplete tasks better than completed ones. By presenting the audience with a fractured image within a highly nostalgic interface, we trigger a natural psychological drive to complete the puzzle, transforming passive viewers into active participants.

The Execution: Sculpting Digital Nostalgia

This interactive web experience was built to mimic the tactile, satisfying nature of retro handheld gaming. To achieve this, I bypassed standard 2D web assets and built a fully functional, browser-native 3D environment.

  • 3D Modeling: The GameBoy casing and puzzle tiles were modeled and textured using Blender to ensure accurate lighting and a tangible, realistic feel.

  • Web Architecture: The interactive logic and 3D rendering were developed utilizing custom code, Three.js, and physics integrations via Matter.js.

  • User Experience: The puzzle mechanics were optimized for both desktop and mobile web browsers, ensuring a seamless, app-like experience without requiring a download.



Project: The Harmonic Momentum Engine (Interactive Physics & Audio)

Role: Creative Director & Technologist
Live Experience: [Initiate Interaction]

The Insight: Tactile Reality and Emotional Resonance in a Weightless Web

The vast majority of web and social interactions—tapping, swiping, scrolling—feel entirely weightless and emotionally detached. To create digital artifacts that leave a lasting psychological impression, we must reintroduce physical consequences and sensory depth into digital spaces.

This interactive Newton's cradle is the ultimate exploration of kinetic energy, cause-and-effect, and the profound connection between sound, memory, and emotion. By allowing a user to physically drag, drop, and disrupt the cradle, we bridge the gap between digital interface and tactile reality. But by mapping the physics of these collisions to the Tizita Minor scale—a musical mode deeply associated with nostalgia, memory, and longing—the user doesn't just trigger a simulation; they compose a generative, melancholic melody. This transforms a sterile digital interaction into a deeply human emotional experience that feels tangible, grounded, and intensely nostalgic.

The Execution: Browser-Native Physics & Generative Sound

Building a responsive, emotionally resonant simulation requires moving beyond standard front-end development and into environmental, multi-sensory logic.

  • Kinetic Simulation: Powered by Matter.js to calculate real-time gravity, collision detection, and the precise transfer of momentum across the digital spheres.

  • Generative Audio Engine: Engineered using the Web Audio API to translate physical impact data (velocity and mass) into dynamic audio volume and resonance. Each sphere is tuned to a distinct frequency of the Tizita scale (1 2 b3 5 b6), turning chaotic collisions into a beautifully responsive, ever-evolving harmony.

  • Interactive Architecture: Coded to respond fluidly to varied user inputs (cursor velocity, drag-and-drop mechanics), ensuring the physics engine never breaks immersion, regardless of how aggressively the user interacts with the space.

  • Sensory Design: Visual impact ripples synchronize with the procedural audio, making the invisible transfer of kinetic energy visible and elevating a simple mechanical action into a mesmerizing, synesthetic loop.

The Strategic Application: Visualizing Brand & Emotional Impact

While this simulation stands on its own as a piece of creative tech, the underlying mechanics are highly valuable for conceptual campaign work that demands emotional engagement:

  • Sonic Branding & Emotional Engagement: Utilizing generative audio to create memorable, interactive brand touchpoints. Instead of passive jingles or background tracks, users actively "play" a brand's signature chords through playful interaction, forging a deeper emotional bond.

  • The "Chain Reaction" Campaign: A perfect visual and auditory metaphor for campaigns centered around community impact or cultural movements. One localized action triggers a global, resonant reaction.

  • Interactive Waiting Rooms: Replacing static loading screens or countdowns for a product drop with a tactile, playable physics engine that keeps the user actively engaged—and emotionally soothed by generative ambient music—while they wait.

  • Data Sonification & Visualization: Adapting the physics framework to represent data dynamically—such as allowing users to "weigh" different campaign metrics or audience insights in real-time, outputting unique harmonic soundscapes based on the data's weight and momentum.