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);
path.style = {
    strokeColor: '#E4141B',
    strokeWidth: 20,
    strokeCap: 'round',
    fill: 'red'
};

  var max = 0;
  var min = 0;
  var threshold = 0.5;
  var newPos = new Point();

  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;
      }
  });