Sand Bottle
A digital sand bottle that responds to gravity, movement, and physical interaction.
Role:
Concept, Interaction Design, Creative Coding, Physical Computing, 3D Modeling & Fabrication
Type:
Interactive Web, Physical Computing
Tools:
JavaScript, Matter.js, Arduino, Node-RED, Fusion 360, Procreate
Year:
2024
Sand Bottle
A digital sand bottle that responds to gravity, movement, and physical interaction.
Role:
Concept, Interaction Design, Creative Coding, Physical Computing, 3D Modeling & Fabrication
Type:
Interactive Web, Physical Computing
Tools:
JavaScript, Matter.js, Arduino, Node-RED, Fusion 360, Procreate
Year:
2024
Sand Bottle
A digital sand bottle that responds to gravity, movement, and physical interaction.
Role:
Concept, Interaction Design, Creative Coding, Physical Computing, 3D Modeling & Fabrication
Type:
Interactive Web, Physical Computing
Tools:
JavaScript, Matter.js, Arduino, Node-RED, Fusion 360, Procreate
Year:
2024
Overview
Overview
Overview
Sand Bottle reimagines the familiar experience of creating colorful sand art inside a bottle as an interactive digital experience.
Using the Matter.js physics engine, I developed a website where users can draw shapes and watch them move under simulated gravity. On supported mobile devices, tilting the screen changes the direction of gravity, allowing the digital sand to respond to physical movement.
I later extended the project into a tangible interaction by building a 3D-printed bottle controller. By connecting motion sensors and physical buttons to the website, I explored how a familiar object could bridge digital and physical play.
Sand Bottle reimagines the familiar experience of creating colorful sand art inside a bottle as an interactive digital experience.
Using the Matter.js physics engine, I developed a website where users can draw shapes and watch them move under simulated gravity. On supported mobile devices, tilting the screen changes the direction of gravity, allowing the digital sand to respond to physical movement.
I later extended the project into a tangible interaction by building a 3D-printed bottle controller. By connecting motion sensors and physical buttons to the website, I explored how a familiar object could bridge digital and physical play.
Sand Bottle reimagines the familiar experience of creating colorful sand art inside a bottle as an interactive digital experience.
Using the Matter.js physics engine, I developed a website where users can draw shapes and watch them move under simulated gravity. On supported mobile devices, tilting the screen changes the direction of gravity, allowing the digital sand to respond to physical movement.
I later extended the project into a tangible interaction by building a 3D-printed bottle controller. By connecting motion sensors and physical buttons to the website, I explored how a familiar object could bridge digital and physical play.
Simulating Sand in the Browser
Simulating Sand in the Browser
Simulating Sand in the Browser
I built the web experience using JavaScript and Matter.js to simulate gravity and interactions between objects. Users can draw different shapes, experiment with colors, and watch their creations shift within the bottle.
By integrating device orientation data, I made the simulated gravity respond to the movement of an iPhone, creating a more tactile way to interact with the digital sand.
See the live site: https://sonnyyy77.github.io/Sand-Bottle/
I built the web experience using JavaScript and Matter.js to simulate gravity and interactions between objects. Users can draw different shapes, experiment with colors, and watch their creations shift within the bottle.
By integrating device orientation data, I made the simulated gravity respond to the movement of an iPhone, creating a more tactile way to interact with the digital sand.
See the live site: https://sonnyyy77.github.io/Sand-Bottle/
I built the web experience using JavaScript and Matter.js to simulate gravity and interactions between objects. Users can draw different shapes, experiment with colors, and watch their creations shift within the bottle.
By integrating device orientation data, I made the simulated gravity respond to the movement of an iPhone, creating a more tactile way to interact with the digital sand.
See the live site: https://sonnyyy77.github.io/Sand-Bottle/
Building a Physical Controller
Building a Physical Controller
Building a Physical Controller
To bring the interaction beyond the screen, I used an Arduino, a gyroscope, and two physical buttons to control the website.
The controller sends rotation data and button states through UDP to Node-RED, which processes the information before passing it to the web interface. Rotating the bottle changes the direction of gravity, while the buttons allow users to switch colors and release sand.
I also adjusted the rotation calculations and applied data smoothing to make the interaction more stable.
To bring the interaction beyond the screen, I used an Arduino, a gyroscope, and two physical buttons to control the website.
The controller sends rotation data and button states through UDP to Node-RED, which processes the information before passing it to the web interface. Rotating the bottle changes the direction of gravity, while the buttons allow users to switch colors and release sand.
I also adjusted the rotation calculations and applied data smoothing to make the interaction more stable.
To bring the interaction beyond the screen, I used an Arduino, a gyroscope, and two physical buttons to control the website.
The controller sends rotation data and button states through UDP to Node-RED, which processes the information before passing it to the web interface. Rotating the bottle changes the direction of gravity, while the buttons allow users to switch colors and release sand.
I also adjusted the rotation calculations and applied data smoothing to make the interaction more stable.
Form & Fabrication
Form & Fabrication
Form & Fabrication
I designed the physical bottle in Fusion 360 and fabricated its housing through 3D printing, creating a tangible interface for the digital experience.
The finished prototype brings together a familiar object, physical controls, and a simulated environment, allowing users to create digital sand art through gestures that resemble handling a real bottle.
I designed the physical bottle in Fusion 360 and fabricated its housing through 3D printing, creating a tangible interface for the digital experience.
The finished prototype brings together a familiar object, physical controls, and a simulated environment, allowing users to create digital sand art through gestures that resemble handling a real bottle.
I designed the physical bottle in Fusion 360 and fabricated its housing through 3D printing, creating a tangible interface for the digital experience.
The finished prototype brings together a familiar object, physical controls, and a simulated environment, allowing users to create digital sand art through gestures that resemble handling a real bottle.
Final Experience
Final Experience
Final Experience
Sand Bottle transforms a simple sand art activity into an interactive experience that moves between the physical and digital worlds. By tilting, rotating, and pressing buttons on a handheld object, users can directly influence the movement and appearance of the digital sand.
See the full documentation: https://sonnyyan.notion.site/Final-Project-Documentation-d96954631ae14af1926ee28ad5d77a19
Sand Bottle transforms a simple sand art activity into an interactive experience that moves between the physical and digital worlds. By tilting, rotating, and pressing buttons on a handheld object, users can directly influence the movement and appearance of the digital sand.
See the full documentation: https://sonnyyan.notion.site/Final-Project-Documentation-d96954631ae14af1926ee28ad5d77a19
Sand Bottle transforms a simple sand art activity into an interactive experience that moves between the physical and digital worlds. By tilting, rotating, and pressing buttons on a handheld object, users can directly influence the movement and appearance of the digital sand.
See the full documentation: https://sonnyyan.notion.site/Final-Project-Documentation-d96954631ae14af1926ee28ad5d77a19
MORE WORKS
MORE WORKS