Mandelbrot mit JSXGraph

Aus Wiki1

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
Zeile 1: Zeile 1:
<jsxgraph box="jxgbox" width="800" height="700">
<jsxgraph box="jxgbox" width="800" height="700">
   
   
-
    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],
     axis: false,
     axis: false,
Zeile 14: Zeile 14:
   });
   });
-
   // Slider für Zoom
+
   // Slider für Zoom (optional weiterhin nutzbar)
   const sliderZoom = board.create('slider', [[-2.3, 1.0], [1, 1.0], [1, 1, 500]], {
   const sliderZoom = board.create('slider', [[-2.3, 1.0], [1, 1.0], [1, 1, 500]], {
     name:'Zoom',
     name:'Zoom',
Zeile 43: Zeile 43:
   }
   }
-
   // Anfangsbereich
+
   // Ausschnittparameter
   let centerX = -0.5;
   let centerX = -0.5;
   let centerY = 0;
   let centerY = 0;
-
   let baseWidth = 3.5;
+
   let zoom = 1;
-
   let baseHeight = 3.0;
+
  const baseWidth = 3.5;
 +
   const baseHeight = 3.0;
-
   function drawMandelbrot(maxIter, zoom) {
+
   function drawMandelbrot(maxIter) {
     const spanX = baseWidth / zoom;
     const spanX = baseWidth / zoom;
     const spanY = baseHeight / zoom;
     const spanY = baseHeight / zoom;
Zeile 86: Zeile 87:
   function update() {
   function update() {
-
     drawMandelbrot(Math.round(sliderIter.Value()), Math.round(sliderZoom.Value()));
+
     drawMandelbrot(Math.round(sliderIter.Value()));
 +
    sliderZoom.setValue(zoom); // Slider synchronisieren
   }
   }
   sliderIter.on('drag', update);
   sliderIter.on('drag', update);
-
   sliderZoom.on('drag', update);
+
   sliderZoom.on('drag', () => {
 +
    zoom = sliderZoom.Value();
 +
    update();
 +
  });
   // Panning mit Maus
   // Panning mit Maus
Zeile 102: Zeile 107:
   });
   });
-
   canvas.addEventListener('mouseup', () => {
+
   canvas.addEventListener('mouseup', () => { isDragging = false; });
-
    isDragging = false;
+
   canvas.addEventListener('mouseleave', () => { isDragging = false; });
-
  });
+
-
 
+
-
   canvas.addEventListener('mouseleave', () => {
+
-
    isDragging = false;
+
-
  });
+
   canvas.addEventListener('mousemove', e => {
   canvas.addEventListener('mousemove', e => {
Zeile 117: Zeile 117:
       lastY = e.offsetY;
       lastY = e.offsetY;
-
      // Verschiebung in komplexer Ebene berechnen
 
-
      const zoom = Math.round(sliderZoom.Value());
 
       const spanX = baseWidth / zoom;
       const spanX = baseWidth / zoom;
       const spanY = baseHeight / zoom;
       const spanY = baseHeight / zoom;
Zeile 127: Zeile 125:
       update();
       update();
     }
     }
 +
  });
 +
 +
  // Zoom mit Mausrad
 +
  canvas.addEventListener('wheel', e => {
 +
    e.preventDefault();
 +
    const zoomFactor = 1.2;
 +
    const rect = canvas.getBoundingClientRect();
 +
 +
    // Mausposition relativ zum Canvas
 +
    const px = e.clientX - rect.left;
 +
    const py = e.clientY - rect.top;
 +
 +
    // Koordinaten in komplexer Ebene
 +
    const spanX = baseWidth / zoom;
 +
    const spanY = baseHeight / zoom;
 +
    const xMin = centerX - spanX/2;
 +
    const yMin = centerY - spanY/2;
 +
    const cx = xMin + (px / canvas.width) * spanX;
 +
    const cy = yMin + (py / canvas.height) * spanY;
 +
 +
    if (e.deltaY < 0) {
 +
      // reinzoomen
 +
      zoom *= zoomFactor;
 +
    } else {
 +
      // rauszoomen
 +
      zoom /= zoomFactor;
 +
    }
 +
 +
    // Mittelpunkt auf Mauszeiger ausrichten
 +
    const newSpanX = baseWidth / zoom;
 +
    const newSpanY = baseHeight / zoom;
 +
    centerX = cx - (px / canvas.width) * newSpanX;
 +
    centerY = cy - (py / canvas.height) * newSpanY;
 +
 +
    update();
   });
   });
   // Initial zeichnen
   // Initial zeichnen
   update();
   update();
-
 
</jsxgraph>
</jsxgraph>

Version vom 11:04, 15. Sep. 2025

Mit den Schiebereglern können Iterations-Tiefe und Zoom gesteuert werden. Mit der Maus+linke Maustaste kann der Bildausschnitt verschoben werden.

Ein Hinweis:

Dieses Script wurde mit Hilfe mehrerer Prompts durch ChatGPT erstellt. Allerdings musste ich es an einzelnen Stellen anpassen, da es sonst nicht funktioniert hätte. Man kann also durch ChatGPT erstellen - benötigt aber zumindest Grundkenntnisse der jeweiligen Script- oder Programmiersprache. Im vorliegenden Fall wurde z.B. das Canvas-Bild so angeordnet, dass die Slider verdeckt waren. Die Position des Bildes musste leicht angepasst werden.


Hier die Prompts:

  1. gib mir jetzt einen jsxgraph-code für die erstellung einer Mandelbrot-Grafik mit regler zur Steuerung der Tiefe
  2. schlag mir eine schnellere variante vor (ChatGPT schlug eine Lösung mit canvas-Element vor)
  3. bitte ändere das script so, dass ich mit einem regler in die graphik zoomen kann
  4. mit der Maus soll der angezeigte Bereich des Bildes verschoben werden können
Von „https://www.technikundkultur.de/wiki1/index.php5?title=Mandelbrot_mit_JSXGraph“
Persönliche Werkzeuge