Dot Battle - a Javascript Physics Toy

, in Computing, Interactive

(Click to go fullscreen)

This is nothing more than an physics-based desk toy - watch the battle play out. Who will win? Part of the fun trying to figure out the rules by observation but read on for a partial explanation.

What is this?

Sometime during covid lockdown I got fascinated by a genre of YouTube videosThere are a lot of creators, I particularly enjoy the work of MIKAN that simulate an abstract battle or weird race using 2d physics engines, set to soundtracks of pumping dance music.

The appeal for me was trying to figure out the rules by watching the behavior of each individual part, like I was a naturalist describing the goings on of an ant hill or perhaps a sport announcer calling a game I barely know how to play.

It is very relaxing, perhaps even meditative.

In a philosophical mood I might expound on how us humans are apt to ascribe intentionality where we do not understand how the simple mechanisms behind the world interact in surprising ways. Or how very tiny differences in conditions quickly spiral into massive changes. Or the futility of making predictions in an uncertain world.

But really I just like looking at the colors. Hopefully you will too, although you will have to supply your own pumping dance music.

Development

This is written in pure Javascript, the only third-party library used is Matter.js for the physics. I'll be the first to admit that the code could be better but it gets the job done and I've already spent far too long on this project.

Partial Spoilers

The playfield is split into two sections, on the left is the battlefield containing canon s. Canons can fire shots of their own color into the battlefield to claim other canons, trying ultimately to eliminate the other colors.

The canons are controlled by the balls in the right section, which fall towards the bottom of the screen. Along the way they hit obstacles, when lit each obstacle increases the shot count of the appropriate color's canons by one. After that the obstacle is inactive for a short period of time.

At the bottom of the right section are 3 chutes labeled x2, +4, and Fire! Balls landing in the +4 chute will increase the count of their color's canons by 4. Balls landing in the x2 chute will double the count, which the Fire! chute triggers all the color's canons to start spewing balls onto the playfield.

Balls have their own rules but put simply, if they hit another color's ball then both balls will be damaged. After a few hits the ball will be removed from the battlefield. Canon's work in a similar way, it takes a few hits to completely take over a canon.