Christian Heilmann

A joystick powered kitten cube

Saturday, April 14th, 2012 at 4:29 pm

After giving my talk “HTML5 and the near-future of the web” (screencast and slides) at the Mosync hackathon in Stockholm, Sweden I thought I should have a bit of fun using the Gamepad API with my trusty USB Competition Pro. The result is the joystick powered kitten cube:

All in all, I put a few old hacks and ideas together. The 3D cube transformation from a few months ago, Paul Hayes’ animated cube and a bit of Gamepad API magic:

var xAngle = 0,
    yAngle = 0,
    cube = document.querySelector('.cube');
 
window.addEventListener('MozGamepadAxisMove', function(e) { 
  if ( e.axis === 0 && e.value === 1 ) { yAngle += 90; }
  if ( e.axis === 0 && e.value === -1 ) { yAngle -= 90; }
  if ( e.axis === 1 && e.value === -1 ) { xAngle -= 90; }
  if ( e.axis === 1 && e.value === 1 ) { xAngle += 90; }
  cube.style.MozTransform = cube.style.webkitTransform =
  cube.style.msTransform = cube.style.oTransform = cube.style.Transform =
   "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";
}, false);

That was all that was needed. No kittens were harmed in the experiment.

Tags: , ,

Share on Twitter

My other work: