by fecapark

Interactive project, inspired by slushy machine.

Project Link

• Hold and spin the spinner.
• Create slushy balls as touch background.

No third party physics engine.

Implements:

• Acceleration (Movements).
• Elastic collision between circles.
  • Calculated by replacing the radius by mass.
• Solved multiple circles collision problem (Like this)
  • By moving it back to the way it came before the collision. (Code)
• Normal force between rotated spinner and moving balls.

Spotlight guide for UX.

Using HTML5 Canvas masking.

• Apply Context2d.globalCompositeOperation = "destination-out";, you can get same effect.
• To get more information, refer to my lab project's code.

• Compatibility for all devices and browsers has different fps.