## Relaxing with Sine and Cosine

Last night I wanted to play with sine and cosine waves so I created this snippet:

Actionscript:
1. var wave:Number = 0;
3. function onLoop(evt:Event):void {
4.        graphics.clear()
5.        graphics.lineStyle(0,0);
6.        var time:Number = (stage.stageWidth/2 - mouseX)/10
7.        for (var j:int = 0; j<100; j++){
8.                var offset:Number = j/10;
9.                var t:Number = 0;
10.                var wh:Number = j * 4;
11.                for (var i:int = 0; i<300; i++){
12.                        wave = cos(10-offset, t + time + offset)
13.                               + sin(time, t/2 + time - offset) + wh
14.                               + cos(3, t * 4);
15.                        t += 0.1;
16.                        var xoff:Number = i * 2;
17.                        if (i == 0){
18.                                graphics.moveTo(100 + xoff, 100 + wave);
19.                        }else{
20.                                graphics.lineTo(100 + xoff, 100 + wave);
21.                        }
22.
23.                }
24.        }
25. }
26.
29. }
32. }

Have a look at the swf...

Posted in Uncategorized | 4 Comments

## Recursion Form

Actionscript:
1. x = y = 10
2. graphics.lineStyle(1,0);
3. drawBox(6);
4.
5. function drawBox(iter:Number=10, count:Number=1, y:Number=0, w:Number=500):void{
6.        if (count <iter){
7.                var width:Number = w / count
8.                for (var i:int = 0; i<count; i++){
9.                    graphics.drawRect(i * width, width * count/w, width, width);
10.                }
11.                count++;
12.                drawBox(iter, count, y, width);
13.        }
14. }

This small snippet just draws this image:

If you have an idea for a short recursive snippet. Feel free to post it in the comments.

Posted in Graphics, functions | Tagged , , | 6 Comments

## QuickBox2D Editor 2B Released

I'll be releasing the QuickBox2D on googlecode in the near future based on the response to yesterdays post.

Posted in QuickBox2D | Tagged , , , , | 15 Comments

## 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;
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});
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});
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. }
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.
62.     s.buttonMode = true;
64.     return s;
65. }
66. function onDrag(evt:MouseEvent):void {
67.     evt.currentTarget.startDrag()
68. }
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;
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.
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