jblanche · July 19, 2012 22:20
diff --git a/1-potentiometre.js b/1-potentiometre.js
 var five = require('johnny-five'),
    io = require('socket.io').listen(8080),
    board, potentiometer;

 board = new five.Board();

 board.on("ready", function() {

  // Create a new `potentiometer` hardware instance.
  potentiometer = new five.Sensor({
    pin: "A0"
  });


  // "read" get the current reading from the potentiometer
  potentiometer.on("read", function( err, value ) {
    //console.log(value, this.normalized );
    board.emit('value', this.normalized);
  });
 });


 io.sockets.on('connection', function (socket) {
  board.on('value', function(val){
      socket.emit('value', {val: val});
  });
 });
diff --git a/index.html b/index.html
 <!DOCTYPE HTML>
 <!-- Based on https://github.com/sebleedelisle/JavaScript-PixelPounding-demos/blob/master/1_Particles/Particles4_0.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/ImageParticle.js"></script>
 		<script>
 			//This example inspired by a submission from one of my talks by Nic Daniel

 			// 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 = window.innerHeight - 50,
 				mouseVelX = 0,
 				mouseVelY = 0,
 				lastMouseX = mouseX,
 				lastMouseY = mouseY,
 				mouseDown = false,

 				canvas = document.createElement( 'canvas' ),
 				context = canvas.getContext( '2d' ),

 			// particle variables
 				particles = [],
 				MAX_PARTICLES = 200,
 				particleImage = new Image(),
                value;

 			particleImage.src = 'img/ParticleCyan.png';


 			function init() {

 				// CANVAS SET UP

 				document.body.appendChild(canvas);
 				canvas.width = SCREEN_WIDTH;
 				canvas.height = SCREEN_HEIGHT;

                socket = io.connect('http://localhost', {port: 8080});
                socket.on('value', function(e){
                    value = e.val;
                });


 				//initMouseListeners();
 				setInterval(loop, 1000 / 30);

 			}


 			//

 			function loop() {

 				mouseVelX = mouseX-lastMouseX;
 				mouseVelY = mouseY-lastMouseY;
 				lastMouseX = mouseX;
 				lastMouseY = mouseY;

 				// make some particles

 				makeParticle(5);


 				// clear the canvas
 				context.fillStyle="rgb(0,0,0)";
 				//context.fillStyle="rgba(0,0,0,0.4)";
 			  	context.fillRect(0,0, SCREEN_WIDTH, SCREEN_HEIGHT);

 			  	// iteratate through each particle
 				for (i=0; i<particles.length; i++) {
 					var particle = particles[i];


 					particle.update();

 					// render it
 					particle.render(context);


 				}

 				// Keep taking the oldest particles away until we have
 				// fewer than the maximum allowed.

 				while(particles.length>MAX_PARTICLES)
 					particles.shift();


 			}

 			function makeParticle(particleCount) {

 				for(var i=0; i<particleCount;i++) {

 					// create a new particle in the middle of the stage
 					var particle = new ImageParticle(particleImage, mouseX, mouseY);

 					particle.velX = randomRange(value/-12,value/12);
 					particle.velY = randomRange(value/-4.25,0);

 					particle.size = randomRange(2,4);

 					particle.alpha = (value/255);
 					particle.gravity = 0.2;
 					particle.drag = 0.97;
 					particle.shrink = 0.96;
 					particle.shimmer = true;

 					particle.compositeOperation = 'lighter';

 					// add it to the array
 					particles.push(particle);

 				}

 			}

 			function initMouseListeners() {
 				document.addEventListener('mousemove', onMouseMove, false);
 				document.addEventListener( 'mousedown', onMouseDown, false );
 				document.addEventListener( 'mouseup', onMouseUp, false );
 			}

 			function onMouseMove( event ) {
 				event.preventDefault();
 				mouseX = event.clientX;
 				mouseY = event.clientY;
 			}

 			function onMouseDown(event) {
 				mouseDown = true;
 			}
 			function onMouseUp(event) {
 				mouseDown = false;
 			}



 		</script>
 	</body>
 </html>
diff --git a/Youtube Video b/Youtube Video
 http://www.youtube.com/watch?v=d5r5r7pHUZI
	var five = require('johnny-five'),
	io = require('socket.io').listen(8080),
	board, potentiometer;

	board = new five.Board();

	board.on("ready", function() {

	// Create a new `potentiometer` hardware instance.
	potentiometer = new five.Sensor({
	pin: "A0"
	});


	// "read" get the current reading from the potentiometer
	potentiometer.on("read", function( err, value ) {
	//console.log(value, this.normalized );
	board.emit('value', this.normalized);
	});
	});


	io.sockets.on('connection', function (socket) {
	board.on('value', function(val){
	socket.emit('value', {val: val});
	});
	});
	<!DOCTYPE HTML>
	<!-- Based on https://github.com/sebleedelisle/JavaScript-PixelPounding-demos/blob/master/1_Particles/Particles4_0.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/ImageParticle.js"></script>
	<script>
	//This example inspired by a submission from one of my talks by Nic Daniel

	// 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 = window.innerHeight - 50,
	mouseVelX = 0,
	mouseVelY = 0,
	lastMouseX = mouseX,
	lastMouseY = mouseY,
	mouseDown = false,

	canvas = document.createElement( 'canvas' ),
	context = canvas.getContext( '2d' ),

	// particle variables
	particles = [],
	MAX_PARTICLES = 200,
	particleImage = new Image(),
	value;

	particleImage.src = 'img/ParticleCyan.png';


	function init() {

	// CANVAS SET UP

	document.body.appendChild(canvas);
	canvas.width = SCREEN_WIDTH;
	canvas.height = SCREEN_HEIGHT;

	socket = io.connect('http://localhost', {port: 8080});
	socket.on('value', function(e){
	value = e.val;
	});


	//initMouseListeners();
	setInterval(loop, 1000 / 30);

	}


	//

	function loop() {

	mouseVelX = mouseX-lastMouseX;
	mouseVelY = mouseY-lastMouseY;
	lastMouseX = mouseX;
	lastMouseY = mouseY;

	// make some particles

	makeParticle(5);


	// clear the canvas
	context.fillStyle="rgb(0,0,0)";
	//context.fillStyle="rgba(0,0,0,0.4)";
	context.fillRect(0,0, SCREEN_WIDTH, SCREEN_HEIGHT);

	// iteratate through each particle
	for (i=0; i<particles.length; i++) {
	var particle = particles[i];


	particle.update();

	// render it
	particle.render(context);


	}

	// Keep taking the oldest particles away until we have
	// fewer than the maximum allowed.

	while(particles.length>MAX_PARTICLES)
	particles.shift();


	}

	function makeParticle(particleCount) {

	for(var i=0; i<particleCount;i++) {

	// create a new particle in the middle of the stage
	var particle = new ImageParticle(particleImage, mouseX, mouseY);

	particle.velX = randomRange(value/-12,value/12);
	particle.velY = randomRange(value/-4.25,0);

	particle.size = randomRange(2,4);

	particle.alpha = (value/255);
	particle.gravity = 0.2;
	particle.drag = 0.97;
	particle.shrink = 0.96;
	particle.shimmer = true;

	particle.compositeOperation = 'lighter';

	// add it to the array
	particles.push(particle);

	}

	}

	function initMouseListeners() {
	document.addEventListener('mousemove', onMouseMove, false);
	document.addEventListener( 'mousedown', onMouseDown, false );
	document.addEventListener( 'mouseup', onMouseUp, false );
	}

	function onMouseMove( event ) {
	event.preventDefault();
	mouseX = event.clientX;
	mouseY = event.clientY;
	}

	function onMouseDown(event) {
	mouseDown = true;
	}
	function onMouseUp(event) {
	mouseDown = false;
	}



	</script>
	</body>
	</html>