Gist 6b819ee428b62f14cc35668063b9259b

100%

Gist 6b819ee428b62f14cc35668063b9259b

✓ Published0🌍 Public

Last edited Oct 6, 2017

Created on Oct 6, 2017

A p5.js sketch displays the word "hello world" as an interactive typographic experiment. The code defines an array of characters comprising the message and uses the `textFont`, `textStyle`, `textAlign`, and `text` functions to render it on a 960x500 canvas. The core interaction is tied to the `mouseMoved` callback, which triggers on every mouse movement within the canvas. Here, the `fill` function applies a semi-transparent random RGB color to the text before drawing, causing the message to continuously shift color as the user moves the cursor. Most of the drawing commands are commented out, leaving the random color generation as the primary visual event.

AI-generated description

<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head> <body> <script>

mit Licensed

Similar vizzes

Loading thumbnail…

test-block

This example demonstrates a p5.js sketch that renders the phrase “hello world” in an interactive, real-time manner. The sketch draws text on a canvas, with the fill color changing randomly every few frames as the word is repeatedly redrawn. A mouseMoved function listens for pointer movement and displays individual letters at the cursor’s position, cycling through the message’s characters in sequence. The code uses the p5.js library (version 0.5.14) and is wrapped in an instance mode with the canvas attached to a specific HTML container.

SSammeSheikh

82% match

Loading thumbnail…

test-block

This example uses a p5.js canvas to explore typography and interactivity. The code predefines an array of characters spelling “hello world” and sets up a 960×500 drawing area with styled Georgia italic text. The display logic is incomplete, with commented-out calls to `text()`, but the `mouseMoved()` listener contains the working interactive component: it randomly changes the fill color to semi-transparent RGB values and renders the message at the canvas center whenever the mouse moves. The sketch thus demonstrates how mouse events can drive dynamic visual changes in a p5.js environment.

BBartholomaeusAstrum

78% match

Loading thumbnail…

test-block

This example shows a p5.js sketch that outputs the text "hello world" in both a static and interactive form. The static version renders the complete string in the center of the canvas, while the interactive version responds to mouse movement by drawing individual letters at the cursor's position with random colors. The code uses p5.js text functions like `p5.text`, `p5.textFont`, and `p5.mouseMoved` to achieve this. It is built with Blockbuilder and a provided railroad image.

SSammeSheikh

76% match

Loading thumbnail…

Interactive Floating Typography (Separate p5 bindings)

Interactive Floating Typography scatters and animates the Greek letter Omega across a bright yellow canvas. Dragging the mouse creates new letters that move, rotate, and drift until they exit the screen. Built with the p5 library, the sketch binds drawing functions via `start.js`, manages letter objects with position, velocity, and rotation, and uses `f.random` to select fonts, sizes, and speeds. The visualization responds directly to mouse input, allowing continuous generation of typographic particles.

KKristin Baumann

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

69% match

Loading thumbnail…

p5.js test

The sketch renders the text "NJ Smith" as a cloud of animated points, with each point moving in a sinusoidal pattern to create a lively, shimmering effect. It uses the p5.js `font.textToPoints()` API to convert the text into a point cloud, sampling a Public Sans font loaded via `loadFont()`. The animation is driven by updating a global angle variable in the `draw()` loop, applying per-point offsets to the x and y coordinates. The points are drawn as individual strokes on a 1500x800 canvas with a light gray background.

NNJ Smith

69% match

Loading thumbnail…

Gist e0d36dea72b5cd332eef9e4265715ff9

This generative sketch displays a cartoon face rendered through layered procedural drawing commands, with a wall of overlapping code text scrolling horizontally in the background. The sketch uses the Processing.js (p5.js) API to draw shapes like ellipses, arcs, triangles, and rectangles, while the foreground text repeatedly includes the literal substrings “ITPIsAwesomeWeLoveCodingtrain” and “Codingsohard,” suggesting a playful commentary on learning to code. The face alternates between static and animated states, with randomized cheek positions and a frame rate change, all triggered by a variable that switches between two drawing branches. The code also manipulates a global offset variable to create the continuous text slide.

CChelseaChenC

69% match

Loading thumbnail…

Hello world!

A working black-and-white canvas displays a row of five circles that repeatedly adjusts its scale via a D3 transition, while two HTML overlay labels read “Hello world” and “a random walk?...”. The circles’ radii and fill color update on a random interval, switching between blue and gray based on a random threshold. Built with D3 v7, the example demonstrates SVG rendering and animation through D3’s `join` method and `transition` style, with a simple `setInterval` driving the stochastic size and color changes.

Bblockmarket

68% match