Skip to main content
100%

p5js Template

✓ Published0🌍 Public
UUtopiah
Last edited Apr 14, 2016
Created on Apr 14, 2016

This example shows a single red circle moving diagonally across a gray canvas, bouncing off the edges. Built with the p5.js library, the sketch uses the `setup()` and `draw()` functions to initialize a 886 by 348 pixel canvas and animate the circle’s position. The `ellipse()` API draws the shape, while global variables track its x and y coordinates and speed; reversing the speed when the circle hits the canvas boundaries creates the bouncing effect. No external data is used.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/Utopiah/'>Utopiah</a>'s block: <a href='http://bl.ocks.org/Utopiah/42fa9fbd2e1dfa2874a087fdc105337b'>P5JS with color testing</a>

Similar vizzes

Loading thumbnail…

p5js Template

A bouncing white circle moves across a gray canvas, reversing direction when it hits the edges. The sketch uses the p5.js library, with `setup()` initializing the canvas and random starting position, while `draw()` updates the ellipse’s coordinates each frame. Horizontal speed increases slightly on edge collision, while vertical speed flips sign. No external data is loaded; the example demonstrates basic animation and collision logic entirely through p5.js drawing functions.

UUtopiah
91% match
Loading thumbnail…

p5js Template

A p5.js template demonstrates a simple bouncing ball animation within a canvas. The sketch initializes a circle at a random position and moves it with constant horizontal and vertical speeds, reversing direction when it hits the canvas edges. The code uses p5.js functions `createCanvas`, `background`, `stroke`, `ellipse`, and the global `width` and `height` variables. It draws a red, unfilled circle with a stroke weight of four on a gray background, updating its coordinates each frame in the `draw` loop.

YYannael
86% 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
80% 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
80% match
Loading thumbnail…

p5js Template

This example shows an abstract generative drawing on a 500-by-500 canvas, where a semi-transparent rectangle is placed at random positions each frame, while an ellipse centered at the canvas origin resizes based on the current mouse coordinates. The piece uses the p5.js library’s `createCanvas`, `draw`, `fill`, `stroke`, `rect`, and `ellipse` functions to produce layered, translucent shapes with color values that mix fixed and mouse-driven parameters. The rendering approach is purely procedural, with no external data source, and the mouse position directly influences the ellipse’s width and height, creating a dynamic, interactive visual effect.

YYannael
76% match
Loading thumbnail…

First P5 Assignment

A single circle in the center of the canvas, rendered with the Processing.js library (p5.js), changes color upon mouse click. The visualization shows a static composition of three concentric ellipses, all sharing the same randomly selected RGB color with a semi-transparent fill. The program, written in JavaScript, uses the p5.js `setup()`, `draw()`, and `mousePressed()` functions. When the mouse is pressed within the largest ellipse, new random values for red, green, and blue are assigned, altering the stroke and fill of all shapes. The rendering occurs on a 720x400 pixel canvas.

AAlark Joshi
76% match
Loading thumbnail…

p5js Template

This example demonstrates a minimal p5.js sketch that draws primitive shapes—a rectangle, an ellipse, and a line—on a canvas sized to the browser window. The code initializes the canvas in the `setup()` function, while the `draw()` function continuously hides the cursor and calls `fullScreen()`. It uses the p5.js library’s `createCanvas`, `rect`, `ellipse`, `line`, `noCursor`, and `fullScreen` APIs to render static geometry without any data source or user interaction.

YYannael
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