Fork of Mandelbrot

100%

Fork of Mandelbrot

✓ Published0🌍 Public

Last edited Apr 30, 2024

Created on Apr 30, 2024

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.

AI-generated description

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

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

86% match

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

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

77% match

Loading thumbnail…

Fork of Svelte + D3: Canvas & renderless components

Ten thousand tweened circles animate across a full-screen canvas, cycling through new random positions and radii every two seconds with a magma color scale. The Svelte example pairs a renderless Canvas component with a Circle component that registers draw functions via Svelte’s context API, using `d3.scaleLinear`, `scaleSequential`, and `interpolateMagma` for mapping. Each circle’s attributes transition smoothly through `tweened` stores with `cubicOut` easing, while `requestAnimationFrame` batches canvas redraws for efficient animation.

Rrudi.oreillymeehan@gmail.com

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

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

72% match

Loading thumbnail…

Fork of Svelte + D3 Starter

This gallery example presents a set of colored circles scattered across a 1000x500 SVG canvas. A Svelte component iterates over an array of JavaScript objects, each containing x, y, radius, and fill color values, to render `<circle>` elements with a semi-transparent orange background. The visualization uses the Svelte `{#each}` block to map data to SVG shapes, with styling applied via CSS to achieve a 0.7 opacity level, demonstrating a minimal integration of D3 data structures within the Svelte framework.

CCurran Kelleher

72% match

Loading thumbnail…

Fork of Pixels Testing

This example uses Canvas pixel manipulation to create an animated, generative art piece. The code initializes an `ImageData` buffer with random green values, then in each animation frame applies a cellular automaton-like filter using `getImageData` and `putImageData`. The algorithm calculates a blur from neighboring pixels and mixes it with a sharpened value based on a moving horizontal band, creating a shifting, organic texture. The animation runs via `requestAnimationFrame`, and a `drawImage` call subtly shifts the canvas each frame.

CCurran Kelleher

71% match