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

| Property | Type | Description | Default | | -------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------ | | dropPerSecond | Number, String | Number of objects generate in a second. | 20 | | isBoundingSize | Boolean | Restrict the object rebound when z(size) is negative. | true | | x | null, Array, Number | (Range of) initial horizontal position. null: object will generate randomly in the range of canvas width. | null | | y | null, Array, Number | (Range of) initial vertical position. null: object will generate over the top of canvas.(cal the maximum radius) | null | | z | Array, Number | (Range of) initial size(scale). | [0.2 , 0.3 ] | | a | Array, Number | (Range of) initial transparency(alpha). | a: [1 , 1 ] | | r | Array, Number | (Range of) initial rotation. | [0 , 2 * Math .PI] | | vX | Array, Number | (Range of) horizontal velocity. | [-60 , 60 ] | | vY | Array, Number | (Range of) vertical velocity. | [200 , 500 ] | | vZ | Array, Number | (Range of) scale velocity. | [0 , 0 ] | | vA | Array, Number | (Range of) transparency(alpha) velocity. | [0 , 0 ] | | vR | Array, Number | (Range of) rotation velocity. | [-1 , 1 ] | | aX | Array, Number | (Range of) horizontal acceleration. | [0 , 0 ] | | aY | Array, Number | (Range of) vertical acceleration. | [80 , 200 ] | | aZ | Array, Number | (Range of) scale acceleration. | [-0.3 , 0 ] | | aA | Array, Number | (Range of) transparency(alpha) acceleration. | [-1 , -0.6 ] | | aR | Array, Number | (Range of) rotation acceleration. | [0 , 0 ] |

Methods

| Method | Arguments | Description | | ------------- | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | start | | Activate the animation. | | pause | | Pause the animation. | | stop | isImmediateClean=false | Stop the animation. If isImmediateClean is true, objects will fade out immediately, otherwise the animation will stop after objects disappear from canvas. | | updateOptions | options, isCover=false | Update the physics options of object. If isCover is true, it will just update the options you pass, otherwise other options will replace by default options. | | updateImages | images | Update the Images of generate object. It accepts Array, String, FileList. |