Shapevent

Microscopy Sketch (emboss)

Monday, September 29th, 2008

I've been tweaking a programmatic sketch for the past couple days... It contains three cell-like elements that randomly move around the screen. I've been trying to decide how to take it further...

Click above image to view flash version

To take it farther I just want to add some additional elements and maybe change the cells behavior a bit - something more than just floating around randomly - I'd like to have them eat other little cells - or change/die over time...

A few years back I wrote something like this in director. It runs super fast now because I put the framerate at 999... too lazy to go through my archives and dig up the .dir... so here's a still:

Using a convolution filter to create an emboss works nicely, but is very very slow. You can create an emboss effect by using copyPixels(), draw(), blend modes and a BlurFilter:

PLAIN TEXT

Actionscript:

var canvas:BitmapData = new BitmapData(500, 500, true, 0xFFFFFFFF);
var color:BitmapData= new BitmapData(500, 500, true, 0x81666666);
var over:BitmapData = new BitmapData(500, 500, true, 0xFF000000);
addChild(new Bitmap(canvas, "auto", true));
var circle:Shape = new Shape();
circle.graphics.beginFill(0xFFFFFF,1);
circle.graphics.drawCircle(0,0,50);
var m:Matrix = new Matrix();
m.tx = 0;
m.ty = 1;
addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
circle.x = mouseX;
circle.y = mouseY;
canvas.draw(circle, circle.transform.matrix);
canvas.copyPixels(color, color.rect, new Point(0,0), null, null, true);
over.copyPixels(canvas, canvas.rect, new Point(0,0), null, null, true);
canvas.draw(over, m, null, BlendMode.SCREEN);
over.applyFilter(over, over.rect, new Point(-2,-2), new BlurFilter(10,10,1));
canvas.draw(over, m, null, BlendMode.SUBTRACT);
}

I also did this kind of emboss in processing a few years back. The meat of that looked like this:

PLAIN TEXT

JAVA:

ellipse(mouseX,mouseY,60,60);
for(int i=0; i<(width*height)-offset; i++){
pixels[i] = ((int)((~pixels[i] & 0xff)*0.25f + (pixels[i+offset] & 0xff) * 0.75f)*65793);
}

Posted in actionscript, fast drawing, nature | 4 Comments »

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:

PLAIN TEXT

Actionscript:

// current pixel
var pix:uint;
var size:Number = 200;
// read from the pixels BitmapData and write to the buffer BitmapData
var pixels:BitmapData = new BitmapData(size,size, false, 0x000001);
var buffer:BitmapData = new BitmapData(size,size, false, 0x000001);
var frame:Bitmap = new Bitmap(pixels);
addChild(frame);
frame.scaleX= 2;
frame.scaleY = 2;
// place 300 red pixels
for (var i = 0; i<300; i++) {
buffer.setPixel(100 + Math.random()*40-20, 100 + Math.random()*40-20, 0xFF0000);
}
addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
for (var i:int = 0; i<size; i++) {
for (var j:int = 0; j<size; j++) {
pix = pixels.getPixel(j, i);
// add additional logic here:
if (pix == 0xFF0000) {
buffer.setPixel(j, i, 0x000001);
buffer.setPixel(j, i+Math.random()*4-2, 0xFF0000);
// and here
}
}
}
pixels.draw(buffer);
}