Created
October 29, 2013 12:28
-
-
Save nilliams/7213740 to your computer and use it in GitHub Desktop.
Simple particles example on the Raspberry Pi using node-openvg-canvas. Original demo code from thecodeplayer.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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