Monthly Archives: June 2009

Bresenham’s Circle and setVector()

Actionscript:
  1. var canvasSize:int = 400;
  2. var canvas:BitmapData = new BitmapData(canvasSize, canvasSize, false, 0xFFFFFF);
  3. addChild(new Bitmap(canvas));
  4. var size:int = canvas.width * canvas.height;
  5. var pixels:Vector.<uint> = canvas.getVector(canvas.rect);
  6.  
  7. addEventListener(Event.ENTER_FRAME, onLoop);
  8. function onLoop(evt:Event):void {
  9.      for (var i:int = 0; i<500; i++){
  10.       fillCircle(int(Math.random() * canvasSize),
  11.                       int(Math.random() * canvasSize),
  12.                       int(Math.random() * 5 + 3),
  13.                       uint(Math.random() * 0xFFFF));
  14.      }
  15.      canvas.lock();
  16.      canvas.setVector(canvas.rect, pixels);
  17.      canvas.unlock();
  18. }
  19.  
  20. function fillCircle(xp:int,yp:int, radius:int, col:uint = 0x000000):void {
  21.     var xoff:int =0;
  22.     var yoff:int = radius;
  23.     var balance:int = -radius;
  24.     while (xoff <= yoff) {
  25.          var p0:int = xp - xoff;
  26.          var p1:int = xp - yoff;
  27.          var w0:int = xoff + xoff;
  28.          var w1:int = yoff + yoff;
  29.          hLine(p0, yp + yoff, w0, col);
  30.          hLine(p0, yp - yoff, w0, col);
  31.          hLine(p1, yp + xoff, w1, col);
  32.          hLine(p1, yp - xoff, w1, col);
  33.         if ((balance += xoff++ + xoff)>= 0) {
  34.             balance-=--yoff+yoff;
  35.         }
  36.     }
  37. }
  38. function hLine(xp:int, yp:int, w:int, col:uint):void {
  39.     var index:int = xp + yp * canvasSize;
  40.     for (var i:int = 0; i <w; i++){
  41.         index++;
  42.         if (index> -1 && index <size){
  43.           pixels[index] = col;
  44.         }
  45.     }
  46. }

In the past I've posted examples of Bresenham's Circle (here and here). Both of those examples make use of setPixel(). Today's snippet demos a version of Bresenham's Circle that works with setVector().

Posted in BitmapData, graphics algorithms, pixel manipulation, setPixel | Tagged , , , | Leave a comment

2D Map Avoid

Actionscript:
  1. [SWF(width=401,height=401,background=0xEFEFEF)]
  2.  
  3. var w:Number = stage.stageWidth-1;
  4. var h:Number = stage.stageHeight-1;
  5. var tileSize:Number = 20;
  6. var halfTileSize:Number = 20;
  7. var hTiles:Number = w / tileSize;
  8. var vTiles:Number = h / tileSize;
  9. var world:Shape = Shape(addChild(new Shape()));
  10. var map:Array=[];
  11. populateMap();
  12. var gridColor:uint = 0xCCCCCC;
  13. grid(tileSize,  gridColor);
  14.  
  15. vTiles -= 1;
  16. var movers:Array = [];
  17. for (var i:int = 0; i<100; i++){
  18.     movers.push(makeMover(i % hTiles, int( i / hTiles),0x000000))
  19.     movers.push(makeMover(i % hTiles, vTiles - int( i / hTiles),0xFF0000))
  20. }
  21. var moverNum:int = movers.length;
  22. hTiles -= 1;
  23.  
  24. addEventListener(Event.ENTER_FRAME, onLoop);
  25. function onLoop(evt:Event):void {
  26.     world.graphics.clear();
  27.     for (var i:int = 0; i<moverNum; i++){
  28.        movers[i]();
  29.      }
  30. }
  31. function populateMap():void{
  32.     for (var i:int = 0; i<vTiles; i++){
  33.         map[i] = [];
  34.         for (var j:int = 0; j<hTiles; j++){
  35.             map[i][j] = 0;
  36.         }
  37.     }
  38. }
  39. function grid(size:Number=30, lineColor:uint=0xFFFF00, lineAlpha:Number=1):void {
  40.     with(graphics){
  41.         lineStyle(0, lineColor, lineAlpha);
  42.         drawRect(0,0,w,h);
  43.         for (var i:Number = size; i<w; i+=size) {
  44.             moveTo(i, 0);
  45.             lineTo(i, w);
  46.         }
  47.         for (i = size; i<h; i+=size) {
  48.             moveTo(0, i);
  49.             lineTo(h, i);
  50.         }
  51.     }
  52. }
  53. function makeMover(x:Number, y:Number, col:uint):Function{
  54.     var xp:Number = x;
  55.     var yp:Number = y;
  56.     var prevX:Number = x;
  57.     var prevY:Number = y;
  58.     map[yp][xp] = 1;
  59.     var dx:Number = xp;
  60.     var dy:Number = yp;
  61.     var counter:int = 0;
  62.     return function():void{
  63.         if (counter> 20){
  64.             if (int(Math.random()*30) == 1){
  65.                 xp += int(Math.random()*2) - 1 | 1;
  66.                 xp = xp <0 ? 0 : xp;
  67.                 xp = xp> hTiles ? hTiles : xp;
  68.                 if (map[yp][xp] == 1){
  69.                      xp = prevX;
  70.                 }else{
  71.                     map[prevY][prevX] = 0;
  72.                     map[yp][xp] = 1;
  73.                     counter = 0;
  74.                 }
  75.                 prevX = xp;
  76.             }else
  77.             if (int(Math.random()*30) == 1){
  78.                 yp += int(Math.random()*2) - 1 | 1;
  79.                 yp = yp <0 ? 0 : yp;
  80.                 yp = yp> vTiles ? vTiles : yp;
  81.                 if (map[yp][xp] == 1){
  82.                      yp = prevY;
  83.                 }else{
  84.                     map[prevY][prevX] = 0;
  85.                     map[yp][xp] = 1;
  86.                     counter = 0;
  87.                 }
  88.                 prevY = yp;
  89.             }
  90.         }
  91.         counter++;
  92.         dx += (xp - dx) * 0.5;
  93.         dy += (yp - dy) * 0.5;
  94.         with(world.graphics){
  95.             lineStyle(0, gridColor,1, true)
  96.             beginFill(col);
  97.             drawRect(dx * tileSize, dy * tileSize, tileSize, tileSize);
  98.         }
  99.     }
  100. }

This (somewhat long) snippet moves boxes around on a grid - the boxes avoid one another by reading values in a 2D array. This technique can also be used for collision detection in tile-based games.


Have a look at the swf here...

Posted in arrays, motion, random | Tagged , , | Leave a comment

2x mod 1 map

Actionscript:
  1. [SWF(width=800, height=600)]
  2. var xn1:Number;
  3. var xn:Number = Math.random() * Math.random() * .2;
  4. var inc:int = 0;
  5. var xp:Number = 10;
  6. var yp:Number = 10;
  7. var count:int = 1;
  8. scaleX = scaleY = 2;
  9. graphics.lineStyle(0,0x00000);
  10. addEventListener(Event.ENTER_FRAME, onLoop);
  11. function onLoop(evt:Event):void {
  12.    
  13.      xn1 = 2 * xn % 1;
  14.      xn = xn1;
  15.      if (inc == 0){
  16.           graphics.moveTo(xp + inc, yp + 30 - xn1 * 30);
  17.      }else{
  18.          graphics.lineTo(xp + inc, yp + 30 - xn1 * 30);
  19.      }
  20.      inc++
  21.      if (inc == 50){
  22.          inc = 0;
  23.          xp = 10 + count % 6 * 60;
  24.          yp = 10 + int(count / 6) * 60;
  25.          xn = Math.random() * Math.random() * .2;
  26.          trace(xn);
  27.          count++;
  28.      }
  29. }

This snippet plots 2x mod 1 maps with random starting values for xn. More info over at wikipedia and mathworld.

Posted in Math, misc, motion | Tagged , , | Leave a comment

Math.random() * Math.random()

Actionscript:
  1. var rand:Number = Math.random() * Math.random() * Math.random();

This is a trick I use when I need more contrast in my random numbers. In this case, the variable rand will get closer to the number 1 significantly less frequently than if you just used Math.random() once.

To illustrate this I created this snippet:

Actionscript:
  1. [SWF(width=800, height=600)]
  2.  
  3. var r:Number = Math.random() * Math.random() * Math.random();
  4. var inc:int = 0;
  5. var xp:Number = 10;
  6. var yp:Number = 10;
  7. var count:int = 1;
  8.  
  9. var compare:Shape = Shape(addChild(new Shape()));
  10. compare.graphics.lineStyle(0,0x2222FF);
  11.  
  12. graphics.lineStyle(0,0x00000);
  13. scaleX = scaleY = 2;
  14.  
  15. addEventListener(Event.ENTER_FRAME, onLoop);
  16. function onLoop(evt:Event):void {
  17.    
  18.      r =  Math.random() * Math.random() * Math.random();
  19.  
  20.      if (inc == 0){
  21.          graphics.moveTo(xp + inc, yp + 30 - r * 30);
  22.      }else{
  23.          graphics.lineTo(xp + inc, yp + 30 - r * 30);
  24.      }
  25.      
  26.      r = Math.random();
  27.       if (inc == 0){
  28.          compare.graphics.moveTo(xp + inc, yp + 70 - r * 30);
  29.      }else{
  30.          compare.graphics.lineTo(xp + inc, yp + 70 - r * 30);
  31.      }
  32.      inc++;
  33.      if (inc == 50){
  34.          inc = 0;
  35.          xp = 10 + count % 6 * 60;
  36.          yp = 10 + int(count / 6) * 80;
  37.          r = Math.random()*Math.random();
  38.          count++;
  39.      }
  40. }

The blue lines plots normal Math.random() and the black lines plots Math.random()*Math.random()*Math.random()

Posted in one-liners, random | Tagged , , | 2 Comments

QuickBox2D Skinning

Actionscript:
  1. import com.actionsnippet.qbox.*;
  2.  
  3. var sim:QuickBox2D = new QuickBox2D(this);
  4.  
  5. sim.createStageWalls({lineAlpha:0,fillColor:0x000000})
  6. sim.addBox({x:3, y:3, width:3, height:3, skin:BoxSkin});
  7. sim.addCircle({x:3, y:8,radius:1.5,  skin:CircleSkin});
  8. sim.addPoly({x:6, y:3, verts:[[1.5,0,3,3,0,3,1.5,0]], skin:TriangleSkin});
  9.  
  10. sim.addBox({x:6, y:3, width:3, height:3, skin:BoxSkin});
  11. sim.addCircle({x:6, y:8,radius:1.5,  skin:CircleSkin});
  12. sim.addPoly({x:12, y:3, verts:[[1.5,0,3,3,0,3,1.5,0]], skin:TriangleSkin});
  13.  
  14. sim.start();
  15. sim.mouseDrag();

You'll need this fla to run this snippet since the graphics are in the library. This snippet shows how to easily use linkage classes as the graphics for your rigid bodies. This was actually one of the first features I implemented in QuickBox2D.


Take a look at the swf here...

Posted in Box2D, MovieClip, QuickBox2D, motion | Tagged , , , , | 33 Comments

QuickBox2D groupIndex

Actionscript:
  1. import com.actionsnippet.qbox.*;
  2. import Box2D.Common.Math.*;
  3.  
  4. stage.frameRate = 60;
  5.  
  6. var sim:QuickBox2D = new QuickBox2D(this);
  7.  
  8. sim.createStageWalls();
  9.  
  10. createTraveler(3, 3);
  11.  
  12. addObstacles();
  13.  
  14. function addObstacles():void{
  15.     sim.setDefault({groupIndex:-1, density:0, height:0.4});
  16.     sim.addBox({x:6, y:5, width:8, angle:0.17})
  17.     sim.addBox({x:7, y:7.1, width:8, angle:-0.17})
  18.     sim.addBox({x:5, y:9.1, width:8,  angle:0.10})
  19.     sim.addBox({x:6, y:11.5, width:8.9,  angle:-0.20})
  20.     sim.addBox({x:5.5, y:16, width:9, angle:0.20})
  21.     sim.addBox({x:5.5, y:18, width:9})
  22.     sim.addCircle({x:11, y:20, radius:2.5, groupIndex:1});
  23.     sim.addBox({x:16, y:19, width:2, height:2, angle:0.0, groupIndex:1})
  24. }
  25.  
  26. function createTraveler(x:Number, y:Number):QuickObject{
  27.     var parts:Array = [];
  28.     parts[0] = sim.addCircle({x:0, y:1, radius:0.25, friction:0.01});
  29.     parts[1] = sim.addCircle({x:0, y:3, radius:0.25, friction:0.01});
  30.     parts[2] = sim.addBox({x:0, y:2, width:0.3, height:1.5 , groupIndex:-1});
  31.     return sim.addGroup({objects:parts, x:x, y:y });
  32. }
  33.  
  34. sim.start();
  35. sim.mouseDrag();

One of the more advanced and useful properties of rigid bodies is the groupIndex. It allows you to specify which rigid bodies collide with one another and which rigid bodies pass through one another. This snippit demo's the groupIndex property. For more information take a look at what the Box2D manual says.

Take a look at the swf here.

Posted in Box2D, QuickBox2D, motion | Tagged , , , , | 4 Comments

HSV Color Type

Actionscript:
  1. [SWF(width=560,height=300,backgroundColor=0x000000,frameRate=30)]
  2.  
  3. var key:Object = new Object();
  4. var alphabet:Array = "abcdefghijklmnopqrstuvwxyz".split("");
  5.  
  6. var num:Number = alphabet.length;
  7. var step:Number = 360 / num;
  8.  
  9. var colors:Object = new Object();
  10. for (var i:int  = 0; i<num; i++){
  11.     var index:String = alphabet[i];
  12.      key[index] = 65 + i;
  13.      var c:Array = hsv(i * step, 1, 1);
  14.      colors[index] = c[0] <<16 | c[1] <<8 | c[2];
  15. }
  16. alphabet.push("32");
  17. num++;
  18. key["32"] = 32;
  19. colors["32"]  = 0x333333;
  20. x = y = 10;
  21. var count:int = 0;
  22. var size:int = 20;
  23. stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPressed);
  24. function onKeyPressed(evt:KeyboardEvent):void{
  25.     for (var i:int= 0; i<num; i++){
  26.         var index:String = alphabet[i];
  27.          if (index == "32"){
  28.             trace("hi", evt.keyCode, key[index]);
  29.          }
  30.         if (evt.keyCode == key[index]){
  31.             graphics.beginFill(colors[index]);
  32.             var xp:int = count % num * size;
  33.             var yp:int = int(count / num) * size;
  34.             graphics.drawRect(xp, yp, size, size);
  35.             count++;
  36.         }
  37.     }
  38. }
  39. // ported from here:
  40. //http://www.cs.rit.edu/~ncs/color/t_convert.html
  41. function hsv(h:Number, s:Number, v:Number):Array{
  42.     var r:Number, g:Number, b:Number;
  43.     var i:int;
  44.     var f:Number, p:Number, q:Number, t:Number;
  45.     if (s == 0){
  46.         r = g = b = v;
  47.         return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
  48.     }
  49.     h /= 60;
  50.     i  = Math.floor(h);
  51.     f = h - i;
  52.     p = v *  (1 - s);
  53.     q = v * (1 - s * f);
  54.     t = v * (1 - s * (1 - f));
  55.     switch( i ) {
  56.         case 0:
  57.             r = v, g = t, b = p;
  58.             break;
  59.         case 1:
  60.             r = q, g = v, b = p;
  61.             break;
  62.         case 2:
  63.             r = p, g = v, b = t;
  64.             break;
  65.         case 3:
  66.             r = p, g = q, b = v;
  67.             break;
  68.         case 4:
  69.             r = t, g = p, b = v;
  70.             break;
  71.         default:        // case 5:
  72.             r = v, g = p, b = q;
  73.             break;
  74.     }
  75.     return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
  76. }

This snippet is a typing experiment - for every letter, you type a box filled with a specific color is drawn to the stage. The color associated with each letter is determined by moving through hsv color space - so typing an alphabet will end up with something resembling a spectrum.

Posted in Graphics, UI, color, keys | Tagged , , | Leave a comment

Dot Syntax from String

Actionscript:
  1. function dotSyntax(target:*, path:String):* {
  2.     var level:Array=path.split(".");
  3.     var curr:* = target;
  4.     for (var i:int = 0; i<level.length; i++) {
  5.         curr=curr[level[i]];
  6.     }
  7.     return curr;
  8. }
  9.  
  10. trace(dotSyntax(this, "stage.stageWidth"));
  11. trace(dotSyntax(this, "graphics"));
  12. trace(dotSyntax(this, "root.loaderInfo.bytesTotal"));
  13.  
  14. /*outputs something like:
  15. 800
  16. [object Graphics]
  17. 1230
  18. */

This snippet shows how to parse dot syntax from a string. It does this by splitting the string and then using square bracket syntax. This is one of the main techniques that makes yesterdays post possible.

Posted in dynamic, string manipulation, strings | Tagged , , | Leave a comment

XML to ActionScript #3 (AsXML)

XML:
  1. <code>
  2.   <make reference="w" class="BasicView" args="stage.stageWidth, stage.stageHeight, false"/>
  3.   <call method="addChild" args="w"/>
  4.  
  5.   <make reference="wireMat" class="WireframeMaterial" args="0x000000" />
  6.  
  7.   <make reference="sphere" class="Sphere" args="wireMat, 100" />
  8.  
  9.   <call method="w.scene.addChild" args="sphere" />
  10.  
  11.   <make reference="animation" class="Object">
  12.     <set z="-500" rotationY="360"  rotationX="360" ease="Back.easeOut"/>
  13.   </make>
  14.  
  15.   <call method="TweenLite.to" args="sphere, 3, animation" />
  16.  
  17.   <call method="setInterval" args="w.singleRender, 32" />
  18.  
  19. </code>

This snippet shows XML that the mini-library AsXML can read and run - in this case AsXML is set up to run with Papervision

A few days ago I had the idea to write some code that would run ActionScript based on XML. I spent some time getting rid of a few bugs and setting up some demos with TweenLite, Papervision and QuickBox2D. I wrapped everything up into a mini-library called AsXML.

Check out the demos here.


Download AsXML and demo files here.

AsXML Features:
1) call methods of the main timeline
2) read and write properties on the main timeline
3) instantiate classes on the main timeline
4) call methods on these classes
5) read and write properties on these classes
6) store references to return values from functions

Posted in Box2D, Graphics, Math, QuickBox2D, XML, dynamic, external data, instantiation, misc, motion, return values, string manipulation, strings | Tagged , , | 11 Comments

Funny Parameterized Factory

Actionscript:
  1. package{
  2.  
  3.     import flash.utils.getDefinitionByName;
  4.    
  5.     public class Creator{
  6.        
  7.         public function Creator():void{
  8.             // classes we can create
  9.              ClassA;
  10.              ClassB;
  11.         }
  12.  
  13.         public function create(type:String):ISomeInterface{
  14.              var ClassRef:Class = getDefinitionByName(type) as Class;
  15.              return ISomeInterface(new ClassRef());
  16.         }
  17.     }
  18. }

Actionscript:
  1. package{
  2.     public interface ISomeInterface{
  3.         function sayHi():void;
  4.     }
  5. }

Actionscript:
  1. package{
  2.    
  3.     public class ClassA implements ISomeInterface{
  4.        
  5.         public function ClassA(){
  6.             trace("new ClassA()");
  7.         }
  8.        
  9.         public function sayHi():void{
  10.             trace("hello I am a ClassA instance");
  11.         }
  12.     }
  13.      
  14. }

Actionscript:
  1. package{
  2.    
  3.     public class ClassB implements ISomeInterface{
  4.        
  5.         public function ClassB(){
  6.             trace("new ClassB()");
  7.         }
  8.        
  9.         public function sayHi():void{
  10.             trace("hello I am a ClassB instance");
  11.         }
  12.     }
  13.      
  14. }

... and lastly on the timeline:

Actionscript:
  1. var creator:Creator = new Creator();
  2.  
  3. var a:ISomeInterface = creator.create("ClassA");
  4. a.sayHi();
  5.  
  6. var b:ISomeInterface = creator.create("ClassB");
  7. b.sayHi();
  8.  
  9. /*outputs
  10.  
  11. new ClassA()
  12. hello I am a ClassA instance
  13. new ClassB()
  14. hello I am a ClassB instance
  15.  
  16. */

Unfortunately this has some downsides compared to a switch or if statement parameterized factory. Still fun though...

Posted in Uncategorized | Tagged , , | Comments closed