Add standalone Mandelbrot set HTML/JS renderer - #1679
Open
Copilot wants to merge 4 commits into
Open
Conversation
Adds a dependency-free canvas-based Mandelbrot set renderer under examples/mandelbrot/. Supports click/drag-to-zoom, scroll-to-zoom, palette cycling, and adaptive iteration counts as you zoom in. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot
AI
requested
a lite review from Copilot
and removed request for
Copilot
August 5, 2026 20:42
tiagonbotelho
approved these changes
Aug 5, 2026
Adds a screenshot, file listing, algorithm explanation, and browser support notes to examples/mandelbrot/README.md. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR adds a new examples/mandelbrot/ example: a standalone, dependency-free Mandelbrot set renderer implemented as a single HTML file with embedded JavaScript, plus a README describing usage and controls.
Changes:
- Added
examples/mandelbrot/index.html: canvas-based Mandelbrot renderer with zoom controls, palette cycling, and adaptive iterations. - Added
examples/mandelbrot/README.md: documentation for running and interacting with the renderer.
Show a summary per file
| File | Description |
|---|---|
| examples/mandelbrot/index.html | Implements the Mandelbrot renderer UI + rendering/interaction logic in a single page. |
| examples/mandelbrot/README.md | Documents how to open/serve the example and how the algorithm + controls work. |
Review details
Tip
Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Files reviewed: 2/3 changed files
- Comments generated: 5
- Review effort level: Lite
| view.centerY = cy; | ||
| view.scale *= factor; | ||
| // Increase iteration count as we zoom in for better detail. | ||
| maxIterations = Math.min(2000, Math.round(200 + 100 * Math.log2(DEFAULT_VIEW.scale / view.scale + 1))); |
Comment on lines
+80
to
+82
| const canvas = document.getElementById("mandelbrot"); | ||
| const ctx = canvas.getContext("2d"); | ||
| const iterVal = document.getElementById("iterVal"); |
Comment on lines
+203
to
+205
| canvas.addEventListener("mousedown", (e) => { | ||
| dragStart = { x: e.clientX, y: e.clientY }; | ||
| }); |
Comment on lines
+231
to
+233
| dragStart = null; | ||
| dragCurrent = null; | ||
| }); |
Comment on lines
+234
to
+240
|
|
||
| canvas.addEventListener("wheel", (e) => { | ||
| e.preventDefault(); | ||
| const { cx, cy } = screenToComplex(e.clientX, e.clientY); | ||
| const factor = e.deltaY > 0 ? 1.2 : 1 / 1.2; | ||
| zoomAt(cx, cy, factor); | ||
| }, { passive: false }); |
JasonEtco
approved these changes
Aug 5, 2026
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
tiagonbotelho
approved these changes
Aug 5, 2026
There was a problem hiding this comment.
Review details
Suppressed comments (4)
examples/mandelbrot/index.html:200
- The adaptive iteration formula increases
maxIterationseven when zooming out (whenview.scalegrows), which contradicts the stated behavior of only ramping up deeper zoom. Consider keeping the baseline iterations when zoomed out past the default view.
// Increase iteration count as we zoom in for better detail.
maxIterations = Math.min(2000, Math.round(200 + 100 * Math.log2(DEFAULT_VIEW.scale / view.scale + 1)));
render();
examples/mandelbrot/index.html:213
- Listening for
mouseuponly on the canvas can leavedragStartstuck if the user releases the mouse outside the canvas (e.g., after dragging out of bounds). Attach themouseuphandler towindowso the drag state is always cleared.
canvas.addEventListener("mouseup", (e) => {
examples/mandelbrot/index.html:81
getContext("2d")can return null (e.g., disabled canvas / unsupported context), which would cause runtime errors later (e.g.,ctx.createImageData). Add an explicit guard early.
const ctx = canvas.getContext("2d");
examples/mandelbrot/index.html:65
- The canvas element has no accessible name/alternative text, so screen readers will not have any description of the interactive viewport.
<canvas id="mandelbrot"></canvas>
- Files reviewed: 2/3 changed files
- Comments generated: 0 new
- Review effort level: Lite
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a dependency-free, single-file Mandelbrot set renderer built with HTML5 canvas and vanilla JavaScript, under
examples/mandelbrot/.Features
index.htmlin a browserTesting