Tag Archives: as3

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

Posted in Graphics, Vector, motion | Also tagged , | Leave a comment

Summarize Contents of Array

By Zevan | July 24, 2009
CLICK HERE TO COPY
Actionscript:
  1. var a:Array = [true, true, true, false, false, true, true, true, false];
  2.  
  3. var counter:int = 0;
  4. var prev:Boolean;
  5. var summary:Array = [];
  6. for (var i:int = 1; i<a.length; i++){
  7.     prev = a[i - 1]
  8.     counter++;
  9.     if (prev != a[i]){
  10.         if (prev){
  11.             summary.push("true: "+ counter);
  12.         }else{
  13.             summary.push("false: "+ counter);
  14.         }
  15.         counter = 0;
  16.     }
  17. }
  18. summary.push(a[i-1].toString()+": "+ (counter+1));
  19.  
  20. trace(summary);
  21.  
  22. /** outputs:
  23. true: 3,false: 2,true: 3,false: 1
  24. */

This is a handy way to summarize the contents of an array of boolean values.

Posted in arrays, misc | Also tagged , | 8 Comments

Sphere of Squares

By Zevan | July 23, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 600, height = 600, backgroundColor=0x000000)]
  2. var squareNum:int  = 1000;
  3. var hw:Number = stage.stageWidth / 2;
  4. var hh:Number = stage.stageHeight / 2;
  5. // verts defines a single square
  6. var verts:Vector.<Number> = Vector.<Number>([-20, 0, 0, 20, 0, 0, 20, 0, 40, -20, 0, 40, -20, 0, 0]);
  7. var cmds:Vector.<int> = Vector.<int>([1,2,2,2,2]);
  8. var tempVerts:Vector.<Number> = new Vector.<Number>();
  9. var newVerts:Vector.<Number> = new Vector.<Number>();
  10. var pVerts:Vector.<Number> = new Vector.<Number>(10 * squareNum);
  11. var uv:Vector.<Number> = new Vector.<Number>(15 * squareNum);
  12. var vectors:Shape = new Shape();
  13. var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0x000000);
  14. addChild(new Bitmap(canvas));
  15. var blurred:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0x000000);
  16. var blur:BlurFilter = new BlurFilter(20,20,1);
  17.  
  18. var m:Matrix3D = new Matrix3D();
  19.  
  20. var radius:Number = 200;
  21. // duplicate the verts array a bunch of times
  22. // each time moving the square to a random place on the
  23. // circumference of a sphere
  24. for (var i:int = 0; i<squareNum; i++){
  25.     m.identity();
  26.     var s:Number = Math.random()*.5 + .5;
  27.     m.appendScale(s, s, s);
  28.     m.appendRotation(90,Vector3D.X_AXIS);
  29.     m.appendTranslation(0, 0, radius);
  30.     m.appendRotation(Math.random()*360,Vector3D.X_AXIS);
  31.     m.appendRotation(Math.random()*360,Vector3D.Y_AXIS);
  32.     m.appendRotation(Math.random()*360,Vector3D.Z_AXIS);
  33.     m.transformVectors(verts,tempVerts);
  34.     newVerts = newVerts.concat(tempVerts);
  35.     cmds = cmds.concat(Vector.<int>([1,2,2,2,2]));
  36. }
  37. newVerts.fixed = pVerts.fixed = uv.fixed = true;
  38. var dx:Number = 0, dy:Number = 0;
  39. var pnt:Point = new Point();
  40. addEventListener(Event.ENTER_FRAME, onLoop);
  41. function onLoop(evt:Event):void {
  42.        dx += (mouseX - dx) / 4;
  43.        dy += (mouseY - dy) / 4;
  44.        m.identity();
  45.        m.appendRotation(dx,Vector3D.Z_AXIS);
  46.        m.appendRotation(dy,Vector3D.X_AXIS);
  47.        m.appendTranslation(hw,hh, 0);
  48.        Utils3D.projectVectors(m, newVerts, pVerts, uv);
  49.        with(vectors.graphics){
  50.            clear();
  51.            beginFill(0xFFFFFF);
  52.            drawCircle(hw, hh, radius+10);
  53.            beginFill(0x000000);
  54.            drawPath(cmds, pVerts, GraphicsPathWinding.NON_ZERO);
  55.        }
  56.        canvas.fillRect(canvas.rect, 0x000000);
  57.        canvas.draw(vectors);
  58.        blurred.copyPixels(canvas, canvas.rect, pnt);
  59.        blurred.applyFilter(blurred,blurred.rect, pnt, blur);
  60.        canvas.draw(blurred, null, null, BlendMode.SCREEN);
  61. }

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

Posted in 3D, BitmapData, Vector | Also tagged , , | 12 Comments

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

Posted in BitmapData, bezier, functions, misc, motion | Also tagged , | 7 Comments