Category Archives: BitmapData

BlendModes & Blur

By Zevan | July 15, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 750, height = 750)]
  2. var canvas:BitmapData = new BitmapData(750,1000,false, 0x000000);
  3. addChild(new Bitmap(canvas));
  4.  
  5. var loader:Loader = new Loader();
  6. loader.load(new URLRequest("http://actionsnippet.com/imgs/paint.jpg"));
  7. loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
  8. var bit:BitmapData
  9. var blurred:BitmapData;
  10. function onLoaded(evt:Event):void{
  11.     bit = Bitmap(evt.target.content).bitmapData;
  12.     blurred = bit.clone();
  13.     blurred.applyFilter(blurred, blurred.rect, new Point(0,0), new BlurFilter(4, 4, 6));
  14.     var blends:Array = [BlendMode.NORMAL,BlendMode.ADD, BlendMode.DARKEN,BlendMode.HARDLIGHT,BlendMode.LIGHTEN, BlendMode.MULTIPLY, BlendMode.OVERLAY,BlendMode.SCREEN, BlendMode.DIFFERENCE];
  15.     var m:Matrix = new Matrix();
  16.     for (var i:int = 0; i<blends.length; i++){
  17.         m.tx = i % 3 * 250;
  18.         m.ty = int(i / 3) * 250;
  19.         canvas.draw(bit, m);
  20.         if (i> 0){
  21.         canvas.draw(blurred, m, null, blends[i]);
  22.         }
  23.     }
  24. }

When I used to use photoshop for more than just the most basic of things, I would use a simple technique that employed layer modes (blend modes in flash) and blur. Sometimes, if I had a low quality image that I wanted to make look a little better, or just wanted to give an image a subtle effect, I would duplicate the layer the image was on, blur it and then go through all the layer modes on that duplicate layer until I found something I liked.

This snippet does the same thing with a few select blend modes:

This isn't the greatest image to illustrate the effect, but I didn't feel like digging something better up. Two notable swatches are the upper right (darken) and the lower middle (screen).

Also posted in misc | Tagged , , | 6 Comments

Cut Image into Squares (copyPixels)

By Zevan | July 14, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=650, height=650)]
  2. var loader:Loader = new Loader();
  3. loader.load(new URLRequest("http://actionsnippet.com/wp-content/chair.jpg"));
  4. loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
  5.  
  6. var w:Number;
  7. var h:Number;
  8. var rows:Number = 20;
  9. var cols:Number = 20;
  10. var tiles:Vector.<BitmapData> = new Vector.<BitmapData>();
  11. var locX:Vector.<Number> = new Vector.<Number>();
  12. var locY:Vector.<Number> = new Vector.<Number>();
  13. var rX:Vector.<Number> = new Vector.<Number>();
  14. var rY:Vector.<Number> = new Vector.<Number>();
  15. var sX:Vector.<Number> = new Vector.<Number>();
  16. var sY:Vector.<Number> = new Vector.<Number>();
  17. function onLoaded(evt:Event):void{
  18.     w = evt.target.width;
  19.     h = evt.target.height;
  20.     var image:BitmapData = Bitmap(evt.target.content).bitmapData;
  21.     var tileWidth:Number = w / cols;
  22.     var tileHeight:Number = h / rows;
  23.     var inc:int = 0;
  24.     var pnt:Point = new Point();
  25.     var rect:Rectangle = new Rectangle(0,0,tileWidth,tileHeight);
  26.     for (var i:int = 0; i<rows; i++){
  27.         for (var j:int = 0; j<cols; j ++){
  28.              var currTile:BitmapData= new BitmapData(tileWidth, tileHeight, true, 0x00000000);
  29.              rect.x = j * tileWidth;
  30.              rect.y = i * tileHeight;
  31.              currTile.copyPixels(image, rect, pnt, null, null, true);
  32.              tiles[inc] = currTile;
  33.              rect.x += 25;
  34.              rect.y += 25;
  35.              sX[inc] = rect.x;
  36.              sY[inc] = rect.y;
  37.              locX[inc] = rX[inc] = -rect.width * 2
  38.              locY[inc] = rY[inc] =  Math.random() * stage.stageHeight;
  39.              setTimeout(startAnimation, inc *4 + 100, inc, rect.x, rect.y);
  40.              inc++;
  41.         }
  42.     }
  43. }
  44.  
  45. function startAnimation(index:int, dx:Number, dy:Number):void{
  46.     var interval:Number;
  47.     var animate:Function = function(index:int):void{
  48.         locX[index] += (dx - locX[index]) / 4;
  49.         locY[index] += (dy - locY[index]) / 4;
  50.         if (Math.abs(locX[index] - dx) <1 && Math.abs(locY[index] - dy)<1){
  51.             locX[index] = dx;
  52.             locY[index] = dy;
  53.             clearInterval(interval);
  54.         }
  55.     }
  56.    interval = setInterval(animate, 32, index);
  57. }
  58.  
  59. var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF);
  60. addChild(new Bitmap(canvas));
  61.  
  62. var loc:Point = new Point();
  63. addEventListener(Event.ENTER_FRAME, onLoop);
  64. function onLoop(evt:Event):void {
  65.       canvas.fillRect(canvas.rect, 0xFFFFFF);
  66.       for (var i:int = 0; i<tiles.length; i++){
  67.             var tile:BitmapData= tiles[i];
  68.             loc.x = locX[i];
  69.             loc.y = locY[i];
  70.             canvas.copyPixels(tile, tile.rect, loc, null, null, true);
  71.       }
  72. }

This snippet cuts a dynamically loaded image into a series of smaller BitmapData instances. These BitmapData instances are then drawn to a canvas BitmapData using copyPixels. The BitmapData.copyPixels() method is extremely fast - so this has some advantages over yesterdays post (which did basically the same thing with Sprites). I used setInterval and setTimeout to do a simple demo animation, but I recommend using TweenLite on a real project.

Also posted in Vector | Tagged , , | 10 Comments

Cut Image Into Squares

By Zevan | July 13, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=650, height=650)]
  2. var loader:Loader = new Loader();
  3. loader.load(new URLRequest("http://actionsnippet.com/wp-content/chair.jpg"));
  4. loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
  5. x = y = 25;
  6. var w:Number;
  7. var h:Number;
  8. var rows:Number = 20;
  9. var cols:Number = 20;
  10. var tiles:Vector.<Sprite> = new Vector.<Sprite>();
  11. function onLoaded(evt:Event):void{
  12.     w = evt.target.width;
  13.     h = evt.target.height;
  14.     var image:BitmapData = Bitmap(evt.target.content).bitmapData;
  15.     var tileWidth:Number = w / cols;
  16.     var tileHeight:Number = h / rows;
  17.     var inc:int = 0;
  18.     var pnt:Point = new Point();
  19.     var rect:Rectangle = new Rectangle(0,0,tileWidth,tileHeight);
  20.     for (var i:int = 0; i<rows; i++){
  21.         for (var j:int = 0; j<cols; j ++){
  22.              var currTile:BitmapData= new BitmapData(tileWidth, tileHeight, true, 0x00000000);
  23.              rect.x = j * tileWidth;
  24.              rect.y = i * tileHeight;
  25.              currTile.copyPixels(image, rect, pnt, null, null, true);
  26.              var bit:Bitmap = new Bitmap(currTile, "auto", false);
  27.              var s:Sprite = tiles[inc] = Sprite(addChild(new Sprite()));
  28.              // offset them a little bit to show that they are in fact tiles.
  29.              s.x = rect.x + Math.random()*10 - 5;
  30.              s.y = rect.y + Math.random()*10 - 5;
  31.              
  32.             /* If you have TweenLite, try something like this:
  33.              s.x = rect.x;
  34.              s.y = rect.y;
  35.              TweenLite.from(s, 0.3, {x:Math.random()*stage.stageWidth, y:Math.random()*stage.stageHeight, alpha:0, delay:inc / 50});
  36.              */
  37.              s.addChild(bit);
  38.              inc++;
  39.         }
  40.     }
  41. }

This snippet shows how to cut a dynamically loaded image up into small squares (or rectangles). Each square is placed into a sprite and these sprites are stored in a vector for later use. This kind of thing could be useful in conjunction with tweening engines to create transition effects. If you have TweenLite on your machine you could add the import statement "import gs.TweenLIte" and uncomment lines 33-35.

For the purposes of this demo I just offset each sprite slightly to show that it the loaded image has in face been cut up. Here are a few stills with created by altering the rows and cols variables:

Without any animation, this snippet is a bit boring - again, using TweenLite or some other tweening engine is the way to go.

Also posted in external data | Tagged , , , | 12 Comments

BitmapData & Particles

By Zevan | July 12, 2009
CLICK HERE TO COPY
Actionscript:
  1. stage.frameRate = 30;
  2. stage.quality = StageQuality.LOW;
  3.  
  4. var canvas:BitmapData = new BitmapData(400,400,false, 0x000000);
  5. addChild(new Bitmap(canvas));
  6. var overlay:BitmapData = new BitmapData(400,400,true, 0x12000000);
  7. var particles:Dictionary = new Dictionary(true);
  8.  
  9. var blur:Array = [new BlurFilter(8,8,1)];
  10.    
  11. addEventListener(Event.ENTER_FRAME, onLoop);
  12. function onLoop(evt:Event):void {
  13.     for (var i:int= 0; i<3; i++) createParticle();
  14.     canvas.copyPixels(overlay, canvas.rect, new Point(0,0), null, null, true);
  15. }
  16.  
  17. function createParticle():void{
  18.     var s:MovieClip = new MovieClip();
  19.     var diameter:Number = Math.random()*50 + 2;
  20.     var radius:Number = diameter / 2;
  21.     var mat:Matrix = new Matrix();
  22.     mat.createGradientBox(diameter, diameter, 0, -radius, -radius);
  23.     mat.createGradientBox(diameter, diameter, 0, -radius, -radius);
  24.     s.graphics.beginGradientFill(GradientType.RADIAL, [ 0xFFCC32, 0xFF0000], [0.5,0.8], [0, 255], mat, SpreadMethod.PAD);
  25.     s.graphics.drawCircle(0,0,radius);
  26.     s.velX = 0;
  27.     s.velY =  -Math.random()*6 + 3;
  28.     s.posX = s.x = 150+ Math.random() * 100;
  29.     s.posY = s.y = 200;
  30.     s.theta= Math.random() * Math.PI * 2;
  31.     s.inc = Math.random() * 0.4 + 0.01;
  32.     s.rad = Math.random() * 4 + 1;
  33.     s.filters = blur;
  34.     // since the particles aren't on the display list, we need to keep a reference to them
  35.     particles[s] = s;
  36.     s.addEventListener(Event.ENTER_FRAME, onRunParticle);
  37. }
  38. function onRunParticle(evt:Event):void {
  39.     var s:MovieClip = MovieClip(evt.currentTarget);
  40.     s.posX += s.velX;
  41.     s.posY += s.velY;
  42.     s.velX = s.rad * Math.cos(s.theta);
  43.     s.theta += s.inc;
  44.     s.scaleX = s.scaleY -=  .03;
  45.     if (s.scaleX <0){
  46.         particles[s] = null;
  47.         s.removeEventListener(Event.ENTER_FRAME, onRunParticle);
  48.     }
  49.     s.x = s.posX;
  50.     s.y = s.posY;
  51.     canvas.draw(s, s.transform.matrix, null, BlendMode.ADD);
  52. }

This is a slight variation on a simple particle system that I show in my intermediate class. It is almost the same as this example. But it makes use of filters and BitmapData.

Here is a still generated with this snippet. You'll notice it vaguely resembles fire.

If you need more particles, there are other approaches that are more appropriate.

Also posted in Graphics, motion | Tagged , , | Leave a comment