dropping-canvas v1.0.4

DroppingCanvas

Introduction

💧 DroppingCanvas is a lightweight (5 KB) physics tool which can help you generate random motive image object simply on canvas. It is inspired by sprinkler, and DroppingCanvas also provide more flexible and modern APIs.

Demo

Install

npm install dropping-canvas
# or
yarn add dropping-canvas

or just include the compiled file to your page:

<script src="./dropping.js"></script>

Get Started

Just a few code to run:

var canvas = document.getElementById('canvas')
var images = ['./images/1.png', './images/2.png', './images/3.png']
var droppingCanvas = new DroppingCanvas(canvas, images)

droppingCanvas.start()

If you want to modify the motion of objects, you can pass an option as param to the constructor or use method updateOptions. For exmple:

...
var options = {
  dropPerSecond: 15,
  r: 2,
  vY: [200, 400],
  aA: [-0.2, -0.1]
}
// for more options check Option Properties

var droppingCanvas = new DroppingCanvas(canvas, images, options)
...

Now the vertical speed is in the range of 200-400 (random).

For more options, you can see the Demo or check below 👇.

Option Properties

Methods