0.0.8 • Published 10 years ago

canvas-particles v0.0.8

Weekly downloads
12
License
ISC
Repository
github
Last release
10 years ago

canvas particles

Particle generator for html5 canvas animation

examples

Default options create particles with zero gravity and random x and y velocities. Demo.

var Particles = require('canvas-particles');

window.onload = function() {

  // Create an empty canvas and place it on the page
  var canvas = document.createElement("canvas");
  canvas.width = 800;
  canvas.height = 500;
  // black canvas
  canvas.getContext("2d").fillRect(0, 0, canvas.width, canvas.height);
  document.body.appendChild(canvas);

  var particles = Particles().loop(canvas, redrawFn);

  // called on every frame before the particles happen
  function redrawFn(ctx) {
    ctx.fillStyle = "black";
    ctx.fillRect(0,0, canvas.width, canvas.height);
  }
};

Falling particles with random origin and random x velocity. Demo.

var Particles = require('../');

window.onload = function() {

  var canvas = document.createElement("canvas");
  canvas.width = 800;
  canvas.height = 500;
  canvas.getContext("2d").fillRect(0, 0, canvas.width, canvas.height);
  document.body.appendChild(canvas);

  // falling particles with random x velocity and random origin
  var range = 50;
  var xMax = ((canvas.width / 2) + range);
  var xMin = ((canvas.width/2) - range);
  var yMax = ((canvas.height / 2) + range);
  var yMin = ((canvas.height/2) - range);

  var particles = Particles({
    density: 0,
    gravity: 0.03,
    vx: function() {
      return Math.random() * 1.5 - 0.75;
    },
    vy: 0,
    origin: function() {
      return {
        x: Math.random() * (xMax - xMin) + xMin,
        y: Math.random() * (yMax - yMin) + yMin
      };
    },
    color: 'black',
    wobble: function() {
      return Math.random() + 1 - 1.5;
    }
  }).loop(canvas, redrawFn);
  
  function redrawFn(ctx) {
    ctx.fillStyle = "white";
    ctx.fillRect(0,0, canvas.width, canvas.height);
  }
};

Configuration

// options and their defaults, none are required
var particles = Particles({
  maxParticles: 500,  // max number of particles to keep in memory
  origin: {  // pass a hash or a function that returns a hash
    x: canvas.width / 2,
    y: canvas.height / 2
  },
  size = 2,
  vx: Math.random() * 10 - 5,  // x velocity - can be function or number
  vy: Math.random() * 10 - 5,  // y velocity - can be function or number
  gravity: 0,
  color: 'white',  // string or function
  wobble: function() {} // change the x velocity on each iteration
})
0.0.8

10 years ago

0.0.7

10 years ago

0.0.6

10 years ago

0.0.5

10 years ago

0.0.4

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago

0.0.0

10 years ago