Skip to main content
100%

TestOpenProcessing

✓ Published0🌍 Public
YYannael
Last edited Apr 16, 2016
Created on Apr 16, 2016

An animated fractal tree with glowing cyan branches draws a rotating, nesting pattern that evolves over time. The piece cycles through a sequence of radial symmetry, repeating its branching structure eight times around the center. Built with p5.js, the recursive `branch` function uses rotated segments of varying lengths and a continually shifting `theta` value to create a hypnotic, self-similar visual. The rendering relies on p5.js drawing primitives such as `line`, `pushMatrix`, and `popMatrix` to manage the transformation stack.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/5df40d75ef05f4b557973f56e67f55d2'>fresh block</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/7c590fd63e4a7c0129ee508d20181a9b'>fresh block</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/b0e764c122ca3925cc3b057ae9b0e92c'>fresh block</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/a81fa246e7199958b21fd41371e50690'>fresh block</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/5e6777c3d0c0010c414d5ae10ddd8201'>TestOpenProcessing</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/c4f9ddd9b06c520a487e67065ade175c'>TestOpenProcessing</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/9231ef8332f00364d43f17cfd2fb26c1'>TestOpenProcessing</a>

Similar vizzes

Loading thumbnail…

TestOpenProcessing

This generative art piece displays a continuously rotating, branching fractal structure composed of glowing cyan lines on a black background. The rendering uses the p5.js library with the `setup()`, `draw()`, and recursive `branch()` functions to create the tree-like pattern. The sketch applies a constant angular increment to theta, driving the rotation of each branch segment within an eight-fold rotational symmetry layout. Stroke weight and branch length diminish with each recursive step, producing a dynamic, organic form that evolves over time.

YYannael
93% match
Loading thumbnail…

TestOpenProcessing

A generative fractal tree animation renders eight branching structures radiating from the center of a 650×650 canvas. Each branch recursively draws cyan line segments whose angles and lengths are modulated by a continuously incrementing `theta` value, creating a slowly rotating, symmetric pattern. The sketch uses the p5.js library’s `createCanvas`, `translate`, `rotate`, `push`/`pop`, and recursive `branch` function, with `strokeWeight` tapering as recursion depth increases. No external data is loaded; the visual emerges purely from procedural geometry and time-based animation.

YYannael
93% match
Loading thumbnail…

TestOpenProcessing

A fractal tree grows outward from the center of a 650-by-650 canvas, its branching patterns rotating continuously as the angle parameter theta increments by 0.05 each frame. Eight symmetrical branches radiate from the midpoint, each recursively splitting into three sub-branches with lengths divided by the square root of two. The p5.js sketch uses the `pushMatrix`, `popMatrix`, `rotate`, and `translate` functions to position each line segment with cyan strokes, with stroke weight decreasing as recursion depth increases.

YYannael
91% match
Loading thumbnail…

TestOpenProcessing

This generative sketch uses p5.js to draw a rotating, recursive tree-like structure. Eight branches radiate from the canvas center, each one splitting into three smaller branches with angles controlled by a continuously incrementing theta variable. The line weight thins with each recursion level, and all lines are rendered in a bright cyan color against a black background, creating a hypnotic, organic pattern. The animation runs indefinitely, with the branch angles evolving smoothly over time.

YYannael
90% 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
75% match
Loading thumbnail…

3D Fractal Tree

This example shows a procedurally generated 3D fractal tree, where each branch recursively spawns three smaller sub-branches that tilt at a fixed angle, creating a natural, organic silhouette. The tree grows from a ground plane under ambient, directional, and point lighting, with shadows cast onto the environment. Built with Three.js and its WebGL renderer, the scene uses PerspectiveCamera, OrbitControls, MeshPhongMaterial, and custom branch/connection geometries, and includes interactive orbit controls that are initially disabled, allowing for automatic rotation.

CCurran Kelleher
74% 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
73% 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
73% match