Peek-a-Boo
Exploration of a Playful experience for Real-Time Communication
Intro
During my class in Real-Time Social Spaces, I decided to base my research on body-engaging experiences for children. This is part of one of my explorations for my thesis in developing body-centric interactions for children.
While I was doing some exploration with ML5 in Three.js, I found that the Peek-a-Boo game might be a good opportunity to engage in real-time and socially.
My goal was to explore how the peek-a-boo dynamic can happen remotely but keeping some of its physical characteristics.
🐈 🐙 — Github | 📺 — Demo
Why Peek-a-Boo?
I chose the game peek-a-boo because it has a social component and one of the most basic forms of social interaction games for children. Basing the exploration on a pre-existing game may facilitate the challenges presented when exploring uncommon interactions.
Children and adults play this game instinctively and it is a very crucial game for infants' development. However, the potential of change is crucial, children play this game differently through different stages of their development: from passively participating and just enjoy the repetition, to actively engage in hiding and repairing patterns. This characteristic of the game creates a challenge of what age to develop for, but at the same time creates a design challenge on how might the experience grow with the children.
Exploration in Threejs
Starting
In this test, the interaction is exploring body movement and digital spaces. The idea is to enhance the flatness of the screen through motion and perception of perspective. My first insight was that movement could be reasonably paired with perspective to give a real illusion of depth. However, it is easy to break that balance, purposely or not.
Interaction
One of the challenges that I had during the process was the velocity of moving the camera with the tracking. Although direct tracking provides a more accurate perspective, it also affects the ease of motion and creates a perceivable delay. For this, I decided to use just the position of the face related to the camera capture to trigger a change of perspective. Although there is a sort of delay, I think it is compensated with the smoothness of an easing in and out motion.
Environment
I decided to use a model of a Toy Room to elaborate the interaction. The idea is to create a playroom where the user can play hide and seek and also interact in a multimodal way with the objects. In this sketch, when the mouse is clicked one of the balls starts to bounce. The goal is to make it bounce using raycasting, but I had difficulties just selecting that object over another element that might change position (in terms of the raycasting).
Testing with John
I tested this exploration with my nephew to understand how easy he would get the interaction and playfulness. From this testing, I noticed how easy and fast he understood the interaction and the play behavior, especially the movement from side to side. This was a good surprise because I wasn't sure that the dynamic was clear enough for children.
However, when moving up, I notice that he positioned himself outside the camera range. This let me understand that he has an idea that the computer is tracking his body, but not aware of how.
In the interaction of hiding, he can notice that I am hiding and appearing, but it is not that clear for him that he is hiding too. The perception of hiding and how to represent yourself could be explored in future iterations.
Takeaways
I had a lot of difficulties creating an adequate environment for this experience. My goal was to use online available models, but I had some problems with the library. However, at some point decided to update my version of the library and I was able to see everything.
Creating a multi-modal interaction was also a challenging process. Although the lesson in raycasting was crucial to be able to achieve some technical goals and understanding. I need to invest more time to be able to implement it appropriately for this interaction.
The process of learning Three.js, Web RTC, and Real-time social interaction is breathtaking. Although these are very small steps I will like to keep exploring this subject and other possibilities.
Credits:
Thanks to my teacher Aidan Nelson, who provided a template that allows a multiplayer experience with integrated audio/video capabilities.
Thanks to Lenin Garcia, who helped me understand animation and models in general.
Thanks to Madeline Gannon for all the time and guidance.
Models from Sketchfab and Mixamo:
