Kristin Baumann

@kristinbaumann·8 public vizzes

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.

Feb 21, 2025

Loading thumbnail…

Interactive Floating Typography (Separate p5 bindings)

Interactive Floating Typography scatters and animates the Greek letter Omega across a bright yellow canvas. Dragging the mouse creates new letters that move, rotate, and drift until they exit the screen. Built with the p5 library, the sketch binds drawing functions via `start.js`, manages letter objects with position, velocity, and rotation, and uses `f.random` to select fonts, sizes, and speeds. The visualization responds directly to mouse input, allowing continuous generation of typographic particles.

Feb 21, 2025

Loading thumbnail…

Voronoi Milestone Party

A Voronoi diagram gradually constructs itself as 1,500 random points are added one by one, with each new cell fading in. The animation uses d3's `Delaunay` and `voronoi` to compute the diagram from the data, while Svelte's `fade` transition handles the cell appearance. The first 100 cells are filled with a curated red-to-pink color palette, and the rest are black. A hand-drawn path spelling "1500" sits atop the visualization, rendered as SVG.

Feb 21, 2025

Loading thumbnail…

Fractal Tree (SVG)

This visualization shows a fractal tree created through recursive branching, where each branch splits into two smaller branches at a fixed angle. Starting from the bottom center of the canvas, the tree extends upward with each iteration reducing the branch length by a factor of 0.67. The code uses the Svelte framework with SVG rendering, employing D3's `path` API to construct the complete branching structure as a single path element. The recursion continues until branch lengths fall below 2 pixels, resulting in a detailed, self-similar structure displayed with white strokes against a dark background.

Feb 21, 2025

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.

Apr 30, 2024

Loading thumbnail…

Fractal Tree (Canvas)

A fractal tree unfolds recursively on a canvas, with each branch splitting into two shorter, angled offshoots until it reaches a fixed depth. The tree remains static, but the canvas re-renders through a custom Svelte context system, where drawing functions register and invalidate frames via `requestAnimationFrame`. The example uses the Canvas 2D API for all drawing, with recursive `branch` calls handling rotation, translation, and stroke paths to create the organic, geometric structure.

Apr 25, 2024

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.

Apr 23, 2024

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.

Apr 23, 2024