A joystick powered kitten cube
Saturday, April 14th, 2012 at 4:29 pmAfter 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: gamepadapi, hacks, mosynchack