Skip to content

Instantly share code, notes, and snippets.

@Karlina-Bytes

Karlina-Bytes/approxPi.html

Created March 11, 2015 21:45
Show Gist options
  • Save Karlina-Bytes/f536017ff85857a99ac1 to your computer and use it in GitHub Desktop.
Save Karlina-Bytes/f536017ff85857a99ac1 to your computer and use it in GitHub Desktop.
Download ZIP
A simple web application to demonstrate how to approximate pi using the Monte Carlo Method.
Raw
approxPi.html
<!--******************************************************************-->
<!-- approxPi.html -->
<!-- @author Karlina Beringer -->
<!-- Demonstrates how to approximate pi using the Monte Carlo method. -->
<!--******************************************************************-->
<!DOCTYPE html>
<html>
<body>
<div id="approxPi">
<h4>Monte Carlo Pi Approximation</h4>
<p>
Click the button to view a thirty-second animation.
</p>
<!-- Canvas for placing the dots. -->
<canvas id="myCanvas" width="200" height="200" style="border:3px solid #303030;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<br>
<!-- Button for starting the thirty-second animation. -->
<input id="startButton" type="button" value="Approximate Pi!" onclick="approxPi()">
<!-- Area to display the Pi approximation calculation. -->
<p><code id="Pi_Data"></code></p>
</div>
</body>
<script>
// Draw the canvas with the circle circumscribed within it.
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.arc(0, 0, canvas.width, 0, 2*Math.PI);
context.stroke();
var dotsInCircle = 0, dotsOutsideCircle = 0;
var RADIUS = canvas.width;
// Start the simulation.
function approxPi() {
resetAnimation();
animate();
}
// Place dots randomly on the canvas for thirty seconds.
function animate() {
var drawDots = setInterval(function(){ drawDot(); }, 0.125);
setTimeout(function(){ clearTimeout(drawDots); displayButton(); }, 30000);
}
// Randomly place a dot on the canvas. Update UI values.
function drawDot() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
document.getElementById("startButton").style.display = "none";
var x = Math.floor((Math.random() * canvas.width) + 1);
var y = Math.floor((Math.random() * canvas.width) + 1);
var distance = Math.sqrt(x * x + y * y);
if (distance < RADIUS) {
context.fillStyle = "#ff9900";
context.fillRect(x, y, 2, 2);
dotsInCircle++;
}
else {
context.fillStyle = "#006699";
context.fillRect(x, y, 2, 2);
dotsOutsideCircle++;
}
var message = "<p><code>&pi; &#8776; 4(dots_in_circle)/(dots_in_square)<br>";
message += " = 4(" + dotsInCircle + ")/(";
message += dotsInCircle + dotsOutsideCircle + ")";
message += " = " + (4 * (dotsInCircle / (dotsInCircle + dotsOutsideCircle)));
message += "</code></p>";
document.getElementById("Pi_Data").innerHTML = message;
}
function displayButton() {
document.getElementById("startButton").style.display = "block";
}
// Clear the dots from the canvas. Reset UI values.
function resetAnimation() {
document.getElementById("startButton").style.display = "block";
document.getElementById("Pi_Data").innerHTML = "";
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(0, 0, 200, 0, 2*Math.PI);
context.stroke();
dotsInCircle = 0, dotsOutsideCircle = 0;
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment