Mandelbrot mit JSXGraph

Aus Wiki1

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
(Die Seite wurde neu angelegt: „ <jsxgraph box="jsxbox" width="800" height="600"> const board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-2.5, 1.5, 1.5, -1.5], axis: true, …“)
 
(Der Versionsvergleich bezieht 48 dazwischenliegende Versionen mit ein.)
Zeile 1: Zeile 1:
-
 
+
<jsxgraph box="jxgbox" width="600" height="700">
-
<jsxgraph box="jsxbox" 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: false,
     showNavigation: false,
     showNavigation: false,
     showCopyright: false
     showCopyright: false
Zeile 10: Zeile 9:
   // Slider für Iterationstiefe
   // Slider für Iterationstiefe
-
   const slider = board.create('slider', [[-2.3, 1.3], [1, 1.3], [10, 50, 200]], {
+
   const sliderIter = board.create('slider', [[-2.3, 1.3], [0.5, 1.3], [10, 50, 300]], {
     name:'Tiefe',
     name:'Tiefe',
     snapWidth:1
     snapWidth:1
   });
   });
-
   // Mandelbrot-Berechnung für einen Punkt
+
  // Slider für Zoom
 +
  const sliderZoom = board.create('slider', [[-2.3, 1.2], [0.5, 1.2], [1, 1, 50]], {
 +
    name:'Zoom',
 +
    snapWidth:1
 +
  });
 +
 
 +
 
 +
  // Canvas ins DOM hängen
 +
  const div = document.getElementById('jxgbox');
 +
  const canvas = document.createElement('canvas');
 +
  canvas.width = 600;
 +
  canvas.height = 600;
 +
  canvas.style.position = 'absolute';
 +
  canvas.style.left = "0px";
 +
  canvas.style.top = "150px";
 +
  div.appendChild(canvas);
 +
  const ctx = canvas.getContext('2d');
 +
 
 +
   // Mandelbrot-Berechnung
   function mandelbrotIter(cx, cy, maxIter) {
   function mandelbrotIter(cx, cy, maxIter) {
-
     let x = 0, y = 0;
+
     let x = 0, y = 0, iter = 0;
-
    let iter = 0;
+
     while (x*x + y*y <= 4 && iter < maxIter) {
     while (x*x + y*y <= 4 && iter < maxIter) {
-
       let xtemp = x*x - y*y + cx;
+
       const xtemp = x*x - y*y + cx;
       y = 2*x*y + cy;
       y = 2*x*y + cy;
       x = xtemp;
       x = xtemp;
Zeile 28: Zeile 44:
   }
   }
-
   // Raster erstellen
+
   // Anfangsbereich
-
   const N = 100; // Auflösung (mehr = langsamer, feiner)
+
   let centerX = -0.5;
-
   const stepX = (board.getBoundingBox()[2] - board.getBoundingBox()[0]) / N;
+
   let centerY = 0;
-
   const stepY = (board.getBoundingBox()[1] - board.getBoundingBox()[3]) / N;
+
   let baseWidth = 3.5;
 +
  let baseHeight = 3.0;
-
   let rects = [];
+
   function drawMandelbrot(maxIter, zoom) {
 +
    const spanX = baseWidth / zoom;
 +
    const spanY = baseHeight / zoom;
-
  for (let i = 0; i < N; i++) {
+
    const xMin = centerX - spanX/2;
-
     for (let j = 0; j < N; j++) {
+
     const xMax = centerX + spanX/2;
-
      const x = board.getBoundingBox()[0] + i*stepX;
+
    const yMin = centerY - spanY/2;
-
      const y = board.getBoundingBox()[3] + j*stepY;
+
    const yMax = centerY + spanY/2;
-
      // kleine Rechtecke
+
    const img = ctx.createImageData(canvas.width, canvas.height);
-
       let r = board.create('polygon', [
+
 
-
         [x, y],
+
    for (let px = 0; px < canvas.width; px++) {
-
         [x+stepX, y],
+
       for (let py = 0; py < canvas.height; py++) {
-
         [x+stepX, y+stepY],
+
        const cx = xMin + (px / canvas.width) * (xMax - xMin);
-
        [x, y+stepY]
+
         const cy = yMin + (py / canvas.height) * (yMax - yMin);
-
      ], {
+
 
-
         borders: {visible:false},
+
        const iter = mandelbrotIter(cx, cy, maxIter);
-
        fillColor: 'black',
+
         const idx = 4 * (py * canvas.width + px);
-
        fillOpacity: 1,
+
 
-
        withLines:false,
+
         if (iter >= maxIter) {
-
        hasInnerPoints:true,
+
          img.data[idx] = 0;
-
         fixed:true
+
          img.data[idx+1] = 0;
-
      });
+
          img.data[idx+2] = 0;
-
       rects.push({poly:r, cx:x, cy:y});
+
          img.data[idx+3] = 255;
 +
         } else {
 +
          const c = Math.floor(255 * iter / maxIter);
 +
          img.data[idx]  = c;
 +
          img.data[idx+1] = 100;
 +
          img.data[idx+2] = 255 - c;
 +
          img.data[idx+3] = 255;
 +
         }
 +
       }
     }
     }
 +
    ctx.putImageData(img, 0, 0);
   }
   }
-
   // Update-Funktion
+
   function update() {
-
  board.on('update', function() {
+
     drawMandelbrot(Math.round(sliderIter.Value()), Math.round(sliderZoom.Value()));
-
     const maxIter = Math.round(slider.Value());
+
  }
-
    rects.forEach(obj => {
+
 
-
      let it = mandelbrotIter(obj.cx, obj.cy, maxIter);
+
  sliderIter.on('drag', update);
-
      if (it >= maxIter) {
+
  sliderZoom.on('drag', update);
-
        obj.poly.setAttribute({fillColor: 'black'});
+
 
-
      } else {
+
 
-
        // Farbverlauf
+
  // Panning mit Maus
-
        const c = Math.floor(255*it/maxIter);
+
  let isDragging = false;
-
        obj.poly.setAttribute({fillColor: `rgb(${c},${100},${255-c})`});
+
  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
 +
  update();
 +
</jsxgraph>
</jsxgraph>
 +
 +
Mit den Schiebereglern können Iterations-Tiefe und Zoom gesteuert werden. Mit der Maus+linke Maustaste kann der Bildausschnitt verschoben werden.
 +
 +
 +
[[Kategorie:KI-generiert]]

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