Mandelbrot mit JSXGraph

Aus Wiki1

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
 
(Der Versionsvergleich bezieht 23 dazwischenliegende Versionen mit ein.)
Zeile 1: Zeile 1:
-
<jsxgraph box="jxgbox" width="800" height="700">
+
<jsxgraph box="jxgbox" width="600" 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 9: Zeile 9:
   // Slider für Iterationstiefe
   // Slider für Iterationstiefe
-
   const sliderIter = board.create('slider', [[-2.3, 1.3], [1, 1.3], [10, 50, 300]], {
+
   const sliderIter = board.create('slider', [[-2.3, 1.3], [0.5, 1.3], [10, 50, 300]], {
     name:'Tiefe',
     name:'Tiefe',
     snapWidth:1
     snapWidth:1
   });
   });
-
   // Slider für Zoom (optional weiterhin nutzbar)
+
   // Slider für Zoom
-
   const sliderZoom = board.create('slider', [[-2.3, 1.0], [1, 1.0], [1, 1, 500]], {
+
   const sliderZoom = board.create('slider', [[-2.3, 1.2], [0.5, 1.2], [1, 1, 50]], {
     name:'Zoom',
     name:'Zoom',
-
     snapWidth:10
+
     snapWidth:1
   });
   });
 +
   // Canvas ins DOM hängen
   // Canvas ins DOM hängen
   const div = document.getElementById('jxgbox');
   const div = document.getElementById('jxgbox');
   const canvas = document.createElement('canvas');
   const canvas = document.createElement('canvas');
-
   canvas.width = 800;
+
   canvas.width = 600;
   canvas.height = 600;
   canvas.height = 600;
   canvas.style.position = 'absolute';
   canvas.style.position = 'absolute';
Zeile 43: Zeile 44:
   }
   }
-
   // Ausschnittparameter
+
   // Anfangsbereich
   let centerX = -0.5;
   let centerX = -0.5;
   let centerY = 0;
   let centerY = 0;
-
   let zoom = 1;
+
   let baseWidth = 3.5;
-
  const baseWidth = 3.5;
+
   let baseHeight = 3.0;
-
   const baseHeight = 3.0;
+
-
   function drawMandelbrot(maxIter) {
+
   function drawMandelbrot(maxIter, zoom) {
     const spanX = baseWidth / zoom;
     const spanX = baseWidth / zoom;
     const spanY = baseHeight / zoom;
     const spanY = baseHeight / zoom;
Zeile 87: Zeile 87:
   function update() {
   function update() {
-
     drawMandelbrot(Math.round(sliderIter.Value()));
+
     drawMandelbrot(Math.round(sliderIter.Value()), Math.round(sliderZoom.Value()));
-
    sliderZoom.setValue(zoom); // Slider synchronisieren
+
   }
   }
   sliderIter.on('drag', update);
   sliderIter.on('drag', update);
-
   sliderZoom.on('drag', () => {
+
   sliderZoom.on('drag', update);
-
    zoom = sliderZoom.Value();
+
 
-
    update();
+
-
  });
+
   // Panning mit Maus
   // Panning mit Maus
Zeile 107: Zeile 104:
   });
   });
-
   canvas.addEventListener('mouseup', () => { isDragging = false; });
+
   canvas.addEventListener('mouseup', () => {
-
   canvas.addEventListener('mouseleave', () => { isDragging = false; });
+
    isDragging = false;
 +
  });
 +
 
 +
   canvas.addEventListener('mouseleave', () => {
 +
    isDragging = false;
 +
  });
   canvas.addEventListener('mousemove', e => {
   canvas.addEventListener('mousemove', e => {
Zeile 117: Zeile 119:
       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 125: Zeile 129:
       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>
Mit den Schiebereglern können Iterations-Tiefe und Zoom gesteuert werden. Mit der Maus+linke Maustaste kann der Bildausschnitt verschoben werden.
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:
 
-
#gib mir jetzt einen jsxgraph-code für die erstellung einer Mandelbrot-Grafik mit regler zur Steuerung der Tiefe
+
[[Kategorie:KI-generiert]]
-
#schlag mir eine schnellere variante vor (ChatGPT schlug eine Lösung mit canvas-Element vor)
+
-
#bitte ändere das script so, dass ich mit einem regler in die graphik zoomen kann
+
-
#mit der Maus soll der angezeigte Bereich des Bildes verschoben werden können
+

Aktuelle Version vom 14:08, 22. Dez. 2025

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

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