stardance has been extended another month! the new deadline is october 31 :)

You are browsing as a guest. Sign up (or log in) to start making projects!

Pearl Sandbox

  • 5 Devlogs
  • 23 Total hours

Pearl Sandbox is an interactive web-based physics simulation in which you can drop shiny pearls into a three-dimensional glass box and observe their realistic behavior. Using intuitive sliders and controls, you can adjust and experiment with parameters—such as the size of the box, the number of pearls, colors, and physical interactions—in real time. The project serves as an illustrative experiment demonstrating how modern 3D graphics and physics systems can be implemented directly within a web browser, without the need for any additional installations.

Ship #1 Pending review

Pearl Sandbox is an interactive web-based physics simulation in which you can drop shiny pearls into a three-dimensional glass box and observe their realistic behavior. Using intuitive sliders and controls, you can adjust and experiment with parameters—such as the size of the box, the number of pearls, colors, and physical interactions—in real time. The project serves as an illustrative experiment demonstrating how modern 3D graphics and physics systems can be implemented directly within a web browser, without the need for any additional installations.

  • 5 devlogs
  • 23h
Try project → See source code →
Open comments for this post

5h 2m 43s logged

Transitioning from Version 4 to Version 5, the Pearl Sandbox has received a massive upgrade focusing on total user customization and much more fluid camera controls. The most exciting new addition is the expanded control menu, which now comes packed with dynamic sliders that let you tweak the entire simulation on the fly. You can now adjust the size of the glass box to give your pearls more or less room, change the maximum pearl limit to handle denser particle stacks, and fine-tune exactly how many pearls spawn with a single click. Alongside these powerful new settings, a fresh color option has been added to the palette to give your pearls an extra splash of style. Finally, camera navigation got a major quality-of-life overhaul: the top-right orientation gizmo cube is now fully interactive, allowing you to directly grab and rotate the mini cube to seamlessly sync and spin the main 3D camera view around your sandbox.

0
0
16
Open comments for this post

6h 21m 45s logged

In Version 4 of the Pearl Sandbox, the simulation feels much more responsive and satisfying to play with. The biggest visual change is that pearls no longer just drop from the ceiling in random spots. Instead, wherever you click on the glass box—whether it’s the top, the side walls, or near the bottom—the pearls now spawn right at your cursor position and burst inward into the box.

The main hurdle in this update was getting the box boundaries and click detection right. In earlier tests, fast-moving pearls would glitch out and fall right through the glass walls, or spawn halfway outside the box. To fix this, all six sides of the glass box are now completely solid, keeping every single pearl trapped inside even when dozens are bouncing around at once. Another challenge was making sure the pearls shoot inward away from the wall you click on rather than just dropping straight down. Once that was dialed in, adding a small collapsible menu overlay and the 3D orientation gizmo in the corner really helped tie everything together, making camera navigation feel smooth while keeping the focus on the bouncing pearls.

0
0
58
Open comments for this post

3h 50m 10s logged

In version 3 of the Pearl Sandbox, the interactivity of the 3D environment is significantly expanded. While the pearls in the previous version were statically predefined, this iteration introduces a click function: each mouse click spawns a cluster of new pink pearls in the upper section of the transparent 3D cube. These spheres fall from the ceiling; however, since the walls are not yet solid, the pearls pass right through them. The ability to freely rotate the camera using the mouse is also retained, allowing users to observe the action from any angle. The next stage of development will refine the spawning mechanism—moving away from a fixed origin at the ceiling to a system that uses raycasting to spawn pearls exactly where the user clicks on the box—with further updates to follow, including UI menus, color customization options, and a 3D orientation cube.

0
0
20
Open comments for this post

4h 38m 25s logged

I’ve changed the setup: instead of the previous 2D, there is now a 3D space where you can view the scene and aditionally you can actually rotate the view. However, you can’t spawn spheres yourself; instead, there are some pre-existing ones. They are currently falling through the walls because I haven’t managed to create solid, transparent walls yet.

0
0
10
Open comments for this post

3h 7m 36s logged

The initial release of the Pearl Sandbox project is a lightweight 2D prototype built entirely with HTML, CSS, and plain JavaScript. Designed to test core interaction and physics before moving into a full 3D space, this version uses an HTML canvas element to render colorful pearls within a bounded square box. Simple physics calculations handle continuous gravity, wall bounce dynamics, and basic velocity damping to make the movement feel natural. Players can interact directly with the simulation by clicking anywhere on the screen to instantly spawn clusters of pearls that fall, bounce off the walls, and settle at the bottom. As the project continues to evolve, these foundational mechanics will be expanded into a complete 3D environment.

0
0
24

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…