Category Archives: 3D

Parallax fp10

By Zevan | July 30, 2009

Actionscript:

[SWF(backgroundColor=0x000000, width = 800, height = 600)]
 
// this is a trick to keep the 3D texture quality up... 
// try setting it right off the bat and you'll notice that the
// Shapes look pixilated
setTimeout(function():void{ stage.quality="low"}, 500);
 
var matrix:Matrix = new Matrix();
matrix.createGradientBox(600, 600, 0, -450, -450);
 
var boxNum:int = 30;
var boxes:Array = [];
for (var i:int = 0; i<boxNum; i++) boxes[i] = makeBox();
 
var dx:Number = 0, dy:Number = 0;
onLoop();
addEventListener(Event.ENTER_FRAME, onLoop);
 
function onLoop(evt:Event=null):void {
    dx += (mouseX - dx) / 4;
    dy += (mouseY - dy) / 4;
    for (var i:int = 0; i<boxNum; i++){
        var box:Shape = boxes[i];
        box.z = 400 - i * 20;
        box.x = dx;
        box.y = dy;
        box.rotation = i + getTimer() / 10;
    }
}
 
function makeBox():Shape{
    var box:Shape = Shape(addChild(new Shape()));
    box.x = stage.stageWidth/2;
    box.y = stage.stageHeight/2;
    box.z = 1;
    with (box.graphics){
         beginGradientFill(GradientType.RADIAL, [0xFFFFFF, 0x333333], [1,1], [0, 255], matrix, SpreadMethod.PAD);
        drawRect(-100, -100, 200, 200);
        drawRect(-70, -70, 140, 140);
    }
    return box;
}

This snippet draws 30 gradient box shapes, gives them different z values and then moves them based on the mouse. This technique is good if you just want a few layers of parallax motion - I got carried away and you'll notice that if you add more boxes it begins to slow down pretty quick.

Have a look at the swf....

I first used this technique for this small interactive drawing...

Something interesting I noticed about fp10 3D DisplayObjects is that if you set the stage.quality to low right off the bat, the display objects look pixelated... but if you wait a few milliseconds, you end up with less pixelation and you still get a speed boost from the low quality - I think it must have something to do with the way the 3D textures are handled by the player...

Tomorrow I think I'll post a version of this that uses IGraphicsData and Utils.projectVectors()... should be a huge speed boost...

Also posted in motion | Tagged actionscript, as3, flash | 1 Comment

Spring PerspectiveProjection

By Zevan | July 27, 2009

CLICK HERE TO COPY

Actionscript:

var pointNum:int = 3000;
x = stage.stageWidth / 2;
y = stage.stageHeight / 2;
 
var verts:Vector.<Number>  = new Vector.<Number>();
var tVerts:Vector.<Number> = new Vector.<Number>();
var pVerts:Vector.<Number> = new Vector.<Number>();
var uv:Vector.<Number> = new Vector.<Number>();
var cmds:Vector.<int> = new Vector.<int>();
 
var index:int = 0;
var half:Number = pointNum / 20000;
for (var i:int = 0; i<pointNum; i+=3){
    verts[i] = 0.08 * Math.cos(i * Math.PI / 180);
    verts[i+1] = 0.08 * Math.sin(i * Math.PI / 180);
    verts[i+2] =  i / 10000 - half;
    cmds[index++] = 2;
}
cmds[0] = 1;
 
var proj:PerspectiveProjection = new PerspectiveProjection();
proj.fieldOfView = 45;
var projMat:Matrix3D = proj.toMatrix3D();
var m:Matrix3D = new Matrix3D();
var dx:Number = 0, dy:Number = 0;
addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
       m.identity();
       dx += (mouseX - dx) / 4;
       dy += (mouseY - dy) / 4;
       m.appendRotation(dy,Vector3D.X_AXIS);
       m.appendRotation(dx,Vector3D.Y_AXIS);
       m.appendTranslation(0,0,0.5);
       m.transformVectors(verts, tVerts);
       Utils3D.projectVectors(projMat, tVerts, pVerts, uv);
       graphics.clear();
       graphics.lineStyle(3,0x000000);
       graphics.drawPath(cmds, pVerts);
}

This snippet draws a spring shape in 3D with perspective. This is the first snippet where I've made use of the PerspectiveProjection class. So if your wondering how to add perspective to your Utils3D.projectVectors code... this is one way to do it...

Have a look at the swf...

Also posted in Graphics, Video, matrix | Tagged actionscript, as3, flash | 1 Comment

Quick Pixel Sphere

By Zevan | July 26, 2009

CLICK HERE TO COPY

Actionscript:

var pointNum:int = 20000;
var radius:int = 150;
 
var canvas:BitmapData = new BitmapData(400,400,false, 0x000000);
addChild(new Bitmap(canvas));
var verts:Vector.<Number>  = new Vector.<Number>();
var pVerts:Vector.<Number> = new Vector.<Number>();
var uv:Vector.<Number> = new Vector.<Number>();
 
for (var i:int = 0; i<pointNum; i+=3){
    var xp:Number = Math.random() * 400 - 200;
    var yp:Number = Math.random() * 400 - 200;
    var zp:Number = Math.random() * 400 - 200;
    var dist:Number = Math.sqrt(xp * xp + yp * yp + zp * zp);
    // normalize and scale x,y,z 
    verts[i] = xp / dist * radius;
    verts[i+1] = yp / dist * radius;
    verts[i+2] = zp / dist * radius;
}
 
var m:Matrix3D = new Matrix3D();
var dx:Number = 0, dy:Number = 0;
addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
       m.identity();
       dx += (mouseX - dx) / 4;
       dy += (mouseY - dy) / 4;
       m.appendRotation(dx, Vector3D.X_AXIS);
       m.appendRotation(dy, Vector3D.Y_AXIS);
       m.appendTranslation(200,200,0);
       Utils3D.projectVectors(m, verts, pVerts, uv);
       canvas.fillRect(canvas.rect, 0x000000);
       for (var i:int = 0; i<pVerts.length; i+=2){
         canvas.setPixel(pVerts[i], pVerts[i + 1], 0xFFFFFF);
       }
}

This snippet shows a quick way to randomly place a bunch of xyz coordinates on the surface of a sphere. I saw this trick in an OpenGL book a few years back - dug around my books but couldn't find it... If I find it I'll update this post.

The trick is achieved by normalizing the vector defined by each 3D coordinate...

Have a look at the swf...

Also posted in BitmapData, Math, matrix, setPixel | Tagged actionscript, as3, flash | 4 Comments

Sphere of Squares

By Zevan | July 23, 2009

CLICK HERE TO COPY

Actionscript:

[SWF(width = 600, height = 600, backgroundColor=0x000000)]
var squareNum:int  = 1000;
var hw:Number = stage.stageWidth / 2;
var hh:Number = stage.stageHeight / 2;
// verts defines a single square
var verts:Vector.<Number> = Vector.<Number>([-20, 0, 0, 20, 0, 0, 20, 0, 40, -20, 0, 40, -20, 0, 0]);
var cmds:Vector.<int> = Vector.<int>([1,2,2,2,2]);
var tempVerts:Vector.<Number> = new Vector.<Number>();
var newVerts:Vector.<Number> = new Vector.<Number>();
var pVerts:Vector.<Number> = new Vector.<Number>(10 * squareNum);
var uv:Vector.<Number> = new Vector.<Number>(15 * squareNum);
var vectors:Shape = new Shape();
var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0x000000);
addChild(new Bitmap(canvas));
var blurred:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0x000000);
var blur:BlurFilter = new BlurFilter(20,20,1);
 
var m:Matrix3D = new Matrix3D();
 
var radius:Number = 200;
// duplicate the verts array a bunch of times
// each time moving the square to a random place on the
// circumference of a sphere
for (var i:int = 0; i<squareNum; i++){
    m.identity();
    var s:Number = Math.random()*.5 + .5;
    m.appendScale(s, s, s);
    m.appendRotation(90,Vector3D.X_AXIS);
    m.appendTranslation(0, 0, radius);
    m.appendRotation(Math.random()*360,Vector3D.X_AXIS);
    m.appendRotation(Math.random()*360,Vector3D.Y_AXIS);
    m.appendRotation(Math.random()*360,Vector3D.Z_AXIS);
    m.transformVectors(verts,tempVerts);
    newVerts = newVerts.concat(tempVerts);
    cmds = cmds.concat(Vector.<int>([1,2,2,2,2]));
}
newVerts.fixed = pVerts.fixed = uv.fixed = true;
var dx:Number = 0, dy:Number = 0;
var pnt:Point = new Point();
addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
       dx += (mouseX - dx) / 4;
       dy += (mouseY - dy) / 4;
       m.identity();
       m.appendRotation(dx,Vector3D.Z_AXIS);
       m.appendRotation(dy,Vector3D.X_AXIS);
       m.appendTranslation(hw,hh, 0);
       Utils3D.projectVectors(m, newVerts, pVerts, uv);
       with(vectors.graphics){
           clear();
           beginFill(0xFFFFFF);
           drawCircle(hw, hh, radius+10);
           beginFill(0x000000);
           drawPath(cmds, pVerts, GraphicsPathWinding.NON_ZERO);
       }
       canvas.fillRect(canvas.rect, 0x000000);
       canvas.draw(vectors);
       blurred.copyPixels(canvas, canvas.rect, pnt);
       blurred.applyFilter(blurred,blurred.rect, pnt, blur);
       canvas.draw(blurred, null, null, BlendMode.SCREEN);
}

This snippet is similar to yesterdays post but the visual result is rather different. This one does a little more Matrix3D stuff resulting in a sphere made up entirely of squares. This is obscured by the size of the squares and the fact that they overlap and cut each other up. BitmapData a BlurFilter and a BlendMode give the entire thing a slight glow...

Have a look at the swf here...

Also posted in BitmapData, Vector | Tagged actionscript, as3, flash, fp10 | 12 Comments

Category Archives: 3D

Parallax fp10

Spring PerspectiveProjection

Quick Pixel Sphere

Sphere of Squares

Search

Pages

Recent Posts

Categories

Archives

RSS Feeds