Limited by 2880 bitmaps? Try BigAssCanvas.

Mar 23 2008 Published by under Flash

I heard through the grapevine that there are some improvements to the BitmapData class coming up in future versions of Flash, that will allow for larger sized bitmaps to be created. Currently, the largest BitmapData instance you can make is 2880 x 2880. This is fine for most uses, but every once in a while you just need something bigger.

I’ve been doing some generative art lately, and taking a page from the books of Josh Davis, Jared Tarbell, and Erik Natzke, I’ve been thinking of considering looking at maybe possibly getting some prints done. To make a decent quality, decent sized print, I believe you need more pixels than what BitmapData offers. The obvious solution is to use more bitmaps, but that can be a major pain stitching them together and so forth. So, I created a class that takes care of most of that for me.

Introducing the BigAssCanvas class.

Basically, BigAssCanvas mimics BitmapData, except that it is a display object (actually a display object container). You create a BigAssCanvas the same way you would a BitmapData, but you have virtually unlimited size:

[as]var myBigAssCanvas:BigAssCanvas = new BigAssCanvas(10000, 10000, true, 0xff000000);
addChild(myBigAssCanvas);[/as]

Note also that unlike a BitmapData, you add it directly to the display list.

Essentially what it’s doing is: If the width you specify is greater than 2880, it makes multiple columns of bitmaps. If the height is more than 2880, it makes multiple rows. That, in itself, is not such a big deal. The cooler part is that is abstracts several of the more common BitmapData methods so that you can use them without worrying about the fact that the method is actually being applied to several Bitmaps. Here’s what I have so far:

  • draw – works exactly like BitmapData.draw, including the matrix, colorTransform, blendMode, clipRect and smoothing. You’ll never know you aren’t just drawing to a BitmapData.
  • dispose – removes all bitmaps from display list and disposes of all bitmapdatas.
  • fillRect – rect, color.
  • getPixel, setPixel, getPixel32, setPixel32 – all just like in BitmapData.
  • noise – yup.
  • perlinNoise – everything except for stitch, which I don’t know if it can ever be made to work, and offsets, which could be made to work with some effort, I believe. (This one can be pretty slow for a large canvas, by the way.)
  • lock, and unlock, minus the changeRect stuff in unlock, which I never knew existed til tonite.

There are definitely more methods that could be added to this, but I think I covered the vast majority of use cases. If you want to dive in and contribute a method, go for it. It’s also totally untested apart from running the method a couple of times and seeing that it looked generally right. It’s completely undocumented, but you are smart kids, you’ll figure it out. Anyway, I made it tonite, it’s almost 2 a.m., I think it’s cool, and I’m blogging it.

Get it, use it, tell me what it breaks, fix it for me:

BigAssCanvas.as

38 responses so far. Comments will be closed after post is one year old.

  • kp says:

    hehe. yeah, I like the name too. It started out as an experimental class, but then when I decided to release it, I couldn’t bring myself to change the name. :)

  • C4RL05 says:

    Really nice and transparent implementation. Great work.

  • drMikey says:

    i started on some generative stuff a few weeks ago myself and was wondering about stitching canvases together. putting it all into one class that handles it for you? bigAssIdea. nice.

  • Erik says:

    There is another way. If you load (or embed) an external bitmap the size of the bitmapData can be bigger then 2880.

    So in theory you could generate a png (or jpg) of the right colors and then load it in using a Loader class. Then grab the bitmapData. If the size does not have to be dynamic, creating a large bitmap and embedding it would give the same results and might be alot easier.

    I am not sure what this means in terms of difference in speed though.

    Greetz Erik

  • kp says:

    Erik, not sure whether to thank you for the tip or be pissed off at myself for wasting my time. :) That certainly is easier.

  • kp says:

    That also solves another problem I discovered – using the JPEGEncoder class to generate a byte array which can be saved to disk. I would have to save multiple bitmaps and tile them in a separate app. If I have one large bitmap, I can just encode and save it directly.

  • This is quite ironic. Just a few days ago I ended up with a project where I in fact will have to use a few “big ass bitmaps” so I have been working on the exact same thing. I only got it to work for draw() though so obviously yours is the superior one :D

    Thanks for saving me a truckload of work, I really appreciate it.

  • Detrus says:

    Just saved my ass. I needed this for a long timeline type thing, and spent a few hours looking through things of similar nature for tiling games, but most of their code is from Flash 8. Wasted another hour trying to hack something together, then out of desperation entered this weird search into google: “as3 can a bitmap be bigger than 2880 pixels?” And your site is the hit.
    It seems very slow though. I can see now why Adobe put a limit on how big you can draw a bitmap. We’ll see if I can get this down under 15 seconds for what I need. It times out in some cases.

  • Chad says:

    Keith, nice trick! I just made an AIR app from Flex that allows you to get around this as well. Uses ImageSnapshot and saves JPEGs or PNGs to your local machine… check it out when/if you can…

    http://visualrinse.com/2008/04/27/swfshot-v01-released-save-images-of-swfs-greater-than-2880-pixels/

  • Martin says:

    I have created a wrapper class BitmapDataUnlimited for creating native BitmapData Objects at any size
    give it a try http://blog.formatlos.de/2008/05/28/bitmapdataunlimited/

  • [...] and I was all set to get down to it when up popped the mighty Keith Peters with his BigAssCanvas! Much cooler name, it has to be said, plus Keith’s solution mimics BitmapData pretty damn [...]

  • [...] 當時我是建議他們先檢查一下原始碼後來公司另一個部門的主管跑來問我(這個Flash是這個主管寫的)他也檢查了所有的地方還是找不出原因所以我建議他~直接開一個新檔案來測試載入圖片的尺寸限制換一張比較小一點的圖測試看看就可以知道原因了後來他也有找到網路上的資料提到說Flash的載入圖片有大小限制所以我回到家就上網找了一下solution一下子就找到囉我找到的是AS2的方法簡單講~他就是用Kidnap的方式來破解這個限制他用一張dummy image騙了Flash BitmapData的感情呵呵~^^很簡單的方式有需要的人請到這邊看說明及下載原始碼啦後來~我就順便問了一下我的麻吉~小白大師馬上就另外提供了一個新資訊給我!!也就是AS3 Class版本的破解方法真的是超強的啦!!這個Class的名字叫做BigAssCanvas(大屁股畫布!!)很好笑的名稱~呵呵這不是重點!!!anyway~看你的case是用as2寫的還是用as3寫的用as2的話就直接使用我介紹的第一個solution去hack就好了用as3的話就直接使用BigAssCanvas來hack囉最後如果你對於Flash的這個限制感興趣的話可以到這邊看他的前因後果(請直接看Note的部份)^^ [...]

  • jouni says:

    looks nice. Why don’t you use vectors though? Use something like Go PDF (or on a MAC, print to postscript), print at runtime, import into illustrator, scale to any size, edit etc. works great!

    bish bash bosh

  • kp says:

    jouni, have you tried drawing 50,000 complex vectors in a flash movie?

  • Di says:

    Hi. Thanks for the excellent class. One question: is it possible to adapt this class for use in copyPixels function as source bitmapData?

  • kp says:

    It probably would be possible to add such a method, but with Flash 10 on its way and the “load a large empty bitmap” solution already here, I don’t think this class has as much value as I originally thought it did. So I’m not really investing any more time in it.

  • Hank says:

    Help me!!!!!

    Now My Problem is

    Drawing mx.conrainers.Canvas By Flex Air or Flex RIA, at monitor maximum resolution(768 * 7168) So, Various UIComponents(ex : VideoDisplay, SWFLoader etc) arrange in Canvas. But, Canvas can not drawing at monitor maximum resolution Only, drawing about 4000 pixels, so UI Component can not arrange in Canvas at monitor maximum resolution

    This problem with large bitmap data probably is relation, will not know If there is not relation of it How can mx.containers ‘s components(ex:Canvas) arrange at monitor maximum resolution(768 * 7168)

    If there is relationship of it
    Of doing with Flex RIA there is a method which is the possibility (Flex SDK 3.2.x version support Flash player 10 Beta which I know)

    We want there being will be able to arrange mx.containers’s component (exl:Canvas) at monitor maxium resolution(768 * 7168) Will help and Thanks very…

  • [...] needed to copy out the BitmapData from a BigAssCanvas so i added this to bit101s class. It doesnt really work like BitmapData’s copyPixels – as that copys pixel INTO the bitmap [...]

  • tonypee says:

    I’ve added a copyPixelsOut method to the class – which allows you to get the copyPixels of a region of the canvas – kinda useful

    http://blog.touchmypixel.com/archives/23

  • [...] at their blog, it looks like he’s using bitmapData for rendering, using spritesheets and BIT-101’s BigAssCanvas class to work around sprite size [...]

  • Charlie78 says:

    Hi!

    Thanks for sharing. Does this work on AS2? I’ve tried and get a lot of compiler errors :(

  • Eddie P says:

    Hi Keith,

    I’ve almost got this working perfectly for me to create some large scale art.

    My only question is this:

    When I create a BigAssCanvas with transparency as true, it fills the background with black that isn’t transparent. Not sure why, or if there’s a workaround to maintain transparency.

    P.S. I’ve only been using flash for a few weeks, and I’m trying to get my art working :-)

    Thanks you :-)

    Eddie

  • Eddie P says:

    Hey, I’ve got it now! Thanks so much :-)

    Now all I need to do is work out how to pngencode multiple bitmaps and create a single png so my computer doesn’t die trying to pngencode a 10k by 10k image !

    Thanks again,

    Eddie

  • Steve says:

    Eddie, I’d like to communicate with you about your project, as you may be able to abbreviate my learning curve for a project that needs to handle large image data. I can be contacted at ‘admin at dpinnovations dot com’. Thanks, Steve.

  • Doug says:

    NOticed the “ho is reading . . .” widget at the bottom of the page and checked the source code to see what it was called. What is the last 150 lines of code in the View Source on this page? Was this intentional?

  • [...] es mayor, en algunos casos nos puede ser insuficiente. Actualmente podemos recurrir a clases como BigAssCanvas para extender ese límite. Aún así el hecho de cargar una imagen tan grande para luego ser [...]

  • Nathanael says:

    I am sorry that, i got a question,
    when i modify the “w” and “h”. The textarea is nothing to change. i will so happy if someone can help me.
    code: textVar is text variable
    “var myBitmapData:BigAssCanvas = new BigAssCanvas(w, h, true, 0×000000);

    myBitmapData.draw(textVar);

    this.addChild(myBitmapData);”

  • Niels says:

    Looks great, but how do I use this when using a Loader for displaying external images bigger than 2880px?
    Thanks!

  • Sanjay Bhatt says:

    Please can anyone give me an example of how to load an image of size > 2880 X 2880 using this class (bigasscanvas) ?

  • RamiroEspada says:

    I love it! you made my day yesterday, we’ll actually my night while doing some full-screen bitmaps for a friend’s band website :)

    Great naming by the way, maybe kickAssBitmapdata would have work also!

    Thanks!

    RE

  • RiaanWest says:

    Thank a mill man, you’re a legend!

  • Nice work…
    saved me some work to find out that tiling, when masked, seems to have the same limitations of a normal single Bitmap…
    Apparently, when bitmap (or bigasscanvas) doesn’t get masked by another bitmap when its size exceeds 891*1270 (896*1276 doesn’t mask)
    did you bang your head on masking already?
    thanks
    Pippo

  • Managed to make it work :)
    The masking bug in flash happens when a very large bitmap is masked, inside a container clip which is already masked, and the large bitmap exits the borders of the larger mask.
    Somehow, flash computes only the larger one, and the smaller mask is removed.
    So I pre-rasterize bitmaps within boundaries of the larger mask first… quite complex, but it works now… nice job!
    I had to add 2 methods to BigAssCanvas if interested…
    applySepia() – Gives the bitmap a sepia effect
    applyBW() – obvious

    can download it here…
    http://pippoflash.com/pippoflash_files/_downloads/BigAssCanvas.as

    love and thanks!
    Pippo

  • san says:

    hi,
    i have used BigAssCanvas.as as below shown

    var src:BigAssCanvas =new BigAssCanvas(10000, 10000, true, 0xff000000);
    src.draw(_designArea);

    now i need to convert BigAssCanvas as byte array using JPEGEncoder.as.

    kindly let me know , if any one know how to encode BigAssCanvas in order to convert to bytearry.

    thanks in advance.

  • Martin says:

    Any word on an updated version that can be made into byteArray and saved as JPG and/or PNG?

  • [...] Flash, as its main creation purpose is for the web, doesn’t really do large bitmaps, whether its importing or creating ( ever tried to make a 300 dpi screen grab to print for a flash swf?).  To the rescue is Keith Peters post on  bigAssBitmaps and bigAssCanvas, [...]