Monthly Archives: March 2010

To release or not to release…

So I have a QuickBox2D editor that I’ve had since the earliest version of QuickBox2D. It is really pretty buggy and imperfect. I’m wondering if I should release it even though it’s really buggy… my main issue is I won’t be able to guarantee that it is a safe editor to use for real projects.

Thoughts? Should I release it anyway?

Posted in QuickBox2D | Tagged , | 13 Comments

AS Quiz #18

Today’s quiz is about BitmapData and the Graphics class…

Number of Questions : 5
Difficulty : Medium
Topic : BitmapData, Graphics

True or False. Subpixel x and y coordinates for DisplayObjects are made possible by anti-aliasing.



Which of the following methods would you use to set a pixel with an alpha channel value?





Which of the following methods would you used if you wanted to boost performance when drawing to a BitmapData object?




True or False. Perlin Noise is built right into the BitmapData class.



Which of the following methods does not exist in the Graphics class?











Posted in Quiz | Tagged , , , | 8 Comments

Logistic Map Play

Actionscript:
  1. var offX:Number = 100;
  2. var offY:Number = 300;
  3. var scalarX:Number = 6;
  4. var scalarY:Number = 200;
  5. addEventListener(Event.ENTER_FRAME, onLoop);
  6. function onLoop(evt:Event):void{
  7.     var r:Number = mouseY / 100;
  8.     var xn:Number = (mouseX - 100) / 650;
  9.     var xn1:Number = 0;
  10.     graphics.clear();
  11.     graphics.lineStyle(0,0);
  12.     for (var i:int = 0; i<100; i++){
  13.       xn1 = r * xn * (1 - xn);
  14.       xn = xn1;
  15.       if (i == 0){
  16.         graphics.moveTo(offX+i*scalarX,offY+xn1*scalarY);  
  17.       }else{
  18.         graphics.lineTo(offX+i*scalarX, offY+xn1*scalarY);
  19.       }
  20.     }
  21. }

Whenever I can't decide what kind of snippet to make, I simply go to wikipedia or mathworld for a bit and I always end up with something. I've messed with Logistic Maps before (when learning about strange attractors). This is a simple rendering where the x and y axis change the biotic potential (r) and the starting value for x.

Here is the link I used for reference.


Have a look at the swf (just move your mouse around).

Posted in Graphics, Math, misc | Tagged , , | 2 Comments

QuickBox2D Nodes

Been thinking about nonsense nodes recently so I created this with my QuickBox2D editor. I have yet to release the editor because its buggy, but it does work nicely for some things:


Have a look at the swf....


Actionscript:
  1. import com.actionsnippet.qbox.*;
  2.  
  3. stage.quality="medium";
  4. var sim:QuickBox2D = new QuickBox2D(this, {gravityY:0.2});
  5.  
  6. sim.setDefault({fillColor:0xEFEFEF, fillAlpha:0.5, lineColor:0x666666});
  7.  
  8.  
  9. var auto4:QuickObject = sim.addBox({x:9.33, y:4.67, width:1.33, height:1.33, angle: 0, density:1});
  10. var auto5:QuickObject = sim.addBox({x:11, y:4.67, width:1.33, height:1.33, angle: 0, density:1});
  11. var auto6:QuickObject = sim.addBox({x:12.67, y:4.67, width:1.33, height:1.33, angle: 0, density:1});
  12. var auto7:QuickObject = sim.addCircle({x:11, y:3, radius:0.67, density:1});
  13. var auto11:QuickObject = sim.addBox({x:9, y:6, width:0.67, height:0.67, angle: 0, density:1});
  14. var auto13:QuickObject = sim.addBox({x:9, y:7, width:0.67, height:0.67, angle: 0, density:1});
  15. var auto15:QuickObject = sim.addBox({x:11, y:6.33, width:1.33, height:1.33, angle: 0, density:1});
  16. var auto17:QuickObject = sim.addBox({x:14, y:4.33, width:0.67, height:0.67, angle: 0, density:1});
  17. var auto18:QuickObject = sim.addBox({x:15, y:4.33, width:0.67, height:0.67, angle: 0, density:1});
  18. var auto19:QuickObject = sim.addBox({x:14, y:3, width:0.67, height:0.67, angle: 0, density:1});
  19. var auto25:QuickObject = sim.addBox({x:12.17, y:6.33, width:0.33, height:1.33, angle: 0, density:1});
  20. var auto26:QuickObject = sim.addBox({x:13.17, y:6.33, width:0.33, height:1.33, angle: 0, density:1});
  21. var auto29:QuickObject = sim.addBox({x:13.67, y:7.67, width:3.33, height:0.67, angle: 0, density:1});
  22. var auto32:QuickObject = sim.addBox({x:10.67, y:7.67, width:0.67, height:0.67, angle: 0, density:1});
  23. var auto35:QuickObject = sim.addBox({x:9, y:8, width:0.67, height:0.67, angle: 0, density:1});
  24. var auto37:QuickObject = sim.addBox({x:9, y:9, width:0.67, height:0.67, angle: 0, density:1});
  25. var auto38:QuickObject = sim.addBox({x:10.33, y:9.33, width:1.33, height:1.33, angle: 0, density:1});
  26. var auto39:QuickObject = sim.addBox({x:11.67, y:9, width:0.67, height:0.67, angle: 0, density:1});
  27. var auto40:QuickObject = sim.addBox({x:12.67, y:9.67, width:0.67, height:0.67, angle: 0, density:1});
  28. var auto41:QuickObject = sim.addBox({x:13.67, y:9.67, width:0.67, height:0.67, angle: 0, density:1});
  29. var auto42:QuickObject = sim.addBox({x:15, y:9.33, width:1.33, height:1.33, angle: 0, density:1});
  30. var auto43:QuickObject = sim.addBox({x:11.67, y:10, width:0.67, height:0.67, angle: 0, density:1});
  31. var auto44:QuickObject = sim.addBox({x:11.67, y:11, width:0.67, height:0.67, angle: 0, density:1});
  32. var auto45:QuickObject = sim.addBox({x:15, y:10.67, width:1.33, height:0.67, angle: 0, density:1});
  33. var auto46:QuickObject = sim.addBox({x:9, y:10, width:0.67, height:0.67, angle: 0, density:1});
  34. var auto62:QuickObject = sim.addCircle({x:12.67, y:1, radius:0.33, density:0});
  35. // joints:
  36. sim.setDefault({frequencyHz:0.7, lineColor:0x666666});
  37. var auto8:QuickObject = sim.addJoint({a:auto7.body, b:auto4.body, x1:11, y1:3, x2:9.33, y2:4.33});
  38. var auto9:QuickObject = sim.addJoint({a:auto7.body, b:auto5.body, x1:11, y1:3, x2:11, y2:4.33});
  39. var auto10:QuickObject = sim.addJoint({a:auto7.body, b:auto6.body, x1:11, y1:3, x2:12.67, y2:4.33});
  40. var auto12:QuickObject = sim.addJoint({a:auto11.body, b:auto4.body, x1:9, y1:6, x2:9, y2:5});
  41. var auto14:QuickObject = sim.addJoint({a:auto11.body, b:auto13.body, x1:9, y1:6, x2:9, y2:7});
  42. var auto16:QuickObject = sim.addJoint({a:auto5.body, b:auto15.body, x1:11, y1:5, x2:11, y2:6});
  43. var auto20:QuickObject = sim.addJoint({a:auto6.body, b:auto19.body, x1:12.67, y1:4.33, x2:14, y2:3});
  44. var auto21:QuickObject = sim.addJoint({a:auto19.body, b:auto17.body, x1:14, y1:3, x2:14, y2:4.33});
  45. var auto22:QuickObject = sim.addJoint({a:auto17.body, b:auto18.body, x1:14, y1:4.33, x2:15, y2:4.33});
  46. var auto23:QuickObject = sim.addJoint({a:auto17.body, b:auto6.body, x1:14, y1:4.33, x2:13, y2:4.33});
  47. var auto24:QuickObject = sim.addJoint({a:auto7.body, b:auto19.body, x1:11, y1:3, x2:14, y2:3});
  48. var auto27:QuickObject = sim.addJoint({a:auto6.body, b:auto25.body, x1:12.17, y1:5.1, x2:12.17, y2:5.97});
  49. var auto28:QuickObject = sim.addJoint({a:auto6.body, b:auto26.body, x1:13.2, y1:5.1, x2:13.23, y2:6.1});
  50. var auto30:QuickObject = sim.addJoint({a:auto18.body, b:auto29.body, x1:15, y1:4.33, x2:15, y2:7.67});
  51. var auto31:QuickObject = sim.addJoint({a:auto17.body, b:auto29.body, x1:14, y1:4.33, x2:15, y2:7.67});
  52. var auto33:QuickObject = sim.addJoint({a:auto15.body, b:auto32.body, x1:11, y1:6.33, x2:10.67, y2:7.67});
  53. var auto34:QuickObject = sim.addJoint({a:auto32.body, b:auto29.body, x1:10.67, y1:7.67, x2:12.33, y2:7.67});
  54. var auto36:QuickObject = sim.addJoint({a:auto13.body, b:auto35.body, x1:9, y1:7, x2:9, y2:8});
  55. var auto47:QuickObject = sim.addJoint({a:auto35.body, b:auto37.body, x1:9, y1:8, x2:9, y2:9});
  56. var auto48:QuickObject = sim.addJoint({a:auto46.body, b:auto37.body, x1:9, y1:10, x2:9, y2:9});
  57. var auto49:QuickObject = sim.addJoint({a:auto37.body, b:auto38.body, x1:9, y1:9, x2:10.33, y2:9.33});
  58. var auto50:QuickObject = sim.addJoint({a:auto46.body, b:auto38.body, x1:9, y1:10, x2:10.33, y2:9.33});
  59. var auto51:QuickObject = sim.addJoint({a:auto38.body, b:auto39.body, x1:10.33, y1:9.33, x2:11.67, y2:9});
  60. var auto52:QuickObject = sim.addJoint({a:auto38.body, b:auto43.body, x1:10.33, y1:9.33, x2:11.67, y2:10});
  61. var auto53:QuickObject = sim.addJoint({a:auto38.body, b:auto44.body, x1:10.33, y1:9.33, x2:11.67, y2:11});
  62. var auto54:QuickObject = sim.addJoint({a:auto39.body, b:auto40.body, x1:11.67, y1:9, x2:12.67, y2:9.67});
  63. var auto55:QuickObject = sim.addJoint({a:auto43.body, b:auto40.body, x1:11.67, y1:10, x2:12.67, y2:9.67});
  64. var auto56:QuickObject = sim.addJoint({a:auto44.body, b:auto40.body, x1:11.67, y1:11, x2:12.67, y2:9.67});
  65. var auto57:QuickObject = sim.addJoint({a:auto41.body, b:auto40.body, x1:13.67, y1:9.67, x2:12.67, y2:9.67});
  66. var auto58:QuickObject = sim.addJoint({a:auto41.body, b:auto42.body, x1:13.67, y1:9.67, x2:14.67, y2:9.67});
  67. var auto59:QuickObject = sim.addJoint({a:auto42.body, b:auto29.body, x1:14.67, y1:9, x2:15, y2:7.67});
  68. var auto60:QuickObject = sim.addJoint({a:auto42.body, b:auto29.body, x1:15.33, y1:9, x2:15, y2:7.67});
  69. var auto61:QuickObject = sim.addJoint({a:auto42.body, b:auto45.body, x1:15, y1:9.33, x2:15, y2:10.67});
  70. var auto63:QuickObject = sim.addJoint({a:auto62.body, b:auto7.body, x1:12.67, y1:1, x2:11, y2:3});
  71. var auto64:QuickObject = sim.addJoint({a:auto62.body, b:auto19.body, x1:12.67, y1:1, x2:14, y2:3});
  72. var auto65:QuickObject = sim.addJoint({a:auto25.body, b:auto29.body, x1:12.17, y1:6.8, x2:12.27, y2:7.67});
  73. var auto66:QuickObject = sim.addJoint({a:auto26.body, b:auto29.body, x1:13.2, y1:6.8, x2:13.2, y2:7.6});
  74.  
  75. sim.start();
  76. sim.mouseDrag();

Posted in Uncategorized | 6 Comments

Catmull-Rom Error

I was messing with Catumull Rom spline code from awhile back and this this came out:

Actionscript:
  1. [SWF(width = 500, height= 500)]
  2. var pnts:Array = new Array();
  3. // make 8 control points
  4. for (var i:int = 0; i<8; i++){
  5.     pnts.push(dot(50 + Math.random() * 80 * i, Math.random()*(stage.stageHeight-40)+20));
  6. }
  7. addEventListener(Event.ENTER_FRAME, onLoop);
  8. function onLoop(evt:Event):void {
  9.    
  10.     graphics.clear();
  11.     graphics.lineStyle(0,0);
  12.     curve(pnts);
  13. }
  14. function tangent(pk1:Sprite, pk_1:Sprite){
  15.     return new Point((pk1.x - pk_1.x) / 2, (pk1.y - pk_1.y) / 2);
  16. }
  17. // all math from http://en.wikipedia.org/wiki/Cubic_Hermite_spline
  18. function curve(p:Array, res:Number=.05):void{
  19.     var px:Number = 0;
  20.     var py:Number = 0;
  21.     var pIter:int = p.length - 1;
  22.     var m:Array = [];
  23.     m[0] = tangent(p[1], p[0]);
  24.     for (var i:int = 1; i<pIter; i++){
  25.         m[i] = tangent(p[i + 1], p[i - 1]);
  26.     }
  27.     m[pIter] = tangent(p[pIter], p[pIter - 1]);
  28.     for (var t:Number = 0; t <1; t+=res){
  29.          var t_2:Number = t * t;
  30.          var _1_t:Number = 1 - t;
  31.          var _2t:Number = 2 * t;
  32.          var h00:Number =  (1 + _2t) * (_1_t) * (_1_t);
  33.          var h10:Number =  t  * (_1_t) * (_1_t);
  34.          var h01:Number =  t_2 * (3 - _2t);
  35.          var h11:Number =  t_2 * (t - 1);
  36.          for (var k:int = 0; k <pIter; k++){
  37.              var k1:int = k + 1;
  38.              var pk:Sprite = p[k];
  39.              var pk1:Sprite = p[k1];
  40.              var mk:Point = m[k];
  41.              var mk1:Point = m[k1];
  42.            
  43.              px = h00 * pk.x + h10 * mk.x + h01 * pk1.x + h11 * mk1.x;
  44.              py = h00 * pk.y + h10 * mk.y + h01 * pk1.y + h11 * mk1.y;
  45.              if (k == 0){
  46.                 graphics.moveTo(px, py);
  47.              }else{
  48.                 graphics.lineTo(px, py);
  49.              }
  50.              
  51.             // canvas.setPixel(px, py, 0xFFFFFF);
  52.          }
  53.     }
  54. }
  55. // draggable dot
  56. function dot(xp:Number, yp:Number, col:uint = 0xFF0000, rad:Number=4):Sprite {
  57.     var s:Sprite = Sprite(addChild(new Sprite));
  58.     s.x = xp;
  59.     s.y = yp;
  60.  
  61.     with(s.graphics) beginFill(col), drawCircle(0,0,rad);
  62.     s.buttonMode = true;
  63.     s.addEventListener(MouseEvent.MOUSE_DOWN, onDrag);
  64.     return s;
  65. }
  66. function onDrag(evt:MouseEvent):void {
  67.     evt.currentTarget.startDrag()
  68. }
  69. stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
  70. stage.addEventListener(MouseEvent.MOUSE_DOWN,onDown);
  71. function onDown(evt:MouseEvent):void{
  72.       dotsVisible(false);
  73. }
  74. function onUp(evt:MouseEvent):void{
  75.     stopDrag();
  76.     dotsVisible(true);
  77. }
  78.  
  79. function dotsVisible(bool:Boolean):void{
  80.     for (var i:int = 0; i<pnts.length; i++){
  81.       pnts[i].visible = bool;
  82.      }
  83. }


You can see the swf over at wonderfl.

Posted in Uncategorized | 3 Comments

Color Words Motion Capture

We're still working on this long term project for medialab prado in madrid. Here is a camera test from today. It uses frame differencing and places names of colors on the areas of motion.


Click here to view the swf file... make sure to move around a bit in front of your web-cam.

Posted in Announcements, misc | Tagged , , , | 2 Comments

Connect The Dots E8

Actionscript:
  1. [SWF(width = 500, height = 500)]
  2. const TWO_PI:Number = Math.PI * 2;
  3. var centerX:Number = stage.stageWidth / 2;
  4. var centerY:Number = stage.stageHeight / 2;
  5. addEventListener(Event.ENTER_FRAME, onLoop);
  6. function onLoop(evt:Event):void{
  7.     // data
  8.     var points:Array = [];
  9.     var i:int = 0;
  10.     var pointNum : int = Math.max(2,int(mouseX / 12))
  11.    
  12.     var radius:Number = 200;
  13.     var step:Number = TWO_PI / pointNum;
  14.     var theta:Number = step / 2;
  15.     for (i = 0; i<pointNum; i++){
  16.         var xp:Number = centerX + radius * Math.cos(theta);
  17.         var yp:Number = centerY + radius * Math.sin(theta);
  18.         points[i] = new Point(xp, yp);
  19.         theta += step;
  20.     }
  21.     // render
  22.     graphics.clear();
  23.     graphics.lineStyle(0,0);
  24.     for ( i = 0; i<pointNum; i++){
  25.      var a:Point = points[i];
  26.      for (var j:int = 0; j<pointNum; j++){
  27.         var b:Point = points[j];
  28.         if (a != b){
  29.            graphics.drawCircle(a.x, a.y, 10);
  30.            graphics.moveTo(a.x, a.y);
  31.            graphics.lineTo(b.x, b.y);
  32.         }
  33.      }
  34.    }
  35. }

I've been using this geometric shape for lots of different things recently. Including during consulting gigs as a helpful visualization. Just move your mouse left and right... I particularly like the simpler forms you get by moving your mouse to the left (triangles squares and simple polygons):

While not entirely related this wikipedia article is interesting.

[EDIT : Thanks to martin for reminding me that I can do away with the if statement here in the above code ]

Actionscript:
  1. graphics.clear();
  2. graphics.lineStyle(0,0);
  3. for (i = 0; i<pointNum; i++) {
  4.     var a:Point=points[i];
  5.     for (var j:int = i+1; j<pointNum; j++) {
  6.         var b:Point=points[j];
  7.         graphics.drawCircle(a.x, a.y, 10);
  8.         graphics.moveTo(a.x, a.y);
  9.         graphics.lineTo(b.x, b.y);
  10.     }
  11. }
  12. graphics.drawCircle(a.x, a.y, 10);

I implemented that change over at wonderfl and it works nicely

Posted in Graphics, Math, misc | Tagged , , | 4 Comments

Nonsense Clocks

Actionscript:
  1. [SWF(width = 500, height=500, backgroundColor=0x000000)]
  2.  
  3. var clockNum:int = 100;
  4. var clocks:Vector.<Function> = new Vector.<Function>(clockNum, true);
  5.  
  6. var clockContainer:Sprite = Sprite(addChild(new Sprite()));
  7. clockContainer.x = stage.stageWidth / 2;
  8. clockContainer.y = stage.stageHeight / 2;
  9. buildClocks();
  10. runClocks();
  11.  
  12. function buildClocks():void{
  13.     for (var i:int = 0; i<clockNum; i++){
  14.         var theta:Number = Math.random() * Math.PI * 2;
  15.         var radius:Number = Math.random() * 200;
  16.         var xp:Number = radius * Math.cos(theta);
  17.         var yp:Number = radius * Math.sin(theta);
  18.         clocks[i] = makeClock(xp,yp,Math.random() * Math.PI * 2);
  19.     }
  20. }
  21. function runClocks():void{
  22.     addEventListener(Event.ENTER_FRAME, onRunClocks);
  23. }
  24. function onRunClocks(evt:Event):void{
  25.     for (var i:int = 0; i<clockNum; i++){
  26.         clocks[i]();
  27.     }
  28.     clockContainer.rotationX = clockContainer.mouseY / 30;
  29.     clockContainer.rotationY = -clockContainer.mouseX / 30;
  30. }
  31. function makeClock(x:Number, y:Number, time:Number=0):Function{
  32.     var radius:Number = Math.random() * 20 + 5;
  33.     var border:Number = radius * 0.2;
  34.     var smallRadius:Number = radius - radius * 0.3;
  35.    
  36.     var clock:Sprite = Sprite(clockContainer.addChild(new Sprite()));
  37.     clock.x = x;
  38.     clock.y = y;
  39.     clock.z = 100 - Math.random() * 200;
  40.     clock.rotationX = Math.random() * 40 - 20;
  41.     clock.rotationY = Math.random() * 40 - 20;
  42.     clock.rotationZ = Math.random() * 360;
  43.     return function():void{
  44.         with (clock.graphics){
  45.             clear();
  46.             lineStyle(1,0xFFFFFF);
  47.             drawCircle(0,0,radius + border);
  48.             var xp:Number = smallRadius * Math.cos(time/2);
  49.             var yp:Number = smallRadius * Math.sin(time/2);
  50.             moveTo(0,0);
  51.             lineTo(xp, yp);
  52.             xp = radius * Math.cos(time);
  53.             yp = radius * Math.sin(time);
  54.             moveTo(0,0);
  55.             lineTo(xp, yp);
  56.         }
  57.         time+=0.1;
  58.     }
  59. }


You can go check the swf out at wonderfl.net...

Posted in 3D, Graphics, misc, motion | Tagged , , | 3 Comments

Clock Quiz

Here is a quick sunday quiz. Create some kind of clock with as little code as possible. Even just a textfield and the date object would cut it, but preferably try to do something a little more interesting. Post your results in the comments. I'll post my version on monday EOD.

[EDIT: my clock can be found here which I'll count as tomorrows post]

The last clock post I did was about the 24 hour clock have a look at that here.

Posted in Quiz | Tagged , , , | 19 Comments

Haskell Inspired zipWith() Function

Actionscript:
  1. initOperators();
  2.  
  3. trace(zipWith("-", [1,2,3], [1,2,3]));
  4. trace(zipWith("+", [1,2,3], [1,2,3]));
  5. trace(zipWith("*", [1,2,3], [1,2,3]));
  6. trace(zipWith("+", [1,1,1,3], [4,5,6,7]));
  7. trace(zipWith("<<", [2, 4], [1,1]));
  8. /*
  9. outputs:
  10.  
  11. 0,0,0
  12. 2,4,6
  13. 1,4,9
  14. 5,6,7,10
  15. 4,8
  16. */
  17.  
  18. function zipWith(op:String, a:Array, b:Array):Array{
  19.     var aLeng:int = a.length;
  20.     var bLeng:int = b.length;
  21.     var leng:Number = (aLeng <bLeng) ? aLeng : bLeng;
  22.     var zipped:Array = [];
  23.    
  24.     if (!this[op])return [];
  25.    
  26.     for (var i:int = 0; i<leng; i++){
  27.         zipped[i]=this[op](a[i], b[i]);
  28.     }
  29.     return zipped;
  30. }
  31.  
  32. function initOperators():void{
  33.     this["+"]=function(a:Number, b:Number):Number{ return a + b };
  34.     this["-"]=function(a:Number, b:Number):Number{ return a - b };
  35.     this["/"]=function(a:Number, b:Number):Number{ return a / b };
  36.     this["*"]=function(a:Number, b:Number):Number{ return a * b };
  37.     this["%"]=function(a:Number, b:Number):Number{ return a % b };
  38.    
  39.     this["&"]=function(a:Number, b:Number):Number{ return a & b };
  40.     this["<<"]=function(a:Number, b:Number):Number{ return a <<b };
  41.     this["|"]=function(a:Number, b:Number):Number{ return a | b };
  42.     this[">>"]=function(a:Number, b:Number):Number{ return a>> b };
  43.     this[">>>"]=function(a:Number, b:Number):Number{ return a>>> b };
  44.     this["^"]=function(a:Number, b:Number):Number{ return a ^ b };
  45. }

This snippet is basically like the haskell zipWith() function. It can combines two arrays into one array given a single function. In this case I defined a bunch of operator functions, but it would work with any kind of function that takes two arguments and returns a value. You could extend this to work with strings and do other strange things I guess.

If you have yet to go play with haskell ... go do it now.

Posted in Number, Operators, arrays, binary, functions, misc, return values | Tagged , , , | 2 Comments