Approximation of the circle area: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary  | 
				A WASSERMANN (talk | contribs) No edit summary  | 
				||
| (53 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
<jsxgraph width="  | <jsxgraph width="809" height="500">  | ||
         board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-  |          board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1.5,2,8,-3], keepaspectratio:true, axis:true});  | ||
         var N = board.  |          var N = board.create('slider', [[0,1.5],[3,1.5],[1,3,40]], {name:'n',snapWidth:1});  | ||
         board.  |          var circ = board.create('circle',[[4,-1.5],1],{strokeWidth:1, strokecolor:'black', strokeWidth:2, fillColor:'#0055ff', fillOpacity:0.3});  | ||
        var c = board.create('curve', [[0],[0]],{strokecolor:'red', strokeWidth:2});   | |||
         c.updateDataArray = function() {  |          c.updateDataArray = function() {  | ||
                 var r = 1, n = Math.floor(N.Value()), x = [0], y = [0],  |                  var r = 1, n = Math.floor(N.Value()),    | ||
                     h = r*Math.cos(  |                     x = [0], y = [0],  | ||
                     s = r*Math.sin(  |                     phi = Math.PI/n,  | ||
                     i, j, px = 0, py = 0, sgn = 1,    |                      h = r*Math.cos(phi),  | ||
                     d = 16, dt =   |                      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 (i=0;i<n;i++) {  | ||
| Line 17: | Line 21: | ||
                         pt = dt*j;  |                          pt = dt*j;  | ||
                         x.push(px+r*Math.sin(pt));  |                          x.push(px+r*Math.sin(pt));  | ||
                         y.push(sgn*r*Math.cos(pt)-(sgn-1)*h*0.5);  | |||
                     }  |                      }  | ||
                     px += s;  |                      px += s;  | ||
| Line 25: | Line 28: | ||
                 x.push((n-1)*s);  |                  x.push((n-1)*s);  | ||
                 y.push(h+(sgn-1)*h*0.5);  |                  y.push(h+(sgn-1)*h*0.5);  | ||
                this.dataX = x;  | |||
                this.dataY = y;  | |||
            }  | |||
        var c2 = board.create('curve', [[0],[0]],{strokecolor:'red', strokeWidth:1});   | |||
        c2.updateDataArray = function() {  | |||
                var r = 1, n = Math.floor(N.Value()),   | |||
                    px = circ.midpoint.X(), py = circ.midpoint.Y(),    | |||
                    x = [px], y = [py],  | |||
                    phi = Math.PI/n,  | |||
                    s = r*Math.sin(phi),  | |||
                    i, j,   | |||
                    d = 16,   | |||
                    dt = phi/d,   | |||
                    pt = Math.PI*0.5+phi;  | |||
                for (i=0;i<n;i++) {  | |||
                    for (j=-d;j<=d;j++) {  | |||
                        x.push(px+r*Math.cos(pt));  | |||
                        y.push(py+r*Math.sin(pt));  | |||
                        pt -= dt;  | |||
                    }  | |||
                    x.push(px);  | |||
                    y.push(py);  | |||
                    pt += dt;  | |||
                }  | |||
                 this.dataX = x;  |                  this.dataX = x;  | ||
                 this.dataY = y;  |                  this.dataY = y;  | ||
             }  |              }  | ||
             board.update();  |              board.update();  | ||
</jsxgraph>  | </jsxgraph>  | ||
===The underlying JavaScript code  | ===The underlying JavaScript code===  | ||
<source lang="  | <source lang="javascript">  | ||
         board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1.5,2,8,-3], keepaspectratio:true, axis:true});  | |||
         board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-  |          var N = board.create('slider', [[0,1.5],[3,1.5],[1,3,40]], {name:'n',snapWidth:1});  | ||
         var N = board.  |          var circ = board.create('circle',[[4,-1.5],1],{strokeWidth:1, strokecolor:'black', strokeWidth:2, fillColor:'#0055ff13'});  | ||
         board.  | |||
        var c = board.create('curve', [[0],[0]],{strokecolor:'red', strokeWidth:2});   | |||
         c.updateDataArray = function() {  |          c.updateDataArray = function() {  | ||
                 var r = 1, n = Math.floor(N.Value()), x = [0], y = [0],  |                  var r = 1, n = Math.floor(N.Value()),    | ||
                     h = r*Math.cos(  |                     x = [0], y = [0],  | ||
                     s = r*Math.sin(  |                     phi = Math.PI/n,  | ||
                     i, j, px = 0, py = 0, sgn = 1,    |                      h = r*Math.cos(phi),  | ||
                     d = 16, dt =   |                      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 (i=0;i<n;i++) {  | ||
| Line 51: | Line 84: | ||
                         pt = dt*j;  |                          pt = dt*j;  | ||
                         x.push(px+r*Math.sin(pt));  |                          x.push(px+r*Math.sin(pt));  | ||
                         y.push(sgn*r*Math.cos(pt)-(sgn-1)*h*0.5);  | |||
                     }  |                      }  | ||
                     px += s;  |                      px += s;  | ||
| Line 59: | Line 91: | ||
                 x.push((n-1)*s);  |                  x.push((n-1)*s);  | ||
                 y.push(h+(sgn-1)*h*0.5);  |                  y.push(h+(sgn-1)*h*0.5);  | ||
                this.dataX = x;  | |||
                this.dataY = y;  | |||
            }  | |||
        var c2 = board.create('curve', [[0],[0]],{strokecolor:'red', strokeWidth:1});   | |||
        c2.updateDataArray = function() {  | |||
                var r = 1, n = Math.floor(N.Value()),   | |||
                    px = circ.midpoint.X(), py = circ.midpoint.Y(),    | |||
                    x = [px], y = [py],  | |||
                    phi = Math.PI/n,  | |||
                    s = r*Math.sin(phi),  | |||
                    i, j,   | |||
                    d = 16,   | |||
                    dt = phi/d,   | |||
                    pt = Math.PI*0.5+phi;  | |||
                for (i=0;i<n;i++) {  | |||
                    for (j=-d;j<=d;j++) {  | |||
                        x.push(px+r*Math.cos(pt));  | |||
                        y.push(py+r*Math.sin(pt));  | |||
                        pt -= dt;  | |||
                    }  | |||
                    x.push(px);  | |||
                    y.push(py);  | |||
                    pt += dt;  | |||
                }  | |||
                 this.dataX = x;  |                  this.dataX = x;  | ||
                 this.dataY = y;  |                  this.dataY = y;  | ||
             }  |              }  | ||
             board.update();  |              board.update();  | ||
</source>  | </source>  | ||
[[Category:Examples]]  | [[Category:Examples]]  | ||
[[Category:Geometry]]  | [[Category:Geometry]]  | ||
Latest revision as of 10:56, 17 March 2020
The underlying JavaScript code
        board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1.5,2,8,-3], keepaspectratio:true, axis:true});
        var N = board.create('slider', [[0,1.5],[3,1.5],[1,3,40]], {name:'n',snapWidth:1});
        var circ = board.create('circle',[[4,-1.5],1],{strokeWidth:1, strokecolor:'black', strokeWidth:2, fillColor:'#0055ff13'});
        
        var c = board.create('curve', [[0],[0]],{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;
            }
        var c2 = board.create('curve', [[0],[0]],{strokecolor:'red', strokeWidth:1}); 
        c2.updateDataArray = function() {
                var r = 1, n = Math.floor(N.Value()), 
                    px = circ.midpoint.X(), py = circ.midpoint.Y(),  
                    x = [px], y = [py],
                    phi = Math.PI/n,
                    s = r*Math.sin(phi),
                    i, j, 
                    d = 16, 
                    dt = phi/d, 
                    pt = Math.PI*0.5+phi;
                    
                for (i=0;i<n;i++) {
                    for (j=-d;j<=d;j++) {
                        x.push(px+r*Math.cos(pt));
                        y.push(py+r*Math.sin(pt));
                        pt -= dt;
                    }
                    x.push(px);
                    y.push(py);
                    pt += dt;
                }
                this.dataX = x;
                this.dataY = y;
            }
            board.update();