Skip to main content
SimilarExport ZIP
100%

test-block

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

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.

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>

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
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
86% 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
76% 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
70% match
Loading thumbnail…

fresh block

This blank visualization displays the static text “This is a test.” on a 960×500 SVG canvas rendered by D3 v4. The SVG element is created with `d3.select` and appended to the document body, while the text element is added using the `.text()` method and positioned with `x` and `y` attributes. The example uses monospace font at 36 pixels, with no data or interactions, serving as a minimal starter template from Blockbuilder.

SSimonS
70% match
Loading thumbnail…

fresh block

This simple example displays the static text “First fun with blockbuilder.org!!!” in a monospace font on an empty SVG canvas. The visualization uses D3 v4 to select the HTML body element, append a 960-by-500-pixel SVG, and add a single text element at specified x and y coordinates. The code relies on d3.select, d3.append, and SVG text attributes to position and style the message, with no data source or interaction involved.

LLucashP
69% 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
69% match
Loading thumbnail…

fresh block

Minimal placeholder visualization shows a single line of fixed sample text rendered to an SVG canvas. The page uses the D3 v4 library to append a 960×500 SVG element to the body, then adds a text element with the message "Edit the code below to ftftgy change me!" positioned near the top. Styling sets the font to a 36-pixel monospace face, while the body margin is zeroed and fixed to fill the viewport. No data source or interactive behavior is present; the example serves as a starting template for editing in Blockbuilder.

MMraleksa
69% match