Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

p5-starter

Public visualization

Viewing a saved revision (read-only)

e6c28fc73f444c0dac6ad064395c75cb

p5-starter

0 stars0🌍 Public
AAlark Joshi
Last edited Jan 26, 2024
Created on Jan 26, 2024

This example demonstrates a simple animated pattern of five pink rectangles, each with a random width, stacked vertically on a gray background. The sketch runs at five frames per second, causing the rectangle widths to change with every frame. It uses the p5.js library, specifically the `createCanvas`, `background`, `fill`, `rect`, and `random` functions within the `setup` and `draw` loop. The code does not load any external data; it generates all visual variation procedurally.

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.