« Texture Generator Sketch
vCanvas Information »

Light Horns Sketch

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

Here is a simpler example of this technique:

This movie requires Flash Player 9

move mouse around white blur, click to cycle through different blendmodes

Here's the code - you can copy and paste it to your flash timeline:

PLAIN TEXT
Actionscript:
  1. stage.frameRate = 31;
  2. var original:BitmapData = new BitmapData(400,400, true, 0xFF000000);
  3. var circle:Shape = new Shape();
  4. circle.graphics.beginFill(0xdddddd);
  5. circle.graphics.drawCircle(200,200,100);
  6. original.draw(circle);
  7. original.applyFilter(original, original.rect, new Point(0,0), new BlurFilter(10,10,2));
  8. var overlay:BitmapData = new BitmapData(400,400, true, 0xFF000000);
  9. overlay.applyFilter(original, original.rect, new Point(0,0), new BlurFilter(20,20,2));
  10.  
  11.  
  12. var canvas:BitmapData = new BitmapData(400,400, true, 0xFF000000);
  13. addChild(new Bitmap(canvas));
  14.  
  15. var m:Matrix = new Matrix();
  16.  
  17. addEventListener(Event.ENTER_FRAME, onLoop);
  18.  
  19. var modeIndex:int = 0;
  20. var modes:Array =[BlendMode.HARDLIGHT,
  21. BlendMode.OVERLAY,
  22. BlendMode.DARKEN,
  23. BlendMode.DIFFERENCE,
  24. BlendMode.SUBTRACT,
  25. BlendMode.ADD,
  26. BlendMode.MULTIPLY];
  27.  
  28. function onLoop(evt:Event):void {
  29.     canvas.copyPixels(original, original.rect, new Point(0,0), null, null, true);
  30.     m.tx  = Math.max(-33,Math.min(33,(mouseX-200) / 6));
  31.     m.ty  = Math.max(-33,Math.min(33,(mouseY-200) / 6));
  32.     canvas.draw(overlay, m, null, modes[modeIndex % modes.length]);
  33. }
  34.  
  35. stage.addEventListener(MouseEvent.MOUSE_DOWN, onChangeMode);
  36. function onChangeMode(evt:MouseEvent):void {
  37.     modeIndex++;
  38.     trace(modes[modeIndex % modes.length]);
  39. }

This sketch would actuallty be a good candidate to test out my fast drawing library. I think I can create the same thing with many more horns. The number of horns is currently limited by the fact that each is made up of lots of circle movieClips.

This entry was posted on Wednesday, September 17th, 2008 at 9:33 am and is filed under actionscript, experiments, lighting, sketches.

Leave a Reply