Exploration of a Playful experience for Real-Time Communication

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

Video of testing interaction of peekaboo in Three.js

I chose the game peek-a-boo because it has a social component…


and Topia Experience

Virtual field with a grass floor and 4 cubes. a face s in the middle of the field.
Virtual field with a grass floor and 4 cubes. a face s in the middle of the field.

My goal for this week was to use face position to change the camera position, changing how someone is able to interact with the project. I used FaceApi from Ml5 to control camera position as a way to control your point of view.

Like last week, I started my exercise from Aidan Nelson’s template, which allows connecting multiple users in the same virtual space with audio and video sharing.

After some discussion in class and looking for the three.js resources of ground creations, I was able to create a plane with a texture of grass. …


Description:

I tried to understand how to import models into three.js.

I tried to incorporate 3d models and primitive objects to explore the space. I also included a fog function to see how that actually affects the environment.

It’s interesting to think of how to furnish an environment so vast as the virtual space. Next time I have to think about sketching it first.

Challenges:

Although I have imported 3d models before to three.js, I am still a little bit confused about how to do it each time. …


My goal was to create a shared canvas where you can draw 🖌️ with other users connected. I made a very simple approach to this one brush, black for you and white for the other user's brush. Users can clean the canvas on both sides of the experience.

Code | Demo


Swapping faces to create new identities.

A rapid-project based on p5LiveMedia and ML5

Building new identities by swapping masks. This project reminds me in some ways of a face-swapping effect. The other users in the exchange don’t see you, only see your mask representation. To create an effect of new identities, I made the personal image using a black and white filter. In this way, the mask overexposes your persona. None of the users have a clear vision of each other and themselves.

This experience is for friends or strangers, they share a digital place perceiving just their facial impression through a mask.


Light patterns for breathing practice

Link to documentation

Rendering

How does it work?

https://youtu.be/5J1LYk6YfJQ

To activate a light sequence. The base has openings for 4 cylinders. User place a cylinder in the base. Each cylinder corresponds to a specific light color and pattern.

Sketches


Multi-player in Augmented Reality using WebXR API.

Orange Sphere following my position

An exploration of features for collaboration in AR.
Project for Explorations in AR at ITP/NYU.
Code | Demo (for iPhone, open it in Mozilla XR)

Motivations and Context

Not sure if it’s the months of isolation while going to school, but I felt more interested in sharing and collaborative environments. Before the pandemic, we didn't find that much need for these experiences, but in this situation that we are living in now, I think that we are pushed to change to this interaction, which may stay after covid times.

In this first part of the semester, I conducted design research on the distance…


Ideation for Sharing a Canvas

Exploring

I only have one idea in mind at this moment and is to try to do a shared canvas where you can paint with other user connected. So far I have a very simple approach to this one brush, one color and maybe be able to talk to other users connected.

I chose to work with the concept of the brush because was my favorite assignment. 🖌️ The simplicity but variations of brushes that you can create are infinite! …


Learn some words in Spanish while doing your grocery list.

Code | Demo

In this assignment, I made a tool that helps people create a visual shopping list in Spanish.

It’s a very simple interaction based on the tutorials from the Hand-Held class.
When a product is selected, the word is pronounced in Spanish. I tried to find a recording of these words but I didn’t find it, so I decided to record myself saying them. 😅

I imagine this being and playful way to learn new words in the context of grocery shopping.

Disclaimer: Pronunciations and words refer to produce are based in the Puerto Rico lexicon. …


Hurricane comparison: Hurricane Hugo and Hurricane Maria

Hurricane Maria

Themis Garcia

Currently pursuing a Masters Degree at ITP at NYU

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store