jblanche · July 19, 2012 17:11 · dragos199993 · Nov 27, 2017
diff --git a/button.js b/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();
  });
 });
diff --git a/index.html b/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>
diff --git a/Youtube Video b/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>