Category Archives: motion

Timebased Animation Idea (FRIM & QuickBox2D)

By Zevan | September 23, 2009
CLICK HERE TO COPY
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

By Zevan | September 13, 2009
CLICK HERE TO COPY
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

By Zevan | September 11, 2009
CLICK HERE TO COPY
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

By Zevan | September 10, 2009
CLICK HERE TO COPY
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