p5 wolfram CA

100%

✓ Published0🌍 Public

Last edited Feb 8, 2017

Created on Feb 8, 2017

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.

AI-generated description

P5 example from https://p5js.org/examples/simulate-wolfram-ca.html

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

71% match

Loading thumbnail…

Cellular automata

A one-dimensional cellular automaton stands at the center of this visualization, which arranges all 256 possible nearest-neighbor rules in a grid. The display uses a tile-based procedural map via Polymaps, with a worker script (`cell-worker.js`) computing each rule’s evolution from a random initial state. Color intensity indicates cell state, and zooming reveals the structure of individual rules. The rendering leverages Polymaps’ `po.map`, `po.procedural`, and `po.hash` APIs, while the worker handles the pixel-level computation and postMessage communication, following the example from MathWorld.

Mmbostock

71% match

Loading thumbnail…

p5 L-Systems

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.

PPhilippe Rivière

69% match

Loading thumbnail…

CS360 Assignment2

A P5.js sketch generates five pink rectangles against a light gray canvas, each positioned vertically with randomized widths, alongside static text reading "hello world." The example demonstrates integrating P5 with VizHub’s hot reloading by importing `p5` and manually managing the sketch instance. It uses `createCanvas`, `background`, `fill`, `rect`, `text`, and `random` functions extracted from the p5 instance, with `setup` and `draw` attached to control rendering.

EEric Yao

65% match

Loading thumbnail…

p5.js example

This example displays a simple animated scene where a yellow circle moves horizontally across an 800×500 canvas. It uses the p5.js library, loading it via CDN and the `createCanvas()` and `draw()` functions, with the circle’s x-position incremented each frame and reset when it exits the screen. The sketch sets a gray background and draws the moving shape using p5.js’s `background()` and `circle()` methods, demonstrating basic animation and state management in a blank HTML page with a "Hello!" message.

AAlark Joshi

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

64% match

Loading thumbnail…

Mathematical Graphic Patterns

This example generates an animated, abstract screensaver-like pattern using a grid of circles on an HTML canvas. A 30×30 grid animates each point over time, with positions and radii driven by sine and cosine functions of a continuously increasing time variable, creating swirling, rhythmic motion. The code uses the Canvas API’s 2D rendering context (`canvas.getContext('2d')`) and `requestAnimationFrame` to update frames, with a semi-transparent black overlay to create fading trails. Circle colors shift smoothly through RGB values based on grid position, while the canvas dynamically resizes to the browser window.

CConvert-Jade

63% match

Loading thumbnail…

P5.js 64 x 128

This example renders a responsive grid of 64 columns by 128 rows of circles, colored by Perlin noise on an HSB palette. It uses the p5.js library with `createCanvas`, `noise`, `fill`, and `ellipse` to draw the visualization. The sketch also integrates `p5.AudioIn` to capture microphone volume, which dynamically adjusts the noise animation speed. The code demonstrates a custom hot-reloading setup for VizHub, extracting p5 functions and binding them to the sketch instance.

EEJ Fox

63% match