Archive for November, 2007

Video Interview With Ralph Hauwert

When Mike and I were in Aarhus, Denmark we got a chance to interview Ralph Hauwert who is one of the developers working on Papervision3D. Ralph has been developing some of coolest new features that are coming in version 2.0. Particularly he has been doing some great work around shaders and bump mapping. Check out the interview to see what I mean. Click on the image below to watch the video which was posted to the on AIR video blog.

Lee

Papervision3D Spiral Carousel Example

Here is another Papervision3D example. This time I am extending a 3D carousel on the Y axis to create a spiral. There are 100 planes and the spiral rotates around 5 times. The Y of your mouse controls the Y of the spiral and the X position of the mouse controls the rotation. This could probably be useful for some type of list and it is at least somewhat different than the typical carousel.

[AS]import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;

// Create the container sprite
var con:Sprite = new Sprite();
con.x = stage.stageWidth * 0.5;
con.y = stage.stageHeight * 0.5;
addChild(con);

// Setup the scene
var scene:Scene3D = new Scene3D(con);
var cam:Camera3D = new Camera3D();
cam.zoom = 4;

// Create camera center
var pc:Plane = new Plane();
pc.visible = false;
cam.target = pc;

// Spiral properties
var num:int = 100;
var numOfRotations:Number = 5;
var anglePer:Number = ((Math.PI*2) * numOfRotations) / num;
var yPos:Number = 0;

// Create the planes
var pa:Array = new Array();
for(var i:uint=0; i {
var cm:BitmapAssetMaterial = new BitmapAssetMaterial("air");
cm.oneSide = false;
var p:Plane = new Plane(cm, 100, 100);
p.x = Math.cos(i * anglePer) * 550;
p.z = Math.sin(i * anglePer) * 550;
p.y = yPos += 50;
p.rotationY = (-i*anglePer) * (180/Math.PI) + 270;
scene.addChild(p);
}

// Create the render loop
addEventListener(Event.ENTER_FRAME, render);

var angle:Number = 0;

function render(e:Event):void
{
var dist:Number = ((stage.mouseY) - stage.stageHeight * 0.5) * -0.1;
var dist2:Number = ((stage.mouseX) - stage.stageWidth * 0.5) * 0.0005;
angle += dist2;
cam.x = Math.cos(angle) * 1000;
cam.z = Math.sin(angle) * 1000;
cam.y += dist;
if(cam.y < 369) cam.y = 369;
if(cam.y > 4755) cam.y = 4755;
pc.y = cam.y;
scene.renderCamera(cam);
}
[/as]

Another Papervision3D Proximity Grid Example

Here is another experiment in proximity with Papervision3D. This is essentially the exact reverse of the previous example. This time I am using the new Adobe AIR logo by way of a BitmapAssetMaterial. Now the planes are aligned properly unless your mouse gets too close. Happy Thanksgiving!

[AS]import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;
import caurina.transitions.*;

// Create the container sprite
var con:Sprite = new Sprite();
con.x = stage.stageWidth * 0.5 – 250;
con.y = stage.stageHeight * 0.5 + 250;
addChild(con);

// Setup the scene
var scene:Scene3D = new Scene3D(con);
var cam:Camera3D = new Camera3D();
cam.zoom = 11;

// Create the planes
var pa:Array = new Array();
for(var i:uint=0; i<10; i++)
{
for(var j:uint=0; j<10; j++)
{
var cm:BitmapAssetMaterial = new BitmapAssetMaterial(“air”);
cm.oneSide = false;
var p:Plane = new Plane(cm, 50, 50);
p.x = j * 50 + 25;
p.y = i * 50 + 25;
scene.addChild(p);
pa.push({pl:p, rotY:Math.random() * 360, rotZ:Math.random() * 360, z:Math.random() * 30000});
p.rotationY = pa[i].rotY;
p.rotationZ = pa[i].rotZ;
p.z = pa[i].z;
}
}

// Create the render loop
addEventListener(Event.ENTER_FRAME, render);

function render(e:Event):void
{
for(var i:uint; i {
if(checkDist(pa[i].pl))
{
Tweener.addTween(pa[i].pl, {rotationY:0, rotationZ:0, z:0, time:0.3});
}
else
{
Tweener.addTween(pa[i].pl, {rotationY:pa[i].rotY, rotationZ:pa[i].rotZ, z:pa[i].z, time:3});
}
}
scene.renderCamera(cam);
}

function checkDist(p:Plane):Boolean
{
var p1:Point = new Point(p.x, p.y);
var p2:Point = new Point(con.mouseX, -con.mouseY);
if(Point.distance(p1, p2) > 150)
{
return true;
}
else return false;
}

[/as]

Papervision3D Proximity Grid Example

Here is a little experiment that I created on the plane home from Switzerland. I am creating a grid of planes and then I’m using proximity to determine which planes align. If the mouse is a certain distance away it goes back into space at random positions and angles. I’m using Tweener to do the animation. Enjoy it!

[AS]import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;
import caurina.transitions.*;

// Create the container sprite
var con:Sprite = new Sprite();
con.x = stage.stageWidth * 0.5 – 300;
con.y = stage.stageHeight * 0.5 + 250;
addChild(con);

// Setup the scene
var scene:Scene3D = new Scene3D(con);
var cam:Camera3D = new Camera3D();
cam.zoom = 11;
cam.x = 250;
cam.y = 250;

// Create the planes
var pa:Array = new Array();
for(var i:uint=0; i<10; i++)
{
for(var j:uint=0; j<10; j++)
{
var cm:ColorMaterial = new ColorMaterial(Math.random()*0xFFFFFF);
cm.oneSide = false;
var p:Plane = new Plane(cm, 50, 50);
p.x = j * 50 + 25;
p.y = i * 50 + 25;
scene.addChild(p);
pa.push({pl:p, rotY:Math.random() * 360, rotZ:Math.random() * 360, z:Math.random() * 30000});
p.rotationY = pa[i].rotY;
p.rotationZ = pa[i].rotZ;
p.z = pa[i].z;
}
}

// Create the render loop
addEventListener(Event.ENTER_FRAME, render);

function render(e:Event):void
{
for(var i:uint; i {
if(checkDist(pa[i].pl))
{
Tweener.addTween(pa[i].pl, {rotationY:0, rotationZ:0, z:0, time:0.3});
}
else
{
Tweener.addTween(pa[i].pl, {rotationY:pa[i].rotY, rotationZ:pa[i].rotZ, z:pa[i].z, time:3});
}
}
scene.renderCamera(cam);
}

function checkDist(p:Plane):Boolean
{
var p1:Point = new Point(p.x, p.y);
var p2:Point = new Point(con.mouseX, -con.mouseY);
if(Point.distance(p1, p2) < 150)
{
return true;
}
else return false;
}
[/as]

Video Recap of Flash on the Beach

Below is my conference report from Flash on the Beach which took place earlier this week in Brighton, England. The speaker lineup was incredible and I wish I had the chance to stay for the entire conference. I’m in Brussels right now on the European User Group Tour. Beats by Trioptic of Sound Scientists. Enjoy!

Lee

Microsoft is Doing a Silverlight Bus Tour

Microsoft just announced that they are doing a cross-country bus tour for Silverlight. Just thought I would let everyone know about it as it promises to be a unique, one-of-a-kind tour :) . A group of developers are going on the road to reach out to the developer community across the United States. I have to admit that I am impressed by how much time Microsoft is spending thinking about how to reach out to the interactive design community.

Kudos to Microsoft!
Lee

Fully Interactive 3D Browser with AIR and Papervision3D

Today I put together a cool demo that features some of the best features of both AIR and Papervision3D. When you download and launch the application you will have a fully interactive 3D browser on your desktop. The browser doesn’t have any chrome and it slowly rotates on its Y axis. You will notice that the Ajax items on yahoo.com work nice and smooth when you roll over them.

When you launch the application you will need to wait until it loads the first page before you see anything. Once it displays you can click on links, type in form fields, and even select and copy text to the clipboard. These things will also work on the back of the browser as it rotates. All this was put together in Flash CS3 and extended an interactive example that John Grden put together. Now of course this application taxes your system’s resources as it is doing a ton of stuff. But this type of thing would be impossible with any other technology and it runs amazingly smooth on my machine. I’ll get the source up in the next couple of days.

Lee :-)