Skip to main content
SimilarExport ZIP
100%

Mandelbrot

✓ Published2🌍 Public
KKristin Baumann
Last edited Apr 23, 2024
Created on Apr 23, 2024

This interactive visualization computes and renders the Mandelbrot set as a static canvas image. The code iterates through each pixel, applying a mathematical formula to determine whether points in the complex plane diverge or remain bounded, coloring each point based on the iteration count. It uses a gray-scale gradient, with darker values for points that escape quickly and black for those within the set. Rendering is handled through a custom Svelte Canvas component, which registers individual drawing functions for each pixel, using the Canvas 2D API’s `fillRect` method. The computation logic is adapted from The Coding Train’s tutorial on the Mandelbrot set.

AI-generated description

Math from The Coding Train: https://www.youtube.com/watch?v=6z7GQewK-Ks

MIT Licensed

Similar vizzes

Loading thumbnail…

Mandelbrot

This visualization renders a slice of the Mandelbrot set as a 360 by 360 grid of pixels on an HTML canvas. Each pixel’s color is computed by iterating the complex function `z = z² + c` for up to 200 iterations; colors, from black to a teal gradient, are derived from the iteration count using `d3.scaleLinear`. The visualization uses Svelte components (`App.svelte`, `Canvas.svelte`, `Pixel.svelte`) where the canvas context manages drawing and invalidation for rendering.

KKristin Baumann
90% match
Loading thumbnail…

Fork of Mandelbrot

This example renders a smoothed grayscale Mandelbrot set on a 400×500 canvas, iterating each pixel’s complex coordinates up to 75 times to detect divergence. A dark teal gradient maps iteration counts via `d3.scaleLinear`, with non-diverging points drawn black. The custom `Canvas.svelte` component manages a 2D drawing context, while individual `Pixel.svelte` components register draw functions with the context to paint 1×1 rectangles. Computation follows the algorithm from The Coding Train, using an animation frame loop for rendering.

KKristin Baumann
86% match
Loading thumbnail…

Mandelbrot with P5.js

This visualization renders the Mandelbrot set as a monochrome fractal, mapping each pixel to a complex coordinate and coloring it based on iteration count using P5.js. The sketch initializes a canvas sized to its container, sets `pixelDensity(1)`, and loads pixel data via `loadPixels()`. It iterates through the plane, applying the recurrence `z = z² + c`, and determines brightness with `dist()` and `map()` functions. The code uses `noLoop()` to draw once, then `updatePixels()` to display the computed grayscale values.

CCurran Kelleher
79% match
Loading thumbnail…

Colored Mandelbrot with P5.js

This example renders an interactive Mandelbrot set fractal using the p5.js library, with a custom color palette applied to the escape-time values. The visualization iterates over every pixel in the canvas, mapping coordinates to the complex plane and testing how quickly each point diverges under the z = z² + c formula. Instead of grayscale, the code assigns vibrant RGB values derived from the iteration count, producing psychedelic gradients within the fractal’s basin. It uses p5’s `loadPixels`, `updatePixels`, and `map` functions to manipulate the pixel array directly.

CCurran Kelleher
75% match
Loading thumbnail…

Document

This visualization uses an animated scatterplot to approximate the Mandelbrot set via a probabilistic Monte Carlo method. For each of 150 epochs, it randomly generates 2,000 points within a fixed coordinate domain and tests whether each point remains bounded after 100 iterations of the complex quadratic map. Points that stay bounded are plotted as small green circles using SVG, while the count of successful points is continuously updated. The chart is built with D3 v5, using `d3.scaleLinear` for axes and `d3.timer` to drive the animation.

NNeeraj Kumar
72% match
Loading thumbnail…

Julia Set

This example renders a Julia set fractal on a canvas, using a teal-to-black color scale to depict iteration counts across a 360×360 grid. The visualization animates smoothly by tweening a pixel index through Svelte’s `tweened` motion, recalculating the fractal values as the index progresses. Each pixel is drawn as a 1×1 rectangle via the Canvas API, with Svelte’s context system coordinating registration and invalidation between the `Canvas` and `Pixel` components, while d3 scales map coordinates and iteration values.

KKristin Baumann
70% match
Loading thumbnail…

Fork of Svelte + D3: Canvas & renderless components

This example shows 34,000 circles on a canvas, each updated every five seconds with random positions and radii. A Svelte renderless component system separates canvas management from rendering logic: a canvas component provides a draw context, while circle components register individual draw functions and use Svelte's `tweened` motion with `cubicOut` easing to animate transitions between data updates. The visualization uses D3's `scaleLinear` and `scaleSequential` with `interpolateMagma` to map random values to coordinates and colors.

Rrudi.oreillymeehan@gmail.com
70% match
Loading thumbnail…

Generating Mandelbrot set in Power Query

This example renders the Mandelbrot set entirely within Power Query by generating a 1080-point sequence with `List.Generate`, mapping each point to the complex plane, and iterating the classic Mandelbrot formula to compute escape values. It visualizes the resulting 2D grid of iteration counts as a static bitmap, relying on Power Query’s built-in table and chart capabilities rather than external libraries. The code exposes a compact, functional approach to fractal generation, directly showing how iteration-based math translates into a visual image without specialized graphics APIs.

HHugoberry
69% match