Archive for the 'actionscript' 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. }

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