Bezier Rendering Scale

JavaScript performance comparison

Test case created by Ammar Hattab

Info

Compare performance of applying scaling on bezier curve control points vs applying it on line segments approximation of the curve

Preparation code

<canvas id="canvas1" width="800" height="400"></canvas>
 
<script>
Benchmark.prototype.setup = function() {
    function CalculateMethod1(_preX, _preY, x1, y1, x2, y2, x3, y3, x4, y4, NUM_STEPS)
    {
        var step = NUM_STEPS;
                var stepmu = 1/NUM_STEPS;
                while(step--)
                {
                   mu = 1-(stepmu* step);
                   var mum1,mum13,mu3;
                   mum1 = 1 - mu;
                   mum13 = mum1 * mum1 * mum1;
                   mu3 = mu * mu * mu;
                   px = mum13*x1 + 3*mu*mum1*mum1*x2 + 3*mu*mu*mum1*x3 + mu3*x4;
                   py = mum13*y1 + 3*mu*mum1*mum1*y2 + 3*mu*mu*mum1*y3 + mu3*y4;                        
                   _preX.push(px);
                   _preY.push(py);                      
                }
               
    }
                   
    function DrawTransformedBezierCurve(canvasName, usePrecalculated, sx, sy, x1, y1, x2, y2, x3, y3, x4, y4, NUM_STEPS)
    {
                var _calculatedLineX = [];
                var _calculatedLineY = [];
               
                 x1=x1*sx; y1=y1*sy; x4=x4*sx; y4=y4*sy;
                               
                if(usePrecalculated){                          
                                _calculatedLineX =_preCalculatedLineX;
                                _calculatedLineY =_preCalculatedLineY;
                                //Calculate then Apply Transformations
                                for(i=0; i<_calculatedLineX.length; i++) {
                                        _calculatedLineX[i]=_calculatedLineX[i]*sx; _calculatedLineY[i]=_calculatedLineY[i]*sy;
                                }
                }else{
                                //Apply Transformations and then calculate                              
                                x2=x2*sx; y2=y2*sy; x3=x3*sx; y3=y2*sy;
                               
                                //Calculate
                                CalculateMethod1(_calculatedLineX, _calculatedLineY, x1, y1, x2, y2, x3, y3, x4, y4, NUM_STEPS)
                }              
    }
   
    var _preCalculatedLineX = [];
    var _preCalculatedLineY = [];
    function PreCalculate(x1, y1, x2, y2, x3, y3, x4, y4, NUM_STEPS){
                CalculateMethod1(_preCalculatedLineX, _preCalculatedLineY, x1, y1, x2, y2, x3, y3, x4, y4, NUM_STEPS)
    }
   
   
    PreCalculate(188, 130, 140, 10, 388, 10, 388, 170, 20);
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Scale Control Points
DrawTransformedBezierCurve('canvas1', false, 2, 2, 188, 130, 140, 10, 388, 10, 388, 170, 20);
pending…
Scale Lines
DrawTransformedBezierCurve('canvas1', true, 2, 2, 188, 130, 140, 10, 388, 10, 388, 170, 20); 
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment