Processing Starter with P5JS

100%

Processing Starter with P5JS

✓ Published2🌍 Public

Last edited Oct 30, 2020

Created on Nov 18, 2019

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.

AI-generated description

A bare minimum P5JS program.

This is derived from CodePen: Empty Example for P5JS as well as the P5JS Recursion Example.

MIT Licensed

Similar vizzes

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

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

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

74% match

Loading thumbnail…

fractal

This interactive fractal experiment uses recursive circle drawing on an HTML5 Canvas to generate branching, tree-like structures. The visualization responds to mouse movement, with cursor position controlling the fractal’s scale, branch angle, and recursion depth. The code defines a `drawGeometry` function that recursively draws circles, translating and rotating the canvas context at each step, while a `flip` parameter alternates branch direction. Rendering is handled directly through the Canvas 2D API, with event listeners triggering redraws on mouse move. No external libraries are used, relying solely on native browser canvas methods like `ctx.arc`, `ctx.translate`, and `ctx.rotate`.

CCurran Kelleher

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

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…

Fork of Processing Starter with P5JS

This minimal P5JS program demonstrates a blank, SVG-exportable canvas. It uses the p5.js-svg library to render vector output, creating a 960 by 500 pixel drawing surface with a light gray background. The sketch initializes a single canvas in the `setup()` function and draws a uniform background in `draw()`. It is based on a CodePen starter template and a Processing recursion example, serving as a bare-bones foundation for further visualization development, with fixed full-viewport CSS styling.

Ppeter@attachmentdivision.com

74% match

Loading thumbnail…

Fork of P5.js Starter

This example shows an interactive P5.js sketch displaying concentric circles in grayscale, adapted from P5’s “Functions” example. It demonstrates how to integrate P5.js with VizHub’s hot reloading by importing the library and manually managing the p5 instance on the container element. The sketch extracts P5 APIs like `createCanvas`, `background`, `fill`, and `ellipse` from the instance and binds them, attaches custom `setup` and `draw` functions, and sets the canvas parent to the container. This pattern enables live editing of parameters with immediate visual feedback.

NNick Hogle

73% match