SammeSheikh

@SammeSheikh·3 public vizzes

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.

Nov 17, 2017

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.

Nov 10, 2017

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.

Oct 6, 2017