With the year still freshly new, I'm proud to present my latest project, The Sandbox! This was my entry to SB Hacks XI, a hackathon held at my university. I worked alone on this project, which took me about 10 hours to finish. I've embedded it below; note that starting the program will freeze the background animation for better performance. If you want to read about the development, just scroll down past the embed!
The Inspiration
Sand simulations aren't new—I've played with my fair share of sand simulators, and I've heard there's even a full rougelike called Noita out there based on the concept. But my goal here was to make something more akin to an art tool, with different brushes and tools to allow one to explore the physics and destress. I feel especially inspired by those art pieces that consist of water and sand suspended in a picture frame, that can be flipped over to watch the sand fall and accumulate.
Another source of inspiration was a project that I'm currently working on: a game featuring a destructible terrain engine. I'm thinking that this program might make a decent level editor for such games, or that the engine could be incorporated to allow players to create terrain on the fly.
In the end, I think that I had a pretty good idea when I came up with this. But of course, having a good idea was only half the battle—I still had to implement the thing!
Hours 1-2: Developing the Engine
For this project, I decided to use Haxe and the OpenFL framework. While I've worked with these tools before and have a few projects in the works with them, this was my first time publishing a project using them. I felt comfortable enough with Haxe because the syntax is so similar to Javascript, and using OpenFL—an open-source implementation of the Flash framework—meant that I could fulfill my childhood dream of making “Flash Games”.
After setting up the window, I spent the first couple of hours developing the engine to handle the sand physics. This was simple enough—I set up a bitmap object to manage the pixels and then ran all of the checks and logic directly on it. Essentially, for each non-blank pixel, I first checked if the pixel below it was empty and swapped the two if that was the case. I repeated this for the cells below it to the left and right, and that was enough to create a convincing sand physics system.
However, having the data representation tied directly to the image meant that the system was pretty inflexible, essentially only being able to handle sand and air. And so I decided to refactor the engine so that I could do more with it.
Hours 3-5: Refactoring and Expansion
The first step that I took with refactoring was to separate the actual data of the particles from that of the bitmap being shown. This involved setting up a Particle class to store particle data and an array to keep track of all of them. While this made the engine more flexible, it also required me to manually handle updating the visual data. To make this more efficient, I had to keep track of all the pixels which were updated each frame. After this opitimization, though, I managed to get pretty decent framerates for even grids as large as 600 by 800 pixels.
After reworking the engine, I then added Stone, a material which collides with sand but doesn't have any physics of its own. Adding this was simple enough—it didn't have any logic to handle during updates. I decided to stop there, as adding water or fire or smoke or anything else would have been much more difficult and time-consuming.
The next thing I did was to add different brushes. While getting mouse input was easy enough (it just involved creating particles wherever the mouse was), adding brushes needed its own Brush class, which then had to interface with the main Sandbox class and have its own capabilities for different shapes and random variations. This paid off, though, allowing for much more freedom in interacting with the sandbox.
Hours 6-9: Building the UI
With all the main functionalities finished, I proceeded to work on making a UI so that users could play around with the program. There's not too much to talk about with respect to this, I just ended up adding a bunch of buttons that changed the state of the Sandbox. That being said, I did end up setting up the buttons to take the state object as a parameter so that they could pass it into an event listener to change the state; this ended up being a lot easier than my experiences working with UI in HTML.
By this point, all that was left to do was to add the final touches and submit the project!
Hour 10: Polishing
To finish off the last hour, I just added some fun features to really solidify the experience. For convenience I added the Clear tool to clear the board. I also added a Flip tool to flip the canvas so that one could watch the sand fall and mix infinitely, a Shuffle tool to shuffle all the sand particles, and a Rain tool to deposit sand across the entire board.
With the tools and interface finished and a logo designed, The Sandbox was finally finished and ready to publish!
If you want to play around with the Sandbox, I've attached a .zip file here containing an HTML file that opens the Sandbox in your browser. I'd provide Mac binaries, but (a) I'm not shelling out $99 to get them signed, and (b) they do have an unresolved memory leak that I have yet to find. I've also added a colorful Easter egg—try and find it!
Edit (2025-01-13): I've changed the embedded version here to use a smaller grid to improve performance. The embed here uses a 320x240 grid, but the downloadable version still uses the original 480x360 grid. Happy Sandboxing!
Log in to comment on posts.