formatting

This commit is contained in:
Jay
2026-03-21 15:05:08 +00:00
parent 2100334f1f
commit 13c8b0a28e
26 changed files with 3176 additions and 2631 deletions

View File

@@ -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>