Archive for January 14th, 2009

Rolling a sphere with the keyboard

Wednesday, January 14th, 2009 | examples | Comments

Jim Foley pinged me and said he’s running a contest about creating a pv3d soccer ball:

http://madvertices.yuku.com/topic/11/master/1/?page=1

The contest made me think up this little example (make sure you click on the .swf to give it keyboard focus):


source

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import flash.ui.Keyboard;
 
	import org.papervision3d.core.math.Matrix3D;
	import org.papervision3d.core.math.Number3D;
	import org.papervision3d.lights.PointLight3D;
	import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
	import org.papervision3d.objects.primitives.Sphere;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")]
	public class RollingASphereWithTheKeyboard extends BasicView
	{
		private static const UP:Number3D = new Number3D(0, 1, 0);
 
		private var sphere:Sphere;
		private var velocity:Number3D = new Number3D();
		private var friction:Number = .98;
 
		private var isDown:Boolean = false;
		private var isUp:Boolean = false;
		private var isLeft:Boolean = false;
		private var isRight:Boolean = false;
 
		public function RollingASphereWithTheKeyboard()
		{
			//move camera up to look down on sphere
			camera.y = 300;
 
			//create a faux horizon line
			var whiteBackground:Sprite = new Sprite();
			whiteBackground.graphics.beginFill(0xeeeeee);
			whiteBackground.graphics.drawRect(0, 0, width, 140);
			whiteBackground.graphics.endFill();
			addChildAt(whiteBackground, 0);
 
			var light:PointLight3D = new PointLight3D();
			var flatShadeMaterial:FlatShadeMaterial = new FlatShadeMaterial(light, 0xcc0000, 0x222222);
			sphere = new Sphere(flatShadeMaterial, 100, 16, 8);
 
			scene.addChild(sphere);
			startRendering();
 
			stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
			stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);
		}
 
		private function keyDownHandler(event:KeyboardEvent):void
		{
			switch(event.keyCode)
			{
				case Keyboard.DOWN:
					isDown = true;
					break;
				case Keyboard.UP:
					isUp = true;
					break;
				case Keyboard.LEFT:
					isLeft = true;
					break;
				case Keyboard.RIGHT:
					isRight = true;
					break;
			}
		}
 
		private function keyUpHandler(event:KeyboardEvent):void
		{
			switch(event.keyCode)
			{
				case Keyboard.DOWN:
					isDown = false;
					break;
				case Keyboard.UP:
					isUp = false;
					break;
				case Keyboard.LEFT:
					isLeft = false;
					break;
				case Keyboard.RIGHT:
					isRight = false;
					break;
			}
		}
 
		override protected function onRenderTick(event:Event=null):void
		{
			if(isDown) velocity.z -= .5;
			if(isUp) velocity.z += .5;
			if(isLeft) velocity.x -= .5;
			if(isRight) velocity.x += .5;
 
			//gradually slow down velocity
			velocity.multiplyEq(friction);
 
			sphere.x += velocity.x;
			sphere.z += velocity.z;
 
			//where the ball is headed
			var distance:Number = Math.sqrt(velocity.x * velocity.x + velocity.z * velocity.z);
 
 			//Since the ball is rolling around back, forth, left, right
 			//it's rolling on the "XZ plane". Ignore the ball and think how
 			//the XZ plane would rotate around the y-axis (just like rotationY) 
 			//which is defined here as "UP". So you find the "cross" (the axis
 			//the ball will rotate around) by finding where the ball
 			//is heading and the axis the of the plane the ball is rolling on.
 			//I hope that makes sense :)
			var rotationAxis:Number3D = Number3D.cross(velocity, UP);
			rotationAxis.normalize();
 
			//create a matrix from the axis and the angle 
			var rotationMatrix:Matrix3D = Matrix3D.rotationMatrix(rotationAxis.x, rotationAxis.y, rotationAxis.z, distance/100);
 
 			//apply the rotation to the ball
			sphere.transform.calculateMultiply3x3(rotationMatrix, sphere.transform);
 
			super.onRenderTick(event);
		}
	}
}

Tags: ,

Search

Recommended Books

Speaking at FITC Toronto

 

January 2009
M T W T F S S
« Dec   Feb »
 1234
567891011
12131415161718
19202122232425
262728293031  

Preferred Video Tutorial Resolution

  • 1024x768 (53%, 85 Votes)
  • 1280x1024 (15%, 24 Votes)
  • 1920x1080 (15%, 24 Votes)
  • 800x600 (13%, 20 Votes)
  • 480x320 (4%, 6 Votes)
  • 640x480 (0%, 2 Votes)

Total Voters: 160

Loading ... Loading ...