SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt! → Veranstaltungs-Ankündigung.

Beispiel:JS-math.PI-3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!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 = `Pinner = ${piLower.toFixed(6)} `;
           document.getElementById("pi-upper").innerHTML = `Pouter = ${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;}

  1. pi { color:#c82f04; font-size: 1.25em;}

</style> </head> <body>

Annäherung an Pi durch Polygone

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

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

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

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.

</body> </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-math.PI-3.html&oldid=102197“