« City From Fire (Cellular Automata)
Eyes & Code Drawing »

Microscopy Sketch (emboss)

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:
  1. var canvas:BitmapData = new BitmapData(500, 500, true, 0xFFFFFFFF);
  2. var color:BitmapData= new BitmapData(500, 500, true, 0x81666666);
  3. var over:BitmapData = new BitmapData(500, 500, true, 0xFF000000);
  4. addChild(new Bitmap(canvas, "auto", true));
  5.  
  6. var circle:Shape = new Shape();
  7. circle.graphics.beginFill(0xFFFFFF,1);
  8. circle.graphics.drawCircle(0,0,50);
  9.  
  10.  
  11. var m:Matrix = new Matrix();
  12.  
  13. m.tx = 0;
  14. m.ty = 1;
  15.  
  16. addEventListener(Event.ENTER_FRAME, onLoop);
  17. function onLoop(evt:Event):void {
  18.  
  19.     circle.x = mouseX;
  20.     circle.y = mouseY;
  21.     canvas.draw(circle, circle.transform.matrix);
  22.  
  23.     canvas.copyPixels(color, color.rect, new Point(0,0), null, null, true);
  24.    
  25.     over.copyPixels(canvas, canvas.rect, new Point(0,0), null, null, true);
  26.  
  27.     canvas.draw(over, m, null, BlendMode.SCREEN);
  28.     over.applyFilter(over, over.rect, new Point(-2,-2), new BlurFilter(10,10,1));
  29.  
  30.     canvas.draw(over, m, null, BlendMode.SUBTRACT);
  31. }

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

PLAIN TEXT
JAVA:
  1. ellipse(mouseX,mouseY,60,60);
  2.  
  3.   for(int i=0; i<(width*height)-offset; i++){
  4.     pixels[i] = ((int)((~pixels[i] & 0xff)*0.25f + (pixels[i+offset] & 0xff) * 0.75f)*65793);
  5.   }

This entry was posted on Monday, September 29th, 2008 at 11:41 am and is filed under actionscript, fast drawing, nature.

4 Responses to “Microscopy Sketch (emboss)”

  1. Richard Says:
    September 29th, 2008 at 11:11 pm

    I’ve watched this thing for a longer period of time and with more interest than any other code animation that I’ve seen. The changes in it are very measured and visible. One can experience the events. In general, there’s something about your work that I especially like. I also like your drawings in your daily log section.

  2. zevan Says:
    September 30th, 2008 at 6:46 am

    Thank’s Richard.
    I have some more daily log style animations and drawings floating around on my harddrive - I’ve just been trying to decide how to organize them before I put them up…

  3. subblue Says:
    October 13th, 2008 at 5:08 am

    That is a great effect. Very subtle and organic. I’ve only just come across your site- love your experiments! I’ve recently started a new blog in a similar vein with mathematical and generative art Flash experiments.

  4. zevan Says:
    October 13th, 2008 at 8:35 am

    Thanks subblue. You site and blog look really excellent… I’m going to drink my morning coffee and read through some of your entries…

Leave a Reply