Skip to main content
SimilarExport ZIP
100%

test-block

✓ Published0🌍 Public
SSammeSheikh
Last edited Nov 17, 2017
Created on Nov 17, 2017

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.

AI-generated description

Here is a test block for playing with p5.js. Also, to begin making the case for why plaintext and Markdown can be so powerful. http://blockbuilder.org/SammeSheikh/76cafcb8aa94f26f4593ce8fb4d69460 railroad image

Here is an example of real-time text editing (code, documentation) through commonly available client-side software in combination with freely available server-side services (storage, distribution) to generate open, modifiable, platform-independent, reproducible "applications". And in doing so participating in the gamut of private and public (and more importantly, combinations thereof!) entities that make the web happen. Also, railroads!

  1. We need to create four files
  • .block
  • README.md
  • index.html
  • sketch.js
  1. We need to add these to a GitHub gist
  2. We need to navigate to the URL http://blockbuilder.org/[your github username]/[your gist id]
  3. The last step is to play around with the code I've provided and/or using p5.js documentation.

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/bulbil/'>bulbil</a>'s block: <a href='http://bl.ocks.org/bulbil/1646e9a53526c4ff6362b56d595cc244'>test-block</a>

forked from <a href='http://bl.ocks.org/SammeSheikh/'>SammeSheikh</a>'s block: <a href='http://bl.ocks.org/SammeSheikh/76cafcb8aa94f26f4593ce8fb4d69460'>test-block</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/9d4947729573fd585249cfc2893d0fa3'>test-block</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/7795641bb480211897f2d856f687e4a6'>test-block</a>

mit Licensed

Similar vizzes

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
91% 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
87% match
Loading thumbnail…

Gist 6b819ee428b62f14cc35668063b9259b

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.

SSammeSheikh
82% match
Loading thumbnail…

blocks

A large, centered number displays "Hello World!!!" at a 217-pixel font size. The visualization demonstrates the flexibility of a minimal HTML setup within a container, using only inline CSS styling to control the text display. The example serves as a basic template for rendering static DOM content, showcasing how a simple string can be presented as a full-page typographic statement. The code relies on the container’s `innerHTML` assignment to inject the styled element directly into the page.

MMike Alche
70% match
Loading thumbnail…

test-block

This example displays a single SVG text element that reads “Edit the code below to change me!” positioned at a fixed location within a 960 by 500 pixel viewport. The visualization uses the D3.js v4 library to select the body element, append an SVG container, and place the text using explicit x and y coordinates. The code applies a monospace font and a 36-pixel font size, demonstrating basic SVG text rendering with D3’s selection and attribute methods. No data is loaded; the example serves as a minimal starting point for interactive edits.

BBharath4259
69% match
Loading thumbnail…

fresh block test

This example displays a single text message, "Edit the code below to change me!", positioned on a blank SVG canvas. The visualization uses the D3.js v4 library to create an SVG element and append text with specified font and position attributes. The code defines a fixed 960 by 500 pixel canvas and relies on d3.select to target the body element. The minimal implementation serves as a starter template for building more complex D3 visualizations, with the source code originating from a Blockbuilder gist.

IIoTeacher
68% 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
67% 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
67% match