Skip to content

Instantly share code, notes, and snippets.

@jblanche
Created July 19, 2012 17:11
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save jblanche/3145395 to your computer and use it in GitHub Desktop.
Arduino + Websockets + particles
var five = require("johnny-five"),
bumper, led,
board = new five.Board(),
io = require('socket.io').listen(8080);
io.sockets.on('connection', function (socket) {
board.on('on', function(){
socket.emit('on');
});
board.on('off', function(){
socket.emit('off');
});
});
board.on("ready", function() {
bumper = new five.Button(2);
led = new five.Led(8);
bumper.on("down", function() {
board.emit('on');
led.on();
}).on("up", function() {
board.emit('off');
led.off();
});
});
<!DOCTYPE HTML>
<!-- based on https://github.com/sebleedelisle/JavaScript-PixelPounding-demos/blob/master/1_Particles/Particles5_0_DOM.html -->
<html lang="en">
<meta charset="utf-8">
<head>
<title>Simple 2D Particle system</title>
<script src="http://localhost:8080/socket.io/socket.io.js"></script>
<style type="text/css">
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body onload="init();">
<script src="js/DOMParticle.js"></script>
<script>
// screen size variables
var SCREEN_WIDTH = window.innerWidth,
SCREEN_HEIGHT = window.innerHeight,
HALF_WIDTH = window.innerWidth / 2,
HALF_HEIGHT = window.innerHeight / 2,
// mouse variables
mouseX = HALF_WIDTH,
mouseY = HALF_HEIGHT,
mouseDown = false,
// particle variables
particles = [],
spareParticles = [],
MAX_PARTICLES = 200,
// socketIO
socket,
active;
function init() {
// CANVAS SET UP
container = document.body;
socket = io.connect('http://localhost', {port: 8080});
socket.on('on', function(){
console.log('on');
active = true;
setInterval(loop, 1000 / 30);
});
socket.on('off', function(){
console.log('off');
active = false;
});
}
function loop()
{
// make some particles
if(active)
makeParticle(4);
// iteratate through each particle
for (i=0; i<particles.length; i++) {
var particle = particles[i];
// render it
particle.render();
// and then update. We always render first so particle
// appears in the starting point.
particle.update();
//Very simple collision detection with the floor
if(particle.posY>SCREEN_HEIGHT-100) {
particle.velY*=-0.98;
particle.posY = SCREEN_HEIGHT-100;
}
}
// Keep taking the oldest particles away until we have
// fewer than the maximum allowed.
while(particles.length>MAX_PARTICLES) {
particle = particles.shift();
container.removeChild(particle.domElement);
spareParticles.push(particle);
}
}
function makeParticle(particleCount) {
var particle;
for(var i=0; i<particleCount;i++) {
// create a new particle in the middle of the stage
if(spareParticles.length>0) {
// if one is already in the spare array, recycle it
particle = spareParticles.pop();
particle.posX = HALF_WIDTH;
particle.posY = HALF_HEIGHT;
} else {
// otherwise make a new one
particle = new DOMParticle(HALF_WIDTH, HALF_HEIGHT, "img/ParticleBlue.png", 64, 64);
}
container.appendChild(particle.domElement);
//particle.transform3D = true;
// give it a random x and y velocity
particle.velX = randomRange(-15,15);
particle.velY = randomRange(-30,0);
particle.size = randomRange(0.5,1.5);
particle.gravity = 1;
particle.drag = 0.98;
particle.shrink = 0.99;
// add it to the array
particles.push(particle);
}
}
</script>
</body>
</html>
http://www.youtube.com/watch?v=MXEGLGmpCfo
@ewgor
Copy link

ewgor commented Feb 25, 2015

and the arduino part?

@dragos199993
Copy link

dragos199993 commented Nov 27, 2017

The arduino part is there.. He initialized the board with new five.Board(); and then he creates the led on pin 8.
This is pretty straightforward. Thanks for this awesome work :) !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment