Skip to main content
100%

TestOpenProcessing

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

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.

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>

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
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
91% 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
90% 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
88% match
Loading thumbnail…

Processing Starter with P5JS

This example presents a recursive fractal pattern of circles, rendered on a 960 by 500 pixel canvas using the P5JS library. The sketch’s `draw()` function calls `drawCircle()` six times, progressively halving the radius and shifting the x-coordinate to branch into two smaller circles per level. Each circle’s fill color is calculated by mapping the recursion level to a grayscale value, creating a subtle gradient across the nested shapes. The P5JS functions `createCanvas()`, `noLoop()`, and `ellipse()` structure the static visualization.

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