Category Archives: motion

Parallax fp10

By Zevan | July 30, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(backgroundColor=0x000000, width = 800, height = 600)]
  2.  
  3. // this is a trick to keep the 3D texture quality up...
  4. // try setting it right off the bat and you'll notice that the
  5. // Shapes look pixilated
  6. setTimeout(function():void{ stage.quality="low"}, 500);
  7.  
  8. var matrix:Matrix = new Matrix();
  9. matrix.createGradientBox(600, 600, 0, -450, -450);
  10.  
  11. var boxNum:int = 30;
  12. var boxes:Array = [];
  13. for (var i:int = 0; i<boxNum; i++) boxes[i] = makeBox();
  14.  
  15. var dx:Number = 0, dy:Number = 0;
  16. onLoop();
  17. addEventListener(Event.ENTER_FRAME, onLoop);
  18.  
  19. function onLoop(evt:Event=null):void {
  20.     dx += (mouseX - dx) / 4;
  21.     dy += (mouseY - dy) / 4;
  22.     for (var i:int = 0; i<boxNum; i++){
  23.         var box:Shape = boxes[i];
  24.         box.z = 400 - i * 20;
  25.         box.x = dx;
  26.         box.y = dy;
  27.         box.rotation = i + getTimer() / 10;
  28.     }
  29. }
  30.  
  31. function makeBox():Shape{
  32.     var box:Shape = Shape(addChild(new Shape()));
  33.     box.x = stage.stageWidth/2;
  34.     box.y = stage.stageHeight/2;
  35.     box.z = 1;
  36.     with (box.graphics){
  37.          beginGradientFill(GradientType.RADIAL, [0xFFFFFF, 0x333333], [1,1], [0, 255], matrix, SpreadMethod.PAD);
  38.         drawRect(-100, -100, 200, 200);
  39.         drawRect(-70, -70, 140, 140);
  40.     }
  41.     return box;
  42. }

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 3D | Tagged , , | 1 Comment

Wave Trick

By Zevan | July 26, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=800, height=600)]
  2. var dupes:int = 5
  3. var pntNum:int = 180;
  4.  
  5. var hh:Number = stage.stageHeight / 2;
  6. var points:Vector.<Number> = new Vector.<Number>();
  7. var vel:Vector.<Number> = new Vector.<Number>();
  8. var cmds:Vector.<int> = new Vector.<int>();
  9. var vectors:Vector.<Shape> = new Vector.<Shape>();
  10.  
  11. for (var i:int = 0; i<dupes; i++){
  12.     vectors[i] = Shape(addChildAt(new Shape(),0));
  13.     vectors[i].x = 10 * i;
  14.     vectors[i].y = -10 * i;
  15. }
  16. var index:int = 0;
  17. for (i = 0; i<pntNum; i++){
  18.     points[index++] = 10 + i * 4;
  19.     points[index++] = hh;
  20.     cmds[i] = 2;
  21.     vel[i] = 0;
  22. }
  23. cmds[0] = 1;
  24. addEventListener(Event.ENTER_FRAME, onLoop);
  25. function onLoop(evt:Event):void {  
  26.    index = 1;
  27.    points[index] += (mouseY - points[index]) / 12;
  28.    for (var i:int = 3; i<points.length; i+=2){
  29.          points[i] += vel[index];
  30.          vel[index] += ((points[i] - points[i - 2]) * -0.16 - vel[index]) / 4;
  31.          index++;
  32.    }
  33.    for (i = 0; i<dupes; i++){
  34.        var c:uint =  255 - 255 / i;
  35.        with (vectors[i].graphics){
  36.            clear();
  37.            lineStyle(0,c <<16 | c <<8 | c);
  38.            drawPath(cmds, points);
  39.        }
  40.    }
  41. }

This snippet uses elasticity to create an interesting wave effect. I first stumbled upon this technique back in my director days...


Have a look at the swf here...

Also posted in Graphics, Vector | Tagged , , | Leave a comment

Recursive 2D Structure

By Zevan | July 21, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 600, height = 700, frameRate=24)]
  2. var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF);
  3. addChild(new Bitmap(canvas));
  4.  
  5. var maxBranches:int = 600;
  6. var branches:int = 0;
  7. var startX:Number = 300
  8. makeBranch(startX,690,30,-60, 60);
  9.  
  10. function makeBranch(xp:Number, yp:Number, step:Number, min:Number, max:Number):void {
  11.     var vectors:Shape = Shape(addChild(new Shape()));
  12.     var cX:Number, cY:Number, eX:Number, eY:Number
  13.     var dcX:Number=xp, dcY:Number=yp, deX:Number=xp, deY:Number=yp;
  14.     var theta:Number = (min + Math.random()*(max-min) - 90) * Math.PI / 180;
  15.     cX = xp + step * Math.cos(theta);
  16.     cY = yp + step * Math.sin(theta);
  17.     theta = (min + Math.random()*(max-min)-90) * Math.PI / 180;
  18.     eX = cX + step * Math.cos(theta);
  19.     eY = cY + step * Math.sin(theta);
  20.     var run:Function = function():void{
  21.          dcX +=  (cX - dcX) / 2;
  22.          dcY +=  (cY - dcY) / 2;
  23.          deX +=  (eX - deX) / 8;
  24.          deY +=  (eY - deY) / 8;
  25.          with(vectors.graphics){
  26.               clear();
  27.               beginFill(0xFFFFFF,0.8);
  28.               lineStyle(0,0x000000,0.8);
  29.               moveTo(startX, yp);
  30.               lineTo(xp, yp);
  31.               curveTo(dcX, dcY, deX, deY);
  32.               lineTo(startX, deY);
  33.          }
  34.          if (Math.abs(dcX - cX) <1 && Math.abs(deX - eX) <1 && Math.abs(dcY - cY) <1 && Math.abs(deY - eY) <1){
  35.              canvas.draw(vectors);
  36.              removeChild(vectors);
  37.              if (branches <maxBranches){
  38.                  setTimeout(makeBranch, 10, deX, deY, step - Math.random(), -90, 90);
  39.                  branches++;
  40.                  if (int(Math.random()*2) == 1){
  41.                     setTimeout(makeBranch, 10, deX, deY, step - Math.random()*3, -90, 90);
  42.                     branches++;
  43.                  }
  44.              }
  45.          }else{
  46.              setTimeout(arguments.callee,  1000 / 24);
  47.          }
  48.     }();
  49. }

This snippet uses a technique similar to what you might use to create a recursive tree. A bit of additional logic is added for bezier branches, filled shapes and animation.

WARNING: may run slow on older machines

Have a look at the swf...

Also posted in BitmapData, bezier, functions, misc | Tagged , , | 7 Comments

Another Matrix.transformPoint()

By Zevan | July 17, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 628, height=500)]
  2. var trans:Matrix = new Matrix();
  3. var pnt:Point = new Point();
  4. x = stage.stageWidth / 2;
  5. y = stage.stageHeight / 2;
  6. addEventListener(Event.ENTER_FRAME, onLoop);
  7. function onLoop(evt:Event):void {
  8.     graphics.clear();
  9.     graphics.lineStyle(10, 0x000000, 1, false, LineScaleMode.NORMAL, CapsStyle.SQUARE);
  10.     pnt.x = 0;
  11.     pnt.y = 0;
  12.     trans.identity();
  13.     trans.translate(15,15);
  14.     trans.rotate(mouseX/10 * Math.PI / 180);
  15.     graphics.moveTo(pnt.x, pnt.y);
  16.     for (var i:int = 0; i<12; i++){
  17.         pnt = trans.transformPoint(pnt);
  18.         graphics.lineTo(pnt.x, pnt.y);
  19.     }
  20. }

I was thinking about processing and OpenGL today... I always really enjoyed using matrix stuff, working with the matrix stack, using push() and pop() etc... Understanding how to use matrices is pretty important when your doing advanced graphics in actionscript. If you haven't messed with matrices, this snippet is a good place to start. It uses Matrix.transformPoint() to draw a series of connected lines that are controlled by the x location of the mouse. Back before flash 8, this kind of thing was usually done using trig or MovieClip nesting...

I posted another snippet on this topic awhile back.

Also posted in matrix | 2 Comments