Archive for the 'fast drawing' Category

« Previous Entries
Next Entries »

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:
  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.   }

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

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:

PLAIN TEXT
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:

Posted in actionscript, code snippets, experiments, fast drawing, sketches, textures | 2 Comments »

Isometric Oscillation

Friday, September 19th, 2008

While testing out my fast drawing library I created a handful of isometric planes. Most of these came out pretty standard and uninteresting looking - but they served the purpose of testing the flexibility of my API.

One plane came out rather interesting - its made up of 4,900 oscillating circles. Each circle oscillates up and down and changes from a light to dark color. I offset the oscillation of each circle using two cosine waves.



Click on the above image to view flash version

Posted in actionscript, experiments, fast drawing, isometric, sketches, textures | No Comments »

« Previous Entries
Next Entries »