Alex Stanhope

Flash

Action Script 3.0 (as3) has native functions to draw basic 2D primitives. In AS2 you had to calculate all the points on, say a circle, then draw it using line segments. I've written a little demo which draws circles. This time trial aims to complete in roughly 100ms.


var time_thresh:int = 100;
var unit:int = 500;
var circles:int = 0;
for (var j=0 ; j<20 ; ++j) {
for (var i=0 ; i drawdown.createCircle((100+i*11)%500,(100+i*11)%300,25,0x0099FF);
}
circles += unit;
if (timer.lap(timer_id) > time_thresh)
break;
}
var time_taken = timer.stop(timer_id);


Javascript

http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
Walter Zorn has come up with a Vector graphics library for Javascript, a remarkable achievement. Walter's library is functionally comprehensive (ellipses, polygons) but it isn't as fast as Flash. It uses pixel painting, literally creating hundreds of tiny DIV elements for a single primitive.

Timing

Javascript and Flash have different timing mechanisms. I understand that neither is particularly accurate. These timing figures give you an indication of relative speed and order of magnitude.

Speed

http://osflash.org/as3_speed_optimizations
Some great tips on speed from Open Source Flash

Other notes

http://www.p01.org/releases/Drawing_lines_in_JavaScript/
Mathieu Henri has created a mechanism for drawing diagonal lines. It works by resizing an IMG tag to stretch a fixed diagonal line (45 degrees) to fit an arbitrary bounding box. It's quick (for javascript) and could be extended to circles, but they would be unacceptably aliased/blocky.