Interactive Floating Typography

100%

Interactive Floating Typography

• Draft1🔗 Unlisted

Last edited May 2, 2024

Created on May 2, 2024

Floating letters drift and rotate across a bright yellow canvas, forming a dynamic typographic composition. Users launch new characters by dragging the mouse, with each letter moving at its own speed and angle until it exits the screen. Built with p5.js, the sketch uses the `setup`, `draw`, and `mouseDragged` functions, custom `Letter` objects, and `loadFont` to render text from multiple font sources. Letters are randomly assigned sizes, velocities, and rotation, creating a playful, ever-changing visual field.

AI-generated description

Based on tutorial by Patt Vira: https://www.youtube.com/watch?v=-6v_AYyn49k

See https://vizhub.com/kristinbaumann/interactive-floating-typography-refactored for a version with separate p5 bindings

MIT Licensed

Similar vizzes

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

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

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

67% match

Loading thumbnail…

Animated Letters

This animated visualization demonstrates D3’s selection join pattern by showing random letters entering, updating, and exiting a view. Green letters appear from the top, black letters shift horizontally to their new positions, and brown letters drift downward before disappearing. The example uses `d3.select`, `selectAll`, `join`, and `transition` with a 750-millisecond duration, driven by `setInterval` updates every second. It also includes a custom `randomLetters` function that shuffles and sorts the alphabet, highlighting how transitions handle dynamic data with hot-reload-friendly interval management.

CCurran Kelleher

67% match

Loading thumbnail…

Letras animadas

This example demonstrates D3’s selection.join pattern with animated transitions for entering, updating, and exiting letters. It generates a shuffled, sorted subset of the alphabet every second, rendering each letter as a text element colored green when entering, black when updating, and brown when exiting. The code uses `d3.select`, `d3.transition`, and `d3.shuffle` to animate vertical and horizontal movement, with a `setInterval` loop and a cleanup function that works with hot reloading.

Ffcordon@pin.upv.es

65% match

Loading thumbnail…

Mouse event

An interactive SVG canvas responds to mouse movement and clicks by spawning animated circles and falling letterforms. Moving the cursor triggers a bouncing circle at its position, while clicking or a timer initiates a rain of random characters. The visualization uses D3.js transitions to animate opacity, size, and position, with colors generated procedurally via a golden-ratio hue rotation.

LLuisSevillano

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

65% match

Loading thumbnail…

Particles

Hundreds of small, colored rectangles converge into the word “FRISS” before scattering apart. They then reform and slosh around as the mouse moves, creating a gooey, viscous effect. The code rasterizes text by drawing it to a Canvas and using `getImageData` to identify pixel locations as target points. A `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` animates the elements, while an SVG filter applies the gooey blur and color matrix.

FFrissAnalytics

64% match