Skip to main content
SimilarExport ZIP
100%

p5-starter

✓ Published0🌍 Public
AAllen Ho
Last edited Feb 1, 2024
Created on Jan 26, 2024

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.

AI-generated description

A blank slate starting point showing the "Hello World" for the VizHub V3 Runtime Environment, which supports continuous hot reloading with interactive widgets.

  • There is no index.html - that's what triggers the V3 Runtime
  • The entry point is the main function exported from index.js
  • The main function takes an argument container, a DIV

Full course playlist: YouTube: Constructing Visualization 2024.

MIT Licensed

Similar vizzes

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
88% 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
82% 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
81% match
Loading thumbnail…

P5 Starter

This example displays a fullscreen P5.js canvas that shows the text "Hello P5!" centered against a gray background, with no scrollbars. It uses P5.js functions such as `createCanvas`, `draw`, and `text` to render the output, while `windowResized` and `resizeCanvas` maintain responsiveness. The setup also loads D3.js from a CDN alongside P5.js, though the sketch itself only relies on P5's core drawing API.

CCurran Kelleher
79% 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
78% match
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
76% match
Loading thumbnail…

CS360 Assignment2

A P5.js sketch generates five pink rectangles against a light gray canvas, each positioned vertically with randomized widths, alongside static text reading "hello world." The example demonstrates integrating P5 with VizHub’s hot reloading by importing `p5` and manually managing the sketch instance. It uses `createCanvas`, `background`, `fill`, `rect`, `text`, and `random` functions extracted from the p5 instance, with `setup` and `draw` attached to control rendering.

EEric Yao
76% match
Loading thumbnail…

Snowman in p5

This example demonstrates the VizHub Version 3 runtime environment using a minimal "Hello World" sketch written in p5.js. The code exports a `main` function that receives a container DIV and sets its inner HTML to display static text whose font size is defined by a numeric variable. An accompanying video and course playlist illustrate how interactive widgets enable continuous hot reloading, allowing properties like font size to be adjusted by Alt-dragging a number in the editor. The example serves as a blank slate for building dynamic visualizations.

PPatrick
75% match