p5 L-Systems

100%

✓ Published0🌍 Public

Last edited Feb 8, 2017

Created on Feb 8, 2017

This generative sketch implements a Lindenmayer system to draw an intricate, plant-like fractal pattern. An animated "turtle" traverses a precomputed string of symbols, interpreting each character as a drawing command—moving forward, turning, or placing decorative dots. The p5.js `setup()` and `draw()` functions handle the animation loop, while custom functions `lindenmayer()` and `drawIt()` manage rule substitution and rendering. Random color values and Gaussian-distributed dot sizes create a lively, organic texture over the thin black lines.

AI-generated description

Lindenmayer Systems

P5 example from https://p5js.org/examples/simulate-l-systems.html

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

p5 wolfram CA

A p5.js sketch renders a one-dimensional cellular automaton, displaying each generation as a horizontal row of small squares that stack downward over time. The simulation starts with a single active cell in the center of the top row and applies a fixed Wolfram rule set to compute each subsequent generation from the three neighboring cells above. The code uses the p5.js `createCanvas`, `rect`, and `fill` functions to draw the grid, and the result produces a deterministic, rule-based visual pattern that evolves over the canvas height.

PPhilippe Rivière

69% match

Loading thumbnail…

p5-starter

This example demonstrates a simple animated pattern of five pink rectangles, each with a random width, stacked vertically on a gray background. The sketch runs at five frames per second, causing the rectangle widths to change with every frame. It uses the p5.js library, specifically the `createCanvas`, `background`, `fill`, `rect`, and `random` functions within the `setup` and `draw` loop. The code does not load any external data; it generates all visual variation procedurally.

AAlark Joshi

68% 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

67% 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

66% 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

64% match

Loading thumbnail…

p5JS

In this interactive visualization, users draw freehand with the mouse, and their drawing is recreated as an animated series of rotating epicycles. The application uses the p5.js library to handle canvas rendering, mouse input, and animation. After the drawing is complete, the code computes its Discrete Fourier Transform to decompose the path into a set of frequency components, then sorts them by amplitude and reconstructs the shape using circular motion. The output shows both the tracing circles and the resulting magenta path being redrawn over time.

TTanmay Bishnoi

64% match

Loading thumbnail…

Colored Mandelbrot with P5.js

This example renders an interactive Mandelbrot set fractal using the p5.js library, with a custom color palette applied to the escape-time values. The visualization iterates over every pixel in the canvas, mapping coordinates to the complex plane and testing how quickly each point diverges under the z = z² + c formula. Instead of grayscale, the code assigns vibrant RGB values derived from the iteration count, producing psychedelic gradients within the fractal’s basin. It uses p5’s `loadPixels`, `updatePixels`, and `map` functions to manipulate the pixel array directly.

CCurran Kelleher

64% match

Loading thumbnail…

Mathematical Graphic Patterns

This animated canvas visualization generates evolving, abstract geometric patterns from mathematical formulas. White dots are drawn programmatically based on sine and cosine functions, with positions and speeds influenced by a continuously incrementing time variable. The rendering uses the HTML5 Canvas API’s `getContext('2d')`, `fillRect` for semi-transparent fading trails, and `arc` to draw each circle, creating a complex, shifting web of points that resembles a modern-day screensaver.

CConvert-Jade

63% match