I'm learning how to finger paint Leap Motion style.
A Pen by Jared Volpe on CodePen.
Created
December 25, 2013 07:25
-
-
Save plainspace/8120962 to your computer and use it in GitHub Desktop.
A Pen by Jared Volpe.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <body> | |
| <script src="//js.leapmotion.com/0.3.0-beta2/leap.js"></script> | |
| <canvas id="scene" width="1020" height="600"></canvas> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "compass" | |
| #scene | |
| display: block | |
| margin: 38px auto | |
| background-color: #FFEB94 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment