p5.js Animated Sculpture
p5.js Creative Coding & 3D Fabrication
Objective: To transform a p5.js sketch that I coded into a tangible sculpture, elevating it from a digital display to a physical object.
Result: The creation of an animated sculpture that coexists with the viewer in the same space, fostering a more intimate and interactive connection between digital art and human presence.
Type: Solo project
My Role: coding, 3d fabrication
Duration: 1 week
Technology: p5.js coding, laser cutter, woodworking tools, iPad
Overview
After spending the previous 4 months creating p5.js sketches on a screen, I wanted to find a way to bring a p5 sketch into a physical space. I considered projection mapping a sketch onto an object or architectural detail, but ultimately I decided to make a sculpture.
Using p5.js, I wanted to create an animation of a simple mobile gently drifting through space. I’ve recently been really inspired by the artist Alexander Calder’s mobiles, and I wanted to explore ways to make a digital mobile.
To bring the sketch into the room, and off the computer screen, I decided to build a small Pepper’s Ghost to house the animation. A Pepper's Ghost is an illusion technique used in theater and magic tricks, where an image is reflected onto a transparent screen to create the appearance of a ghostly figure. It relies on lighting and angles to make the reflected image appear as if it's part of the actual space. It’s basically analog augmented reality.
Coding and Fabrication Process
To make the Pepper’s Ghost box, I sketched out a number of different fabrication techniques. I decided to make a laser cut wood box with a rectangular piece of glass angled out from one end of the box. The glass would be held up by clear acrylic wedges along the side. I drew a final sketch in Illustrator so I could fully visualize the whole construction.
I then cut out the wood and acrylic pieces on the Epilog laser cutter. I sanded and assembled the box, and painted the inside. I also laser cut and built a separate wood shelf for it to be displayed on (not shown here).
To code the mobile in p5.js, I started by creating a small system of 3d spheres that orbited around a central axis, with all the spheres connected by lines. I then added additional systems of orbiting spheres one by one, and revised the colors, size and placement of the spheres to maximize the size and rotations. Have a look at the final p5.js sketch here.
To finish the piece, I placed an iPad in the Pepper’s Ghost box with my p5.js sketch playing. The animation reflects onto the glass, creating the illusion of the mobile floating in the space above the box. The box would be shown on a shelf mounted on a wall at eye level so the viewer doesn’t watch the iPad, they only see the reflection on the glass.
