Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@rogerjaffe
rogerjaffe committed Aug 23, 2014
0 parents commit c9b86d5
Show file tree
Hide file tree
Showing 12 changed files with 6,966 additions and 0 deletions.
6,063 changes: 6,063 additions & 0 deletions bootstrap.css

Large diffs are not rendered by default.

Binary file added eq2.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added eq3.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
55 changes: 55 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Estimating Pi</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="bootstrap.css" type="text/css" media="screen">
<link rel="stylesheet" href="montecarlo.css" type="text/css" media="screen">
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src='montecarlo.js'></script>
</head>
<body class="container">

<div id="header" class="row">
<div class="col-md-12">
<h2>Estimating Pi Using Monte Carlo Methods</h2>
<h4>APCS Lesson 29</h4>
</div>
</div>
<div class="row">
<div class="col-md-3">
<button>Place <span class="qty"></span> points</button>
<div class="hide-on-start top-margin">
<p>Total dots: <span id="totalCount"></span></p>
<p>Dots inside circle: <span id="insideCount"></span></p>
<p>Estimate of &pi;: <span id="estimate"></span></p>
<p>Actual value of &pi;: <span id="actual"></span></p>
<p>Percentage error: <span id="error"></span>%</p>
</div>
</div>
<div class="col-md-6">
<canvas id="canvas" width="400" height="400"></canvas>
</div>
<div class="col-md-3">
<p class="divider">How the math works:</p>
<p>The ratio of the area of the circle to the area of the square should be proportional to the ratio of points in the circle to the points in the square</p>
<img src="ratio.gif" class="img-rounded">
<p class="text">Substitute the number of points in each region for the area of each region and solve the above equation for &pi;</p>
<img src="eq2.gif" class="eqn">
<p>But since 2r = s, this simplifies to</p>
<img src="eq3.gif" class="eqn">
</div>
</div>

<div id="footer" class="row">
<div class="col-md-12">
<p class="small">Estimating Pi <span class="version"></span>
MIT License <span data-bind="text: copyrightYear"></span><br/>
Source code is at <a href="https://bitbucket.org/rogerjaffe/piestimator/src" target="_blank">BitBucket</a></p>
</div>
</div>
</body>
</html>
4 changes: 4 additions & 0 deletions jquery-2.1.1.min.js

Large diffs are not rendered by default.

7 changes: 7 additions & 0 deletions jquery-ui.min.css

Large diffs are not rendered by default.

13 changes: 13 additions & 0 deletions jquery-ui.min.js

Large diffs are not rendered by default.

21 changes: 21 additions & 0 deletions montecarlo.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
canvas {
width: 400px;
height: 400px;
border: 1px solid black;
}

img {
margin-bottom: 10px;
}

#footer {
margin-top: 10px;
}

.top-margin {
margin-top: 5px;
}

.hide-on-start {
display: none;
}
107 changes: 107 additions & 0 deletions montecarlo.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
(function (width, version) {
// Configuration constants
var config = {
width: 400, // Canvas width/height
version: 'V1.0',
errorPrecision: 5, // Decimal precision for display
quantity: 10000,
inside: 0, // Pixel count inside circle
total: 0 // Pixel count total
};
config.half = config.width >> 1; // Half canvas size

// These functions are called once when the page loads
// Draw the circle inscribed inside the canvas square area
function drawCircle(context) {
context.beginPath();
context.arc(config.half, config.half, config.half, 0, 2*Math.PI);
context.stroke();
}

// Create the pixel image object
function createPixelImageData(context) {
var id = context.createImageData(1, 1);
var d = id.data;
d[3] = 255;
return id;
}

// Draw config.quantity pixels on canvas
function drawPixels() {
for (var i = 0; i<config.quantity; i++) {
var coord = drawPixel(config.context, config.id, selectPixel(config.width));
if (insideCircle(coord)) {
config.inside++;
}
config.total++;
}
$('.hide-on-start').show();
}

// Draw a dot on the canvas
// width: width of canvas (x and y since it's a square)
function selectPixel(width) {
var x = Math.floor(Math.random() * width);
var y = Math.floor(Math.random() * width);
return {x: x, y: y};
}

// Draw the pixel on the page
// context: canvas context
// id: pixel image data
// coord: coordinate to place pixel (.x, .y)
function drawPixel(context, id, coord) {
context.putImageData(id, coord.x, coord.y);
return coord;
}

// Is the coordinate inside the circle?
function insideCircle(coord) {
var _x = coord.x - config.half;
var _y = coord.y - config.half;
var dx = _x*_x + _y*_y;
return (dx <= config.half * config.half);
}

// Compute the estimate of pi using the ratio of pixels inside and
// the total number of pixels
function computeEstimate(inside, total) {
config.estimate = config.inside / config.total * 4;
config.error = ((config.estimate - Math.PI) / Math.PI * 100.0).toFixed(5);
}

// Update all the display fields
function updateDisplay() {
$('#insideCount').text(config.inside);
$('#totalCount').text(config.total);
$('#estimate').text((config.estimate).toFixed(config.errorPrecision));
$('#error').text(((config.estimate - Math.PI) / Math.PI * 100.0).toFixed(config.errorPrecision));
}

$(document).ready(function () {
config.canvas = document.getElementById('canvas'); // Canvas object
config.context = config.canvas.getContext('2d'); // Context to canvas object
config.fillStyle = '#000000'; // Black fill
config.strokeStyle = "#FF0000"; // Red line (for circle)
config.lineWidth = 3; // Line width
config.context.fillStyle = config.fillStyle; // Set context values
config.context.strokeStyle = config.strokeStyle;
config.context.lineWidth = config.lineWidth;

config.id = createPixelImageData(config.context); // Create pixel object
drawCircle(config.context); // Draw the circle

// Display static values
$('#actual').text(Math.PI.toFixed(config.errorPrecision));
$('.version').text(config.version);
$('.qty').text(config.quantity);

// Button click handler
$('button').click(function () {
drawPixels();
computeEstimate();
updateDisplay();
});
});

})();
9 changes: 9 additions & 0 deletions piestimator.sublime-project
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"folders":
[
{
"follow_symlinks": true,
"path": "."
}
]
}
Loading

0 comments on commit c9b86d5

Please sign in to comment.