formatting
This commit is contained in:
@@ -1,48 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js"></script>
|
||||
|
||||
<h1 id="PIbox"></h1>
|
||||
<h2 id="percentage"></h2>
|
||||
|
||||
<h1 id="PIbox"></h1>
|
||||
<h2 id="percentage"></h2>
|
||||
|
||||
<style>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background: #fafafa;
|
||||
margin: 20px;
|
||||
text-align: center;
|
||||
font-family: Arial, sans-serif;
|
||||
background: #fafafa;
|
||||
margin: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
margin: 10px 0;
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
|
||||
<div id="container">
|
||||
<div id="container">
|
||||
<h1>Monte Carlo π Estimator</h1>
|
||||
|
||||
<p>
|
||||
A small demonstation on how the Monte Carlo method can approximate the value of π
|
||||
by randomly placing points inside a square and checking how many fall within
|
||||
the inner circle. The closer the ratio gets to π/4, the more accurate
|
||||
the estimation becomes.
|
||||
A small demonstation on how the Monte Carlo method can approximate the
|
||||
value of π by randomly placing points inside a square and checking how
|
||||
many fall within the inner circle. The closer the ratio gets to π/4, the
|
||||
more accurate the estimation becomes.
|
||||
</p>
|
||||
|
||||
<h2 id="PIbox"></h2>
|
||||
<h3 id="percentage"></h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
<script>
|
||||
const r = 400;
|
||||
var circleCount, total;
|
||||
var x, y;
|
||||
@@ -52,53 +49,51 @@
|
||||
var BestPI = 50;
|
||||
|
||||
function setup() {
|
||||
createCanvas(r * 2, r * 2);
|
||||
background(0);
|
||||
stroke(255, 0, 0);
|
||||
strokeWeight(3);
|
||||
noFill()
|
||||
translate(width / 2, height / 2);
|
||||
rectMode(CENTER);
|
||||
rect(0, 0, r * 2, r * 2);
|
||||
ellipse(0, 0, r * 2, r * 2);
|
||||
circleCount = 0;
|
||||
total = 0;
|
||||
createCanvas(r * 2, r * 2);
|
||||
background(0);
|
||||
stroke(255, 0, 0);
|
||||
strokeWeight(3);
|
||||
noFill();
|
||||
translate(width / 2, height / 2);
|
||||
rectMode(CENTER);
|
||||
rect(0, 0, r * 2, r * 2);
|
||||
ellipse(0, 0, r * 2, r * 2);
|
||||
circleCount = 0;
|
||||
total = 0;
|
||||
}
|
||||
|
||||
function draw() {
|
||||
translate(width / 2, height / 2);
|
||||
x = random(-r, r);
|
||||
y = random(-r, r);
|
||||
|
||||
translate(width / 2, height / 2);
|
||||
x = random(-r, r)
|
||||
y = random(-r, r)
|
||||
stroke(0, 255, 0);
|
||||
|
||||
stroke(0, 255, 0)
|
||||
total += 1;
|
||||
|
||||
total += 1
|
||||
var d = dist(x, y, 0, 0);
|
||||
if (d < r) {
|
||||
circleCount += 1;
|
||||
stroke(0, 0, 255);
|
||||
}
|
||||
|
||||
var d = dist(x, y, 0, 0)
|
||||
if (d < r) {
|
||||
circleCount += 1
|
||||
stroke(0, 0, 255)
|
||||
}
|
||||
point(x, y);
|
||||
|
||||
point(x, y);
|
||||
calcPI = 4 * (circleCount / total);
|
||||
if (abs(PI - calcPI) < abs(PI - BestPI)) {
|
||||
DisplayPI = calcPI;
|
||||
BestPI = calcPI;
|
||||
|
||||
calcPI = 4 * (circleCount / total);
|
||||
if (abs(PI - calcPI) < abs(PI - BestPI)) {
|
||||
DisplayPI = calcPI;
|
||||
BestPI = calcPI;
|
||||
var PIDisplay = document.getElementById("PIbox");
|
||||
PIDisplay.innerHTML = DisplayPI;
|
||||
|
||||
var PIDisplay = document.getElementById("PIbox");
|
||||
PIDisplay.innerHTML = DisplayPI;
|
||||
|
||||
var ErrorDisplay = document.getElementById("percentage");
|
||||
var DisplayError = "a";
|
||||
var Perror = (calcPI - PI) / PI
|
||||
Perror *= 100;
|
||||
DisplayError = nfc(Perror, 10);
|
||||
ErrorDisplay.innerHTML = DisplayError + '%';
|
||||
}
|
||||
var ErrorDisplay = document.getElementById("percentage");
|
||||
var DisplayError = "a";
|
||||
var Perror = (calcPI - PI) / PI;
|
||||
Perror *= 100;
|
||||
DisplayError = nfc(Perror, 10);
|
||||
ErrorDisplay.innerHTML = DisplayError + "%";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user