100%

Mandelbrot

✓ Published0🌍 Public

Last edited Apr 23, 2024

Created on Apr 23, 2024

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.

AI-generated description

Mandelbrot Set

Fractal pattern

Math

from CodingTrain Coding Challenge: https://www.youtube.com/watch?v=6z7GQewK-Ks

Sqrt(-1) is an imaginary number i
Complex number has a real component (a) and an imaginary component (b): a+bi
Set of complex mapped on canvas with x axis mapping a and the y axis mapping b
Function f(z) = z^2 + c = z^2 + (a + bi)
f(z_0) = 0
f(z_1) = 0^2 + (a + bi) = a + bi = c
f(z_2) = c^2 + c --> need to find out c^2
c^2 = (a + bi) * (a + bi) = a^2 + 2abi + b^2*i^2 = a^2 + 2abi - b^2 = (a^2-b^2) + 2ab * i
--> meaning c^2 is a complex number with a real component a^2-b^2 and and imaginary component 2ab
when calculation iteration over many iterations does result of function stay bounded or goes to infinity

Code Setup

From D3-Svelte Starter: https://vizhub.com/higsch/8599a94f8de14a858c04f8064ce368d7

MIT Licensed

Similar vizzes

Loading thumbnail…

Mandelbrot

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.

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

84% 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

80% 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…

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

71% 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

71% match

Loading thumbnail…

Gist 119211

This example visualizes the Mandelbrot set as a fixed ASCII-art plot in a terminal, using Ruby’s `Complex` class to iterate the function `z*z + c` fifty times per point. The code samples a 2D grid over the complex plane—x from -2.0 to 0.5 and y from 1.0 to -1.0—and prints an asterisk when the final magnitude is less than 2, otherwise a space. It shows a symmetric, high-level fractal silhouette rendered entirely with text characters, with no graphical libraries involved. The rendering approach relies on nested `step` loops and `Array.new(50,a).inject` to perform the iteration, producing the classic bulb-and-spiral structure directly in the console output.

DDylanFM

71% 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

70% match