Category Archives: motion

Flowing Leaves (optical illusion)


Saw this optical illusion today... figured I'd make a snippet to create a few variations on the illusion...

Actionscript:
  1. [SWF( backgroundColor=0x2E7999, width=780, height = 600) ]
  2.  
  3. var leafNum:Number = 375;
  4. var spacing:Number = 12;
  5. var cols:Number = 25;
  6. var hh:Number = stage.stageHeight / 2;
  7. var hw:Number = stage.stageWidth / 2;
  8.  
  9. for (var i:Number = 0; i<leafNum; i++){
  10.     var leaf:Shape = makeLeaf();
  11.     leaf.scaleX = leaf.scaleY = 0.25;
  12.     leaf.rotation = 90;
  13.     leaf.x = 50 + (i % cols) * (leaf.width + spacing);
  14.     leaf.y = 40 + int(i / cols) * (leaf.height + spacing);
  15.     var dx:Number = leaf.x - hw;
  16.     var dy:Number = leaf.y - hh;
  17.     leaf.rotation = Math.sqrt(dx * dx + dy * dy);
  18. }
  19.  
  20. function makeLeaf():Shape{
  21.     var leaf:Shape = Shape(addChild(new Shape()));
  22.     leaf.graphics.beginFill(0x9DC4D4);
  23.     scaleYcircle(leaf.graphics, 50, .65, false);
  24.     leaf.graphics.endFill();
  25.     leaf.graphics.lineStyle(2, 0x003366, 1, false, "none", CapsStyle.SQUARE, JointStyle.MITER);
  26.     scaleYcircle(leaf.graphics, 50, .65);
  27.     leaf.graphics.lineStyle(2, 0xFFFFFF, 1, false, "none", CapsStyle.SQUARE, JointStyle.MITER);
  28.     scaleYcircle(leaf.graphics, -50, .65);
  29.     return leaf;
  30. }
  31.  
  32.  
  33. // original circle function by senocular (www.senocular.com) from here http://www.actionscript.org/forums/showthread.php3?s=&threadid=30328
  34. // circle that can be scaled on the y axis
  35. function scaleYcircle(g:Graphics, r:Number, s:Number = 1, isHalf:Boolean=true):void {
  36.      
  37.     var c1:Number = r * (Math.SQRT2 - 1);
  38.     var c2:Number = r * Math.SQRT2 / 2;
  39.     var rs:Number = r * s, c1s:Number = c1 * s, c2s:Number = c2 * s;
  40.     var x_r:Number =  -r, y_r:Number = -rs, x_c2:Number =  -c2;
  41.     var y_c2:Number =  -c2s, x_c1:Number =  -c1, y_c1:Number =  -c1s
  42.     g.moveTo(r, 0), g.curveTo(r, c1s, c2, c2s);
  43.     g.curveTo(c1, rs, 0, rs), g.curveTo(x_c1,rs, x_c2, c2s);
  44.     g.curveTo(x_r, c1s, x_r, 0);
  45.     if (!isHalf){
  46.      g.curveTo(x_r,y_c1,x_c2,y_c2);
  47.      g.curveTo(x_c1,y_r,0,y_r), g.curveTo(c1,y_r,c2,y_c2);
  48.      g.curveTo(r,y_c1,r,0);
  49.     }
  50. }

Also posted in Graphics, Math, Vector, misc, pixel manipulation | Tagged , , , | 5 Comments

QuickFRIM

Actionscript:
  1. import com.actionsnippet.animation.*;
  2.  
  3. stage.frameRate = 60.0;
  4.  
  5. // args: main display object, Hz
  6. var frim:QuickFRIM = new QuickFRIM(this, 60.0);
  7.  
  8. // start QuickFRIM internal loop
  9. frim.start();
  10.  
  11. // listen for step and render
  12. frim.addEventListener(QuickFRIM.STEP, onStep);
  13. frim.addEventListener(QuickFRIM.RENDER, onRender);
  14.  
  15. // happes from 0 or more times per frame depending on your framerate and desired Hz
  16. function onStep(evt:Event):void {
  17.      //
  18. }
  19.  
  20. // happens once per frame after all STEP events have
  21. // been dispatched
  22. function onRender(evt:Event):void{
  23.      // number of times a step even was dispatched this frame
  24.      trace(frim.stepsPerFrame);
  25. }

I have been using this QuickFRIM class for the past few days and have been pretty happy with it. Being someone who still occasionally likes to roll their own AS animation... with Zeno's, Hooke's, Polar Coordinates etc... Having a simple solution for frame-rate independent motion is nice... especially for small games... I used to have a more complex technique for this that was significantly harder to maintain. The above is just the basic setup for using the class.

The most important part of the class is the Hz (Hertz) argument in the QuickFRIM constructor. This should be set to how many times you want your step event to be dispatched per second. Usually this would simply be set to your target fps... so if your swf fps is 30, you should probably pass 30 to the QuickFRIM constructor. If you were to have an fps of 30 and pass 60Hz to your constructor... the step event would consistently dispatch 2 times per frame. If you had an Hz of 10 and an fps of 30, your step even would only get triggered every three frames etc...

Here's a demo...

I should note that I spent some time looking at different FRIM implementations online and in the end I found this thread https://developer.playfirst.com/node/860 which my implementation is significantly based upon.

Here's the code for the class
Here you can download a zip of the class

... and here is some very quick documentation
QuickFRIM:

/*
@param main - the main timeline or other DisplayObject
@param hz - Hertz for he timeStep
*/
new QuickFRIM(main:DisplayObject, hz:Number = 60.0)

// dispatched every time a step even occurs
QuickFRIM.STEP

// dispatched after all step events have occurred at the end of the frame
QuickFRIM.RENDER

// start dispatching events
public function start();

// stop dispatching events
public function stop();

// 1.0 / Hertz
public var timeStep:Number;

// total number of time steps that have been dispatched
public var totalTimeSteps:Number=0;

// numer of step events dispatched this frame
public var stepsPerFrame:int=0;

// boolean to disable FRIM
public var disable:Boolean = false;

Posted in motion | Tagged , , | Leave a comment

Timebased Animation Idea (FRIM & QuickBox2D)

Actionscript:
  1. import com.actionsnippet.qbox.*;
  2.  
  3. // change the frame rate and test...
  4. stage.frameRate = 60;
  5.  
  6. [SWF(width = 800, height=600)]
  7.  
  8. var sim:QuickBox2D = new QuickBox2D(this);
  9.  
  10.  
  11. var circle:Shape = Shape(addChild(new Shape()));
  12. with(circle.graphics) beginFill(0), drawCircle(0,0,50);
  13. circle.x = 100, circle.y = 100;
  14.  
  15.  
  16. sim.start();
  17.  
  18. var startTime:Number;
  19. // delay the start a bit
  20. setTimeout(function():void {
  21.   startTime = getTimer();
  22.   sim.addEventListener(QuickBox2D.STEP, onTimeStep);
  23. }, 500);
  24.  
  25. function onTimeStep(evt:Event):void{
  26.    
  27.     circle.x += (600 - circle.x) / 12;
  28.    
  29.     if ((600 - circle.x) <1.5){
  30.         trace("frameRate: ", stage.frameRate);
  31.         trace("totalTime: ", getTimer() - startTime +" ms");
  32.         trace("totalTimeSteps: ", sim.totalTimeSteps);
  33.         sim.removeEventListener(QuickBox2D.STEP, onTimeStep);
  34.     }
  35. }

Note: This snippet requires QuickBox2D 1.0 or greater

Really not sure how I didn't think of doing this before last night... I realized that the simple FRIM code inside of QuickBox2D can be used to make any standard frame-based style ActionScript animation time-based. In this snippet I do a simple ease out one liner:

circle.x += (600 - circle.x) / 12;

Code like that on an enterFrame would run at different speeds depending on your framerate. However, if you run it on QuickBox2D's STEP event it runs independent of fram-erate. I'm obviously going to just wrap this up into it's own mini-library separate from QuickBox2D and do a more in depth post about it... but for now, this snippet just traces out the results. These are my results from my macbook pro dual 2.4 intel....

frameRate: 12
totalTime: 1165 ms
totalTimeSteps: 93

frameRate: 24
totalTime: 1162 ms
totalTimeSteps: 93

frameRate: 30
totalTime: 1166 ms
totalTimeSteps: 91

frameRate: 60
totalTime: 1167 ms
totalTimeSteps: 93

frameRate: 120
totalTime: 1168 ms
totalTimeSteps: 91

Anyway... will peel the FRIM code out of QuickBox2D and wrap it up in its own library sometime soon...

Posted in motion | Tagged , , | Leave a comment

drawTriangles() Cubes

Actionscript:
  1. private function addCube(xp:Number, yp:Number, zp:Number, w:Number, h:Number, leng:Number):void{
  2.             var hw:Number = w * 0.5;
  3.             var hh:Number = h * 0.5;
  4.             var hl:Number = leng * 0.5;
  5.             var xA:Number = xp - hw;
  6.             var xB:Number = hw + xp;
  7.             var yA:Number = yp - hh;
  8.             var yB:Number = hh + yp;
  9.             var zA:Number = zp - hl;
  10.             var zB:Number = hl + zp;
  11.             _verts.push(xA, yA, zA,
  12.                         xB, yA, zA,
  13.                         xA, yB, zA,
  14.                         xB, yB, zA,
  15.                         xA, yA, zB,
  16.                         xB, yA, zB,
  17.                         xA, yB, zB,
  18.                         xB, yB, zB);
  19.            
  20.             var index:int = _boxIndex * 8;
  21.             var i0:int = index, i1:int = index + 1, i2:int = index + 2;
  22.             var i3:int = index + 3,  i4:int = index + 4, i5:int = index + 5;
  23.             var i6:int = index + 6, i7:int = index + 7;
  24.             _indices.push(i0, i1, i2,
  25.                           i1, i3, i2,
  26.                           i6, i7, i4,
  27.                           i7, i5, i4,
  28.                           i1, i5, i3,
  29.                           i7, i3, i5,
  30.                           i4, i5, i0,
  31.                           i1, i0, i5,
  32.                           i2, i6, i0,
  33.                           i0, i6, i4,
  34.                           i2, i3, i6,
  35.                           i3, i7, i6);
  36.                          
  37.             _faces.push(new Face(), new Face(), new Face(),
  38.                         new Face(),  new Face(), new Face(),
  39.                         new Face(), new Face(), new Face(),
  40.                         new Face(), new Face(), new Face());
  41.             _uvts.push(Math.random(), Math.random(), 0,
  42.                        Math.random(), Math.random(), 0,
  43.                        Math.random(), Math.random(), 0,
  44.                        Math.random(), Math.random(), 0,
  45.                        Math.random(), Math.random(), 0,
  46.                        Math.random(), Math.random(), 0,
  47.                        Math.random(), Math.random(), 0,
  48.                        Math.random(), Math.random(), 0);
  49.             _boxIndex++;
  50.         }

Lately I've been posting large code snippets... so today I'm highlighting part of a larger snippet - The above code is the heart of a small experiment I created this morning. It sets up a cube for use with drawTraingles().

The rest of the code can be read here:
Cubes3D.as

Have a look at the swf here...


I also put it on wonderfl...

Also posted in 3D, Graphics, Vector, matrix | Tagged , , | 6 Comments

QuickBox2D addTimeStepSequence() Preview

Actionscript:
  1. import com.actionsnippet.qbox.*;
  2.  
  3. [SWF(width = 800, height = 600, backgroundColor = 0xFFFFFF, frameRate=60)]
  4.  
  5. // hide everything for 300 ms
  6. visible = false;
  7. setTimeout(function():void{ visible = true}, 300);
  8.  
  9. var canvas:MovieClip = MovieClip(addChild(new MovieClip()));
  10.  
  11. var sim:QuickBox2D = new QuickBox2D(canvas, {debug:true});
  12.  
  13. sim.setDefault({fillColor:0x666666, lineAlpha:0})
  14. sim.createStageWalls();
  15.  
  16. var boxA:QuickObject = makeLever(6 , 17.5, 9, "right", 0.7);
  17. var circleA:QuickObject = sim.addCircle({x:2, y:3, radius:0.5, mass:4});
  18. sim.addBox({x:15, y:12, width:2, height:0.5, density:0})
  19. var circleB:QuickObject = sim.addCircle({x:16, y:11, radius:0.5, mass:4, friction:0.2, fillColor:0});
  20. sim.addBox({x:20.5, y:12, width:2, height:0.3, angle:-0.6, restitution:4.6, density:0})
  21. var boxB:QuickObject = makeLever(20 , 17.5, 8, "right", 1);
  22. sim.addBox({x:9, y:9, width:2, height:0.5, density:0});
  23. var circleC:QuickObject = sim.addCircle({x:9, y:9, radius:0.5, mass:4, friction:0.2, fillColor:0});
  24. sim.addBox({x:7, y:12, width:2, height:0.5, angle:-0.3, density:0, restitution:2});
  25. sim.addBox({x:3, y:7, width:2, height:0.5, angle:Math.PI/2 - 0.22, density:0, restitution:3});
  26. sim.addBox({x:13, y:15, width:2, height:0.5, density:0, angle:0.3, restitution:1});
  27. sim.addBox({x:25.5, y:7, width:2, height:0.3, angle:-0.2, restitution:0.5, density:0})
  28. sim.addBox({x:26, y:10, width:1, height:1, density:0,restitution:0.3});
  29. sim.addBox({x:25, y:19, width:2, height:0.5, density:0, restitution:3.5, angle:-0.99});
  30. sim.addBox({x:1, y:17, width:0.3, height:2, density:0, angle:-0.15, restitution:0.999});
  31. sim.addBox({x:0.7, y:11, width:0.3, height:2, density:0, angle:-0.19, restitution:20})
  32. sim.addBox({x:0.4, y:11.5, width:1, height:0.3, density:0})
  33.  
  34. function makeLever(xp:Number, yp:Number, boxWidth:Number, dir:String, off:Number=0, hasBox:Boolean=true):QuickObject{
  35.     var angle:Number, xpos:Number, weight:QuickObject
  36.     if (dir == "right"){
  37.         angle = 0.43;
  38.         xpos = xp + boxWidth / 2 - off;
  39.     }else{
  40.         angle = -0.43;
  41.         xpos = xp - boxWidth / 2 + off;
  42.     }
  43.     if (hasBox){
  44.       weight = sim.addBox({x:xpos , y:yp, width:0.5, height:0.5, angle:angle, fillColor:0});
  45.     }
  46.     var plank:QuickObject = sim.addBox({x:xp, y:yp, width:boxWidth, height:0.5, angle:angle});
  47.     var fulcrum:QuickObject = sim.addPoly({x:xp, y:yp, verts:[[0,0, 1,2, -1,2]], density:0})
  48.     sim.addJoint({type:"revolute", a:plank.body, b:fulcrum.body, collideConnected:false});
  49.     return weight;
  50. }
  51.  
  52. sim.start();
  53.  
  54. // new feature, calls a function after a specific number of box2D timeSteps
  55. sim.addTimeStepSequence({time:70, callback:cam, args:[boxA]},
  56.                         {time:150, callback:cam, args:[circleB]},
  57.                         {time:200, callback:cam, args:[boxB, 1.3]},
  58.                         {time:580, callback:cam, args:[circleC]},
  59.                         {time:700, callback:cam, args:[circleC, 1.1]},
  60.                         {time:810, callback:cam, args:[boxB, 1.4]},
  61.                         {time:870, callback:cam, args:[boxB, 3]},
  62.                         {time:890, callback:cam, args:[boxB, 1.1]},
  63.                         {time:1200,callback:cam, args:[boxB, 1]});
  64.  
  65. // set values for matrix pan and zoom
  66. function cam(quickObj:QuickObject, scale:Number=-1):void{
  67.     currQuick = quickObj;
  68.     if (scale != -1){
  69.         scaleDest = scale;
  70.     }
  71. }                                
  72.                
  73. // matrix pan and zoom
  74. var scale:Number = 1;
  75. var scaleDest:Number = 1.2;
  76. var down:Boolean = false;
  77. var dx:Number = 0, dy:Number = 0, time:Number = 0;
  78. var currQuick:QuickObject = circleA;
  79. addEventListener(Event.ENTER_FRAME, onLoop);
  80. function onLoop(evt:Event):void {
  81.    scale += (scaleDest - scale) / 8;
  82.    dx += (currQuick.x*30 - dx) / 8;
  83.    dy += (currQuick.y*30 - dy) / 8;
  84.    // matrix zoom/pan
  85.     var m:Matrix = canvas.transform.matrix;
  86.    m.identity();
  87.    m.translate(-dx,-dy);
  88.    m.scale(scale, scale);
  89.    m.translate(dx,dy);
  90.    canvas.transform.matrix = m;
  91. }

This is a preview of an upcoming feature for the QuickBox2D 1.0 release. It shows how addTimeStepSequence() is going to work. QuickBox2D 1.0 will have an internal timer counting the number of world steps that Box2D has taken. This is really useful for sequencing in conjunction with QuickBox2D's default FRIM (framerate independent motion).

This snippet uses addTimeStepSequence() to move a 2D camera around the simulation (from yesterdays post) - the camera pans and zooms... If you'd like to use addTimeStepSequence() simply replace your QuickBox2D.as file with this updated one:

I plan to release QuickBox2D 1.0 on monday - so I didn't think it made sense to do alpha 110 just for this one change...


Have a look at the swf....

Also posted in Box2D, QuickBox2D | Tagged , , , | 1 Comment

QuickBox2D Vaguely Goldberg-esque

Actionscript:
  1. import com.actionsnippet.qbox.*;
  2. import Box2D.Common.Math.*;
  3. import Box2D.Collision.Shapes.*;
  4.  
  5. [SWF(width = 800, height = 600, backgroundColor = 0xFFFFFF, frameRate=60)]
  6.  
  7. // hide everything for 300 ms
  8. visible = false;
  9. setTimeout(function():void{ visible = true}, 300);
  10.  
  11. var sim:QuickBox2D = new QuickBox2D(this, {debug:false});
  12.  
  13. sim.setDefault({fillColor:0x666666, lineAlpha:0})
  14. sim.createStageWalls();
  15.  
  16. makeLever(6 , 17.5, 9, "right", 0.7);
  17.  
  18. var circleA:QuickObject = sim.addCircle({x:2, y:3, radius:0.5, mass:4});
  19.  
  20. sim.addBox({x:15, y:12, width:2, height:0.5, density:0})
  21.  
  22. sim.addCircle({x:16, y:11, radius:0.5, mass:4, friction:0.2, fillColor:0});
  23.  
  24. sim.addBox({x:20.5, y:12, width:2, height:0.3, angle:-0.6, restitution:4.6, density:0})
  25.  
  26. makeLever(20 , 17.5, 8, "right", 1);
  27.  
  28. sim.addBox({x:9, y:9, width:2, height:0.5, density:0});
  29.  
  30. sim.addCircle({x:9, y:9, radius:0.5, mass:4, friction:0.2, fillColor:0});
  31.  
  32. sim.addBox({x:7, y:12, width:2, height:0.5, angle:-0.3, density:0, restitution:2});
  33.  
  34. sim.addBox({x:3, y:7, width:2, height:0.5, angle:Math.PI/2 - 0.22, density:0, restitution:3});
  35.  
  36. sim.addBox({x:13, y:15, width:2, height:0.5, density:0, angle:0.3, restitution:1});
  37.  
  38. sim.addBox({x:25.5, y:7, width:2, height:0.3, angle:-0.2, restitution:0.5, density:0})
  39.  
  40. sim.addBox({x:26, y:10, width:1, height:1, density:0,restitution:0.3});
  41.  
  42. sim.addBox({x:25, y:19, width:2, height:0.5, density:0, restitution:3.5, angle:-0.99});
  43.  
  44. sim.addBox({x:1, y:17, width:0.3, height:2, density:0, angle:-0.15, restitution:0.999});
  45.  
  46. sim.addBox({x:0.7, y:11, width:0.3, height:2, density:0, angle:-0.19, restitution:20})
  47.  
  48. sim.addBox({x:0.4, y:11.5, width:1, height:0.3, density:0})
  49.  
  50. function makeLever(xp:Number, yp:Number, boxWidth:Number, dir:String, off:Number=0, hasBox:Boolean=true):QuickObject{
  51.     var angle:Number, xpos:Number, weight:QuickObject
  52.     if (dir == "right"){
  53.         angle = 0.43;
  54.         xpos = xp + boxWidth / 2 - off;
  55.     }else{
  56.         angle = -0.43;
  57.         xpos = xp - boxWidth / 2 + off;
  58.     }
  59.    
  60.     if (hasBox){
  61.       weight = sim.addBox({x:xpos , y:yp, width:0.5, height:0.5, angle:angle, fillColor:0});
  62.     }
  63.  
  64.     var plank:QuickObject = sim.addBox({x:xp, y:yp, width:boxWidth, height:0.5, angle:angle});
  65.     var fulcrum:QuickObject = sim.addPoly({x:xp, y:yp, verts:[[0,0, 1,2, -1,2]], density:0})
  66.     sim.addJoint({type:"revolute", a:plank.body, b:fulcrum.body, collideConnected:false});
  67.     return weight;
  68. }
  69.  
  70. sim.start();

Just playing around with QuickBox2D and brainstorming about a few features for the first non-alpha release. If you have any feature suggestions, please feel free to leave them in the comments of this post (see the end of this post for a list features to come in QuickBox2D 1.0).


Have a look at the swf...

Upcoming Features for QuickBox2D
Simplified collision detection - will hopefully be something like hitTest for QuickObject instances.

QuickBox2D.totalTimeSteps - variable that keeps track of how many times b2World.Step() was called - useful for simple sequencing.

QuickBox2D.addTimeStepEvent(callAt:Number, callback:Function) - calls a function when QuickBox2D.totalTimeSteps is equal to the callAt value.

QuickBox2D.stepEvent - an event dispatched every time b2World.Step() is called.

New Renderer [probably not for 1.0 release]
I've been toying with the idea of creating a new renderer for QuickBox2D. Currently all rigid bodies are DisplayObjects... this is great if you plan on skinning all your rigid bodies, but if you just have flat colors it is slower than debug draw - also, debug draw mode could be optimized a good deal. So I may create a simpler, faster renderer that draws to one Graphics instance (like debug draw mode) - but abides by QuickBox2D's simple rendering params like lineColor, fillColor, lineAlpha etc...

I also need to decide how to skin the rest of the joints, currently skins only work for distance joints...

Also posted in Box2D, QuickBox2D | Tagged , , , , | 4 Comments

Matrix Zoom and Pan

Actionscript:
  1. [SWF(width=600, height=600, frameRate=30)]
  2. var sw:Number = stage.stageWidth;
  3. var sh:Number = stage.stageHeight;
  4.  
  5. var s:Shape = Shape(addChild(new Shape()));
  6.  
  7. var scale:Number = 1;
  8. var scaleDest:Number = 1;
  9. var down:Boolean = false;
  10. var dx:Number = 0, dy:Number = 0, time:Number = 0;
  11.  
  12. buttonMode = true;
  13.  
  14. addInstructions();
  15. vectorTexture();
  16.  
  17. stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
  18. stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
  19. addEventListener(Event.ENTER_FRAME, onLoop);
  20.  
  21. function addInstructions():void{
  22.     var instruct:Sprite = Sprite(addChild(new Sprite()));
  23.     with (instruct.graphics) beginFill(0x666666), drawRect(0,0,270, 30);
  24.     instruct.x = instruct.y = 20;
  25.     var txt:TextField = TextField(instruct.addChild(new TextField()));
  26.     txt.defaultTextFormat = new TextFormat("Verdana", 11);
  27.     txt.x = txt.y = 5;
  28.     txt.selectable = false;
  29.     with (txt) textColor = 0xFFFFFF, autoSize = "left", text = "Click and hold to zoom, move mouse to pan";
  30. }
  31.  
  32. function vectorTexture():void{
  33.     var cols:Vector.<uint> = Vector.<uint>([0xFFFFFF, 0x000000]);
  34.     var rnd:Vector.<Number> = new Vector.<Number>(6, true);
  35.    
  36.     for(var i:int = 0 ; i<50; i++){
  37.         with(s.graphics){
  38.             lineStyle(Math.random() * 50 + 2, cols[int(Math.random()*cols.length)]);
  39.             drawCircle(Math.random() * sw, Math.random() * sh, 10 + Math.random() * Math.random() * 400);
  40.         }
  41.     }
  42.     s.graphics.lineStyle(20, 0xCCCCCC);
  43.     s.graphics.drawRect(0, 0,sw, sh);
  44. }
  45.  
  46. function onDown(evt:MouseEvent):void{ down = true; }
  47. function onUp(evt:MouseEvent):void{ down = false; }
  48. function onLoop(evt:Event):void {
  49.    if (down){
  50.      scaleDest *= 1.05;  
  51.      time = 0;
  52.    }else{
  53.      time++;
  54.      // zoom out after 30 iterations
  55.      if (time == 30){
  56.          scaleDest = 1;  
  57.      }
  58.    }
  59.    scale += (scaleDest - scale) / 4;
  60.    if (scale> 10) scale = scaleDest = 10;
  61.    
  62.    dx += (mouseX - dx) / 4;
  63.    dy += (mouseY - dy) / 4;
  64.    if (dx <0) dx = 0;
  65.    if (dy <0) dy = 0;
  66.    if (dx> sw) dx = sw;
  67.    if (dy> sh) dy = sh;
  68.    
  69.    // matrix zoom/pan
  70.    var m:Matrix = s.transform.matrix;
  71.    m.identity();
  72.    m.translate(-dx,-dy);
  73.    m.scale(scale, scale);
  74.    m.translate(dx,dy);
  75.    s.transform.matrix = m;
  76. }

I haven't been by the computer much these last two weeks - been traveling. Going back to nyc tomorrow so I'll go back to posting once a day.

This snippet uses a transformation matrix to zoom in and pan a Sprite instance. For demo purposes I filled the sprite with a few circles - but you'd likely be using this with a vector image of a map, a floor plan or some other graphic that warrants zooming and panning.

Back around flash 7 (I think) before the Matrix class was introduced we used to have to use MovieClip nesting to achieve this effect.


Have a look at the swf...


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

globalToLocal() in 3D

Actionscript:
  1. [SWF(frameRate=60, backgroundColor=0x000000, width=500, height=500)]
  2. stage.quality = "medium";
  3. var frame:Sprite = Sprite(addChild(new Sprite()));
  4. with (frame.graphics) beginFill(0xCCCCCC), drawRect(-200, -200, 400, 400), endFill();
  5. frame.x = stage.stageWidth / 2;
  6. frame.y = stage.stageHeight / 2;
  7. frame.z = 100;
  8.  
  9. var canvas:Shape = Shape(frame.addChild(new Shape()));
  10. var msk:Shape = Shape(frame.addChild(new Shape()));
  11. with (msk.graphics) beginFill(0x00FF00), drawRect(-200, -200, 400, 400), endFill();
  12. canvas.mask = msk
  13.  
  14. var txt:TextField = TextField(addChild(new TextField()));
  15. txt.defaultTextFormat = new TextFormat("_sans", 12);
  16. txt.x = txt.y = 10;
  17. txt.textColor = 0xFFFFFF, txt.autoSize="left", txt.text = "Draw on the 3D plane...";
  18.  
  19. stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
  20. stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
  21. function onDown(evt:MouseEvent):void{
  22.     canvas.graphics.lineStyle(4, 0x000000);
  23.     var pnt:Point = frame.globalToLocal(new Point(mouseX, mouseY));
  24.     canvas.graphics.moveTo(pnt.x, pnt.y);
  25.     addEventListener(Event.ENTER_FRAME, onDraw);
  26. }
  27. function onUp(evt:MouseEvent):void{
  28.     removeEventListener(Event.ENTER_FRAME, onDraw);
  29. }
  30.  
  31. var t:Number = 0;
  32. addEventListener(Event.ENTER_FRAME, onLoop);
  33. function onLoop(evt:Event):void {
  34.     frame.rotationY = 35 * Math.sin(t);
  35.     frame.rotationX = 35 * Math.cos(t);
  36.     t+=0.02;
  37. }
  38.  
  39. function onDraw(evt:Event):void {
  40.         var pnt:Point = frame.globalToLocal(new Point(mouseX, mouseY));
  41.     canvas.graphics.lineTo(pnt.x, pnt.y);
  42. }

This demo shows that globalToLocal() works with 3D - saving us the trouble of doing some extra math if we want to draw on 3D display objects...

Have a look at the swf....


Was made aware of this trick by watching a video that kevinSuttle sent me via twitter. The video is an interview with Chris Nuuja (one of the flash player engineers).

Also posted in 3D, DisplayObject, Graphics, misc | Tagged , , | 3 Comments

QuickBox2D Unicycler

Actionscript:
  1. import com.actionsnippet.qbox.*;
  2. import Box2D.Common.Math.*;
  3. import Box2D.Dynamics.Joints.*;
  4. [SWF (backgroundColor=0x000000, width=700, height=600, frameRate=60)]
  5. var sim:QuickBox2D = new QuickBox2D(this, {debug:false,gravityY:10, renderJoints:false});
  6. sim.setDefault({fillColor:0xCC0000,lineAlpha:0});
  7. sim.createStageWalls();
  8.  
  9. for (var i:int = 0; i<20; i++){
  10.     sim.addCircle({x:1+i * 0.8, y:1, radius:0.1+Math.random()*0.1, restitution:0.3});
  11. }
  12.  
  13. sim.setDefault({fillColor:0xEFEFEF, fillAlpha:0.5, lineColor:0xFFFFFF, groupIndex:-2});
  14. var ancA:QuickObject = sim.addCircle({x:20, y:12, radius:0.5, density:0, skin:"none"});
  15. var ancB:QuickObject = sim.addCircle({x:20, y:2, radius:0.5, density:0, skin:"none"});
  16. var head:QuickObject = sim.addCircle({x:0, y:-0.6, radius:0.5});
  17. var neck:QuickObject = sim.addBox({x:0, y:1, width:0.5, height:2});
  18. var spindle:QuickObject = sim.addBox({x:0, y:3, width:0.1, height:2})
  19. spindle.userData.visible = false;
  20. var top:QuickObject = sim.addGroup({objects:[head, neck, spindle], x:10, y:5, fixedRotation:true});
  21. var upperLegA:QuickObject = sim.addBox({x:10, y:7.5, width:0.25, height:1.5});
  22. var lowerLegA:QuickObject = sim.addBox({x:10, y:9, width:0.25, height:1.5});
  23. var wheel:QuickObject = sim.addCircle({x:10, y:9, radius:1});
  24. var upperLegB:QuickObject = sim.addBox({x:10, y:7.5, width:0.25, height:1.5});
  25. var lowerLegB:QuickObject = sim.addBox({x:10, y:9, width:0.25, height:1.5});
  26. var upperArmA:QuickObject = sim.addBox({x:10.7, y:5.25, width:1.5, height:0.25});
  27. var lowerArmA:QuickObject = sim.addBox({x:11.8, y:5.25, width:1.2, height:0.25});
  28. var upperArmB:QuickObject = sim.addBox({x:9.5, y:5.25, width:1.5, height:0.25});
  29. var lowerArmB:QuickObject = sim.addBox({x:8.4, y:5.25, width:1.2, height:0.25});
  30. var anchor:b2Vec2 = new b2Vec2();
  31. function connect(a:QuickObject, b:QuickObject, lower:Number, upper:Number, offX:Number=0, offY:Number = 0):QuickObject{
  32.      var min:Number = Math.min(a.y, b.y);
  33.      var max:Number = Math.max(a.y, b.y);
  34.      anchor.y = min + (max - min) * 0.5 + offY;
  35.      min = Math.min(a.x, b.x);
  36.      max = Math.max(a.x, b.x);
  37.      anchor.x = min + (max - min) * 0.5 + offX;
  38.      return sim.addJoint({type:"revolute", a:a.body, b:b.body, x1:anchor.x, y1:anchor.y, lowerAngle:lower, upperAngle:upper});
  39. }
  40. sim.addJoint({type:"revolute", a:wheel.body, b:top.body, x1:wheel.x, y1:wheel.y});
  41. sim.addJoint({type:"revolute", a:lowerLegA.body, b:wheel.body, x1:lowerLegA.x, y1:lowerLegA.y + 0.7});
  42. sim.setDefault({enableLimit:true});
  43. connect(top, upperArmA, 0, 3, -.3, .1);
  44. connect(upperArmA, lowerArmA, -2.5, -1, 0, 0);
  45. connect(top, upperArmB, -3, 0, .3, .1);
  46. connect(upperArmB, lowerArmB, -2.5, -1, 0, 0);
  47. sim.addJoint({type:"distance", a:lowerArmA.body, b:ancA.body, frequencyHz:0.3});
  48. sim.addJoint({type:"distance", a:lowerArmB.body, b:ancB.body, frequencyHz:0.3});
  49. sim.setDefault({enableLimit:true});
  50. connect(top, upperLegA, -6.28, 6, 0, 0.8);
  51. connect(upperLegA, lowerLegA, .1, 6);
  52. wheel.angle = Math.PI;
  53. connect(top, upperLegB, -6.28, 6, 0, 0.8);
  54. connect(upperLegB, lowerLegB, .1, 6);
  55. sim.setDefault({enableLimit:false, type:"revolute"});
  56. sim.addJoint({a:lowerLegB.body, b:wheel.body, x1:lowerLegB.x, y1:lowerLegB.y + 0.7});
  57.  
  58. sim.start();
  59. sim.mouseDrag();
  60.  
  61. var sd:Number = 5, s:Number = 0, t:Number = 0;
  62. addEventListener(Event.ENTER_FRAME, function():void{
  63.     top.angle = Math.cos(t += 0.05) * 0.2;
  64.     if (top.x> 19) sd = -5
  65.     if (top.x <5) sd = 5;
  66.     s += (sd - s) / 8;
  67.     wheel.body.SetAngularVelocity(s);
  68. });

This chunk of code uses QuickBox2D to create a simple looking character riding a unicycle...

Have a look at the swf...

Also posted in Box2D, QuickBox2D | Tagged , , , , | 9 Comments

QuickBox2D Floating Walker

Actionscript:
  1. import com.actionsnippet.qbox.*;
  2. import Box2D.Common.Math.*;
  3. import Box2D.Dynamics.Joints.*;
  4.  
  5. [SWF (backgroundColor=0x000000, width=700, height=600, frameRate=60)]
  6.  
  7. var sim:QuickBox2D = new QuickBox2D(this, {gravityY:.2});
  8.  
  9. sim.setDefault({fillColor:0xEFEFEF, fillAlpha:0.5, lineColor:0xFFFFFF});
  10.  
  11. sim.createStageWalls();
  12.  
  13. for (var i:int = 0; i<20; i++){
  14.     sim.addCircle({x:1+i, y:1, radius:0.2, restitution:1});
  15. }
  16.  
  17. var head:QuickObject = sim.addCircle({x:0, y:0, radius:0.5});
  18. var neck:QuickObject = sim.addBox({x:0, y:1, width:0.5, height:2});
  19. var top:QuickObject = sim.addGroup({objects:[head, neck], x:10, y:5, fixedRotation:true});
  20.  
  21. var upperLegA:QuickObject = sim.addBox({x:10, y:7.5, width:0.25, height:1.5,groupIndex:-2});
  22. var lowerLegA:QuickObject = sim.addBox({x:10, y:9, width:0.25, height:1.5,groupIndex:-2});
  23.  
  24. var upperLegB:QuickObject = sim.addBox({x:10, y:7.5, width:0.25, height:1.5,groupIndex:-2});
  25. var lowerLegB:QuickObject = sim.addBox({x:10, y:9, width:0.25, height:1.5,groupIndex:-2});
  26.  
  27. var anchor:b2Vec2 = new b2Vec2();
  28. function connect(a:QuickObject, b:QuickObject, lower:Number, upper:Number, offX:Number=0, offY:Number = 0):QuickObject{
  29.      var min:Number = Math.min(a.y, b.y);
  30.      var max:Number = Math.max(a.y, b.y);
  31.      anchor.y = min + (max - min) * 0.5 + offY;
  32.      min = Math.min(a.x, b.x);
  33.      max = Math.max(a.x, b.x);
  34.      anchor.x = min + (max - min) * 0.5 + offX;
  35.      return sim.addJoint({a:a.body, b:b.body, x1:anchor.x, y1:anchor.y, lowerAngle:lower, upperAngle:upper});
  36. }
  37.  
  38. sim.setDefault({type:"revolute", collideConnected:false, enableLimit:true, enableMotor:true, maxMotorTorque:250, lineColor:0xFFFFFF});
  39.  
  40. var upperLegAJoint:QuickObject = connect(top, upperLegA, -1, 1, 0, 0.8);
  41. var upperLegBJoint:QuickObject = connect(top, upperLegB, -1, 1, 0, 0.8);
  42.  
  43. var lowerLegAJoint:QuickObject = connect(upperLegA, lowerLegA, -1, 1);
  44. var lowerLegBJoint:QuickObject = connect(upperLegB, lowerLegB, -1, 1);
  45.  
  46. sim.start();
  47. sim.mouseDrag();
  48.  
  49.  
  50. var j:b2RevoluteJoint;
  51. var t:Number = -Math.PI * 0.5;
  52. addEventListener(Event.ENTER_FRAME, onLoop);
  53. function onLoop(evt:Event):void {
  54.    
  55.     var s1:Number = 1*Math.sin(t);
  56.     var s2:Number = 1*Math.sin(t+Math.PI);
  57.     t+= 0.05;
  58.    
  59.     top.body.SetAngularVelocity(s1 * 0.25);
  60.    
  61.     j =  upperLegAJoint.joint as b2RevoluteJoint;
  62.     j.SetMotorSpeed(s1);
  63.    
  64.     j =  upperLegBJoint.joint as b2RevoluteJoint;
  65.     j.SetMotorSpeed(s2);
  66.      
  67.     j = lowerLegAJoint.joint as b2RevoluteJoint;
  68.     j.SetMotorSpeed(-s2);
  69.    
  70.     j = lowerLegBJoint.joint as b2RevoluteJoint;
  71.     j.SetMotorSpeed(-s1);
  72. }

Experimenting with primitive robot designs... this was just an improvised design - it looks like it may make sense to break out a pencil and some paper - or my wacom... to get something interesting...


Have a look at the swf...


Also posted in Box2D, QuickBox2D | Tagged , , , , | 1 Comment