Experiment 3: Bouncy Balls

Sections in this Article:

• Introduction
• The Ball
• Balls! Bringing it Together
• An Alternative Engine
• Conclusions

Introduction

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!

Here are some of the design criteria for this experiment:

Physics

• 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...