Monthly Archives: July 2009

Perlin Outlines

Actionscript:
  1. [SWF(width = 600, height=600, backgroundColor=0xCCCCCC, frameRate=24)]
  2. var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight, false, 0x000000);
  3. var blur:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight, false, 0x000000);
  4. addChild(new Bitmap(canvas, "auto", true));
  5.  
  6. var w:int = canvas.width
  7. var hw:int = w / 2;
  8. var size:int = w * w;
  9. var seed:Number = Math.random()*100;
  10. var pnt:Point = new Point();
  11. var dy:Number = 0, dx:Number = 0;
  12. var blr:BlurFilter = new BlurFilter(10,10,1);
  13. addEventListener(Event.ENTER_FRAME, onLoop);
  14. function onLoop(evt:Event):void {
  15.    
  16.     dx += (mouseX - dx) / 4;
  17.     dy += (mouseY - dy) / 4;
  18.     canvas.lock();
  19.     canvas.perlinNoise(hw,hw,2,seed,false, false, 1, true, [new Point(dx, dy), new Point(-dx, -dy)]);
  20.     var pix:Vector.<uint> = canvas.getVector(canvas.rect);
  21.     for (var i:int = 0; i<size; i++){
  22.         var col:uint = 255 - pix[i] <<4 & 0x00FF00;
  23.         pix[i] = col <<8 | col | col>> 8;
  24.     }
  25.     canvas.setVector(canvas.rect, pix);
  26.     blur.copyPixels(canvas, canvas.rect, pnt);
  27.     blur.applyFilter(blur, blur.rect, pnt, blr);
  28.     canvas.draw(blur, null, null, BlendMode.DIFFERENCE);
  29.     canvas.draw(canvas, null, null, BlendMode.INVERT);
  30.     canvas.unlock();
  31. }

This is actually an optimized variation on some recent posts that made use of perlin noise. You can get a wide range of effects by changing just the BlendMode values alone.... I particularly like this combination of BlendModes because it reminds me a bit of a terrain map...

Have a look at the swf...

Posted in BitmapData, Vector, pixel manipulation | Tagged , , | Leave a comment

Parallax fp10

Actionscript:
  1. [SWF(backgroundColor=0x000000, width = 800, height = 600)]
  2.  
  3. // this is a trick to keep the 3D texture quality up...
  4. // try setting it right off the bat and you'll notice that the
  5. // Shapes look pixilated
  6. setTimeout(function():void{ stage.quality="low"}, 500);
  7.  
  8. var matrix:Matrix = new Matrix();
  9. matrix.createGradientBox(600, 600, 0, -450, -450);
  10.  
  11. var boxNum:int = 30;
  12. var boxes:Array = [];
  13. for (var i:int = 0; i<boxNum; i++) boxes[i] = makeBox();
  14.  
  15. var dx:Number = 0, dy:Number = 0;
  16. onLoop();
  17. addEventListener(Event.ENTER_FRAME, onLoop);
  18.  
  19. function onLoop(evt:Event=null):void {
  20.     dx += (mouseX - dx) / 4;
  21.     dy += (mouseY - dy) / 4;
  22.     for (var i:int = 0; i<boxNum; i++){
  23.         var box:Shape = boxes[i];
  24.         box.z = 400 - i * 20;
  25.         box.x = dx;
  26.         box.y = dy;
  27.         box.rotation = i + getTimer() / 10;
  28.     }
  29. }
  30.  
  31. function makeBox():Shape{
  32.     var box:Shape = Shape(addChild(new Shape()));
  33.     box.x = stage.stageWidth/2;
  34.     box.y = stage.stageHeight/2;
  35.     box.z = 1;
  36.     with (box.graphics){
  37.          beginGradientFill(GradientType.RADIAL, [0xFFFFFF, 0x333333], [1,1], [0, 255], matrix, SpreadMethod.PAD);
  38.         drawRect(-100, -100, 200, 200);
  39.         drawRect(-70, -70, 140, 140);
  40.     }
  41.     return box;
  42. }

This snippet draws 30 gradient box shapes, gives them different z values and then moves them based on the mouse. This technique is good if you just want a few layers of parallax motion - I got carried away and you'll notice that if you add more boxes it begins to slow down pretty quick.


Have a look at the swf....



I first used this technique for this small interactive drawing...

Something interesting I noticed about fp10 3D DisplayObjects is that if you set the stage.quality to low right off the bat, the display objects look pixelated... but if you wait a few milliseconds, you end up with less pixelation and you still get a speed boost from the low quality - I think it must have something to do with the way the 3D textures are handled by the player...

Tomorrow I think I'll post a version of this that uses IGraphicsData and Utils.projectVectors()... should be a huge speed boost...

Posted in 3D, motion | Tagged , , | 1 Comment

Another Perlin Texture

Actionscript:
  1. var canvas:BitmapData = new BitmapData(1200,1200,false, 0x000000);
  2. addChild(new Bitmap(canvas));
  3.  
  4. scaleX = scaleY = 0.5;
  5. var w:int = canvas.width
  6. var hw:int = w / 2;
  7. var hhw:int = hw / 2;
  8. var size:int = canvas.width * canvas.width;
  9.  
  10. canvas.perlinNoise(hhw,hhw,1,Math.random()*100,false, false, 1, true);
  11.  
  12. for (var i:int = 0; i<size; i++){
  13.     var xp:int = i % w;
  14.     var yp:int = int(i / w);
  15.     var col:uint =  canvas.getPixel(xp, yp) / (-20|i+xp)>> 8 & 0xFF
  16.     canvas.setPixel(xp, yp, col <<16 | col <<8 | col);
  17. }
  18.  
  19. canvas.applyFilter(canvas, canvas.rect, new Point(0,0), new BlurFilter(4,4,1));
  20. var blur:BitmapData = canvas.clone();
  21. blur.applyFilter(blur, blur.rect, new Point(0,0), new BlurFilter(10,10,1));
  22.  
  23. canvas.draw(blur, null, null, BlendMode.DARKEN);

This is a variation on yesterdays post. I think it's time to optimize this and see how it does in real time...

Here is what this snippet will draw:

Posted in BitmapData, misc, pixel manipulation, setPixel | Tagged , , | 2 Comments

Overexposed Perlin Texture

Actionscript:
  1. var canvas:BitmapData = new BitmapData(1200,1200,false, 0x000000);
  2. addChild(new Bitmap(canvas));
  3.  
  4. scaleX = scaleY = 0.5;
  5. var w:int = canvas.width
  6. var hw:int = w / 2;
  7. var hhw:int = hw / 2;
  8. var size:int = canvas.width * canvas.width;
  9.  
  10. canvas.perlinNoise(hhw,hhw,2,Math.random()*100,false, false, 1, true);
  11.  
  12. for (var i:int = 0; i<size; i++){
  13.     var xp:int = i % w;
  14.     var yp:int = int(i / w);
  15.     var col:uint =  canvas.getPixel(xp, yp) / (xp+yp-w)>> 8 & 0xFF
  16.     canvas.setPixel(xp, yp, col <<16 | col <<8 | col)
  17. }
  18.  
  19. var blur:BitmapData = canvas.clone();
  20. blur.applyFilter(blur, blur.rect, new Point(0,0), new BlurFilter(10,10,1));
  21.  
  22. canvas.draw(blur, null, null, BlendMode.ADD);

I was playing around awhile back and created this snippet, it will draw something that looks like this:

this is one of those snippets that can produce vastly different looking images with minor changes to the code... for instance, try changing the blendMode to darken and line 15 to this:

var col:uint = canvas.getPixel(xp, yp) / (xp|yp-w) >> 5 & 0xFF;

and you'll end up with this:

...take the original snippet and change the blendMode to subtract:

etc...

Posted in BitmapData, misc, setPixel | Tagged , , | Leave a comment