Skip to main content
SimilarExport ZIP
100%

Fractal Tree (Canvas)

✓ Published0🌍 Public
KKristin Baumann
Last edited Apr 25, 2024
Created on Apr 25, 2024

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.

AI-generated description
MIT Licensed

Similar vizzes

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.

KKristin Baumann
88% match
Loading thumbnail…

Tree Fractal Example

An interactive tree fractal rendered on a Canvas element responds to mouse movement by altering branch length ratio and angle difference. The code uses the Canvas 2D API with `beginPath`, `lineTo`, and `stroke` to draw recursive branches up to a depth of 11. It accommodates high pixel density displays via `window.devicePixelRatio` and `c.scale`. Mouse position maps directly to the branching parameters, updating the tree in real time.

MMilan Košir
82% match
Loading thumbnail…

Tree Fractal

An interactive tree fractal drawn on a Canvas element responds to mouse movement, which controls branch length ratio and angle difference. The rendering uses raw Canvas API calls like `beginPath`, `lineTo`, and `stroke` to recursively draw branching lines to a depth of 11. High-resolution displays are supported via `window.devicePixelRatio` scaling. The example is based on HTML5 Examples and adapts its rendering for high pixel density screens.

CCurran Kelleher
81% match
Loading thumbnail…

Fractal-Tree-Page

This interactive visualization displays a fractal tree that responds to mouse movement. The branching pattern changes dynamically as the user moves the cursor across the canvas. The code uses the Canvas API with high-resolution display support via `window.devicePixelRatio` and scaling. It draws recursive branches using trigonometric functions, with mouse position controlling the branch length ratio and angle difference. The tree is rendered in real-time using the `drawTree` recursive function and `stroke()` commands on the 2D context.

Sscoinhawk
81% match
Loading thumbnail…

Tree Fractal

This interactive visualization renders a branching tree fractal on an HTML5 Canvas. Mouse movement dynamically changes the branch length ratio and angle difference, altering the tree's shape in real time. The code uses the Canvas API’s `getContext('2d')`, `moveTo`, `lineTo`, and `stroke` methods to draw recursive branches. The tree structure emerges from a recursive `drawTree` function that splits into left and right branches until reaching a depth of zero, with each branch’s length and angle determined by cursor position.

Yyakupermurat
80% match
Loading thumbnail…

Fork of Tree Fractal

An interactive tree fractal rendered on Canvas, where the branching pattern changes in response to mouse movement. The visualization draws a recursive, branching structure from a central trunk, with horizontal mouse position controlling branch length ratio and vertical position controlling the angle between branches. It uses the Canvas 2D API with recursive `drawTree` calls, and accommodates high pixel density displays by scaling the canvas using `devicePixelRatio` and CSS dimensions. The code adapts an example from HTML5Examples.

KKirsten Lund
80% match
Loading thumbnail…

fractal

This interactive fractal experiment uses recursive circle drawing on an HTML5 Canvas to generate branching, tree-like structures. The visualization responds to mouse movement, with cursor position controlling the fractal’s scale, branch angle, and recursion depth. The code defines a `drawGeometry` function that recursively draws circles, translating and rotating the canvas context at each step, while a `flip` parameter alternates branch direction. Rendering is handled directly through the Canvas 2D API, with event listeners triggering redraws on mouse move. No external libraries are used, relying solely on native browser canvas methods like `ctx.arc`, `ctx.translate`, and `ctx.rotate`.

CCurran Kelleher
80% match
Loading thumbnail…

Tree Fractal with Randomness

This interactive tree fractal grows recursively from a trunk, splitting into branches whose length and angle change with mouse position. The Canvas API renders the structure, while a seeded pseudo-random number generator introduces stochastic variation, causing some branches to continue straight while others bifurcate. The drawing updates on mousemove events, with horizontal position controlling branch length ratio and vertical position adjusting angle difference. The code scales the canvas for high pixel density displays using devicePixelRatio.

CCurran Kelleher
78% match