Category Archives: misc

Glitch Auto-asteroids

By Zevan | January 25, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=600, height=400, backgroundColor=0x000000, frameRate=30)]
  2. // make some ships
  3. for (var i:int = 0; i<10; i++) makeShip();
  4. //
  5. function makeShip():void {
  6.     // setup vars
  7.     var char:Object ={posX:Math.random()*stage.stageWidth, posY:Math.random()*stage.stageHeight, velX:0, velY:0, rad:4, theta:Math.random()*6.28, thetaDest:Math.random()*6.28, mc: MovieClip(addChild(new MovieClip()))}
  8.     // draw and position the char
  9.     with(char.mc) graphics.lineStyle(0,0xFFFFFF), graphics.moveTo(-15, -5), graphics.lineTo(0, 0), graphics.lineTo(-15, 5), x=char.posX, y=char.posY;
  10.     // loop
  11.     addEventListener(Event.ENTER_FRAME, function(){
  12.         // change position based on velocity, .9 friction
  13.         with (char) posX += velX *= .9, posY += velY *= .9;
  14.         // randomize radius and theta
  15.         if (int(Math.random()*10) == 1) char.thetaDest += Math.random()*2-1;
  16.         if (int(Math.random()*90) == 1) char.rad = Math.random()*4 + 4
  17.         // apply changes to velocity
  18.         char.theta += (char.thetaDest - char.theta) / 12;
  19.         char.velX = char.rad * Math.cos(char.theta);
  20.         char.velY = char.rad * Math.sin(char.theta);
  21.         // screen bounds
  22.         if (char.posX> 620) char.posX = -20;
  23.         if (char.posX <-20) char.posX = 620;
  24.         if (char.posY> 420) char.posY = -20;
  25.         if (char.posY <-20) char.posY = 420;
  26.         // rotation
  27.         char.mc.rotation = (Math.abs(char.mc.y - char.posY)>.7 || Math.abs(char.mc.x - char.posX)> .7) ?  Math.atan2(char.posY - char.mc.y,char.posX -  char.mc.x) / Math.PI * 180 : char.mc.rotation;
  28.         // shoot
  29.         if(int(Math.random()*100) <20) shootBullet(char, 5 * Math.cos(char.mc.rotation * Math.PI / 180)+ char.velX, 5 * Math.sin(char.mc.rotation * Math.PI / 180) + char.velY);
  30.         // apply position
  31.         with(char) mc.x = posX, mc.y = posY;
  32.         });
  33. }
  34. //
  35. function shootBullet(char:Object, vx:Number, vy:Number):void{
  36.     var b:MovieClip = MovieClip(addChild(new MovieClip()));
  37.     b.life = 0;
  38.     with(b) graphics.beginFill(0xFFFFFF), graphics.drawCircle(0,0,2), x = char.mc.x, y = char.mc.y;
  39.     b.addEventListener(Event.ENTER_FRAME, function(){
  40.             with (b) x += vx, y += vy, life++;
  41.             if (b.life> 30) b.removeEventListener(Event.ENTER_FRAME, arguments.callee), removeChild(b);
  42.     });
  43. }

An asteroids inspired code snippet. See the swf here.

Also posted in motion | Tagged , | Leave a comment

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.

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

Also posted in 3D, BitmapData | 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....

Also posted in 3D, BitmapData | Tagged , | Leave a comment