Game of Life Snippets

By Zevan | January 21, 2009

SNIPPET ONE

SNIPPET TWO

I was very impressed when I saw Mario Klingemann's game of line in 3 lines of code blog post late last year. I've been meaning to post about it for awhile - finally got around to it.

Mario Klingemann is the developer of Peacock... an excellent node based image generator written in ActionScript.

BitmapData.paletteMap() is very powerful. I haven't done much with it, but I have some ideas floating around.

For those of you that are game of live savvy... try other rule sets from the lexicon... my personal favorite has always been coral (45678/3). Here's a link to some more.

Another short game of life recently appeared on on the 25lines.com forums.... here... the forum post features a nice explanation for using a ConvolutionFilter and Threshold to create The Game of Life. The technique is so small and impressive looking that I figured I'd post it as is right here:

CLICK HERE TO COPY
Actionscript:
  1. addChild(new Bitmap(new BitmapData(stage.stageWidth, stage.stageHeight, false, 0)))["bitmapData"].noise(int(Math.random()*int.MAX_VALUE),0,255,7,true);
  2. addEventListener(Event.ENTER_FRAME, function (e) {
  3.    getChildAt(0)["bitmapData"].applyFilter(getChildAt(0)["bitmapData"], getChildAt(0)["bitmapData"].rect, new Point(), new ConvolutionFilter(3, 3, [3,3,3,3,2,3,3,3,3],255,0,true,false,0,1));
  4.    getChildAt(0)["bitmapData"].threshold(getChildAt(0)["bitmapData"], getChildAt(0)["bitmapData"].rect, new Point(), "==", 8, 0xFFFFFFFF, 0xFC);
  5.    getChildAt(0)["bitmapData"].threshold(getChildAt(0)["bitmapData"], getChildAt(0)["bitmapData"].rect, new Point(), "!=", 0xFFFFFFFF, 0x00000000)})

The above code is by Daniil Tutubalin 25lines.com forums.

UPDATE:

Since writing this post the 25lines.com forum thread has grown to include a 4 line version and some additional discussion about this topic... be sure to check it out.

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

Parallax Displacement Map w/BlendMode

By Zevan | January 20, 2009
CLICK HERE TO COPY
Actionscript:
  1. var blends:Array = [BlendMode.ADD, BlendMode.DARKEN, BlendMode.DIFFERENCE, BlendMode.HARDLIGHT, BlendMode.INVERT, BlendMode.LIGHTEN, BlendMode.MULTIPLY, BlendMode.OVERLAY, BlendMode.SCREEN, BlendMode.SUBTRACT];

and a little later...

CLICK HERE TO COPY
Actionscript:
  1. displace.perlinNoise(150,150, 3, 30, true, false,0,true);
  2. var currentBlend:String = blends[ blendCount % blends.length];
  3. displace.draw(radial, null ,null, currentBlend);
  4. blendCount++;

The above are excepts from a recommendation I made in the comments of yesterdays post...


Try some different blend modes.... take a look at the swf here.

Posted in 3D, BitmapData, misc | Tagged , | Leave a comment

Parallax Displacement Map

By Zevan | January 19, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=500, height=500, backgroundColor=0xCCCCCC, frameRate=30)]
  2.  
  3. var canvas:BitmapData = new BitmapData(500, 500, true, 0xFF000000);
  4. addChild(new Bitmap(canvas));
  5.  
  6. // create a radial gradient
  7. var radial:Shape = new Shape();
  8. var m:Matrix = new Matrix()
  9. m.createGradientBox(500,500,0,0,0);
  10. radial.graphics.beginGradientFill(GradientType.RADIAL, [0xFFFFFF, 0x000000], [1, 1], [0, 200], m, SpreadMethod.PAD);
  11.  
  12. radial.graphics.drawRect(0,0,500,500);
  13. radial.x = radial.y = 0;
  14.  
  15. var displace:BitmapData = new BitmapData(500, 500, false,0xFF000000);
  16. displace.perlinNoise(150,150, 3, 30, true, false,0,true);
  17.  
  18. // try different blendmodes here
  19. displace.draw(radial, null ,null, BlendMode.LIGHTEN);
  20.  
  21. var displacementMap:DisplacementMapFilter = new DisplacementMapFilter(displace, new Point(0,0), 1, 1,  0, 0, DisplacementMapFilterMode.WRAP);
  22.  
  23. var scale:Number = 50 / stage.stageWidth;
  24.  
  25. addEventListener(Event.ENTER_FRAME, onLoop);
  26. function onLoop(evt:Event):void {
  27.  
  28.     canvas.copyPixels(displace, canvas.rect, new Point(0,0));
  29.      
  30.     displacementMap.scaleX = 25 - mouseX  * scale ;
  31.     displacementMap.scaleY = 25 - mouseY  * scale ;
  32.    
  33.     canvas.applyFilter(canvas, canvas.rect, new Point(0,0), displacementMap);
  34. }

This one is hard to describe, so take a look at the swf first.

I think displacement maps are underused - they're very powerful. In this snippet I use a DisplacementMapFilter to create a parallax effect on some perlin noise and a radial gradient. The result is an abstract texture that looks 3D.

I got the idea from a demo for the alternative game engine. The first time I saw this demo I had no idea how they were doing it... but after looking at it a few times, I noticed some distortion around the neck area of the model... at that point I recognized it as a displacement map and whipped up a demo (using a drawings as the source image). The alternativa demo also has some color stuff happening to simulate lighting... I'm assuming that's done with a ColorMatrixFilter or two, but I'm not sure.

As in the alternativa demo, this technique could be used with 2 images... one depth map rendered out from your favorite 3D app and one textured render....

Posted in 3D, BitmapData, misc | Tagged , | Leave a comment

Matrix() 3 Point Skew

By Zevan | January 18, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=500, height=500, backgroundColor=0xFFFFFF, frameRate=30)]
  2.  
  3. var box:Sprite = createSprite("Rect", 0, 0, 100, 100, 0xFF0000);
  4.  
  5. var d0:Sprite = drag(createSprite("Ellipse",  -5, -5, 10, 10));
  6. d0.x = d0.y = 200;
  7.  
  8. var d1:Sprite = drag(createSprite("Ellipse",  -5, -5, 10, 10));
  9. d1.x = 200
  10. d1.y = 300;
  11.  
  12. var d2:Sprite = drag(createSprite("Ellipse",  -5, -5, 10, 10));
  13. d2.y = d0.y;
  14. d2.x = 300;
  15.  
  16. addEventListener(Event.ENTER_FRAME, onLoop);
  17.  
  18. function onLoop(evt:Event):void {
  19.  
  20.     var m:Matrix = new Matrix();
  21.     m.scale((d2.x - d0.x) / 100,(d1.y - d0.y) / 100);
  22.     m.translate(d0.x, d0.y);
  23.    
  24.     m.c =  (d1.x - d0.x) / 100
  25.     m.b =  (d2.y - d0.y ) / 100
  26.    
  27.     box.transform.matrix = m;
  28. }
  29.  
  30. function createSprite(shape:String, xp:Number, yp:Number, w:Number, h:Number, col:uint=0x444444):Sprite {
  31.     var s:Sprite = new Sprite();
  32.     s.graphics.beginFill(col);
  33.     s.graphics["draw" + shape](xp, yp, w, h);
  34.     addChild(s);
  35.     return s;
  36. }
  37.  
  38. function drag(target:*):*{
  39.     target.addEventListener(MouseEvent.MOUSE_DOWN, function(evt:MouseEvent){ evt.currentTarget.startDrag(); });
  40.     return target;
  41. }
  42.  
  43. stage.addEventListener(MouseEvent.MOUSE_UP, function(){ stopDrag() });

The above creates a red rectangle that can be skewed by dragging 3 points. Why is this so cool you ask?

This is why (move your mouse)

The above was written in flash 7, before the Matrix object existed. So in order to create it I used this technique from Eric Lin.

Posted in DisplayObject, MovieClip, matrix | Tagged , | Leave a comment