Archive for the 'code snippets' Category

City From Fire (Cellular Automata)

Saturday, September 27th, 2008

This is another sketch dug up from my Cellular Automata folder. As I mentioned in my previous post about Cellular Automata - I like to base the rules on the color of the current pixel and its neighbors. This example looks like a city being built from fire:





Click either of the above images to view flash version

If you watch this for about 20 or 30 seconds nearly all the fire should disappear - leaving red pixels wandering through gray corridors.

Once you've got a basic template for this type of CA... you can just play with the code. After awhile you can even begin to predict some of the results and really control what your CA does. The following code snippet should help you get started... it creates 300 vertically wandering red pixels:

Actionscript:
  1. // current pixel
  2. var pix:uint;
  3.  
  4. var size:Number = 200;
  5. // read from the pixels BitmapData and write to the buffer BitmapData
  6. var pixels:BitmapData = new BitmapData(size,size, false, 0x000001);
  7. var buffer:BitmapData = new BitmapData(size,size, false, 0x000001);
  8.  
  9. var frame:Bitmap = new Bitmap(pixels);
  10. addChild(frame);
  11.  
  12. frame.scaleX= 2;
  13. frame.scaleY = 2;
  14.  
  15. // place 300 red pixels
  16. for (var i = 0; i<300; i++) {
  17.     buffer.setPixel(100 + Math.random()*40-20, 100 + Math.random()*40-20, 0xFF0000);
  18. }
  19.  
  20. addEventListener(Event.ENTER_FRAME, onLoop);
  21. function onLoop(evt:Event):void {
  22.     for (var i:int = 0; i<size; i++) {
  23.         for (var j:int = 0; j<size; j++) {
  24.             pix = pixels.getPixel(j, i);
  25.             // add additional logic here:
  26.             if (pix == 0xFF0000) {
  27.                   buffer.setPixel(j, i, 0x000001);
  28.                   buffer.setPixel(j, i+Math.random()*4-2, 0xFF0000);
  29.                   // and here
  30.             }
  31.         }
  32.     }
  33.     pixels.draw(buffer);
  34. }

Ceiling Scape

Tuesday, September 23rd, 2008

I've been enjoying Keith Peters recent linescapes...

I started messing with something inspired by those and this is what I ended up with this:





Click either of the above images to see the flash version

In the end, these look less like a terrain and more like the ceiling of an alien cathedral...

The basic code behind the texture is pretty simple. Here's a demo you can run in your flash timeline:

Actionscript:
  1. var canvas:BitmapData = new BitmapData(550,400,true, 0xFFFFFFFF);
  2. addChild(new Bitmap(canvas, "auto", true));
  3.  
  4. var wave:Shape = new Shape();
  5.  
  6. var g:Graphics = wave.graphics;
  7.  
  8. for (var j:int = 0; j<160; j++) {
  9.     g.clear();
  10.     g.beginFill(0xffffff,.5);
  11.     g.lineStyle(1,0x000000,.5);
  12.     for (var i:int = 0; i<400; i++) {
  13.         var xp:Number = i*2;
  14.         var yp:Number = 40 - 30 * Math.sin((i*j) * Math.PI/180 );
  15.         if (i == 0) {
  16.             g.moveTo(xp, yp);
  17.         } else {
  18.             g.lineTo(xp, yp);
  19.         }
  20.     }
  21.     g.lineTo(xp, 100);
  22.     g.lineTo(0,100);
  23.     wave.y += 2;
  24.     canvas.draw(wave, wave.transform.matrix);
  25. }

If you run the above code you'll end up with this:

Plastic Pixel Lighting

Sunday, September 21st, 2008

I started working on some fluid dynamics today and got sidetracked .... somehow it turned into this:



Click above image to see flash version

Here's the code:

Actionscript:
  1. stage.frameRate = 31;
  2. var canvas:BitmapData = new BitmapData(100,100,true,0xFFFFFFFF);
  3. addChild(new Bitmap(canvas, "auto", true));
  4. scaleX = 4;
  5. scaleY = 4;
  6.  
  7. addEventListener(Event.ENTER_FRAME, onLoop);
  8.  
  9. var inc:int = 0;
  10. var cols:Array = new Array();
  11. var num:int = 10000
  12.  
  13.  
  14. for (var i:int = 0; i<num; i++){
  15.     cols.push(0);
  16. }
  17.  
  18. Mouse.hide();
  19.  
  20. function onLoop(evt:Event):void {
  21.     inc = 0
  22.     for (i = 0; i<100; i++){
  23.         for (var j:int = 0; j<100; j++){
  24.             var d:Number(Math.atan2(mouseY - i, mouseX - j) / Math.PI * 180) <<8  ;
  25.             if (d> 255){
  26.                 d = 255-d;
  27.             }
  28.                        // remove this line to see something completely different
  29.             d = d% 255;
  30.             cols[inc] += ((d) - cols[inc])/32;
  31.            
  32.             canvas.setPixel(j, i, 0xFF000000 + (cols[inc]<<16) + (cols[inc]<<8) + cols[inc]) 
  33.             inc++;
  34.         }
  35.     }
  36. }

try removing line 29....

I've actually tried to do this kind of effect before ... it really has a subtle feel of lighting - like pushing on a thin layer of plastic. I plan on taking this a step or two further.