Browser Ball was a 2009 interactive web experiment created by Mark Mahoney for Chrome Experiments. It was part of a series of websites designed to showcase the capabilities of Google Chrome and modern web technologies of the time, including HTML5 and advanced JavaScript. These experiments were intended to demonstrate the potential for creating rich, interactive experiences directly within the web browser, without the need for external plugins or software.
This particular experiment was a simple physics simulation that allowed users to interact with a beach ball. What makes it special is that the beach ball could be thrown between multiple browser windows, creating a continuous space in which the ball could move. This enraptured my 13-year-old self, and has probably somewhat contributed to me eventually becoming a web developer.
There are two parts of this that sadden me. First, in the 15 years since its release I haven't seen anything like it (with one exception). It exemplifies some of the whimsy we've lost in the modern web. Second is the fact that the original experiment is no longer available. Although it can still be found on The Internet Archive, something this cool and unique deserves to live on. That's why I've rewritten it in Typescript, added a few new features, and made it available to play here. If you're interested in understanding how it works, you can view the source code on github.
If you'd like to see the original Browser Ball in all its glory, you can view it here
How to play:
- Click and drag the ball to throw it around.
- Click the "Create Window" button to spawn a new child window.
- Position the windows next to each other to create a continuous space for the ball to move between.
- Click the "Reset Ball" button if the ball gets stuck or falls off the screen.
- Click the "Bonus Features" button to change the balls properties, or add more balls