Archive for the 'textures' Category

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

Texture Generator Sketch

Tuesday, September 16th, 2008

When I was in 6th or 7th grade I used to spend hours playing with Kai's Power Tools or KPT 1.0. I used to imagine creating my own version of a the texture explorer... I'm still inspired by memories of KPT...

A few months back I read an article about snowflakes in cabinate magazine and for some reason it gave me an idea for a texture generator.

This sketch generates 64 textures - you can click them to see the full-sized texture - simply click again to go back to the thumbnail view.


Click above image to see flash version

After creating this I realized it wouldn't be very hard to animate them:

Click above Image to see ANIMATED flash version

I also tried applying random colors but wasn't too happy with the results - I'd say about 70% of the colored textures are hideous... the ones that aren't look pretty good. I still prefer the black and white ones...

I may restrict the colors to a set pallet to remedy the problem, but for now I'm just going to leave it as is. Here are a few select results that I thought came out alright.


Click any of the above images to see flash version

I used Grant Skinner's Random Seed class so that if something really interesting came up I'd easily be able to regenerate it. My current generator chooses a seed from 0-100... so there are really only 100 sets of 64 textures. If i decide to take this further, I may add the ability to enter the seed via an input textbox...