plainspace/Intro-to-finger-painting.markdown

## index.html
<html>
  <body>
    <script src="//js.leapmotion.com/0.3.0-beta2/leap.js"></script>
    <canvas id="scene" width="1020" height="600"></canvas>
  </body>
</html>

## Intro-to-finger-painting.markdown

      
    Raw
  

              Intro-to-finger-painting.markdown
            
          
    Intro to finger painting

I'm learning how to finger paint Leap Motion style.
A Pen by Jared Volpe on CodePen.
License.

  
## script.js
// Get the canvas and a 2-dimensional drawing context
var canvas = document.getElementById('scene');
var ctx = canvas.getContext('2d');
// Get the canvas width and height
var width = canvas.width, height = canvas.height;
// Name some colors
var red = '#FF4351', green = '#A5DE37', blue = '#1B9AF7';
// Create an array to save circle data
var circles = [];

// Draw a circle with the given parameters:
//   center: float array [x, y]
//   radius: float > 0
//   color: string "#RGB"
//   fill: boolean
function drawCircle(center, radius, color, fill) {
  ctx.beginPath();
  ctx.arc(center[0], center[1], radius, 0, 2*Math.PI);
  ctx.closePath();
  ctx.lineWidth = 4;
  // Choose whether to fill or outline the circle
  if (fill) {
    ctx.fillStyle = color;
    ctx.fill();
  } else {
    ctx.strokeStyle = color;
    ctx.stroke();
  }
}

// Transform Leap coordinates to canvas scene coordinates
function leapToScene(position) {
  return [width/2 + 4*position[0],
          height  - 4*position[1]];
}

// Create a Leap controller to access frame data
var controller = new Leap.Controller();

// Register a callback to process frame data
controller.on('frame', function(frame) {
  // Clear the canvas so we can repaint
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Draw target circles
  drawCircle([canvas.width/2, canvas.height/8], 20, red, true);
  drawCircle([canvas.width/2, canvas.height/8], 30, green);
  drawCircle([canvas.width/2, canvas.height/8], 40, blue);

  // Redraw circle trails
  if (circles.length > 200) {
    circles = circles.slice(-200);
  }
  for (var i = 0; i < circles.length; i++) {
    var circle = circles[i];
    drawCircle(circle.center, circle.radius, green, true);
  }

  // Draw finger tips
  for (var i = 0; i < frame.fingers.length; i++) {
    var finger = frame.fingers[i];
    var position = leapToScene(finger.tipPosition);
    var radius = Math.abs(finger.touchDistance) * 40;
    var touching = finger.touchZone == 'touching';
    drawCircle(position, radius, touching ? red : blue);
    if (touching) {
      circles.push({center: position, radius: radius});
    }
  }
});

// Connect the controller to start receiving data
controller.connect();

## style.sass
@import "compass"
#scene
  display: block
  margin: 38px auto
  background-color: #FFEB94
	<html>
	<body>
	<script src="//js.leapmotion.com/0.3.0-beta2/leap.js"></script>
	<canvas id="scene" width="1020" height="600"></canvas>
	</body>
	</html>
	// Get the canvas and a 2-dimensional drawing context
	var canvas = document.getElementById('scene');
	var ctx = canvas.getContext('2d');
	// Get the canvas width and height
	var width = canvas.width, height = canvas.height;
	// Name some colors
	var red = '#FF4351', green = '#A5DE37', blue = '#1B9AF7';
	// Create an array to save circle data
	var circles = [];

	// Draw a circle with the given parameters:
	// center: float array [x, y]
	// radius: float > 0
	// color: string "#RGB"
	// fill: boolean
	function drawCircle(center, radius, color, fill) {
	ctx.beginPath();
	ctx.arc(center[0], center[1], radius, 0, 2*Math.PI);
	ctx.closePath();
	ctx.lineWidth = 4;
	// Choose whether to fill or outline the circle
	if (fill) {
	ctx.fillStyle = color;
	ctx.fill();
	} else {
	ctx.strokeStyle = color;
	ctx.stroke();
	}
	}

	// Transform Leap coordinates to canvas scene coordinates
	function leapToScene(position) {
	return [width/2 + 4*position[0],
	height - 4*position[1]];
	}

	// Create a Leap controller to access frame data
	var controller = new Leap.Controller();

	// Register a callback to process frame data
	controller.on('frame', function(frame) {
	// Clear the canvas so we can repaint
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	// Draw target circles
	drawCircle([canvas.width/2, canvas.height/8], 20, red, true);
	drawCircle([canvas.width/2, canvas.height/8], 30, green);
	drawCircle([canvas.width/2, canvas.height/8], 40, blue);

	// Redraw circle trails
	if (circles.length > 200) {
	circles = circles.slice(-200);
	}
	for (var i = 0; i < circles.length; i++) {
	var circle = circles[i];
	drawCircle(circle.center, circle.radius, green, true);
	}

	// Draw finger tips
	for (var i = 0; i < frame.fingers.length; i++) {
	var finger = frame.fingers[i];
	var position = leapToScene(finger.tipPosition);
	var radius = Math.abs(finger.touchDistance) * 40;
	var touching = finger.touchZone == 'touching';
	drawCircle(position, radius, touching ? red : blue);
	if (touching) {
	circles.push({center: position, radius: radius});
	}
	}
	});

	// Connect the controller to start receiving data
	controller.connect();
	@import "compass"
	#scene
	display: block
	margin: 38px auto
	background-color: #FFEB94