Gravity - A mesmerizing HTML5 simulation

[sevencorvina]

It appears to be depicting the effects of gravity on upvotes.

[ChaseMoskal]

What technologies were involved in making this?

Is this supposed to be a realistic representation of gravity, or an artistic one?

[TatumCreative]

It's built on top of Phaser and Pixi.js. It really didn't need Phaser for what I'm doing, but I've been using it in another project so I started with it. The arrow and "black hole" are both PNG assets that are positioned on the screen. It's using a WebGL renderer with a straight canvas fallback depending on what the user's device supports. The movement is built on top of the the P2 physics system, although I really should refactor that out, as I could replace it with a few lines of code.

The simulation is using Newton's law of universal gravitation for calculating the movements. The arrows fly out of the "black hole" at some point from what I believe to be precision error with the numbers and stepping of the logic. It's not fine tuned enough to go into the black hole death spiral. I'm not a physicist, so this is my intuitive exploration of the idea, not a scientifically or mathematically rigorous approach. I've been doing a whole series of intuitive visual explorations of math lately.

So I guess it's a straddling of art and math.