Category Archives: BitmapData

Parallax Displacement Map

By Zevan | January 19, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=500, height=500, backgroundColor=0xCCCCCC, frameRate=30)]
  2.  
  3. var canvas:BitmapData = new BitmapData(500, 500, true, 0xFF000000);
  4. addChild(new Bitmap(canvas));
  5.  
  6. // create a radial gradient
  7. var radial:Shape = new Shape();
  8. var m:Matrix = new Matrix()
  9. m.createGradientBox(500,500,0,0,0);
  10. radial.graphics.beginGradientFill(GradientType.RADIAL, [0xFFFFFF, 0x000000], [1, 1], [0, 200], m, SpreadMethod.PAD);
  11.  
  12. radial.graphics.drawRect(0,0,500,500);
  13. radial.x = radial.y = 0;
  14.  
  15. var displace:BitmapData = new BitmapData(500, 500, false,0xFF000000);
  16. displace.perlinNoise(150,150, 3, 30, true, false,0,true);
  17.  
  18. // try different blendmodes here
  19. displace.draw(radial, null ,null, BlendMode.LIGHTEN);
  20.  
  21. var displacementMap:DisplacementMapFilter = new DisplacementMapFilter(displace, new Point(0,0), 1, 1,  0, 0, DisplacementMapFilterMode.WRAP);
  22.  
  23. var scale:Number = 50 / stage.stageWidth;
  24.  
  25. addEventListener(Event.ENTER_FRAME, onLoop);
  26. function onLoop(evt:Event):void {
  27.  
  28.     canvas.copyPixels(displace, canvas.rect, new Point(0,0));
  29.      
  30.     displacementMap.scaleX = 25 - mouseX  * scale ;
  31.     displacementMap.scaleY = 25 - mouseY  * scale ;
  32.    
  33.     canvas.applyFilter(canvas, canvas.rect, new Point(0,0), displacementMap);
  34. }

This one is hard to describe, so take a look at the swf first.

I think displacement maps are underused - they're very powerful. In this snippet I use a DisplacementMapFilter to create a parallax effect on some perlin noise and a radial gradient. The result is an abstract texture that looks 3D.

I got the idea from a demo for the alternative game engine. The first time I saw this demo I had no idea how they were doing it... but after looking at it a few times, I noticed some distortion around the neck area of the model... at that point I recognized it as a displacement map and whipped up a demo (using a drawings as the source image). The alternativa demo also has some color stuff happening to simulate lighting... I'm assuming that's done with a ColorMatrixFilter or two, but I'm not sure.

As in the alternativa demo, this technique could be used with 2 images... one depth map rendered out from your favorite 3D app and one textured render....

Also posted in 3D, misc | Tagged , | Leave a comment

Image Airbrush

By Zevan | January 16, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=500, height=500, backgroundColor=0x000000, frameRate=30)]
  2.  
  3. // draw an ugly gradient
  4. var size:int = 500;
  5. var pixNum:int = size * size;
  6. var gradient:BitmapData = new BitmapData(size, size, true, 0xFF000000);
  7.  
  8. gradient.lock();
  9. var xp:int, yp:int;
  10. for (var i:int = 0; i<pixNum; i++){
  11.     xp = i % size;
  12.     yp = i / size;
  13.     gradient.setPixel(xp, yp, (yp /= 2) <<16 | (255 - yp) <<8 | (xp / 2) );
  14. }
  15. gradient.unlock();
  16.  
  17. // draw an alphaChannel (radial gradient)
  18. var radius:Number = 50;
  19. var diameter:Number = radius * 2;
  20.  
  21. pixNum = diameter * diameter;
  22.  
  23. var brushAlpha = new BitmapData(diameter, diameter, true, 0x00000000);
  24. var dx:int, dy:int;
  25. var ratio:Number = 255 / radius;
  26. var a:int;
  27.  
  28. brushAlpha.lock();
  29. for (i = 0; i<pixNum; i++){
  30.     xp = i % diameter;
  31.     yp = i / diameter;
  32.     dx = xp - radius;
  33.     dy = yp - radius;
  34.     a = int(255 - Math.min(255,Math.sqrt(dx * dx + dy * dy) * ratio));
  35.     brushAlpha.setPixel32(xp, yp, a <<24);
  36. }
  37. brushAlpha.unlock();
  38.  
  39. // create a black canvas
  40. var canvas:BitmapData = new BitmapData(size, size, true, 0xFF000000);
  41. addChild(new Bitmap(canvas));
  42.  
  43. addEventListener(Event.ENTER_FRAME, onLoop);
  44. function onLoop(evt:Event):void {
  45.     // draw the gradient onto the canvas using the alphaChannel (brushAlpha);
  46.     xp = mouseX - radius;
  47.     yp = mouseY - radius;
  48.     canvas.copyPixels(gradient,
  49.                     new Rectangle(xp, yp, diameter, diameter),
  50.                     new Point(xp, yp), brushAlpha, new Point(0,0), true);
  51. }

This demo creates an airbrush that paints one BitmapData onto another. This is achieved by using the alpha related arguments of the BitmapData.copyPixels() function. If your not familiar with these you should take some time to play around with them... they're very powerful.

copyPixels() is the fastest way to draw in flash, so if you need speed, copyPixels() is the way to go. It's much faster than using draw().

Also posted in setPixel | Tagged , | 2 Comments

BitmapData lock() & unlock()

By Zevan | January 15, 2009
CLICK HERE TO COPY
Actionscript:
  1. var size:Number = 400;
  2. var pixelNum:Number = size * size;
  3. var pixels:Vector.<uint> = new Vector.<uint>();
  4. var r:uint;
  5. var g:uint;
  6. var b:uint;
  7.  
  8. var canvas:BitmapData = new BitmapData(size,size,false,0x000000);
  9. addChild(new Bitmap(canvas));
  10.  
  11. addEventListener(Event.ENTER_FRAME, onLoop);
  12. function onLoop(evt:Event):void {
  13.  
  14.     canvas.lock();
  15.  
  16.     // do any kind of pixel manipulation here:
  17.    
  18.     for (var i:int = 0; i<pixelNum; i++) {
  19.         // draw a gradient that changes based on
  20.         // mouse position
  21.         r = i % size + mouseX;
  22.         b = i / size + mouseY;
  23.         g = (r + b) % mouseX;
  24.         pixels[i] = r <<16 | g <<8 | b;
  25.     }
  26.     canvas.setVector(canvas.rect, pixels);
  27.     //
  28.  
  29.     canvas.unlock();
  30. }

Using BitmapData.lock() and BitmapData.unlock() can speed up BitmaData drawing operations significantly. Simply lock your BitmapData before you draw to it, and unlock it when your done.

I often forget to do this until I get to the optimize phase of a project... but I think I'd like to get in the habit of doing it all the time....

Also posted in pixel manipulation | Tagged , | 2 Comments

BitmapData Trails

By Zevan | January 14, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=400, height=400, backgroundColor=0xCCCCCC, frameRate=30)]
  2.  
  3. var canvas:BitmapData = new BitmapData(400, 400, true, 0xCCCCCC);
  4. var eraser:BitmapData = new BitmapData(400, 400, true, 0x22CCCCCC);
  5. addChild(new Bitmap(canvas));
  6.  
  7. var circle:Shape = Shape(addChild(new Shape()));
  8. with (circle.graphics) beginFill(0x000000), drawCircle(0,0,20);
  9.  
  10. addEventListener(Event.ENTER_FRAME, onLoop);
  11.  
  12. function onLoop(evt:Event):void {
  13.     canvas.copyPixels(eraser, eraser.rect, new Point(0,0), null, null, true);
  14.     circle.x = mouseX;
  15.     circle.y = mouseY;
  16.    
  17.     canvas.draw(circle, circle.transform.matrix);
  18. }

Create trails by slowly erasing the background with copyPixels(). The first time I ever saw this technique was back when setpixel.com contained a bunch of great director experiments by Charles Foreman (creator of iminlikewithyou.com).

At some point last semester I showed iminlikewithyou hamster battle to my undergrad students towards the end of class.... probably one of the funniest moments of that class.

Also posted in misc | Tagged , | 1 Comment