quaternion

Tweening rotated planes to you

Sunday, January 11th, 2009 | examples | Comments

I just got back from a week long trip to Los Angeles for work. I wrote this on the plane on the way home. It’s kind of the opposite of the camera tweening thing I wrote a little while ago. I probably need to add some more comments, but I just wanted to post it before I get settled in and relax for a bit.


source

package
{
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
 
	import gs.TweenMax;
	import gs.easing.Cubic;
 
	import org.papervision3d.core.math.Quaternion;
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")]
	public class TweenPlanesToYou extends BasicView
	{
		[Embed(source="assets/1.jpg")]
		private var oneAsset:Class;
		[Embed(source="assets/2.jpg")]
		private var twoAsset:Class;
		[Embed(source="assets/3.jpg")]
		private var threeAsset:Class;
		[Embed(source="assets/4.jpg")]
		private var fourAsset:Class;
		[Embed(source="assets/5.jpg")]
		private var fiveAsset:Class;
		[Embed(source="assets/6.jpg")]
		private var sixAsset:Class;
 
		private var assets:Array = [oneAsset, twoAsset, threeAsset, fourAsset, fiveAsset, sixAsset];
 
		private static const NUM_PLANES:int = 40;
		private static const TWEEN_TIME:Number = 2;
 
		private var previousPlane:PlaneWithSlerp;
 
		private var startQuaternion:Quaternion = null;
		private var endQuaternion:Quaternion = null;
		private var currentQuaternion:Quaternion = null;
 
		public function TweenPlanesToYou()
		{
			setupPapervision3D();			
			setupBackground();
			setupPlanes();
 
			startRendering();
		}
 
		private function setupPapervision3D():void
		{
			viewport.interactive = true;
		}
 
		private function setupBackground():void
		{
			//the background is for the "click outside" events
			var backgroundSprite:Sprite = new Sprite();
 
			backgroundSprite.graphics.beginFill(0x000000);
			backgroundSprite.graphics.drawRect(0, 0, width, height);
			backgroundSprite.graphics.endFill();
 
			addChildAt(backgroundSprite, getChildIndex(viewport));
 
			backgroundSprite.addEventListener(MouseEvent.CLICK, backgroundSprite_clickHandler);
		}
 
		private function setupPlanes():void
		{
			for(var i:int = 0; i < NUM_PLANES; i++)
			{
				var bitmapMaterial:BitmapMaterial = createRandomBitmapMaterial();
				bitmapMaterial.interactive = true;
				bitmapMaterial.doubleSided = true;
				bitmapMaterial.precise = true;
 
				var plane:PlaneWithSlerp = new PlaneWithSlerp(bitmapMaterial);
 
				plane.x = Math.random() * 5000 - 2500;
				plane.y = Math.random() * 5000 - 2500;
				plane.z = Math.random() * 2500;
				plane.originalX = plane.x;
				plane.originalY = plane.y;
				plane.originalZ = plane.z;
				plane.rotationX = Math.random() * 180 -90;
				plane.rotationY = Math.random() * 180 -90;
				plane.rotationZ = Math.random() * 180 -90;
				plane.slerp = 0;
 
				scene.addChild(plane);
 
				singleRender();			
				plane.startQuaternion = Quaternion.createFromMatrix(plane.transform);	
				plane.endQuaternion = Quaternion.createFromMatrix(DisplayObject3D.ZERO.transform);	
 
				plane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, plane_objectClickHandler);
			}
		}
 
		private function createRandomBitmapMaterial():BitmapMaterial
		{
			//grab a bitmapAsset from the array (this is very ugly, but not important to the concept :) )
			var bitmap:Bitmap = Bitmap(new assets[Math.floor(Math.random() * assets.length)]);
			var bitmapMaterial:BitmapMaterial = new BitmapMaterial(bitmap.bitmapData);
 
			return bitmapMaterial;
		}
 
		private function plane_objectClickHandler(event:InteractiveScene3DEvent):void
		{
			tweenPreviousPlane();
 
			var plane:PlaneWithSlerp = PlaneWithSlerp(event.target);
			if(previousPlane != plane)
			{
				tweenForward(plane);
			}
			if(plane.isAtStartingPoint)
			{
				previousPlane = null; 
			}else
			{
				previousPlane = plane;
			}
		}
 
		private function tweenPreviousPlane():void
		{
			if(previousPlane && !previousPlane.isAtStartingPoint)tweenBack(previousPlane);
		}
		private function backgroundSprite_clickHandler(event:MouseEvent):void
		{
			tweenPreviousPlane();
		}
 
		private function tweenForward(plane:PlaneWithSlerp):void
		{
			plane.isAtStartingPoint = false;
 
			var tweenObject:Object = {};
			tweenObject.x = 0;
			tweenObject.y = 0;
			tweenObject.z = 0;
			tweenObject.slerp = 1;
 
			tweenObject.bezierThrough = [{x:-plane.x/4, y:-plane.y/4, z:700}];
			tweenObject.ease = Cubic.easeInOut;
 
			tweenObject.onUpdate = plane_updateCallback;
			tweenObject.onUpdateParams = [plane];
 
			TweenMax.to(plane, TWEEN_TIME, tweenObject);
		}
 
		private function tweenBack(plane:PlaneWithSlerp):void
		{
			plane.isAtStartingPoint = true;
 
			var tweenObject:Object = {};
			tweenObject.x = plane.originalX;
			tweenObject.y = plane.originalY;
			tweenObject.z = plane.originalZ;
			tweenObject.slerp = 0;
 
			tweenObject.bezierThrough = [{x:-plane.x/4, y:-plane.y/4, z:700}];
			tweenObject.ease = Cubic.easeInOut;
 
			tweenObject.onUpdate = plane_updateCallback;
			tweenObject.onUpdateParams = [plane];
 
			TweenMax.to(plane, TWEEN_TIME, tweenObject);
		}
 
		private function plane_updateCallback(plane:PlaneWithSlerp):void
		{
			plane.currentQuaternion = Quaternion.slerp(plane.startQuaternion, plane.endQuaternion, plane.slerp);
			plane.transform.copy3x3(plane.currentQuaternion.matrix);
		}
	}
}
 
//a helper class whose sole purpose is to add the slerp property
//I use this for the sake of brevity, but for production code
//you would move this into a new ActionScript file
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.core.proto.MaterialObject3D;
import org.papervision3d.core.math.Quaternion;
class PlaneWithSlerp extends Plane
{
	public var slerp:Number = 0;
	public var startQuaternion:Quaternion = new Quaternion();
	public var endQuaternion:Quaternion = new Quaternion();
	public var currentQuaternion:Quaternion = new Quaternion();
	public var originalX:Number = 0;
	public var originalY:Number = 0;
	public var originalZ:Number = 0;
	public var isAtStartingPoint:Boolean = true;
	public function PlaneWithSlerp(material:MaterialObject3D)
	{
		super(material);
	}
}

Tags: ,

Slerp Explorer

Tuesday, December 30th, 2008 | how it works | Comments

Slerp allows you to find the quickest path from one rotation to another rotation. In Papervision3D, slerp is a static function of the Quaternion class. The following code shows all the pieces you’ll need to use slerp in your projects:

//the values from your start axis and rotation (x,y,z,rotation)
startQuaternion = new Quaternion(0, 1, 0, 1);
//the values from your end axis and rotation
endQuaternion = new Quaternion(0, 1, 0, 1);
 
/* the next section would go in an update event, like Event.ENTER_FRAME or TimerEvent.TIMER */
 
//if slerp is 0, the rotation will reflect the startQuaternion
//if slerp is 1, the rotation will reflect the endQuaternion
//any value between 0 and 1 will be a percentage of the rotation
//between the start and end. For example, .5 would be halfway between
//start and end.
slerp = 0; //transition this up to 1, something like slerp += .01;
 
//the main quaternion that you copy the rotation from
quaternion = Quaternion.slerp(startQuaternion, endQuaternion, slerp);
//Copies the rotation from the main quaternion into the cube's matrix
cube.transform.copy3x3(quaternion.matrix);

To use this example:

  1. Move the axis and rotation sliders then click “set start”.
  2. Move the axis and rotation sliders and click “set end”
  3. Click “slerp from start to end” and you’ll see the cube rotate from the start rotation to the end rotation.

Focus on how the cube is rotating and how you could use that in your projects. Don’t get distracted by the reference axis.

Tags: ,

Quaternion Explorer

Monday, December 29th, 2008 | how it works | Comments

The definition of Quaternion is a little more complex, but the use-case of a Quaternion is actually pretty easy to show. In this explorer, you’ll see how you define an axis with the sliders on the left then define the rotation around that axis with the slider on the right. This essentially shows you everything you need to create a Quaternion: an axis defined by three variables (x, y, z) and a rotation around that axis.

Please note that no matter what the axis is, if the rotation is zero, then the “Back” face of Cube looks straight at you. So try changing the axis sliders, scrub the rotation slider from 0 to 360 and back. Then change the axis sliders again, scrub from 0 to 360 again and you’ll notice how the rotation around the axis differs. Also, (0,0,0) isn’t an axis, so you can’t rotate around it :)

*update

Allow me to explain this a bit more. Here’s a few things to try to “orient” yourself :)

rotationX (x:1, y:0, z:0)

Move all the axis sliders to those values, then move the rotation slider from 0 – 360 and you’ll see your traditional rotationX (since it rotates around the X axis). You may be thinking to yourself, “Why do I need this? Why don’t I just use rotationX?” I would answer, “Because this way, you don’t limit yourself to just rotationX. You can define ANY rotation with these four numbers.” If you’ve ever tried to control a combination of rotationX, rotationY, and rotationZ at the same time, I’m sure you’ve run into difficulty.

Here are two other axes you’re familiar with:
rotationY (x:0, y:1, z:0)
rotationZ (x:0, y:0, z:1)

As a follow-up post, I’m working on a slerp explorer that will show you how to transition from any rotation to any other rotation which is where the power of Quaternions really shine.

As a final note, try leaving the rotation slider at 180 then adjusting the axis sliders. You will see the cube move at the same time as the axis, but it may look like it’s “lagging behind”. This effect comes from the cube adjusting itself to be rotated 180 around the axis. The cube is not following the axis in any way.

Don’t be distracted by the axis, it’s only there for reference. What’s important is the cube rotates around the axis.

Tags:

Carousel with proper rotation and reflection

Monday, December 1st, 2008 | examples | Comments

I’m going to go out on a limb and say that this post will be popular ;)


source

package
{
	import flash.display.Bitmap;
	import flash.events.Event;
	import flash.filters.BlurFilter;
 
	import org.papervision3d.core.effects.view.ReflectionView;
	import org.papervision3d.core.math.Quaternion;
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Plane;
 
	[SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")]
	public class ClickThenRotateCarousel extends ReflectionView
	{
		[Embed(source="assets/pic.jpg")]
		private var picAsset:Class;
 
		private const RADIUS:Number = 400;
		private const NUM_OF_PLANES:int = 9;
		private var carousel:DisplayObject3D = new DisplayObject3D();
 
		private var currentQuat:Quaternion = new Quaternion();		
		private var targetQuat:Quaternion = new Quaternion();
		private var slerp:Number = 0;
 
 
		public function ClickThenRotateCarousel()
		{
			viewportReflection.filters = [new BlurFilter(3,3,3)];
			viewport.interactive = true;
			surfaceHeight = -100; 
			camera.z = 800; //move camera to the front
 
			var pic:Bitmap = Bitmap(new picAsset());
 
			for(var i:int = 0; i < NUM_OF_PLANES; i++)
			{
				var material:BitmapMaterial = new BitmapMaterial(pic.bitmapData, true);
				material.doubleSided = true;
				material.interactive = true;
 
				var plane:Plane = new Plane(material, 100, 100);
				plane.rotationY = 360 / NUM_OF_PLANES * i;
				plane.moveForward(RADIUS);
 
				plane.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, objectOverHandler);
				plane.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, objectOutHandler);
				plane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, objectClickHandler);
 
				carousel.addChild(plane);
			}
 
			scene.addChild(carousel);
 
			addEventListener(Event.ENTER_FRAME, enterFrameHandler);
		}
 
		private function objectOverHandler(event:InteractiveScene3DEvent):void
		{
			viewport.buttonMode = true;
		}
 
		private function objectOutHandler(event:InteractiveScene3DEvent):void
		{
			viewport.buttonMode = false;
		}
 
		private function objectClickHandler(event:InteractiveScene3DEvent):void
		{
			var radians:Number = (carousel.rotationY - event.displayObject3D.rotationY) * Quaternion.DEGTORAD;
 
			slerp = 0;
			currentQuat = Quaternion.createFromMatrix(carousel.transform);
			targetQuat = Quaternion.createFromAxisAngle(0, 1, 0, radians);
		}
 
		private function enterFrameHandler(event:Event):void
		{
			slerp += (1 - slerp) * .05;
			var quat:Quaternion = Quaternion.slerp(currentQuat, targetQuat, slerp);
 
			carousel.transform = quat.matrix;
 
			singleRender();
		}
	}
}

Tags: , , , ,

Search

Recommended Books

Speaking at FITC Toronto

 

February 2012
M T W T F S S
« May    
 12345
6789101112
13141516171819
20212223242526
272829  

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 ...