Monthly Archives: September 2009

Distance Spring

By Zevan | September 6, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(backgroundColor=0x222222, width=500, height=500)]
  2. var hsw:Number = stage.stageWidth / 2;
  3. var hsh:Number = stage.stageHeight / 2;
  4. var pointNum:int = 800
  5. var points3D:Vector.<Number> = new Vector.<Number>();
  6. var points3Dout:Vector.<Number> = new Vector.<Number>();
  7. var points2D:Vector.<Number> = new Vector.<Number>();
  8. var uvts:Vector.<Number> = new Vector.<Number>();
  9. var sorted:Array = [];
  10. var pnt:Point = new Point();
  11. var m:Matrix3D = new Matrix3D();
  12. var v:Vector3D = new Vector3D();
  13. for (var i:int = 0; i<pointNum; i++){
  14.     v.y = i * 0.7 - 300
  15.     var t =Math.random()*6.28;
  16.     v.x = 200 * Math.cos(i * 2 * Math.PI / 180);
  17.     v.z = 200 * Math.sin(i * 2 * Math.PI / 180);
  18.     v = m.transformVector(v);
  19.     points3D.push(v.x, v.y, v.z);
  20.     points2D.push(0,0);
  21.     uvts.push(0,0,0);
  22.     sorted.push(new Vector3D());
  23. }
  24. points3D.fixed = true;
  25. points2D.fixed = true;
  26. uvts.fixed = true;
  27. var p:PerspectiveProjection = new PerspectiveProjection();
  28. var proj:Matrix3D = p.toMatrix3D();
  29. var dx:Number = 0, dy:Number = 0;
  30. addEventListener(Event.ENTER_FRAME, onLoop);
  31. function onLoop(evt:Event):void {
  32.     var i:int, j:int;
  33.     dx += (mouseX - dx) / 4;
  34.     dy += (mouseY - dy) / 4;
  35.     m.identity();
  36.     m.appendRotation(getTimer() / 4, Vector3D.Y_AXIS);
  37.     m.transformVectors(points3D, points3Dout);
  38.    
  39.     m.identity();
  40.     m.appendRotation(dx, Vector3D.Z_AXIS);
  41.     m.appendRotation(dy, Vector3D.X_AXIS);
  42.     m.appendTranslation(0, 0, 1000);
  43.     m.append(proj);
  44.     Utils3D.projectVectors(m, points3Dout, points2D, uvts);
  45.     for (i = 0, j = 0; i<points2D.length; i+=2, j++){
  46.         sorted[j].x = points2D[i] + hsw;
  47.         sorted[j].y = points2D[i + 1] + hsh;
  48.         sorted[j].z = uvts[j * 3 + 2];
  49.     }
  50.     sorted.sortOn("z", Array.NUMERIC);
  51.     graphics.clear();
  52.     for(i = 0; i<sorted.length; i++){
  53.         var zpos:Number = sorted[i].z * 10000;
  54.         var c:int = zpos * 14;
  55.         graphics.beginFill(c <<16 | c <<8 | c);
  56.         graphics.drawCircle(sorted[i].x, sorted[i].y, zpos);
  57.         graphics.endFill();
  58.     }
  59. }

A variation on some recent posts... this snippet draws a rotating spring made up of 800 particles...

Have a look at the swf...


Posted in 3D, Graphics, Vector | Tagged , , | 3 Comments

QuickBox2D create() Method

By Zevan | September 5, 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 = 600, height = 600, backgroundColor = 0x000000, frameRate=60)]
  6.  
  7. var sim:QuickBox2D = new QuickBox2D(this);
  8.  
  9. sim.setDefault({fillColor:0x990000, lineColor:0xFFCC00});
  10. sim.createStageWalls();
  11.  
  12. var shapeTypes:Array = ["circle", "box", "poly"];
  13. var pnts:Array = [-1, 0, -0.5, -1, 0.5, -1, 1, 0, 0,0.5, -1, 0];
  14. var poly:Array=[];
  15. for (var i:int = 0; i<20; i++){
  16.     var xp:Number = 3 + Math.random()*15;
  17.     var yp:Number = 3 + Math.random()*15;
  18.     var w:Number = 0.2 + Math.random() * 2;
  19.     var h:Number = 0.2 + Math.random() * 2;
  20.     var r:Number = 0.2 + Math.random();
  21.     var ang:Number = Math.random() * Math.PI * 2;
  22.     var index:Number = int(Math.random()*shapeTypes.length);
  23.     var s:Number = 0.3 + Math.random()*0.7;
  24.     for (var j:int = 0; j<pnts.length; j++){
  25.          poly[j] = pnts[j] * s;
  26.     }
  27.     sim.setDefault({fillColor:int(Math.random()*255) <<16, lineColor:0xFFCC00});
  28.     sim.create(shapeTypes[index], {x:xp, y:yp, width:w, height:h, angle:ang, radius:r, points:poly, wireframe:false})
  29. }
  30.  
  31. sim.start();
  32. sim.mouseDrag();

Was showing someone QuickBox2D today and created this demo after showing them a few other posts. After writing this, I realized I hadn't posted about the QuickBox2D.create() method. Which is what addBox(), addRect(), addJoint() etc.. use internally. It takes a string for the type of QuickObject you'd like to create along with the standard params Object. Note that depending on the QuickObject type certain params will simply be ignored - for example radius is ignored when the type is "box" etc...


Have a look at the swf...

Posted in Box2D, QuickBox2D | Tagged , , , | 1 Comment

QuickBox2D groupIndex Platforms

By Zevan | September 4, 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 = 0x000000)]
  6.  
  7. var sim:QuickBox2D = new QuickBox2D(this);
  8.  
  9. sim.createStageWalls();
  10.  
  11. var boxNum:int = 8;
  12. var boxes:Array = [];
  13. var xp:Number, yp:Number, w:Number;
  14. for (var i:int = 0; i<boxNum; i++){
  15.     xp = 3 + Math.random() * 10;
  16.     yp = 4 + i * 2;
  17.     w = 2 + Math.random() * 3;
  18.     boxes.push(sim.addBox({x: xp, y: yp, width: w, height: 0.5, density:0, groupIndex:-1, fillColor:0xFF6532}));
  19. }
  20.  
  21. var char:QuickObject = sim.addBox({x:2, y:18, width:1, height:2, allowSleep:false, groupIndex:-1, fillColor:0x0099CC});
  22.  
  23. sim.start();
  24.  
  25. var charVel:b2Vec2;
  26. var charVelAng:Number;
  27.  
  28. addEventListener(Event.ENTER_FRAME, onLoop);
  29. function onLoop(evt:Event):void {
  30.      
  31.     charVel = char.body.GetLinearVelocity();
  32.     charVelAng =  char.body.GetAngularVelocity();
  33.     var filter:b2FilterData;
  34.    
  35.     if (key[Keyboard.RIGHT]){
  36.         charVel.x += 1
  37.         char.body.SetLinearVelocity(charVel);
  38.         charVelAng += 1;
  39.         char.body.SetAngularVelocity(charVelAng);
  40.     }
  41.     if (key[Keyboard.LEFT]){
  42.         charVel.x -=1;
  43.         char.body.SetLinearVelocity(charVel);
  44.         charVelAng -= 1;
  45.         char.body.SetAngularVelocity(charVelAng);
  46.     }
  47.     if (key[Keyboard.UP] && sim.w.GetContactCount()> 0){
  48.          charVel.y = -10;
  49.          trace(charVel.y);
  50.          char.body.SetLinearVelocity(charVel);
  51.          charVelAng *= 0.8;
  52.          char.body.SetAngularVelocity(charVelAng);
  53.     }
  54.     for (var i:int = 0; i<boxes.length; i++){
  55.         var rect:Rectangle = char.userData.getRect(this);
  56.         if (rect.bottom / 30 <boxes[i].y){
  57.             filter = boxes[i].shape.GetFilterData();
  58.             filter.groupIndex = 1;
  59.             boxes[i].shape.SetFilterData(filter);
  60.         }else{
  61.             filter = boxes[i].shape.GetFilterData();
  62.             if (filter.groupIndex != -1){
  63.                 filter.groupIndex = -1;
  64.                 boxes[i].shape.SetFilterData(filter);
  65.             }
  66.         }
  67.     }
  68. }
  69.  
  70. var key:Object = new Object();
  71. stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPressed);
  72. stage.addEventListener(KeyboardEvent.KEY_UP, onKeyReleased);
  73. function onKeyPressed(evt:KeyboardEvent):void{ key[evt.keyCode] = true; }
  74. function onKeyReleased(evt:KeyboardEvent):void{ key[evt.keyCode] = false; }

NOTE: This requires the QuickBox2D mini-library

This snippet shows how to use groupIndex to create simple platforms for a character to jump on. A few people have asked me about this so I figured I'd post about it. It works by altering the groupIndex of each platform based on the characters position - if the character is below a platform, both the character and the platform have groupIndex -1 (meaning they will not collide). As soon as the character is above a platform, the platforms groupIndex is set to 1 (allowing the character to walk on the platform despite having just passed through it.


Have a look at the swf...


It's also worth noting that I'm using b2World.GetContactCount() to make sure it's ok to jump... if there were more going on in the demo you'd need to check a specific contact point(s), but since the only collision that could happen involves the character this works nicely...

Posted in Box2D, QuickBox2D | Tagged , , , , | 10 Comments

Fake Light w/ UV & Quads

By Zevan | September 2, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 500, height=500, backgroundColor = 0x000000)]
  2. x = stage.stageWidth / 2;
  3. y = stage.stageHeight / 2;
  4. var quadNum:int = 2200;
  5. // standard Vectors for using drawTriangles
  6. var verts:Vector.<Number> = new Vector.<Number>();
  7. var pVerts:Vector.<Number>;
  8. var uvts:Vector.<Number> = new Vector.<Number>();
  9. var indices:Vector.<int> = new Vector.<int>();
  10. // needed for z-sorting
  11. var sortedIndices:Vector.<int>;
  12. var faces:Array = [];
  13. // we'll use this for tranforming points
  14. // and as the transformation matrix for our render
  15. var m:Matrix3D = new Matrix3D();
  16. // plot a quad
  17. var quad:Vector.<Number>;
  18. quad = Vector.<Number>([-10, -10, 0,
  19.                         10, -10, 0,
  20.                         -10, 10, 0,
  21.                         10, 10, 0]);
  22. // temp vect for any transformed quads
  23. var transQuad:Vector.<Number> = new Vector.<Number>();
  24. var i:int;
  25. var inc:int = 0;
  26. for (i = 0; i<quadNum; i++){
  27.     m.identity();
  28.     var s:Number = (int(Math.random()*50) == 1) ? 2 + Math.random()*2 : .1 + Math.random() * 2;
  29.     m.appendScale(s, s, 1);
  30.     m.appendRotation(90, Vector3D.Y_AXIS);
  31.     var mult:Number = 100 + Math.random()*200;
  32.     m.appendTranslation(mult, 0, 0);
  33.     m.appendRotation(Math.random()*360, Vector3D.X_AXIS);
  34.     m.appendRotation(Math.random()*360, Vector3D.Y_AXIS);
  35.     m.appendRotation(Math.random()*360, Vector3D.Z_AXIS);
  36.     m.transformVectors(quad, transQuad);
  37.     verts = verts.concat(transQuad);
  38.     faces.push(new Vector3D());
  39.     faces.push(new Vector3D());
  40.     var i4:int = i * 4;
  41.     indices.push(0 + i4, 1 + i4, 2 + i4,
  42.                  1 + i4, 3 + i4, 2 + i4);
  43.     mult /= 300;
  44.     uvts.push(mult,mult,0,
  45.               mult+.1,mult,0,
  46.               mult,mult - .1,0,
  47.               mult + .1,mult + .1,0);
  48. }
  49. sortedIndices = new Vector.<int>(indices.length, true);
  50. // create texture
  51. var tex:BitmapData = new BitmapData(400,400,false, 0x000000);
  52. var grad:Shape = new Shape();
  53. var mat:Matrix = new Matrix();
  54. mat.createGradientBox(400,400,0,0,0);
  55. with (grad.graphics){
  56.     beginGradientFill(GradientType.LINEAR, [0xFFFFFF,0x002244], [1, 1], [100, 255], mat);
  57.     drawRect(0,0,400,400);
  58. }
  59. tex.draw(grad);
  60. // create background
  61. mat.createGradientBox(1600,1200,0,-550, 0);
  62. with (grad.graphics){
  63.     beginGradientFill(GradientType.RADIAL, [0x000000, 0x001133], [1, 1], [0, 255], mat);
  64.     drawRect(0,0,500,500);
  65. }
  66. grad.x = -stage.stageWidth/2
  67. grad.y = -stage.stageHeight/2;
  68. addChild(grad);
  69. // triangles will be drawn to this
  70. var render:Shape = Shape(addChild(new Shape()));
  71. // fix all vector lengths
  72. verts.fixed = true, uvts.fixed = true, indices.fixed = true
  73. pVerts = new Vector.<Number>(verts.length/3 * 2, true);
  74. // we need these if we want perspective
  75. var persp:PerspectiveProjection = new PerspectiveProjection();
  76. persp.fieldOfView = 45;
  77. // projection matrix
  78. var proj:Matrix3D = persp.toMatrix3D();
  79. var dx:Number = 0, dy:Number = 0;
  80. addEventListener(Event.ENTER_FRAME, onLoop);
  81. function onLoop(evt:Event):void {
  82.     dx += (mouseX - dx) / 4;
  83.     dy += (mouseY - dy) / 4;
  84.     m.identity();
  85.     m.appendRotation(dy, Vector3D.X_AXIS);
  86.     m.appendRotation(dx, Vector3D.Y_AXIS);
  87.     m.appendTranslation(0,0,800);
  88.     m.append(proj);
  89.     Utils3D.projectVectors(m, verts, pVerts, uvts);
  90.     var face:Vector3D;
  91.     inc = 0;
  92.     for (var i:int = 0; i<indices.length; i+=3){
  93.         face = faces[inc];
  94.         face.x = indices[i];
  95.         face.y = indices[int(i + 1)];
  96.         face.z = indices[int(i + 2)];
  97.         var i3:int = i * 3;
  98.         face.w = (uvts[int(face.x*3 + 2)] + uvts[int(face.y*3 + 2)] + uvts[int(face.z*3 + 2)]) * 0.333333;
  99.         inc++;
  100.     }
  101.     faces.sortOn("w", Array.NUMERIC);
  102.     inc = 0;
  103.     for each (face in faces){
  104.         sortedIndices[inc++] = face.x;
  105.         sortedIndices[inc++] = face.y;
  106.         sortedIndices[inc++] = face.z;
  107.     }
  108.     render.graphics.clear();
  109.     render.graphics.beginBitmapFill(tex, null, false, false);
  110.     render.graphics.drawTriangles(pVerts, sortedIndices, uvts, TriangleCulling.NEGATIVE);
  111. }

Expanding again on the z-sorting demos from the last few days - this snippet uses UV coords and a gradient to create something that vaguely resembles a light. Unlike the previous demos, the 3D cluster in this snippet is made up of quads - requiring a slight adjustment to the depth calculation.


Have a look at the swf...

I also posted the code over at wonderfl.net...

Posted in 3D, Graphics, Vector, matrix, misc, sortOn | Tagged , , , | 2 Comments