Multimodal Interaction Exploration

Interactive Prototyping 1 —— ArtCenter College Of Design

Timeline

Sept. 2024 – Dec. 2024

Tool

p5.js • ProtoPie • Unity

Contribution Type

Independent

Project Overview

Interactive Prototyping 1 is my first project at ArtCenter where I learned to use p5.js, ProtoPie, Unity, and basic coding from scratch.

The goal wasn’t to build a finished product, but to explore how different tools can express interaction in completely different ways — code, gesture-based interfaces, and spatial 3D.

This project documents my learning curve and how I connected these three mediums into one continuous experience.

Design Process

p5.js

In p5.js, I created two small interactions: a jellyfish and floating bubbles.

The jellyfish uses simple math functions to simulate a soft “breathing” motion, drifting slowly across the canvas; the bubbles react to the cursor, shifting shape and flickering when touched.

It was my first time using code to make visuals actually feel alive.

ProtoPie

A small ProtoPie demo using taps and swipes to change states — my first time making a mobile flow feel responsive.

Unity

Unity

In Unity, I created a small 3D Rubik’s cube demo.

On desktop, the cube rotates through simple keyboard controls; on mobile, the cube responds to device movement, letting you twist it by tilting the phone.

It was my first time connecting input, motion, and 3D objects in real time.

In Unity, I created a small 3D Rubik’s cube demo.

On desktop, the cube rotates through simple keyboard controls; on mobile, the cube responds to device movement, letting you twist it by tilting the phone.

It was my first time connecting input, motion, and 3D objects in real time.

Create a free website with Framer, the website builder loved by startups, designers and agencies.