Mandelbrot mit JSXGraph

Aus Wiki1

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
Zeile 1: Zeile 1:
<jsxgraph box="jxgbox" width="800" height="600">
<jsxgraph box="jxgbox" width="800" height="600">
 +
 +
<script type="text/javascript">
   const board = JXG.JSXGraph.initBoard('jxgbox', {
   const board = JXG.JSXGraph.initBoard('jxgbox', {
     boundingbox: [-2.5, 1.5, 1.5, -1.5],
     boundingbox: [-2.5, 1.5, 1.5, -1.5],
Zeile 9: Zeile 11:
   // Slider für Iterationstiefe
   // Slider für Iterationstiefe
-
   let slider = board.create('slider', [[-2.3, 1.3], [1, 1.3], [10, 50, 300]], {
+
   const sliderIter = board.create('slider', [[-2.3, 1.3], [1, 1.3], [10, 50, 300]], {
     name:'Tiefe',
     name:'Tiefe',
 +
    snapWidth:1
 +
  });
 +
 +
  // Slider für Zoom
 +
  const sliderZoom = board.create('slider', [[-2.3, 1.0], [1, 1.0], [1, 1, 50]], {
 +
    name:'Zoom',
     snapWidth:1
     snapWidth:1
   });
   });
Zeile 17: Zeile 25:
   const div = document.getElementById('jxgbox');
   const div = document.getElementById('jxgbox');
   const canvas = document.createElement('canvas');
   const canvas = document.createElement('canvas');
-
   canvas.width = 600;
+
   canvas.width = 400;
-
   canvas.height = 400;
+
   canvas.height = 300;
   canvas.style.position = 'absolute';
   canvas.style.position = 'absolute';
   canvas.style.left = "100px";
   canvas.style.left = "100px";
Zeile 25: Zeile 33:
   const ctx = canvas.getContext('2d');
   const ctx = canvas.getContext('2d');
 +
  // Mandelbrot-Berechnung
   function mandelbrotIter(cx, cy, maxIter) {
   function mandelbrotIter(cx, cy, maxIter) {
     let x = 0, y = 0, iter = 0;
     let x = 0, y = 0, iter = 0;
Zeile 36: Zeile 45:
   }
   }
-
   function drawMandelbrot(maxIter) {
+
   function drawMandelbrot(maxIter, zoom) {
-
    const bb = board.getBoundingBox(); // [x_min, y_max, x_max, y_min]
+
     const img = ctx.createImageData(canvas.width, canvas.height);
     const img = ctx.createImageData(canvas.width, canvas.height);
 +
 +
    // Bereich um das Zentrum [0,0] verkleinern
 +
    const spanX = 3.5 / zoom;  // Breite des Ausschnitts
 +
    const spanY = 3.0 / zoom;  // Höhe des Ausschnitts
 +
    const xMin = -spanX/2, xMax = spanX/2;
 +
    const yMin = -spanY/2, yMax = spanY/2;
     for (let px = 0; px < canvas.width; px++) {
     for (let px = 0; px < canvas.width; px++) {
       for (let py = 0; py < canvas.height; py++) {
       for (let py = 0; py < canvas.height; py++) {
-
        // Koordinaten im Mandelbrot-Bereich
+
         const cx = xMin + (px / canvas.width) * (xMax - xMin);
-
         const cx = bb[0] + (px / canvas.width) * (bb[2] - bb[0]);
+
         const cy = yMin + (py / canvas.height) * (yMax - yMin);
-
         const cy = bb[3] + (py / canvas.height) * (bb[1] - bb[3]);
+
         const iter = mandelbrotIter(cx, cy, maxIter);
         const iter = mandelbrotIter(cx, cy, maxIter);
Zeile 50: Zeile 63:
         if (iter >= maxIter) {
         if (iter >= maxIter) {
-
           img.data[idx] = 0;     // R
+
           img.data[idx] = 0;
-
           img.data[idx+1] = 0;   // G
+
           img.data[idx+1] = 0;
-
           img.data[idx+2] = 0;   // B
+
           img.data[idx+2] = 0;
-
           img.data[idx+3] = 255; // A
+
           img.data[idx+3] = 255;
         } else {
         } else {
           const c = Math.floor(255 * iter / maxIter);
           const c = Math.floor(255 * iter / maxIter);
Zeile 66: Zeile 79:
   }
   }
-
   // Erneuern, wenn Slider bewegt wird
+
   function update() {
-
  slider.on('drag', () => {
+
     drawMandelbrot(Math.round(sliderIter.Value()), Math.round(sliderZoom.Value()));
-
     drawMandelbrot(Math.round(slider.Value()));
+
   }
-
   });
+
-
   board.update();
+
   sliderIter.on('drag', update);
 +
  sliderZoom.on('drag', update);
   // Initial zeichnen
   // Initial zeichnen
-
   drawMandelbrot(Math.round(slider.Value()));
+
   update();
</jsxgraph>
</jsxgraph>

Version vom 10:39, 15. Sep. 2025

Von „https://technikundkultur.info/wiki1/index.php5?title=Mandelbrot_mit_JSXGraph“
Persönliche Werkzeuge