Bitmap Drawing API by Didier Brun

I've just begun to write a Raster class which provides some drawing methods onto BitmapData instances (pixel per pixel) :

Code example :

// create the BitmapData to work on
var pixels:Raster = new Raster(320, 240, true);

// draw stuff
pixels.drawRoundRect( new Rectangle ( 20, 20, 200, 100), 18, 0xFF00FFFF );
pixels.drawRect( new Rectangle ( 70, 70, 100, 100 ), 0xFF009900 );
pixels.filledTri( 40, 40, 80, 110, 50, 30, 0xFF998811 );
pixels.aaCircle(100, 100, 40, 0x77AA88 );
pixels.circle(40, 40, 30, 0xFF000000);
pixels.line(10, 10, 60, 80, 0xFF000000 );

// show it
addChild ( new Bitmap ( pixels ) );

Here's a simple demonstration

Open Source This project is OPEN SOURCE under RPL License.
2009-10-16 v1.4 raster_v1_4.zip
2007-01-07 v1.3 raster_v1_3.zip
2007-01-07 v1.2 raster_v1_2.zip
2007-01-07 v1.1 raster_v1_1.zip
2007-01-07 v1.0 raster_v1_0.zip

Raster

V1.4 API :
line()
triangle()
filledTri()
aaLine()
circle()
aaCircle()
quadBezier()
cubicBezier()
drawRect()
drawRoundRect()

This class use
rastering : Bresenham algorithm
anti-alias rendering : Xiaolin Wu algorithm

Authors (contribution) :
Didier Brun (original class)
Drew Cummins (bezier curves)
Thibault Imbert (performance optimizations, rectangles)

Comments (54)

  1. Tek wrote::

    It is really impressive that your own Xiaolin Wu’s algorithm implementation is faster than the Adobe’s one for a quite similar rendering quality.

    Thibault will laugh a lot, but : “Could you share the source for this project” ? I’m sure that sharing it will help users to find some optimisations you will be quite happy with.

    Thursday, January 4, 2007 at 7:54 pm #
  2. C4RL05 wrote::

    Excellent stuff.

    AS3 Graphics class is probably one of the bottle necks, when drawing on screen. It’s really good news you’ve managed to beat it.

    Congratulations. Can’t wait to see more. Very impressive indeed.

    Thursday, January 4, 2007 at 8:54 pm #
  3. mr.doob wrote::

    Wow! I was thinking on doing that, great to see that it goes faster. I wonder if a poly raster/texture will go faster too.. :P

    Friday, January 5, 2007 at 12:23 am #
  4. Didier Brun wrote::

    Thanks for your comments guys !

    I’ve just updated the demo with filled triangles examples : #06 #07

    Saturday, January 6, 2007 at 3:28 pm #
  5. joa ebert wrote::

    Hey, this might be interesting for you as well:
    http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

    Sunday, January 7, 2007 at 1:08 am #
  6. Didier Brun wrote::

    Hi Joa, this DHTML version is very nice indeed.

    Raster class is now open-source, fell free to use, improve and share it.

    Sunday, January 7, 2007 at 3:04 am #
  7. C4RL05 wrote::

    Thanks a lot for releasing the code.

    It’s really nice stuff. And the triangle raster is a very nice addition.

    One question, have you tried running your Graphics benchmarks with stage.quality = “LOW”?

    Sunday, January 7, 2007 at 1:57 pm #
  8. Didier Brun wrote::

    Thanks Carlos,
    Yes, I’ve tried it using right-mouse-click quality >”low” and Raster is still the winner…

    There was a minor anti-alias bug on aaCircle method (just on Firefox !) due to an implicit cast issue.

    It’s now corrected in v1.1 version.

    Sunday, January 7, 2007 at 2:58 pm #
  9. mrsteel wrote::

    Congratulations on good job!
    it’s getting better and better :D

    Sunday, January 7, 2007 at 5:08 pm #
  10. Didier Brun wrote::

    Tek feed me some major bugs about last pixel drawing and PI/2 rad slope drawing for both line() and aaLine() methods.

    These issues are now corrected in v1.2

    Thanks.

    Tuesday, January 9, 2007 at 4:39 pm #
  11. unijimpe wrote::

    Hi, insert flash movies into wordpress blog for show your samples with plugin WP-SWFObject.

    Your samples for your API si very nice.

    Wednesday, January 10, 2007 at 5:14 pm #
  12. Tijs Hendriks wrote::

    Hi there,

    Is it possible to receive an email if a new version of this class comes out? I’m planning to use it for an L-System I’m writing. It’s very interesting!

    Regards,
    ~Sph

    Monday, January 29, 2007 at 7:48 pm #
  13. Didier Brun wrote::

    Hi Tijs,
    You should syndicate the RSS feed for this thread. I’ll drop a mess for the next release.

    Monday, January 29, 2007 at 9:19 pm #
  14. mr.doob wrote::

    Hey Didier,

    I’ve been messing a bit with the source code, and looks like you can get 3fps just changing a couple of types:

    public function line(bmp:BitmapData,x0:Number,y0:Number,x1:int,y1:int,c:int):void

    a line()*1000 went from 8fps to 11fps.

    I tried a bit with the other methods, and you always get more fps if you change the type of c to Number.

    Well, that’s it, hope you like the improvement :)

    Wednesday, January 31, 2007 at 3:38 pm #
  15. Didier Brun wrote::

    Oh good mr.doob ! I will test it asap and give some feeds :)

    Wednesday, January 31, 2007 at 6:25 pm #
  16. mr.doob wrote::

    Ops! I meant to say:

    “You always get more fps if you change the type of c to int”

    And… no worries, it’s a pleasure :)

    Thursday, February 1, 2007 at 12:34 am #
  17. Didier Brun wrote::

    Yes of course, I’ll update the class asap, I’m so so busy now…

    Thursday, February 1, 2007 at 10:26 pm #
  18. Drew wrote::

    I added quadratic and cubic bezier curves to the Raster class:
    source: http://lab.generalrelativity.org/raster/
    demo: http://lab.generalrelativity.org/raster/source/src.zip

    Wednesday, February 14, 2007 at 9:56 am #
  19. Didier Brun wrote::

    mr.doob >
    ARGB is coded on 32 bits. I should use a uint but I’ve heard about poor perfomance using uint versus Number.

    Drew > You rock ! Thanks you very much for your contribution, it’s a wonderful add.

    I’ve added your class (v1.3) / author list to the post.

    Wednesday, February 14, 2007 at 5:55 pm #
  20. Didier Brun wrote::

    I will also add your bezier to the demo ASAP !

    Wednesday, February 14, 2007 at 5:57 pm #
  21. Didier Brun wrote::

    Hey, the new demo is on air !

    Drew > I’ve modified yours methods to draw the full curve using Raster.line() instead setPixel32().

    Thursday, February 15, 2007 at 12:45 am #
  22. Drew wrote::

    That looks great!! I had originally gone with Raster.line, but opted for the faster (more scattered) setPixel32-

    It might be best to do a simpler curve length approximation with Raster.line… I’ll play around with it and see if I can get it to speed up.

    Anyway, thanks for the opportunity- keep up the good work!

    Thursday, February 15, 2007 at 2:49 am #
  23. Patrick wrote::

    To improve performance of successive setPixel() method call you can lock the BitmapData so it won’t notify dependent Bitmap instances after each change. Just bmp.lock() before and bmp.unlock() after the loop containing setPixel() method calls.

    Thursday, February 15, 2007 at 7:40 am #
  24. Didier Brun wrote::

    Of course Patrick, the demo use already lock() & unlock() like this :
    bitmapData.lock()
    Raster.line() x 1000
    bitmapData.unlock()

    Thursday, February 15, 2007 at 11:01 pm #
  25. LiverNeck wrote::

    I dont really see a performance improvement on aa routines. That’s what flash is using to begin with.

    Monday, February 19, 2007 at 10:34 pm #
  26. tolis wrote::

    Hi, great job. Is there any source for a running example apart from the Raster.as file?

    Tuesday, March 13, 2007 at 7:45 pm #
  27. Didier Brun wrote::

    Hi tolis,

    Yes you have a sample code on Drew blog here : http://blog.generalrelativity.org/

    Thursday, March 15, 2007 at 12:07 am #
  28. Rezmason wrote::

    Have you considered writing a line function that’ll draw lines at different thicknesses? I could try writing one for you tonight.

    Tuesday, May 22, 2007 at 6:14 pm #
  29. Thomas Hooper wrote::

    Nicely extends to a filled quad – I imagine a polygonal function could be made that allows for any number of points?

    /**
    * Draw a filled quad
    *
    * @param bmp Bitmap to draw
    * @param x0 first point x coord
    * @param y0 first point y coord
    * @param x1 second point x coord
    * @param y1 second point y coord
    * @param x2 third point x coord
    * @param y2 third point y coord
    * @param x3 fourth point x coord
    * @param y3 fourth point y coord
    * @param c color (0xaarrvvbb)
    */
    public static function filledQuad(bmp:BitmapData,x0:int,y0:int,x1:int,y1:int,x2:int,y2:int,x3:int,y3:int,c:Number):void{
    var o:Object={};
    lineTri (o,bmp,x0,y0,x1,y1,c);
    lineTri (o,bmp,x1,y1,x2,y2,c);
    lineTri (o,bmp,x2,y2,x3,y3,c);
    lineTri (o,bmp,x3,y3,x0,y0,c);
    }

    Thursday, June 21, 2007 at 11:12 pm #
  30. lbingbing wrote::

    thanks a lot!
    i love your works

    Wednesday, June 27, 2007 at 5:24 am #
  31. Didier Brun wrote::

    Nice Thomas, I’ll add filledQuad ASAP !

    Got a new job since 3 weeks, so I’m very very busy now…

    Wednesday, June 27, 2007 at 1:55 pm #
  32. soybean wrote::

    I wonder how it is compared to ‘baking’ graphic vectors to bitmaps. Is that still slower than Raster?

    Wednesday, November 21, 2007 at 2:52 am #
  33. Didier Brun wrote::

    Hi soybean,
    you talk about bitmap caching ?

    Tuesday, November 27, 2007 at 1:01 pm #
  34. jim wrote::

    Bitmap Drawing API有一年沒在更新了,期待改版

    Thursday, January 10, 2008 at 6:54 pm #
  35. promethe wrote::

    I tested your raster class to draw some filled triangles but it apears to be quite slower thant the classic flash API…

    I actually lose from 3 to 10 fps…

    Any possible explanation ?

    Monday, January 14, 2008 at 1:15 am #
  36. Didier Brun wrote::

    Hi promethe, it’s possible ! The gain for filledTri is not significative.

    Monday, January 14, 2008 at 11:44 am #
  37. galeto wrote::

    Nice work !

    but comparing it to the flash vector drawing is not always relevant… You can draw 20px thick lines with vectors so much faster…

    Thursday, November 20, 2008 at 10:34 pm #
  38. P.Svilans wrote::

    Well…I was going to need to write my own library, but now I found yours! I’ll probably have a peak inside your source, since I need some mods, but I’d just like to say that the work so far is extraordinary!
    But is the triangle drawing optimized as much as possible? I really need to use fills for Bitmaps…

    Anywho, this page is bookmarked, and I hope you keep this up!

    P.

    Thursday, February 5, 2009 at 12:36 am #
  39. P.Svilans wrote::

    BTW: It would be important to me to know how many triangles you are drawing in your demo! :)

    Thursday, February 5, 2009 at 12:43 am #
  40. Hi. First of all thanks for making Raster open-source.

    I tried your demonstration that you gave with Raster, and it seems like Flash player 10 draws Graphics.lineTo() much faster than Raster.aaLine().

    Is this the reason it hasn’t been updated since ’06? It would be nice to have some updates on what has been happening since you gave Raster out.

    Thanks!

    Best regards,
    Jón Trausti Arason.

    Monday, June 1, 2009 at 3:57 pm #
  41. rob wrote::

    Great looking library, hate the license choice though. I want use this in a project that to gain a bit of speed on a small part of it. There is no way I can open source the whole application just because I use this library for a small part of it.

    I am all for making improvements available, and forcing and library changes to be made open source, but this license seems worse than the GPL. What’s wrong with the LGPL?

    Sunday, October 4, 2009 at 1:06 am #
  42. JustinFact wrote::

    in v1.4 your anti-aliasing broke! everything is aliased, and not looking pretty.

    Tuesday, November 3, 2009 at 9:13 pm #
  43. Thibault Imbert wrote::

    Hi JustinFact,

    Thanks, I will fix that, too much optimizations on this one broke something ;)

    Thibault

    Tuesday, November 3, 2009 at 9:22 pm #
  44. Thibault Imbert wrote::

    Hi Justin,

    It’s fixed, the default color in the constructor was not specifying the alpha channel ;)

    Thanks!

    Thibault

    Tuesday, November 3, 2009 at 11:26 pm #
  45. JustinFact wrote::

    thanks! great work Thibault!

    Wednesday, November 4, 2009 at 11:52 pm #
  46. wrobel221 wrote::

    I added the Bresenham algorithm drawing an ellipse. Here is an updated version http://dl.dropbox.com/u/1333188/Raster.as

    Friday, January 29, 2010 at 10:45 am #
  47. grabek wrote::

    Neat stuff, but what might make it even FASTER is to avoid repettative code. For example:
    drawAlphaPixel(px+vx,py+vy,1-dry,color)

    The color here gets’s shifted around each time you call the function. Well, in aaCircle you are calling drawAlphaPixel with thesame color 16 times. Think about “precalculating the rgb” as so:

    var r1:uint = ((color & 0x00FF0000) >> 16);
    var g1:uint = ((color & 0x0000FF00) >> 8);
    var b1:uint = ((color & 0x000000FF));

    drawAlphaPixel(x,y,r1,g1,b1)

    Wednesday, August 18, 2010 at 3:25 pm #
  48. lolo wrote::

    great !

    Friday, July 8, 2011 at 11:41 pm #
  49. aristotle9 wrote::

    version 1.4 has a problem with aaLine method.

    var steep:Boolean = (y2 – y1) (x2 – x1) “.
    and, Number is better than int when you want draw a aaLine using that method.

    Friday, December 30, 2011 at 11:02 pm #
  50. aristotle9 wrote::

    I mean “steep” incorrect calculated beacause of the priority of operator ? 〉.

    Friday, December 30, 2011 at 11:11 pm #
  51. Thibault Imbert wrote::

    Hi wrobel221, grabek and aristotle9,

    Sorry for the late feedback, very nice additions/comments. I will add it as a 1.5 revision. Thanks!

    Thibault

    Saturday, December 31, 2011 at 10:21 am #
  52. Paul wrote::

    I would love a Filled Raster Circle Function :)

    Thursday, August 2, 2012 at 11:12 am #
  53. a_____ wrote::

    Was revision 1.5 ever posted? It’s mentioned here:
    “Thibault Imbert wrote::

    Hi wrobel221, grabek and aristotle9,

    Sorry for the late feedback, very nice additions/comments. I will add it as a 1.5 revision. Thanks!

    Thibault
    Saturday, December 31, 2011 at 10:21 am ”
    but I don’t see it at the top under the links.

    Friday, March 8, 2013 at 4:03 am #
  54. GGPlay wrote::

    thx for the work !! awesome :)

    Thursday, May 23, 2013 at 4:19 pm #

Trackbacks/Pingbacks (9)

  1. [...] Didier Brun de bytearray.org ha publicado una API de dibujo que no utiliza vectores para dibujar, lo cual se traduce en un aumento del rendimiento muy considerable. En la página del post hay una serie de tests muy reveladores. [...]

     
  2. caché.yestoall.com » Blog Archive » bitmap drawing API on Wednesday, January 10, 2007 at 7:17 pm

    [...] un interesante API para dibujar en AS3 sin utilizar vectores mira los ejemplos para convencerte [...]

     
  3. generalrelativity » BitmapData drawing speed on Wednesday, February 14, 2007 at 9:48 am

    [...] demo source code original ByteArray post [...]

     
  4. [...] 上禮拜回老家 再加上週日都在玩電吉他 所以又好幾天沒寫文章了~>0< 今天就來介紹一個滿實用的網站 – ByteArray.org 而這個網站是以ActionScript3.0為主 進行開發一些實驗性的Project 目前的Project有八個 WiiFlash、Raster、MouseGesture、Live JPEG Encoder、PageFlip、 SMTP Mailer、GIF Animation Encoder、GIFPlayer 其中我比較感興趣的是Raster、MouseGesture、Live JPEG Encoder、SMTP Mailer 也就是比較偏向繪圖、影像、網路應用的部分 接著就來簡單介紹一下我個人覺得超猛的滑鼠手勢辨識Project – MouseGesture 不多說~先來玩看看再說拉~ 以下是一些擷取畫面 最左邊是字母跟數字的手勢說明,中間是手勢的圖畫區,右邊顯示滑鼠手勢輸入的文字 還可以輸入空格、點,也可以刪除文字 [...]

     
  5. 冰山上的播客 » Blog Archive » 快速BitmapData渲染 on Saturday, January 12, 2008 at 1:40 pm

    [...] 引用 Didier Brun over at bytearray.org wrote a class emulating the flash drawing api using BitmapData objects as the palette. And it’s considerably faster than Flash’s [...]

     
  6. nico’s flash laboratory on Saturday, February 2, 2008 at 2:40 pm

    [...] terminé (ou presque…), pour l’histoire, je me suis largement “inspiré” de Raster développé par Didier Brun (y=ax+b et les taux de variation n’étant pas vraiment mes [...]

     
  7. Sentinel of Mijil « Youfan’s on Tuesday, April 29, 2008 at 11:04 am

    [...] Raster class (pengganti drawing API yang vektor, ini menggambar bitmap langsung. Di-port ke haXe dari byteArray.org [...]

     
  8. [...] Bitmap Drawing API [ by Didier Brun aka Foxy ] – ByteArray.org [...]

     
  9. Bitmap Drawing API | Tekool.net on Sunday, July 4, 2010 at 1:20 pm

    [...] Brun (Foxy) s’est jeté dans le portage en Actionscript 3 des puissants algorithmes de Bresenham et Xiaolin Wu. Il nous livre les sources résultant de son travail ainsi qu’un banc d’essai [...]