First P5 Assignment

100%

First P5 Assignment

✓ Published0🌍 Public

Last edited May 17, 2023

Created on Jan 20, 2022

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.

AI-generated description

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

Similar vizzes

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

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…

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

76% match

Loading thumbnail…

Processing Starter with P5JS

This example presents a recursive fractal pattern of circles, rendered on a 960 by 500 pixel canvas using the P5JS library. The sketch’s `draw()` function calls `drawCircle()` six times, progressively halving the radius and shifting the x-coordinate to branch into two smaller circles per level. Each circle’s fill color is calculated by mapping the recursion level to a grayscale value, creating a subtle gradient across the nested shapes. The P5JS functions `createCanvas()`, `noLoop()`, and `ellipse()` structure the static visualization.

CCurran Kelleher

75% match

Loading thumbnail…

P5.js Example

This example renders a set of concentric circular targets that overlap across the canvas. Each target consists of a series of filled ellipses with decreasing size, where the fill color shifts from dark to light based on the number of rings. It uses the P5.js library, specifically the `createCanvas`, `background`, `noStroke`, `noLoop`, `fill`, and `ellipse` APIs. The drawing logic is split into a `setup` function that initializes the canvas and a `draw` function that calls a custom `drawTarget` routine four times with different positions, sizes, and ring counts, producing the visual composition.

Ssleyus

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

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

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

73% match