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:
Love the name!
😉
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. 🙂
Really nice and transparent implementation. Great work.
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.
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
Erik, not sure whether to thank you for the tip or be pissed off at myself for wasting my time. 🙂 That certainly is easier.
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 😀
Thanks for saving me a truckload of work, I really appreciate it.
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.
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/
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/
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
jouni, have you tried drawing 50,000 complex vectors in a flash movie?
Hi. Thanks for the excellent class. One question: is it possible to adapt this class for use in copyPixels function as source bitmapData?
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.
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…
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
Hi!
Thanks for sharing. Does this work on AS2? I’ve tried and get a lot of compiler errors 🙁
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
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
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.
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?
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, 0x000000);
myBitmapData.draw(textVar);
this.addChild(myBitmapData);”
Looks great, but how do I use this when using a Loader for displaying external images bigger than 2880px?
Thanks!
Please can anyone give me an example of how to load an image of size > 2880 X 2880 using this class (bigasscanvas) ?
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
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
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.
Any word on an updated version that can be made into byteArray and saved as JPG and/or PNG?