Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Arduino + potentiometer + particles
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>
http://www.youtube.com/watch?v=d5r5r7pHUZI
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment