PaperScript

by iros

HTML

<script src="https://raw.github.com/paperjs/paper.js/master/dist/paper.js"></script>
<canvas id="some-unique-id" resize keepalive="true" style='height: 200; width: 200;'></canvas>
<script>(function(){var s="script",n='\n',d=document,b=d.getElementsByTagName(s)[2].innerHTML.split(n);d.write('<'+s+' type="text/paperscript" canvas="' + document.getElementsByTagName('canvas')[0].id + '">'+b.slice(2,b.length-2).join(n)+'</'+s+'>')})()</script>

JavaScript

var path = new Path.Circle(new Point(100,100), 10), 
    newPos = new Point(),
    max = 0, 
    min = 0,
    threshold = 0.5;

path.style = {
    strokeColor: '#E4141B',
    strokeWidth: 20,
    strokeCap: 'round',
    fill: 'red'
};


function onFrame( event ) {
    path.position = newPos;
}

window.addEventListener( 'MozJoyAxisMove', function( event ) {  

    // Update the new position based on the current position
    // of the ball but increment/decrement it according to the
    // jostick value. Note: This is a very specific mapping to the
    // XBox wired controller. Also note that while there are
    // two joystick
    // console.log(event.axis);
    if ( event.axis !== 0 ) {
        newPos.y = path.position.y + event.value * 10;
    }
    else if ( event.axis !== 1 )  {
        newPos.x = path.position.x + event.value * 10;
    }
}, false);