Nick Hogle

@nhogle·4 public vizzes

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.

Feb 10, 2024

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.

Feb 10, 2024

Loading thumbnail…

Test Rollup

This example demonstrates a minimal setup for integrating CoffeeScript with D3 v7 using Rollup. It shows how a Rollup configuration with the `rollup-plugin-coffee-script` plugin compiles a CoffeeScript entry file (`main.coffee`) that logs “Hello from Coffeescript” to the console. The page itself is an empty HTML body, with D3 loaded as a global library via the VizHub dependency configuration. The visualization is a functional test of tooling rather than a data-driven graphic, relying on Rollup’s build pipeline to process the script.

Jan 25, 2024

Loading thumbnail…

D3 Test

Fifteen circles with dynamically changing radii, positions, and colors pulse in a smooth, endless animation, driven by sine-wave values generated in the `makeData` function. The example uses the D3 library (v7.8.5) with its `select`, `range`, and data-join `join` pattern to render SVG circles directly to the document body. Animation runs via `setInterval` at roughly 60 frames per second, updating a time parameter that alters each circle’s `r`, `cx`, `cy`, and `fill` attributes. The visualization demonstrates real-time data binding and SVG attribute updates with a minimal, dependency-light setup.

Jan 25, 2024