Skip to content

Instantly share code, notes, and snippets.

@3ki5tj

3ki5tj/mcpi.html

Created November 18, 2014 21:16
Show Gist options
  • Save 3ki5tj/a55154ff08e64e90ea9e to your computer and use it in GitHub Desktop.
Save 3ki5tj/a55154ff08e64e90ea9e to your computer and use it in GitHub Desktop.
Download ZIP
Estimate Pi by Monte Carlo sampling
Raw
mcpi.html
<!DOCTYPE html>
<html>
<head>
<script>
function mcgetPi() {
var c = document.getElementById("mcpi");
var ctx = c.getContext("2d");
var w = c.width;
var h = c.height;
var r = Math.min(w/2, h/2) - 1;
// draw the background
ctx.fillStyle = "#f0f0f0";
ctx.fillRect(0, 0, w, h);
// fill the circle
ctx.beginPath();
ctx.arc(w/2, h/2, r, 0, Math.PI*2);
ctx.closePath();
ctx.fillStyle = "#c0c0c0";
ctx.fill();
// draw random dots
ctx.fillStyle = "black";
var s = document.getElementById("numSamps").value;
if ( !isNaN(s) ) num = s; else num = 1;
var maxNumDraw = w*h;
var cnt = 0;
document.getElementById("PiEstimate").innerHTML = "";
document.getElementById("PiComment").innerHTML = num > maxNumDraw ? " (visualization disabled)" : "";
for ( i = 0; i < num; i++ ) {
var x = Math.random();
var y = Math.random();
if ((2*x - 1)*(2*x - 1) + (2*y - 1)*(2*y - 1) < 1)
cnt += 1;
// a dot === a one-by-one rectangle
if ( num <= maxNumDraw )
ctx.fillRect( x * w, y * h, 1, 1);
}
// write the output
document.getElementById("PiEstimate").innerHTML = 4.0*cnt/num;
}
window.onload = mcgetPi;
</script>
</head>
<body>
<div style="margin: 0px 0px 50px 20px; padding: 0px 0px 0px 0px;">
How many random points?
<input type="text" value="10000" size="10" id="numSamps" />
<br>
<input type="submit" value="Estimate" onClick="mcgetPi()" />
<span class="eq"><i>&pi;</i> &asymp; </span>
<span class="eq" id="PiEstimate"></span>
<span id="PiComment"></span>.
</div>
<canvas id="mcpi" width="320px" height="320px" style="float:left; margin: 10px 10px;">
</canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment