Approximation of the circle area: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 1: Line 1:
<jsxgraph width="800" height="500">
<jsxgraph width="800" height="500">
         board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1.5,2,12,-2], keepaspectratio:true, axis:true});
         board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1.5,2,12,-4], keepaspectratio:true, axis:true});
         var N = board.createElement('slider', [[0,1.5],[3,1.5],[1,3,40]], {name:'n',snapWidth:1});
         var N = board.createElement('slider', [[0,1.5],[3,1.5],[1,3,40]], {name:'n',snapWidth:1});
         board.createElement('circle',[[2,-1],1],{strokeWidth:1, strokecolor:'black'});
         board.createElement('circle',[[2,-2],1],{strokeWidth:1, strokecolor:'black'});
          
          
         var c = board.createElement('curve', [[0],[0]],{trace:true, strokecolor:'red', strokeWidth:2});  
         var c = board.createElement('curve', [[0],[0]],{trace:true, strokecolor:'red', strokeWidth:2});  

Revision as of 10:54, 9 September 2009

The underlying JavaScript code

<jsxgraph width="700" height="500">
        board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2,2,8,-2], keepaspectratio:true, axis:true});
        var N = board.createElement('slider', [[0,1.5],[3,1.5],[1,3,40]], {name:'n',snapWidth:1});
        board.createElement('circle',[[0,0],1],{strokeWidth:1, strokecolor:'black'});
        
        var c = board.createElement('curve', [[0],[0]],{trace:true, strokecolor:'red', strokeWidth:2}); 
        
        c.updateDataArray = function() {
                var r = 1, n = Math.floor(N.Value()), 
                    x = [0], y = [0],
                    phi = Math.PI/n,
                    h = r*Math.cos(phi),
                    s = r*Math.sin(phi),
                    i, j, 
                    px = 0, py = 0, sgn = 1, 
                    d = 16, 
                    dt = phi/d, 
                    pt;
                    
                for (i=0;i<n;i++) {
                    for (j=-d;j<=d;j++) {
                        pt = dt*j;
                        x.push(px+r*Math.sin(pt));
                        y.push(sgn*r*Math.cos(pt)-(sgn-1)*h*0.5);
                    }
                    px += s;
                    sgn *= (-1);
                }
                x.push((n-1)*s);
                y.push(h+(sgn-1)*h*0.5);
                this.dataX = x;
                this.dataY = y;
            }
            board.update();
</jsxgraph>