Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple particles example on the Raspberry Pi using node-openvg-canvas. Original demo code from thecodeplayer.com.
// Original Source
// http://thecodeplayer.com/walkthrough/make-a-particle-system-in-html5-canvas
//
// Modified to work with `node-openvg-canvas` on the Raspberry Pi
// - use RequestAnimationFrame instead of setInterval
// - correct the number of arguments in call to `ctx.arc()`
//
// Usage:
// - install Node.JS
// (refer to Installing Node section here: http://blog.rueedlinger.ch/2013/03/raspberry-pi-and-nodejs-basic-setup/)
//
// - install node-openvg-canvas
// $ git clone https://github.com/luismreis/node-openvg-canvas.git
// $ cd node-openvg-canvas
// $ npm install
//
// - download a copy of this script
// - run it (from inside the `node-openvg-canvas` directory)
// $ node node-openvg-particles.js
var Canvas = require('./lib/canvas');
var canvas = new Canvas(800, 800);
var ctx = canvas.getContext('2d');
var numParticles = 10;
var W = canvas.width;
var H = canvas.height;
var particles = [];
for ( var i = 0; i < numParticles; i++ ) {
particles.push( new Particle() );
}
// Create a function which will help us to create multiple particles
function Particle() {
// Random position on the canvas
this.x = Math.random() * W;
this.y = Math.random() * H;
// Lets add random velocity to each particle
this.vx = Math.random() * 20 - 10;
this.vy = Math.random() * 20 - 10;
// Random colors
var r = Math.random() * 255 >> 0;
var g = Math.random() * 255 >> 0;
var b = Math.random() * 255 >> 0;
this.color = "rgba("+ r +", "+ g +", "+ b +", 0.5)";
// Random size
this.radius = Math.random() * 20 + 20;
}
function draw() {
// Moving this BG paint code insde draw() will help remove the trail
// of the particle. Lets paint the canvas black
// But the BG paint shouldn't blend with the previous frame
ctx.globalCompositeOperation = "source-over";
// Lets reduce the opacity of the BG paint to give the final touch
ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
ctx.fillRect(0, 0, W, H);
// Lets blend the particle with the BG
ctx.globalCompositeOperation = "lighter";
// Lets draw particles from the array now
for( var t = 0; t < particles.length; t++ ) {
var p = particles[t];
ctx.beginPath();
// Time for some colors
var gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.radius);
gradient.addColorStop(0, "white");
gradient.addColorStop(0.4, "white");
gradient.addColorStop(0.4, p.color);
gradient.addColorStop(1, "black");
ctx.fillStyle = gradient;
// NOTE: Was missing the 4th parameter, needed for node-openvg-canvas
ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2, false);
ctx.fill();
// Apply the velocity
p.x += p.vx;
p.y += p.vy;
// To prevent the balls from moving out of the canvas
if ( p.x < -50 ) p.x = W + 50;
if ( p.y < -50 ) p.y = H + 50;
if ( p.x > W + 50 ) p.x = -50;
if ( p.y > H + 50 ) p.y = -50;
}
requestAnimationFrame( draw );
}
draw();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment