Skip to main content
SimilarExport ZIP
100%

p5.js example

✓ Published5🌍 Public
AAlark Joshi
Last edited Jan 18, 2024
Created on Jan 26, 2022
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

barchart.js

A single yellow circle moves horizontally across an 800-by-500 canvas on a gray background. The sketch uses the p5.js library, with `setup()` creating the canvas and `draw()` incrementing the circle’s x-position by one pixel each frame. This example demonstrates basic animation and state management through p5.js’s global `createCanvas` and `circle` functions.

Hhollyjpotter
80% match
Loading thumbnail…

p5.js example

This example displays a static red canvas with a single black ellipse at its center. The page is built with a minimal HTML structure and styled with CSS to remove default margins and padding. The sketch uses the p5.js library, specifically the `createCanvas`, `background`, and `ellipse` functions within the `setup` and `draw` calls. The code currently contains commented-out sections for loading and processing CSV data, but they are not active in this version.

BBhumika Srinivas
78% match
Loading thumbnail…

Untitled

This example renders a static yellow rectangle on a gray canvas using the p5.js library. The sketch creates a 500 by 500 pixel drawing surface and draws a single filled shape with a fixed position and size. It loads a chocolate ratings dataset from a CSV file but does not visualize the data. The code uses p5.js functions including `createCanvas`, `background`, `fill`, and `rect` in the `setup` and `draw` methods.

BBhumika Srinivas
75% 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
75% 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
74% match
Loading thumbnail…

Exit Key

This example uses the p5.js library to render a simple, animated composition of concentric circles against a dark background. The drawing shows three stacked circles, each progressively larger, with a small cluster of three circles positioned to suggest a face at the top. The `setup()` function initializes a 400x400 canvas, while the `draw()` function runs continuously, applying stroke and fill colors before plotting each circle with the `circle()` API. The code relies on p5.js’s built-in rendering loop and canvas methods.

AAllen Jake Polintan
74% 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
74% match
Loading thumbnail…

P5_Test

A visualization built with p5.js renders a set of three concentric circles against a dark background. The sketch creates a 1000 by 500 pixel canvas and uses the `createCanvas` and `circle` functions to draw each circle at the same horizontal center with increasing radius and vertical offset. The `noLoop` function stops continuous redrawing, leaving a static composition of purple shapes on a light gray field.

CChandana Srinivas
73% match