Skip to main content
100%

TestOpenProcessing

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

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.

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>

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

Similar vizzes

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

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
92% match
Loading thumbnail…

TestOpenProcessing

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.

YYannael
90% 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
88% 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
71% 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
70% 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
70% match
Loading thumbnail…

P5JS Starter

This example displays a recursive fractal pattern of concentric circles that shrink and branch outward symmetrically from the center of the canvas. The sketch uses the P5JS library with a setup function that creates a 960x500 canvas and disables animation via noLoop(), while the draw function calls drawCircle to render the structure. Each circle’s fill color darkens progressively with recursion depth, computed from the level parameter. The code relies on P5JS’s ellipse and fill methods, with recursive calls splitting each circle into two smaller ones.

MMatthew J. Oldach
70% match