Skip to main content
SimilarExport ZIP
100%

P5.js Example

✓ Published1🌍 Public
Ssleyus
Last edited Nov 8, 2019
Created on Nov 8, 2019
Forked from 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.

AI-generated description

Demonstration of using P5.js.

Derived from the P5.js Functions Example.

MIT Licensed

Similar vizzes

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
91% match
Loading thumbnail…

Fork of P5.js Example

This example demonstrates concentric circular targets drawn with varying shades of gray, each created by a series of overlapping ellipses. It shows how a reusable function, `drawTarget`, produces different visual patterns based on parameters for location, size, and number of rings. The sketch uses the P5.js library, specifically the `createCanvas`, `ellipse`, and `fill` functions, within the `setup` and `draw` lifecycle methods. It renders three targets positioned across the canvas, with the color of each ring derived from an arithmetic sequence based on the ring count.

Ppeter@attachmentdivision.com
90% match
Loading thumbnail…

P5.js Starter

This example demonstrates a generative drawing of concentric circular targets rendered with P5.js, adapted from the P5.js “Functions” example. The sketch uses `createCanvas`, `background`, `noStroke`, `noLoop`, `fill`, and `ellipse` to draw three targets at varying positions, each composed of nested gray-scale circles. The code is structured to work with VizHub’s hot reloading by binding P5 instance functions and attaching `setup` and `draw` to the P5 instance.

CCurran Kelleher
87% match
Loading thumbnail…

rippls

Three concentric circular targets, each composed of nested gray rings, appear on a light gray background, drawn with P5.js. The sketch computes each ring's size and shade by dividing the target's diameter into equal steps, creating a gradient from dark at the center to light at the edges. Using the P5.js API, the code binds functions like `createCanvas`, `ellipse`, and `fill` to the instance, then attaches `setup` and `draw` to render the static composition once. The visualization demonstrates how to structure a P5.js sketch with ES modules and hot reloading in a container-based environment.

Nnagasai.mandalapu@gmail.com
76% 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
75% 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
74% 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
Loading thumbnail…

Fork of P5.js Starter

This example demonstrates a p5.js sketch rendered in the VizHub environment with hot reloading, showing three concentric target patterns of varying gray shades on a canvas. The code imports the p5 library and manually instantiates it to bypass the default global functions, binding methods like `createCanvas`, `background`, `fill`, and `ellipse` to the p5 instance. It defines `setup` and `draw` functions within the sketch, attaching them to the instance, and uses the canvas `parent` method to attach the canvas to the container element, enabling seamless updates during development.

AAndrew Blakeslee Moore
73% match