Archive for the 'experiments' Category

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:

Avalanche (blendModes, bitmaps & blur)

Saturday, September 20th, 2008

Randomly combining filters, blendModes and bitmapData can lead to some interesting techniques. A few days ago I stumbled upon something that I could only think to call an avalanche effect:



Click above image to view flash version

Here is all the code - this will work right on your flash timeline:

Actionscript:
  1. var canvas:BitmapData = new BitmapData(500,500,true,0xFFFFFFFF);
  2. var overlay:BitmapData = new BitmapData(500,500, true, 0x02FFFFFF);
  3. addChild(new Bitmap(canvas,"auto",true));
  4.  
  5. var blur:BlurFilter = new BlurFilter(2,2,1);
  6.  
  7. var b = new Shape();
  8. b.graphics.beginFill(0x000000);
  9. b.graphics.drawCircle(0,0,20);
  10. b.x = 250;
  11. b.y = -40;
  12.  
  13. var m = new Matrix();
  14. m.tx = 0;
  15. m.ty = 2;
  16.  
  17. var vel:Number = .1;
  18. var t = 0;
  19.  
  20. addEventListener(Event.ENTER_FRAME, onLoop);
  21. function onLoop(evt:Event):void {
  22.     vel+=.05;
  23.     b.y += vel;
  24.     if (b.y> 600) {
  25.         t++;
  26.         if (t> 500) {
  27.             b.graphics.clear();
  28.             b.graphics.beginFill(0xFFFFFF);
  29.             b.graphics.drawCircle(0,0,20);
  30.             b.y = -100;
  31.             vel = 0;
  32.             b.x = Math.random()*300 + 100;
  33.             t = 200;
  34.         }
  35.     }
  36.     canvas.draw(b, b.transform.matrix);
  37.  
  38.         // this is the part that creates the effect
  39.     overlay.copyPixels(canvas, canvas.rect, new Point(0,0), null, null, true);
  40.     canvas.draw(overlay, m, null, BlendMode.DIFFERENCE);
  41.     overlay.applyFilter(overlay, overlay.rect, new Point(0,0), blur);
  42.     canvas.draw(overlay, m, null, BlendMode.SCREEN);
  43.     canvas.applyFilter(canvas, canvas.rect, new Point(0,0), blur);
  44. }

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