jblanche/Youtube Video

## button.js
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();
  });
});

## index.html
<!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>

## Youtube Video
http://www.youtube.com/watch?v=MXEGLGmpCfo
	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>