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 | ||
| (36 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| <jsxgraph width=" | <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. |          var N = board.create('slider', [[0,1.5],[3,1.5],[1,3,40]], {name:'n',snapWidth:1}); | ||
|          var circ = board. |          var circ = board.create('circle',[[4,-1.5],1],{strokeWidth:1, strokecolor:'black', strokeWidth:2, fillColor:'#0055ff', fillOpacity:0.3}); | ||
|          var c = 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()),   |                  var r = 1, n = Math.floor(N.Value()),   | ||
| Line 32: | Line 32: | ||
|              } |              } | ||
|          var c2 = board. |          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()),   | ||
|                      px = circ.midpoint.X(), py = circ.midpoint.Y(),   | |||
|                     x = [px], y = [py], | |||
|                      phi = Math.PI/n, |                      phi = Math.PI/n, | ||
|                      s = r*Math.sin(phi), |                      s = r*Math.sin(phi), | ||
|                      i, j,   |                      i, j,   | ||
|                      d = 16,   |                      d = 16,   | ||
|                      dt = phi/d,   |                      dt = phi/d,   | ||
|                      pt; |                      pt = Math.PI*0.5+phi; | ||
|                  for (i=0;i<n;i++) { |                  for (i=0;i<n;i++) { | ||
|                      for (j=-d;j<=d;j++) { |                      for (j=-d;j<=d;j++) { | ||
|                          x.push(px+r*Math.cos(pt)); | |||
|                          x.push(px+r*Math. |                          y.push(py+r*Math.sin(pt)); | ||
|                          y.push( |                         pt -= dt; | ||
|                      } |                      } | ||
|                      px  |                      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()),   |                  var r = 1, n = Math.floor(N.Value()),   | ||
| Line 96: | 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();
