p5js Template

100%

✓ Published0🌍 Public

Last edited Apr 14, 2016

Created on Apr 14, 2016

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.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

p5js Template

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.

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

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

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

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

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

73% match

Loading thumbnail…

P5.js Example

Three concentric circular target patterns are drawn on a dark canvas, each composed of nested gray-scale ellipses that create a stepped gradient effect. The example demonstrates the P5.js `setup()` and `draw()` functions, with a custom `drawTarget()` function that generates each target using a loop and the `fill()` and `ellipse()` methods. It uses the P5.js library (version 0.6.0) loaded via a CDN link, and the canvas is sized to the browser window dimensions.

CCurran Kelleher

72% match