Beispiel:JS-math.PI-3.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>Annäherung an Pi durch Polygone</title>
<script>
function updatePolygon(n) {
let inscribedPoints = [], circumscribedPoints = [];
let innerRadius = 1;
let outerRadius = 1 / Math.cos(Math.PI / n);
for (let i = 0; i < n; i++) {
let angle = (2 * Math.PI * i) / n;
inscribedPoints.push(`${innerRadius * Math.cos(angle)},${innerRadius * Math.sin(angle)}`);
circumscribedPoints.push(`${outerRadius * Math.cos(angle)},${outerRadius * Math.sin(angle)}`);
}
document.getElementById("inscribed").setAttribute("points", inscribedPoints.join(' '));
document.getElementById("circumscribed").setAttribute("points", circumscribedPoints.join(' '));
let piLower = (n * Math.sin(Math.PI / n));
let piUpper = (n * Math.tan(Math.PI / n));
document.getElementById("pi-lower").innerHTML = `P<sub>inner</sub> = ${piLower.toFixed(6)} `;
document.getElementById("pi-upper").innerHTML = `P<sub>outer</sub> = ${piUpper.toFixed(6)} `;
document.getElementById("polygon-sides").textContent = n; // Update the output element
}
document.addEventListener("DOMContentLoaded", function() {
const slider = document.getElementById("polygon-slider");
slider.addEventListener("input", function() {
updatePolygon(this.value);
});
updatePolygon(slider.value); // Initialize with default value
});
</script>
<style>
math {font-size:2em; color: steelBlue;}
#pi { color:#c82f04; font-size: 1.25em;}
</style>
</head>
<body>
<h1>Annäherung an Pi durch Polygone</h1>
<svg width="500" height="500" viewBox="-1.2 -1.2 2.4 2.4">
<circle cx="0" cy="0" r="1" stroke="#337599" stroke-width="0.01" fill="none" />
<polygon id="inscribed" stroke="#c82f04" stroke-width="0.01" fill="none" />
<polygon id="circumscribed" stroke="#dfac20" stroke-width="0.01" fill="none" />
</svg>
<p>
<label>Erhöhe die Anzahl der Polygonseiten:
<input id="polygon-slider" type="range" min="6" max="100" value="6" step="1">
<output id="polygon-sides">6</output>
</label>
</p>
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mrow>
<mi>π</mi>
<mo>∼</mo>
<mtext id="pi-lower">P_{\text{inner}} = </mtext>
<mo>≤</mo>
<mi id="pi">π</mi>
<mo>≤</mo>
<mtext id="pi-upper">P_{\text{outer}} = </mtext>
</mrow>
</math>
<p>Das rote Polygon ist eingeschrieben und das gelbe Polygon ist umschrieben. Ihre Umfänge bilden die untere und obere Grenze für den Umfang des Kreises.</p>
</body>
</html>
