Fork of P5.js Starter

100%

Fork of P5.js Starter

✓ Published0🌍 Public

Last edited Feb 2, 2024

Created on Feb 2, 2024

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.

AI-generated description

Unlocking P5.js with hot reloading!

This example is copied from the P5: Functions example. Several modifications were required to make it work in VizHub with hot reloading:

Since VizHub uses ES modules, we can't rely on the P5 globals (like setup and draw), and we can't rely on the way P5 usually runs and interprets those.
Therefore in index.js, some setup is required to import P5 and manually execute the Sketch.
To support hot reloading, we store the sketch instance on the container DOM element, and remove the old one if it's present.
The sketch is defined in sketch.js as an ES module that exports a function that accepts the container element. This was required so that we can call use the P5 parent function to tell it to attach the canvas to our container element.
Within the sketch, we can't reference functions like createCanvas and background because we are using ES modules and not globals. However, we can "simulate" globals by extracting those functions from the p5 instance p! Since those internally reference this, we need to use bind to make sure that they work properly. If you need more p5 functions, you can follow the same pattern used here.
Finally, we need to attach our setup and draw functions to the p5 instance.

I've tried to make this setup mimic regular P5 in the internals as much as possible. It should, in theory, be possible to copy the code from any P5 example straight into this template. Just make sure to:

Set up .parent on the canvas
Extract the p5 instance functions you need
Attach your setup and draw functions

Magically, this all works pretty well with VizHub's hot reloading, so you can use Alt+drag to edit numbers and see the rendered graphic update instantly.

Enjoy!

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of P5.js Starter

This example demonstrates how to run a P5.js sketch inside VizHub with hot reloading, rendering three concentric-circle targets in grayscale. The code imports the `p5` library, binds instance methods like `createCanvas`, `background`, and `ellipse` to local variables, and attaches custom `setup` and `draw` functions to the P5 instance. It manages the sketch lifecycle by storing the instance on the container element and removing it on reload, allowing interactive editing of numeric parameters with instant visual updates.

NNick Hogle

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

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

84% match

Loading thumbnail…

Fork of p5-starter

This example shows a minimal p5.js sketch as a starting point for the VizHub V3 Runtime Environment, which supports hot reloading and interactive widgets. The code draws five horizontal bars on a 400×400 canvas, with each bar’s width randomized via the `random()` function and redrawn once per second using `frameRate(1)`. It uses p5.js’s `setup()`, `draw()`, `createCanvas()`, and `rect()` APIs, and loads the library from a CDN in a simple HTML file.

Ppanthabuddhi@gmail.com

84% match

Loading thumbnail…

p5-starter

This example demonstrates the classic p5.js “Hello World” pattern adapted for the VizHub V3 Runtime Environment, which enables continuous hot reloading with interactive widgets. The sketch renders five pink rectangles of random widths that update once per second on a gray background. Using the p5.js library, the code declares `setup()` and `draw()` functions, with `createCanvas()`, `rect()`, `random()`, and `frameRate()` controlling the canvas and animation. The absence of an `index.html` triggers the V3 runtime, and the entry point is the exported `main` function that receives a container DIV.

RRavneet Singh Bhatia

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

78% match

Loading thumbnail…

p5-starter

This example shows a minimal p5.js "Hello World" drawing on an 800-by-800 canvas. It renders a green-outlined rectangle, a red circle, and the text "Hello World" using p5.js functions `createCanvas`, `background`, `rect`, `circle`, and `text`. The sketch runs in the VizHub V3 Runtime, which uses `index.js` as its entry point and supports hot reloading for interactive widgets. The code relies on the p5.js library (version 1.9.0) loaded via a CDN, with no external data source.

AAllen Ho

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

76% match