Mandelbrot mit JSXGraph
Aus Wiki1
(Unterschied zwischen Versionen)
| Zeile 1: | Zeile 1: | ||
<jsxgraph box="jxgbox" width="800" height="700"> | <jsxgraph box="jxgbox" width="800" height="700"> | ||
| - | + | 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 |
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 |
let centerX = -0.5; | let centerX = -0.5; | ||
let centerY = 0; | let centerY = 0; | ||
| - | let | + | let baseWidth = 3.5; |
| - | + | let 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 86: | ||
function update() { | function update() { | ||
| - | drawMandelbrot(Math.round(sliderIter.Value()) | + | drawMandelbrot(Math.round(sliderIter.Value()), Math.round(sliderZoom.Value())); |
| - | + | ||
} | } | ||
sliderIter.on('drag', update); | sliderIter.on('drag', update); | ||
| - | sliderZoom.on('drag', | + | sliderZoom.on('drag', update); |
| - | + | ||
| - | + | ||
| - | + | ||
// Panning mit Maus | // Panning mit Maus | ||
| Zeile 107: | Zeile 102: | ||
}); | }); | ||
| - | 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 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 126: | Zeile 128: | ||
} | } | ||
}); | }); | ||
| - | |||
| - | |||
// Initial zeichnen | // Initial zeichnen | ||
update(); | update(); | ||
| + | |||
</jsxgraph> | </jsxgraph> | ||
Version vom 11:12, 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:
- gib mir jetzt einen jsxgraph-code für die erstellung einer Mandelbrot-Grafik mit regler zur Steuerung der Tiefe
- 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
