Archive for the 'lighting' Category

Plastic Pixel Lighting

Sunday, September 21st, 2008

I started working on some fluid dynamics today and got sidetracked .... somehow it turned into this:



Click above image to see flash version

Here's the code:

Actionscript:
  1. stage.frameRate = 31;
  2. var canvas:BitmapData = new BitmapData(100,100,true,0xFFFFFFFF);
  3. addChild(new Bitmap(canvas, "auto", true));
  4. scaleX = 4;
  5. scaleY = 4;
  6.  
  7. addEventListener(Event.ENTER_FRAME, onLoop);
  8.  
  9. var inc:int = 0;
  10. var cols:Array = new Array();
  11. var num:int = 10000
  12.  
  13.  
  14. for (var i:int = 0; i<num; i++){
  15.     cols.push(0);
  16. }
  17.  
  18. Mouse.hide();
  19.  
  20. function onLoop(evt:Event):void {
  21.     inc = 0
  22.     for (i = 0; i<100; i++){
  23.         for (var j:int = 0; j<100; j++){
  24.             var d:Number(Math.atan2(mouseY - i, mouseX - j) / Math.PI * 180) <<8  ;
  25.             if (d> 255){
  26.                 d = 255-d;
  27.             }
  28.                        // remove this line to see something completely different
  29.             d = d% 255;
  30.             cols[inc] += ((d) - cols[inc])/32;
  31.            
  32.             canvas.setPixel(j, i, 0xFF000000 + (cols[inc]<<16) + (cols[inc]<<8) + cols[inc]) 
  33.             inc++;
  34.         }
  35.     }
  36. }

try removing line 29....

I've actually tried to do this kind of effect before ... it really has a subtle feel of lighting - like pushing on a thin layer of plastic. I plan on taking this a step or two further.

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

Light Horns Sketch

Wednesday, September 17th, 2008

This sketch is a few months old. It's made up of ten horn-like formations that appear to glow:









Click any of the above images to see the flash version

To achieve something that at times looks like its being altered by light I use a technique that I originally stumbled upon in photoshop.

1) Take your abstract image that looks 2D or Flat
2) Duplicate it
3) Blur it
4) Place it over your original image with an offset and a blend mode / layer mode

Read the rest of this entry »