p5js Template

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.

82% match

p5js Template

This example demonstrates a minimal p5.js template that creates a canvas filling the browser window and draws a single rectangle at coordinates (100, 100) with a default size of 100 by 100 pixels. The sketch uses the p5.js library, loaded from a CDN, and relies on the `createCanvas` and `rect` functions in the setup phase. No animation or interaction is implemented, making it a static starting point for further p5.js experiments.

79% match

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

76% match

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

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

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

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.

fresh block

A blank canvas follows the mouse as a black or white circle, depending on whether the mouse button is pressed. The sketch uses p5.js’s `setup` and `draw` functions, with `createCanvas` setting a 640×480 drawing area and `ellipse` rendering an 80×80 circle at the current cursor position. The fill color toggles between black and white based on the `mouseIsPressed` state, creating a simple interactive painting tool. No data source is involved; it is a direct mouse-driven drawing example.