Category Archives: misc

Astroid Pedal Curve Variation

Actionscript:
  1. var xp:Number = 0;
  2. var yp:Number = 0;
  3. var t:Number = 0;
  4. var r:Number = 200;
  5. x = stage.stageWidth / 2;
  6. y = stage.stageHeight / 2;
  7.  
  8. graphics.lineStyle(0,0x000000);
  9. addEventListener(Event.ENTER_FRAME, onRun);
  10. function onRun(evt:Event):void {
  11.     r = 200 * Math.cos(t / 10);
  12.     xp = r * Math.pow(Math.cos(t), 3);
  13.     yp = r * Math.pow(Math.sin(t), 3);
  14.     if (t == 0){
  15.       graphics.moveTo(xp, yp);
  16.     }else{
  17.       graphics.lineTo(xp, yp);
  18.     }
  19.     t += 0.1;
  20. }

While browsing mathworld I decided to do a variation on this curve . The above snippet will draw something like this:

Also posted in Math | Tagged , , | Leave a comment

Circle Mouse Toy

Actionscript:
  1. var circles:Array = [];
  2. for (var i:int = 0; i<30; i++){
  3.     var c:Sprite = makeCircle();
  4.     c.x = stage.stageWidth / 2;
  5.     c.y = stage.stageHeight / 2;
  6.     c.scaleX = 1 + i/2;
  7.     c.scaleY = 0.5 + i/4;
  8.     addChild(c);
  9.     circles.push(c);
  10. }
  11. addEventListener(Event.ENTER_FRAME, onLoop);
  12. function onLoop(evt:Event):void {
  13.     circles[0].y += (mouseY - circles[0].y) / 4;
  14.     for (var i:int = 1; i<circles.length; i++){
  15.         var pre:Sprite = circles[i - 1];
  16.         circles[i].y += (pre.y - circles[i].y) / 4;
  17.     }
  18. }
  19. function makeCircle():Sprite{
  20.     var s:Sprite = new Sprite();
  21.     with(s.graphics){
  22.         lineStyle(0,0x000000);
  23.         drawCircle(0,0,10);
  24.     }
  25.     return s;
  26. }

This morning I woke up with a vision of this simple mouse toy in my head. I decided I might as well code it up... I may do more simple things like this in the next few days, it's relaxing.

Also posted in Graphics, motion | Tagged , , | 5 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).

Also posted in Graphics, Math | Tagged , , | 2 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.

Also posted in Announcements | 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

Also posted in Graphics, Math | 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...

Also posted in 3D, Graphics, motion | Tagged , , | 3 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.

Also posted in Number, Operators, arrays, binary, functions, return values | Tagged , , , | 2 Comments

Polar Coordinates Distribution

If you're at all interested in watching me free from code. I recorded a video of me coding this snippet (which is about 11 minutes long or so).

In the video I create a few functions that allow you to draw shapes like these:

Mathematically this stuff is really simple ... the free form nature of the video takes a less technical perspective as you'll see (I even made a few funny mistakes).



Actionscript:
  1. [SWF(width = 600, height = 600)]
  2. var dotNum:int = 1000;
  3. var dotRad:Number = 0.5;
  4.  
  5. x = 120
  6. y = 100;
  7.  
  8. // extra stuff to display what the functions can do
  9. stage.addEventListener(MouseEvent.CLICK, onDrawAll);
  10.  
  11. function onDrawAll(evt:Event):void{
  12.     graphics.clear();
  13.     for (var i:int = 0; i<16; i++){
  14.         var m:Number;
  15.    
  16.         var rad:Number = 120;
  17.         var xp:Number = i % 4 * rad
  18.         var yp:Number = int(i / 4) * rad
  19.    
  20.         var type:int = int(Math.random() * 4);
  21.         if (type == 0){
  22.           makeShape(xp, yp, rad-60, Math.random() , 1);
  23.         }else if (type == 1){
  24.            makeShape(xp, yp, rad-60, 1,  Math.random());
  25.         }
  26.         else if (type == 2){
  27.            m = Math.random() * 2;
  28.            makeShape(xp, yp, rad-Math.random()*120, m, m);
  29.         }
  30.         else if (type == 3){
  31.            m = Math.random() * 2;
  32.            makeShape(xp, yp, rad-Math.random()*120, m, m/2);
  33.         }
  34.     }
  35. }
  36.  
  37. // main part from the video
  38. function makeShape(xp:Number, yp:Number,
  39.                    maxRad:Number = 100,m0:Number=1,
  40.                    m1:Number=1):void{
  41.     var polarX:Number;
  42.     var polarY:Number;
  43.     var radius:Number;
  44.     graphics.lineStyle(0, 0);
  45.     var theta:Number = Math.random() * Math.PI * 2;
  46.     for (var i:int = 0; i<dotNum; i++){
  47.         radius = Math.random() * maxRad
  48.         polarX = xp + radius * Math.cos(theta * m0);
  49.         polarY = yp + radius * Math.sin(theta * m1);
  50.         theta += 0.1;
  51.          
  52.         makeDot(polarX, polarY);
  53.        
  54.     }
  55. }
  56.  
  57. function makeDot(xp:Number, yp:Number, fillColor:uint = 0x000000):void{
  58.     graphics.beginFill(fillColor);
  59.     graphics.drawCircle(xp, yp, dotRad);
  60.     graphics.endFill();
  61. }

Here it is over at wonderf:

Also posted in Graphics, Math, functions | Tagged , , | 4 Comments

Collecting Colors

Some of you may have seen these preliminary test images images on my flickr:


If your up for it .... i am working on collecting colors and words for use with this project ... so watch the video (below) and go to the link (below) you will be able to make a contribution.

LEARN ABOUT THE TOOLS
video, (may not all make sense but the tool is shown which is the important part)

POPULATE THE DB
population tool add some colors

I have a smart filter that checks for people doing weird things like curses etc... so don't bother trying to do that.

Additional info here, scroll down to see our presentation about the project

Posted in misc | Tagged | 2 Comments

Too Many Buttons

Actionscript:
  1. [SWF (width = 500, height = 500)]
  2.  
  3. var canvas:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, false, 0xFFFFFF);
  4. addChild(new Bitmap(canvas));
  5.  
  6. var indexCanvas:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, false, 0xFFFFFF);
  7.  
  8. var btnNum:int = 5000;
  9. var info:Array = [];
  10.  
  11. var brush:BitmapData = new BitmapData(10,10,false, 0xCCCCCC);
  12. var border:Shape = new Shape();
  13. border.graphics.lineStyle(2, 0x000000);
  14. border.graphics.drawRect(0,0,10,10);
  15. brush.draw(border);
  16.  
  17. var txt:TextField = TextField(addChild(new TextField()));
  18. with (txt) height = 20, width = 50, background = 0xFFFFFF, selectable = false
  19. var tf:TextFormat = new TextFormat();
  20. tf.align = TextFormatAlign.RIGHT;
  21. txt.border= true;
  22. txt.defaultTextFormat = tf;
  23.  
  24. var redRect:Shape = Shape(addChild(new Shape()));
  25. with (redRect.graphics) beginFill(0xFF0000), drawRect(0,0,10,10);
  26.                                              
  27. var pnt:Point = new Point();
  28. var r:Rectangle = new Rectangle(0,0,10,10);
  29. for (var i:int = 0; i <btnNum; i++){
  30.     pnt.x = r.x = int(Math.random() * stage.stageWidth);
  31.     pnt.y = r.y = int(Math.random() * stage.stageHeight);
  32.     indexCanvas.fillRect(r, i);
  33.     canvas.copyPixels(brush, brush.rect, pnt)
  34.     info[i] = [r.x, r.y, i];   
  35. }
  36.  
  37. addEventListener(Event.ENTER_FRAME, onCheckBtns);
  38. function onCheckBtns(evt:Event):void{
  39.    var currentIndex:int = indexCanvas.getPixel(mouseX, mouseY);
  40.    if (currentIndex != 0xFFFFFF){
  41.      var currentBox:Array = info[currentIndex]
  42.      redRect.visible = true;
  43.      redRect.x = currentBox[0];
  44.      txt.y = redRect.y = currentBox[1];
  45.      if (mouseX <txt.width){
  46.          tf.align = TextFormatAlign.LEFT;
  47.          txt.defaultTextFormat = tf;
  48.          txt.x = redRect.x + 10;
  49.      }else{
  50.          tf.align = TextFormatAlign.RIGHT;
  51.          txt.defaultTextFormat = tf;
  52.          txt.x = redRect.x - txt.width;
  53.      }
  54.      txt.text = currentBox[2];
  55.      txt.visible = true;
  56.    }else{
  57.      redRect.visible = false;
  58.      txt.visible = false;
  59.    }
  60. }

This is a simplified example of the technique discussed in yesterdays post. The idea is to use a BitmapData image to store index values for a large number of elements that need to be able to act as if the have MouseEvents. For a more detailed description of this technique see yesterdays post.

Have a look at the swf on wonderfl

Also posted in BitmapData, arrays | Tagged , , | Leave a comment