{"id":345,"date":"2009-07-14T14:53:06","date_gmt":"2009-07-14T21:53:06","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=1760"},"modified":"2009-07-14T14:53:06","modified_gmt":"2009-07-14T21:53:06","slug":"cut-image-into-squares-copypixels","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=345","title":{"rendered":"Cut Image into Squares (copyPixels)"},"content":{"rendered":"
\r\n[SWF(width=650, height=650)]\r\nvar loader:Loader = new Loader();\r\nloader.load(new URLRequest("https:\/\/actionsnippet.com\/wp-content\/chair.jpg"));\r\nloader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);\r\n\r\nvar w:Number;\r\nvar h:Number;\r\nvar rows:Number = 20;\r\nvar cols:Number = 20;\r\nvar tiles:Vector.<BitmapData> = new Vector.<BitmapData>();\r\nvar locX:Vector.<Number> = new Vector.<Number>();\r\nvar locY:Vector.<Number> = new Vector.<Number>();\r\nvar rX:Vector.<Number> = new Vector.<Number>();\r\nvar rY:Vector.<Number> = new Vector.<Number>();\r\nvar sX:Vector.<Number> = new Vector.<Number>();\r\nvar sY:Vector.<Number> = new Vector.<Number>();\r\nfunction onLoaded(evt:Event):void{\r\n\tw = evt.target.width;\r\n\th = evt.target.height;\r\n\tvar image:BitmapData = Bitmap(evt.target.content).bitmapData;\r\n\tvar tileWidth:Number = w \/ cols;\r\n\tvar tileHeight:Number = h \/ rows;\r\n\tvar inc:int = 0;\r\n\tvar pnt:Point = new Point();\r\n\tvar rect:Rectangle = new Rectangle(0,0,tileWidth,tileHeight);\r\n\tfor (var i:int = 0; i<rows; i++){\r\n\t\tfor (var j:int = 0; j<cols; j ++){\r\n\t\t\t var currTile:BitmapData= new BitmapData(tileWidth, tileHeight, true, 0x00000000);\r\n\t\t\t rect.x = j * tileWidth;\r\n\t\t\t rect.y = i * tileHeight;\r\n\t\t\t currTile.copyPixels(image, rect, pnt, null, null, true);\r\n\t\t\t tiles[inc] = currTile;\r\n\t\t\t rect.x += 25;\r\n\t\t\t rect.y += 25;\r\n\t\t\t sX[inc] = rect.x;\r\n\t\t\t sY[inc] = rect.y;\r\n\t\t\t locX[inc] = rX[inc] = -rect.width * 2\r\n\t\t\t locY[inc] = rY[inc] =  Math.random() * stage.stageHeight;\r\n\t\t\t setTimeout(startAnimation, inc *4 + 100, inc, rect.x, rect.y);\r\n\t\t\t inc++;\r\n\t\t}\r\n\t}\r\n}\r\n\r\nfunction startAnimation(index:int, dx:Number, dy:Number):void{\r\n\tvar interval:Number;\r\n\tvar animate:Function = function(index:int):void{\r\n\t\tlocX[index] += (dx - locX[index]) \/ 4;\r\n\t\tlocY[index] += (dy - locY[index]) \/ 4;\r\n\t\tif (Math.abs(locX[index] - dx) < 1 && Math.abs(locY[index] - dy)<1){\r\n\t\t\tlocX[index] = dx;\r\n\t\t\tlocY[index] = dy;\r\n\t\t    clearInterval(interval);\r\n\t\t}\r\n\t}\r\n   interval = setInterval(animate, 32, index);\r\n}\r\n\r\nvar canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF);\r\naddChild(new Bitmap(canvas));\r\n\r\nvar loc:Point = new Point();\r\naddEventListener(Event.ENTER_FRAME, onLoop);\r\nfunction onLoop(evt:Event):void {\r\n\t  canvas.fillRect(canvas.rect, 0xFFFFFF);\r\n      for (var i:int = 0; i<tiles.length; i++){\r\n\t\t    var tile:BitmapData= tiles[i];\r\n\t\t\tloc.x = locX[i];\r\n\t\t\tloc.y = locY[i];\r\n\t\t    canvas.copyPixels(tile, tile.rect, loc, null, null, true);\r\n\t  }\r\n}\r\n<\/pre>\n
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 <\/a>(which did basically the same thing with Sprites). I used setInterval and setTimeout to do a simple demo animation, but I recommend using TweenLite<\/a> on a real project.<\/p>\n","protected":false},"excerpt":{"rendered":"
[SWF(width=650, height=650)] var loader:Loader = new Loader(); loader.load(new URLRequest("https:\/\/actionsnippet.com\/wp-content\/chair.jpg")); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded); var w:Number; var h:Number; var rows:Number = 20; var cols:Number = 20; var tiles:Vector.<BitmapData> = new Vector.<BitmapData>(); var locX:Vector.<Number> = new Vector.<Number>(); var locY:Vector.<Number> = new Vector.<Number>(); var rX:Vector.<Number> = new Vector.<Number>(); var rY:Vector.<Number> = new Vector.<Number>(); var sX:Vector.<Number> = new Vector.<Number>(); var sY:Vector.<Number> […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,79],"tags":[3,14,4],"class_list":["post-345","post","type-post","status-publish","format-standard","hentry","category-bitmapdata","category-vector","tag-actionscript","tag-as3","tag-flash"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/345","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=345"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/345\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}