🌍 Public
Viewing a saved revision (read-only)
b94241a2d3474cb2b9e8aa9d4f4de8cf
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.
AI-generated descriptionUnlocking 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
setupanddraw), 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.