Experiment 3: Bouncy Balls

Sections in this Article:


There’s quite a bit being explored in this experiment so I will try and keep things short and to the point.

This experiment aims to explore basic gravity physics, the centring of Dom elements both horizontally and vertically; accessing size of an SVG that can be dynamically sized, and some simple events where a class instance is required by the respective event handler [this doesn't mean this!]. All of this in using JavaScript ES6 and cleanly wrapped up into a Web Component.

Here's the output of the experiment - click or touch 'throws' in a new ball!

Your browser does not support Web Components :-(

Here are some of the design criteria for this experiment:


  • When balls roll along the bottom there should be some simulation of friction.
  • Balls lose a bit of their energy with each bounce.
  • Bigger balls don’t bounce as well as smaller balls.
  • Bouncing off the bottom is not a perfect bounce (e.g. introduce a slight kick to the left or right).
  • The floor is a bit sticky, if there is insufficient bounce the ball stops bouncing.
  • All balls are to experience the same gravity.
  • For simplicity, balls do not collide with each other [however, referring back to Experiment 2, the maths explored there could well be put to use in this experiment!]

Experiment Particulars

  • The experiment shall cater for dynamic resizing of the screen - try it out here (let the balls settle at the bottom then resize the window so the balls fall again).
  • The experiment shall mimic the Commodore 64 boot screen!

Continue on reading to The Ball...