Calculate Pi with Monte-Carlo-method: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(4 intermediate revisions by the same user not shown)
Line 7: Line 7:
Please, move the mouse pointer over this area:
Please, move the mouse pointer over this area:
<jsxgraph box="jxgbox" width="400" height="400">
<jsxgraph box="jxgbox" width="400" height="400">
  board2 = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 1, 1, -1], axis:true});
  var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 1, 1, -1], axis:true});
  c = board2.create('circle', [[0,0], 1]);
  c = board.create('circle', [[0,0], 1]);
  var p2 = [];
  var p2 = [];
  for (var i=0;i<50;i++) {
  for (var i=0;i<50;i++) {
   p2[i] = board2.create('point',
   p2[i] = board.create('point',
           [function(){return 2*Math.random()-1;},function(){ return 2*Math.random()-1;}],
           [function(){return 2*Math.random()-1;},function(){ return 2*Math.random()-1;}],
           {face:'o',size:3,name:' '});
           {face:'o',size:3,name:' '});
Line 44: Line 44:
  }
  }


   var hookid = board2.addHook(updText);
   board.on('update', updText);
   JXG.addEvent(document.getElementById('jxgbox'), 'mousemove', function () { this.update(); }, board2);
   JXG.addEvent(document.getElementById('jxgbox'), 'mousemove', function () { this.update(); }, board);


</jsxgraph>
</jsxgraph>


==The JavaScript Code==
===The JavaScript code===
Addition to the usual JSXGraph container division we need another div tag to hold the text output seen above:
In addition to the usual JSXGraph container division we need another div tag to hold the text output seen above:
<source lang="xml">
<source lang="xml">
<div id="resulttext"></div>
<div id="resulttext"></div>
Line 57: Line 57:
The JavaScript code:
The JavaScript code:
<source lang="javascript">
<source lang="javascript">
board2 = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 1, 1, -1], axis:true});
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 1, 1, -1], axis:true});
c = board2.create('circle', [[0,0], 1]);
c = board.create('circle', [[0,0], 1]);
var p2 = [];
var p2 = [];
for (var i=0;i<50;i++) {
for (var i=0;i<50;i++) {
     p2[i] = board2.create('point',
     p2[i] = board.create('point',
         [function(){return 2*Math.random()-1;},function(){ return 2*Math.random()-1;}],
         [function(){return 2*Math.random()-1;},function(){ return 2*Math.random()-1;}],
         {size:3,face:'o',name:' '});
         {size:3,face:'o',name:' '});
Line 94: Line 94:
}
}


var hookid = board2.addHook(updText);
board.on('update', updText);
JXG.addEvent(document.getElementById('jxgbox'), 'mousemove', function () { this.update(); }, board2);
JXG.addEvent(document.getElementById('jxgbox'), 'mousemove', function () { this.update(); }, board);
</source>
</source>


[[Category:Examples]]
[[Category:Examples]]
[[Category:Statistics]]
[[Category:Statistics]]

Latest revision as of 13:57, 10 January 2023

Here, at construction time each point receives a function pair as coordinates. In each update these functions which return Math.random() are called. Thus in each update each point receives new random coordinates. The 50 points are updated on the onmousemove event.

This can be used to calculate [math]\displaystyle{ \pi }[/math] using statistics. After each update we count the number of points inside the circle (with midpoint [0,0] and radius 1) and outside the circle. The points are restricted to the square with midpoint [0,0] and edges of length 2.

Please, move the mouse pointer over this area:

The JavaScript code

In addition to the usual JSXGraph container division we need another div tag to hold the text output seen above:

<div id="resulttext"></div>

The JavaScript code:

var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 1, 1, -1], axis:true});
c = board.create('circle', [[0,0], 1]);
var p2 = [];
for (var i=0;i<50;i++) {
    p2[i] = board.create('point',
        [function(){return 2*Math.random()-1;},function(){ return 2*Math.random()-1;}],
        {size:3,face:'o',name:' '});
}

var tin = 0;
var tout = 0;
var count = 0;

function updText() {
    count++;
    var text = '';

    var inp = 0;
    var outp = 0;

    for(var i=0; i<p2.length;i++) {
        var x = p2[i].X();
        var y = p2[i].Y();

        if(x*x+y*y <= 1) {
            inp++;
        } else {
            outp++;
        }
    }
    tin += inp;
    tout += outp;

    text += '<b><u>Current</u></b><br/>In: ' + inp + ', out: ' + outp + ', total: ' + (inp+outp) + '; ratio: ' + (inp/(inp+outp)) + ', ratio*4: ' + (4*inp/(inp+outp)) + '.<br /><b><u>Total</u></b> (' + count + ' updates in total)<br/>In: ' + tin + ', out: ' + tout + ', total: ' + (tin+tout) + '; ratio: ' + (tin/(tin+tout)) + ', ratio*4: ' + (4*tin/(tin+tout));
    document.getElementById('resulttext').innerHTML = text;
}

board.on('update', updText);
JXG.addEvent(document.getElementById('jxgbox'), 'mousemove', function () { this.update(); }, board);