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
 |
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 |
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 (46)
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.
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.
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..
Thanks for your comments guys !
I’ve just updated the demo with filled triangles examples : #06 #07
Hey, this might be interesting for you as well:
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
Hi Joa, this DHTML version is very nice indeed.
Raster class is now open-source, fell free to use, improve and share it.
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”?
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.
Congratulations on good job!
it’s getting better and better
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.
Hi, insert flash movies into wordpress blog for show your samples with plugin WP-SWFObject.
Your samples for your API si very nice.
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
Hi Tijs,
You should syndicate the RSS feed for this thread. I’ll drop a mess for the next release.
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
Oh good mr.doob ! I will test it asap and give some feeds
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
Yes of course, I’ll update the class asap, I’m so so busy now…
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
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.
I will also add your bezier to the demo ASAP !
Hey, the new demo is on air !
Drew > I’ve modified yours methods to draw the full curve using Raster.line() instead setPixel32().
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!
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.
Of course Patrick, the demo use already lock() & unlock() like this :
bitmapData.lock()
Raster.line() x 1000
bitmapData.unlock()
I dont really see a performance improvement on aa routines. That’s what flash is using to begin with.
Hi, great job. Is there any source for a running example apart from the Raster.as file?
Hi tolis,
Yes you have a sample code on Drew blog here : http://blog.generalrelativity.org/
Have you considered writing a line function that’ll draw lines at different thicknesses? I could try writing one for you tonight.
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);
}
thanks a lot!
i love your works
Nice Thomas, I’ll add filledQuad ASAP !
Got a new job since 3 weeks, so I’m very very busy now…
I wonder how it is compared to ‘baking’ graphic vectors to bitmaps. Is that still slower than Raster?
Hi soybean,
you talk about bitmap caching ?
Bitmap Drawing API有一年沒在更新了,期待改版
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 ?
Hi promethe, it’s possible ! The gain for filledTri is not significative.
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…
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.
BTW: It would be important to me to know how many triangles you are drawing in your demo!
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.
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?
in v1.4 your anti-aliasing broke! everything is aliased, and not looking pretty.
Hi JustinFact,
Thanks, I will fix that, too much optimizations on this one broke something
Thibault
Hi Justin,
It’s fixed, the default color in the constructor was not specifying the alpha channel
Thanks!
Thibault
thanks! great work Thibault!
I added the Bresenham algorithm drawing an ellipse. Here is an updated version http://dl.dropbox.com/u/1333188/Raster.as
Trackbacks/Pingbacks (9)
[...] 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. [...]
[...] un interesante API para dibujar en AS3 sin utilizar vectores mira los ejemplos para convencerte [...]
[...] demo source code original ByteArray post [...]
[...] 上禮拜回老家 再加上週日都在玩電吉他 所以又好幾天沒寫文章了~>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 不多說~先來玩看看再說拉~ 以下是一些擷取畫面 最左邊是字母跟數字的手勢說明，中間是手勢的圖畫區，右邊顯示滑鼠手勢輸入的文字 還可以輸入空格、點，也可以刪除文字 [...]
[...] 引用 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 [...]
[...] 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 [...]
[...] Raster class (pengganti drawing API yang vektor, ini menggambar bitmap langsung. Di-port ke haXe dari byteArray.org [...]
[...] Bitmap Drawing API [ by Didier Brun aka Foxy ] – ByteArray.org [...]
[...] 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 [...]