TLDR: it's a physics simulation where everyone in the room is a planet; as the planets interact with each other, the viewers of the piece can change the mass of their planet, split their planet into mini-planets (and then split it again!), and choose whether their planet's gravity is attractive (what gravity normally is) or repulsive (in another universe, maybe?). Every viewer gets to make their mark on the galaxy!
I love learning things and I like to do that by getting my hands dirty... that can be pretty hard at a galactic scale. At the same time, I also really enjoy creating things where people use my creation / interact with my creation. That's what I feel like what I've been working on so far has been missing and I wanted to experiment with that concept in this project.
I built an interactive art display that's a particle physics simulation. You have a collection of planets / particles (circles on the screen) that are orbiting around one another. Each particle has its own gravitational field. What makes it special is that every planet represents a person viewing the art piece and they have control over this planet through a physical controller or a mobile website.
Here's what it looked like:
And here are what the mobile and physical controllers look like:
The physical controller is very much a prototype. It's an ESP32 with two buttons for triggers and a potentiometer for changing the mass of its associated particle. It uses the arduinoWebSockets library to connect to the Node.js / express server running an instance of socket.io. This server takes incoming events and emits them to the display client. The display client is an art piece built in p5.js and it handles those incoming events through JavaScript. The mobile controller is a HTML, CSS & JS website that uses socket.io to communicate with the display via the server.
The earliest version of this piece was a motion-based piece that tracked people's motion over time and displayed their silhouette on the screen (it would fade over time). I might return to this idea at some point, my concern about it was that very few people could interact with it at once.
Then I started working towards this idea of tracking people's motion from a birds eye view. Once someone entered the classroom we'd track their motion through it (like an Amazon self-checkout store... ugh now that sounds creepy). I couldn't figure out the camera setup for this but I'd like to return to the idea of distributing out where people can interact with the art.
I started building the project by building the physics simulation. I used an old workshop that I had seen / helped make at hackathon as the base for my work; it had described most of the physics logic but I expanded it to make it more "displayable" (splitting, repelling, and wrap around movement).
From there I start scaffolding out what the websocket server would look like. I made a list of events that it would need to be able to handle and the events that it would need to emit. Then I returned to my p5.js code for the display and implemented the handling of these events (eg. massChanged). At this point I was just simulating the event triggers.
Afterwards, I built the mobile control website. It was mainly an emitter of events based on when buttons were clicked. I did my best to make sure that the styling was mobile-friendly, as a result everything looks a bit big in the desktop version.
Lastly, it was time to make the physical controller! I'd left this part until last because I wanted to get a feel of whether the project was viable before doing the highest commitment piece. Here's the circuit I design:
(Red wires for power, blue for GND, and green for GPIO)
Working with the ESP32 was a bit of a nightmare; for example, the datasheets online all had different GPIO pin mappings and trying to figure out the right one for my model was difficult. Until I noticed this in my backpack...
It was that sort of evening. But anyways, once I had finally gotten readings from my buttons and potentiometers, it was time to code this up! I used a library that handles WebSockets on the Arduino and hooked it into the server.
This project didn't quite go to plan as much - I think the end product was alright but the process was frustrating. A lot of the time, I was feeling fairly uncreative and stuck. I guess this stemmed from me struggling to come up with an idea originally.
What I'm submitting (this) is also my second project I built for this assignment. My first one (a replica of the SF cable car system) didn't quite go to plan. I'd built out the box but I left designing the motor / pulley system too late and with the limited resources I had, I couldn't figure out a clean way of doing it. I was also left feeling pretty uninspired by the project at that point (Wednesday night), I think this was largely because I couldn't see what its wow factor was. There wasn't like a golden moment when viewing it; it just felt like something that you'd run in the background and it'd go unnoticed.
But! I did make a fair bit of progress making it:
Here's me trying to make pencils work as pillars (by cutting them to height with our kitchen knife), my roommates were amused lets say:
So that's that. Back to my end project! I was pretty happy with how the demo had gone, though it did crash which (re)taught me the importance of stress-testing before demoing something. I think this project showed me that the idea of interactive art is one worth pursuing but I think my implementation was a bit lacking here. Some things that come to mind here are:
- Better way to identify your particle
- A way to interact with others through the article - imagine battling with your particle?
I want to do more of this because I saw the joy in people's faces for the first ten seconds - I just need to hold that joy / give them a reason to keep engaging with the project.
If I was to make the project again, there'd be a couple of things I'd change:
- Designing a case for the controller and including a battery in it (this was something I'd hoped to do but time got the better of me)
- Adding more depth to the shapes, the planets had no texture so they just looked like circles on a screen
- Implementing more maths / physics to make it more of a learning experience.
- This is something I'd like to explore more in this class; art is a great way to learn.
I am pretty proud that of my three "next times" from the last project, I've done them all either in this project or through my half-done tram system:
- Designing joints for my laser cut pieces so I wouldn't have had to hot glue the piece together.
- Modelling the train in CAD - this would have allowed me to properly create the diagonal shape of a BART train. Plus I want to improve my CAD skills so I can do more.
- Using an ESP32. That would have allowed me to make API calls from my Arduino code directly and not have to run a separate Python script.
Neither project is going to waste - I'm reusing the electronics from the controller and the box I created for the tram system is now on the mantlepiece at my place. Even though this project was a bit rough to get to the finish line with, I'm thankful for my friends who stayed up late helping me / lent me parts and everyone who gave me advice.
Thanks to these sources for helping me:
esp32_SocketIO: https://github.com/Valgueiro/esp32_SocketIO
@SquarePear's workshop: https://github.com/hackclub/hackclub/tree/main/workshops/particle_physics
Socket.io's documentation: https://socket.io/get-started/chat