Skip to main content
SimilarExport ZIP
100%

p5-starter

✓ Published0🌍 Public
AAlark Joshi
Last edited Jan 26, 2024
Created on Jan 26, 2024

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.

AI-generated description

Amazing first demo for P5. P5 is the best!!!

Full course playlist: YouTube: Constructing Visualization 2024.

MIT Licensed

Similar vizzes

Loading thumbnail…

p5-starter

This example demonstrates the classic p5.js “Hello World” pattern adapted for the VizHub V3 Runtime Environment, which enables continuous hot reloading with interactive widgets. The sketch renders five pink rectangles of random widths that update once per second on a gray background. Using the p5.js library, the code declares `setup()` and `draw()` functions, with `createCanvas()`, `rect()`, `random()`, and `frameRate()` controlling the canvas and animation. The absence of an `index.html` triggers the V3 runtime, and the entry point is the exported `main` function that receives a container DIV.

RRavneet Singh Bhatia
76% match
Loading thumbnail…

p5 starter

A starter p5.js sketch displays a single white circle at the center of a dark 500-by-500-pixel canvas. It uses the p5.js library to create the canvas and draw the shape, with `createCanvas` setting the dimensions and `noLoop` preventing continuous redraws. The drawing occurs in the `draw` function, which sets a black background and fills the circle with light gray. This minimal example demonstrates basic p5.js rendering of static vector shapes.

AAndrew
75% 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
75% 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
73% match
Loading thumbnail…

Fork of p5-starter

This example shows a minimal p5.js sketch as a starting point for the VizHub V3 Runtime Environment, which supports hot reloading and interactive widgets. The code draws five horizontal bars on a 400×400 canvas, with each bar’s width randomized via the `random()` function and redrawn once per second using `frameRate(1)`. It uses p5.js’s `setup()`, `draw()`, `createCanvas()`, and `rect()` APIs, and loads the library from a CDN in a simple HTML file.

Ppanthabuddhi@gmail.com
73% match
Loading thumbnail…

p5-starter

This example shows a minimal p5.js "Hello World" drawing on an 800-by-800 canvas. It renders a green-outlined rectangle, a red circle, and the text "Hello World" using p5.js functions `createCanvas`, `background`, `rect`, `circle`, and `text`. The sketch runs in the VizHub V3 Runtime, which uses `index.js` as its entry point and supports hot reloading for interactive widgets. The code relies on the p5.js library (version 1.9.0) loaded via a CDN, with no external data source.

AAllen Ho
73% 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
71% match
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
71% match