Fork of p5-starter

100%

Fork of p5-starter

✓ Published0🌍 Public

Last edited Jan 26, 2024

Created on Jan 26, 2024

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.

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

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

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

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

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

82% match

Loading thumbnail…

Fork of HTML Starter

A minimal bar chart displays five static rectangles proportional to a numeric array. It uses JavaScript with the D3 v6 library, selecting the SVG element and rendering bars via `d3.select('svg')` and the `.join()` pattern. Interactive hover animations change bar colors to orange with a 200ms transition. The code does not demonstrate data creation, filtering, or axes; it focuses on basic SVG rendering and event-driven styling.

FFrancisco Antonio

75% match

Loading thumbnail…

Fork of Blank Slate

This example demonstrates a minimal “Hello World” visualization using the VizHub V3 Runtime Environment, which enables continuous hot reloading and interactive widget tweaking. The code renders text directly into a container DIV using plain JavaScript, with a font size adjustable via Alt-drag interaction. It relies on no external libraries, only the runtime’s core `main` function export and SVG-capable rendering. The accompanying HTML file includes an empty SVG element and logs the D3.js library to the console, though no data processing or chart drawing occurs beyond this basic setup.

Aamari.urquhart@gmail.com

75% match

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates the foundational "Hello World" setup for the VizHub V3 Runtime Environment, serving as a blank slate for interactive coding. It shows a minimal HTML structure with an SVG element and a paragraph, while the runtime simplifies entry by using an exported `main` function in `index.js` that receives a container and state-management options. The code highlights the platform’s hot reloading capability, where interactive widgets allow real-time property adjustments (e.g., font size) via Alt-drag, and it uses the `setState` function for immutable state updates. The visualization is rendered directly into the provided container, with no external libraries beyond the runtime’s built-in support, and the included video and links reference further examples like a Mouse Follower.

Hhchen156@jh.edu

75% match