Monthly Archives: July 2009

Counter Function

By Zevan | July 4, 2009
CLICK HERE TO COPY
Actionscript:
  1. var counter:Function = function(count:Array):Function{
  2.     var leng:int = count.length;
  3.     var index:int = 0;
  4.     return counter = function(reset:*=""):Function{
  5.         if (reset=="reset"){
  6.             index = 0;
  7.             return counter;
  8.         }else
  9.         if (reset is Array){
  10.             count = reset;
  11.             return counter;
  12.         }
  13.         trace(count[index % leng]);
  14.         index++;
  15.         return counter;
  16.     }
  17. }
  18.  
  19. // first time it's called you pass an array
  20. trace("count through the array:");
  21. // you can optionally call trigger the counter by calling the newly
  22. // returned function
  23. counter(["a","b","c"])();
  24. counter();
  25. counter();
  26. trace("change the array:");
  27. // here we choose to simply set the array and not trigger the counter
  28. counter([10,20,40,60,80]);
  29. counter();
  30. counter()
  31. trace("reset the counter:");
  32. // reset and the counter is called 3 times
  33. counter("reset")()()();
  34.  
  35. /*outputs :
  36. count through the array:
  37. a
  38. b
  39. c
  40. change the array:
  41. 10
  42. 20
  43. reset the counter:
  44. 10
  45. 20
  46. 40
  47. */

Today I felt like messing around with functions and this is the result. This snippet shows a strange and interesting technique to create a function that iterates through a given array in a few different ways.

I believe the technical term for this kind of thing is a continuation...

There are a bunch of other posts like this on actionsnippet. Some are purely experimental, others are actually quite useful... these can all be found in the functions category.

Posted in dynamic, functions | Tagged , , | Leave a comment

Better BitmapData Brush

By Zevan | July 3, 2009
CLICK HERE TO COPY
Actionscript:
  1. var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xCCCCCC);
  2. addChild(new Bitmap(canvas));
  3. var prevX:Number;
  4. var prevY:Number;
  5. var brush:Shape = new Shape();
  6.  
  7. stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
  8. stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
  9. function onDown(evt:MouseEvent):void{
  10.     prevX = mouseX;
  11.     prevY = mouseY;
  12.     addEventListener(Event.ENTER_FRAME, onLoop);
  13. }
  14.  
  15. function onUp(evt:MouseEvent):void{
  16.     removeEventListener(Event.ENTER_FRAME, onLoop);
  17. }
  18.  
  19. function onLoop(evt:Event):void {
  20.       brush.x = mouseX;
  21.       brush.y = mouseY;
  22.       with (brush.graphics){
  23.           clear();
  24.           lineStyle(3, 0x000000);
  25.           lineTo(prevX-mouseX, prevY-mouseY);
  26.       }
  27.       canvas.draw(brush, brush.transform.matrix);
  28.       prevX = mouseX;
  29.       prevY = mouseY;
  30. }

If you write a drawing program with the Graphics class alone, you'll notice that eventually the flash player will start to slow down. This could take quite some time, but it will eventually happen. Because the Graphics class is entirely vector based, the flash player needs to keep track of every single point that makes up any line in your drawing. If you draw something and then erase it by drawing white vector lines over it, flash still needs to know about that thing that you erased.

The snippet I wrote yesterday reminded me of the technique used in the above snippet. In yesterdays post every line is drawn using the graphics class. As a result, eventually the flash player begins to choke.

Today's snippet draws a vector between the previous mouse location and the current mouse location - this vector is then drawn onto a BitmapData object and the vector is cleared. So rather than creating vector graphics that are continuously increasing in complexity, your just changing the color of pixels around on a BitmapData.

To see a visual explanation take a look at the below swf. I slowed it down to 5fps, I tinted the vector red and scaled up the stage so you can differentiate between what's vector and what's bitmap:


Click to see the swf...

Posted in BitmapData, Graphics | Tagged , , | 1 Comment

Gesture Capture

By Zevan | July 2, 2009
CLICK HERE TO COPY
Actionscript:
  1. var canvas:Shape = Shape(addChild(new Shape()));
  2. var gestures:Array=[];
  3. var gestureNum:int = 0;
  4. var capGesture:Array;
  5. stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
  6. stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
  7. function onDown(evt:MouseEvent):void{
  8.      capGesture=[];
  9.      addEventListener(Event.ENTER_FRAME, onCapture);
  10.    
  11.      canvas.graphics.lineStyle(3, 0xFF0000);
  12.      canvas.x = mouseX;
  13.      canvas.y = mouseY;
  14.      canvas.graphics.moveTo(0, 0);
  15. }
  16. function onUp(evt:MouseEvent):void{
  17.     gestures.push(capGesture.concat());
  18.     gestureNum++;
  19.      canvas.graphics.clear();
  20.     removeEventListener(Event.ENTER_FRAME, onCapture);
  21. }
  22. function onCapture(evt:Event):void{
  23.     capGesture.push(new Point(canvas.mouseX, canvas.mouseY));
  24.     canvas.graphics.lineTo(canvas.mouseX, canvas.mouseY);
  25. }
  26.  
  27. var currGesture:Array;
  28. var drawing:Boolean = false;
  29. var lineThickness:Number = 0;
  30. var lineColor:Number = 0x000000;
  31. var index:int = 0;
  32. var pnt:Point;
  33. var trans:Matrix = new Matrix();
  34. var i:int
  35. addEventListener(Event.ENTER_FRAME, onLoop);
  36. function onLoop(evt:Event):void{
  37.     if (gestureNum> 0){
  38.         if (!drawing){
  39.           currGesture = gestures[int(Math.random() * gestureNum)].concat();
  40.           trans.identity();
  41.           trans.rotate(Math.random()*6.28);
  42.           var scale:Number = Math.random() * 2 + .1;
  43.           trans.scale(scale, scale);
  44.           trans.tx = Math.random() * stage.stageWidth
  45.           trans.ty = Math.random() * stage.stageHeight
  46.           for (i = 0; i<currGesture.length; i++){
  47.              currGesture[i] = trans.transformPoint(currGesture[i]);  
  48.           }
  49.           lineThickness = Math.random() * Math.random() * 50;
  50.           if (int(Math.random()*10) ==1){
  51.              var col:uint = uint(Math.random()*255);
  52.              lineColor = col <<16 | col <<8 | col;
  53.           }
  54.           index = 0;
  55.           drawing = true;
  56.           graphics.lineStyle(lineThickness, lineColor);
  57.         }else{
  58.            for (i = 0; i<10; i++){
  59.                 if (drawing == true){
  60.                    pnt = currGesture[index];
  61.                    if (index == 0){
  62.                       graphics.moveTo(pnt.x, pnt.y);  
  63.                    }else{
  64.                       graphics.lineTo(pnt.x, pnt.y);
  65.                    }
  66.                    index++;
  67.                    if (index == currGesture.length){
  68.                        drawing = false;
  69.                    }
  70.                }
  71.            }
  72.         }
  73.     }
  74. }

This snippet is an idea I have been meaning to try for sometime. It's a mini-drawing program. You can draw single gestures (shapes, letters etc...) and the program then randomly scales, rotates, tints and translates these gestures repeatedly on the canvas. You can continue to draw as it does this, the more gestures you draw, the more the program will have to randomly choose from.


Have a look at the swf here...

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

setVector() CA Texture

By Zevan | July 1, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=500, height=500)]
  2. var canvasSize:int=stage.stageWidth;
  3. var canvas:BitmapData=new BitmapData(canvasSize,canvasSize,false,0x000001);
  4. addChild(new Bitmap(canvas, "auto", true));
  5. var size:int=canvas.width*canvas.height - canvasSize;
  6. var pixels:Vector.<uint>=canvas.getVector(canvas.rect);
  7. for (var i:int = 0; i<canvasSize; i++) {
  8.     var xp:int=int(Math.random()*canvasSize);
  9.     var yp:int=int(Math.random()*canvasSize);
  10.     pixels[xp+yp*canvasSize]=0xFF000000;
  11. }
  12. var targetCol:uint=0xFF000000;
  13. var buffer:Vector.<uint>=pixels.concat();
  14. var fade:uint=1;
  15.  
  16. addEventListener(Event.ENTER_FRAME, onLoop);
  17. function onLoop(evt:Event):void {
  18.     var curr:uint=targetCol;
  19.     var r:int = (curr>> 16) & 0xFF;
  20.     var g:int = (curr>> 8) & 0xFF;
  21.     var b:int=curr&0xFF;
  22.     r+=fade;
  23.     g+=fade;
  24.     b+=fade;
  25.     if (r>255) r=255;
  26.     if (g>255) g=255;
  27.     if (b>255) b=255;
  28.     var darker:uint=0xFF000000|r<<16|g<<8|b;
  29.     if (darker==0xFFFFFFFF) {
  30.         removeEventListener(Event.ENTER_FRAME, onLoop);
  31.     }
  32.     for (var i:int = canvasSize; i<size; i++) {
  33.         curr=pixels[i];
  34.         if (curr==targetCol) {
  35.             var index:int=i-canvasSize+int(Math.random()*3) - 1;
  36.             if (index>0) buffer[index]=darker;
  37.             if (int(Math.random()*50)==1) {
  38.                 index=i-canvasSize+int(Math.random()*3)-1;
  39.                 if (index>0) buffer[index]=darker;
  40.             }
  41.         }
  42.     }
  43.     targetCol=darker;
  44.     canvas.lock();
  45.     canvas.setVector(canvas.rect, buffer);
  46.     pixels=buffer.concat();
  47.     canvas.unlock();
  48. }

This snippet uses setVector() to draw something that looks like this:

This is a cellular automaton. It has kind of a strange rule set - but you could easily use this snippet to do more traditional cellular automata.

Posted in BitmapData, Vector, pixel manipulation | Tagged , , | Leave a comment