Difference between revisions of "Approximation of the circle area"

From JSXGraph Wiki
Jump to navigationJump to search
 
(30 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<jsxgraph width="800" height="500">
+
<jsxgraph width="809" height="500">
 
         board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1.5,2,8,-3], keepaspectratio:true, axis:true});
 
         board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1.5,2,8,-3], 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.create('slider', [[0,1.5],[3,1.5],[1,3,40]], {name:'n',snapWidth:1});
         var circ = board.createElement('circle',[[4,-1.5],1],{strokeWidth:1, strokecolor:'black'});
+
         var circ = board.create('circle',[[4,-1.5],1],{strokeWidth:1, strokecolor:'black', strokeWidth:2, fillColor:'#0055ff', fillOpacity:0.3});
 
          
 
          
         var c = board.createElement('curve', [[0],[0]],{strokecolor:'red', strokeWidth:2});  
+
         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()),  
 
                 var r = 1, n = Math.floor(N.Value()),  
Line 32: Line 32:
 
             }
 
             }
  
         var c2 = board.createElement('curve', [[0],[0]],{strokecolor:'red', strokeWidth:2});  
+
         var c2 = board.create('curve', [[0],[0]],{strokecolor:'red', strokeWidth:1});  
 
         c2.updateDataArray = function() {
 
         c2.updateDataArray = function() {
 
                 var r = 1, n = Math.floor(N.Value()),  
 
                 var r = 1, n = Math.floor(N.Value()),  
Line 42: Line 42:
 
                     d = 16,  
 
                     d = 16,  
 
                     dt = phi/d,  
 
                     dt = phi/d,  
                     pt = 0;
+
                     pt = Math.PI*0.5+phi;
 
                      
 
                      
                 for (i=0;i<2;i++) {
+
                 for (i=0;i<n;i++) {
 
                     for (j=-d;j<=d;j++) {
 
                     for (j=-d;j<=d;j++) {
                         x.push(px+r*Math.sin(pt));
+
                         x.push(px+r*Math.cos(pt));
                         y.push(py+r*Math.cos(pt));
+
                         y.push(py+r*Math.sin(pt));
                         pt += dt;
+
                         pt -= dt;
 
                     }
 
                     }
 
                     x.push(px);
 
                     x.push(px);
 
                     y.push(py);
 
                     y.push(py);
 +
                    pt += dt;
 
                 }
 
                 }
 
                 this.dataX = x;
 
                 this.dataX = x;
Line 57: Line 58:
 
             }
 
             }
 
             board.update();
 
             board.update();
 +
 
</jsxgraph>
 
</jsxgraph>
  
 
===The underlying JavaScript code===
 
===The underlying JavaScript code===
<source lang="xml">
+
<source lang="javascript">
<jsxgraph width="700" height="500">
+
         board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1.5,2,8,-3], keepaspectratio:true, axis:true});
         board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2,2,8,-2], keepaspectratio:true, axis:true});
+
         var N = board.create('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});
+
         var circ = board.create('circle',[[4,-1.5],1],{strokeWidth:1, strokecolor:'black', strokeWidth:2, fillColor:'#0055ff13'});
         board.createElement('circle',[[0,0],1],{strokeWidth:1, strokecolor:'black'});
 
       
 
        var c = board.createElement('curve', [[0],[0]],{trace:true, strokecolor:'red', strokeWidth:2});  
 
 
          
 
          
 +
        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()),  
 
                 var r = 1, n = Math.floor(N.Value()),  
Line 91: 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();
</jsxgraph>
 
 
</source>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 
[[Category:Geometry]]
 
[[Category:Geometry]]

Latest revision as of 12: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();