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">
   
   
-
  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: true,
     axis: true,
Zeile 23: Zeile 23:
   const div = document.getElementById('jxgbox');
   const div = document.getElementById('jxgbox');
   const canvas = document.createElement('canvas');
   const canvas = document.createElement('canvas');
-
   canvas.width = 400;
+
   canvas.width = 800;
-
   canvas.height = 300;
+
   canvas.height = 600;
   canvas.style.position = 'absolute';
   canvas.style.position = 'absolute';
-
   canvas.style.left = "100px";
+
   canvas.style.left = "0px";
-
   canvas.style.top = "100px";
+
   canvas.style.top = "150px";
   div.appendChild(canvas);
   div.appendChild(canvas);
   const ctx = canvas.getContext('2d');
   const ctx = canvas.getContext('2d');
Zeile 42: Zeile 42:
     return iter;
     return iter;
   }
   }
 +
 +
  // Anfangsbereich
 +
  let centerX = -0.5;
 +
  let centerY = 0;
 +
  let baseWidth = 3.5;
 +
  let baseHeight = 3.0;
   function drawMandelbrot(maxIter, zoom) {
   function drawMandelbrot(maxIter, zoom) {
-
     const img = ctx.createImageData(canvas.width, canvas.height);
+
     const spanX = baseWidth / zoom;
 +
    const spanY = baseHeight / zoom;
-
    // Bereich um das Zentrum [0,0] verkleinern
+
     const xMin = centerX - spanX/2;
-
     const spanX = 3.5 / zoom;   // Breite des Ausschnitts
+
     const xMax = centerX + spanX/2;
-
     const spanY = 3.0 / zoom;  // Höhe des Ausschnitts
+
     const yMin = centerY - spanY/2;
-
    const xMin = -spanX/2, xMax = spanX/2;
+
    const yMax = centerY + spanY/2;
-
     const yMin = -spanY/2, yMax = spanY/2;
+
 
 +
    const img = ctx.createImageData(canvas.width, canvas.height);
     for (let px = 0; px < canvas.width; px++) {
     for (let px = 0; px < canvas.width; px++) {
Zeile 67: Zeile 75:
         } else {
         } else {
           const c = Math.floor(255 * iter / maxIter);
           const c = Math.floor(255 * iter / maxIter);
-
           img.data[idx]  = c;       // R
+
           img.data[idx]  = c;
-
           img.data[idx+1] = 100;     // G
+
           img.data[idx+1] = 100;
-
           img.data[idx+2] = 255 - c; // B
+
           img.data[idx+2] = 255 - c;
-
           img.data[idx+3] = 255;     // A
+
           img.data[idx+3] = 255;
         }
         }
       }
       }
Zeile 83: Zeile 91:
   sliderIter.on('drag', update);
   sliderIter.on('drag', update);
   sliderZoom.on('drag', update);
   sliderZoom.on('drag', update);
 +
 +
  // Panning mit Maus
 +
  let isDragging = false;
 +
  let lastX, lastY;
 +
 +
  canvas.addEventListener('mousedown', e => {
 +
    isDragging = true;
 +
    lastX = e.offsetX;
 +
    lastY = e.offsetY;
 +
  });
 +
 +
  canvas.addEventListener('mouseup', () => {
 +
    isDragging = false;
 +
  });
 +
 +
  canvas.addEventListener('mouseleave', () => {
 +
    isDragging = false;
 +
  });
 +
 +
  canvas.addEventListener('mousemove', e => {
 +
    if (isDragging) {
 +
      const dx = e.offsetX - lastX;
 +
      const dy = e.offsetY - lastY;
 +
      lastX = e.offsetX;
 +
      lastY = e.offsetY;
 +
 +
      // Verschiebung in komplexer Ebene berechnen
 +
      const zoom = Math.round(sliderZoom.Value());
 +
      const spanX = baseWidth / zoom;
 +
      const spanY = baseHeight / zoom;
 +
 +
      centerX -= dx / canvas.width * spanX;
 +
      centerY -= dy / canvas.height * spanY;
 +
 +
      update();
 +
    }
 +
  });
   // Initial zeichnen
   // Initial zeichnen
   update();
   update();
-
 
</jsxgraph>
</jsxgraph>

Version vom 10:44, 15. Sep. 2025

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