Interactive Floating Typography (Separate p5 bindings)

100%

Interactive Floating Typography (Separate p5 bindings)

✓ Published0🌍 Public

Last edited Feb 21, 2025

Created on May 2, 2024

Forked from Interactive Floating Typography

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.

AI-generated description

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

Here with refactored bindings to p5.

MIT Licensed

Similar vizzes

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

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

70% match

Loading thumbnail…

p5JS

In this interactive visualization, users draw freehand with the mouse, and their drawing is recreated as an animated series of rotating epicycles. The application uses the p5.js library to handle canvas rendering, mouse input, and animation. After the drawing is complete, the code computes its Discrete Fourier Transform to decompose the path into a set of frequency components, then sorts them by amplitude and reconstructs the shape using circular motion. The output shows both the tracing circles and the resulting magenta path being redrawn over time.

TTanmay Bishnoi

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

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

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

63% match

Loading thumbnail…

SVG text experiment - Interactive tool

This interactive tool arranges text cards around a central, dynamically generated phrase, drawing words from a CSV taxonomy of themes like body, material, and action. Users can adjust settings such as card count, theme, and pattern to remix content in real time. The visualization uses D3.js to load data, render SVG, and transition text, while GSAP’s TimelineMax and TextPlugin handle card rotation and path-based text animation. Center text updates recursively via D3 transitions, creating a generative brainstorming interface.

LLaurens

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

63% match