TYPEART

• 

  TYPEART Home page

Inspiration

Text is usually static and passive. When we type, our emotions, speed, and rhythm get trapped behind flat pixels on a screen. We wanted to bridge that gap between emotional expression and generative art by building a medium that actually feels alive. TYPEART came from the simple idea of turning keystrokes into fluid dynamics. We wanted to give language an immediate visual footprint where tone, sentiment, and typing speed directly shape a generative particle universe in real time.

What it does

TYPEART is an interactive, real-time typographic emotion map that translates live text input into dynamic particle physics and vector field artwork. As you type, the engine continuously calculates the emotional sentiment of your words on a scale from negative to positive. Negative text triggers sharp, chaotic turbulence and central implosions, while positive text produces smooth, expanding flow fields and warm visual blooms.

The text glyphs themselves are sampled into spatial coordinates, serving as emission points for thousands of physics-driven particles. Your typing speed and rhythm directly influence words-per-minute metrics and typing force, releasing shockwaves and velocity bursts across the screen. On top of that, you can tweak density, turbulence, decay, gravity, and custom color palettes, or manually release shockwaves across the canvas. When you are done, you can export high-resolution PNG snapshots embedded with custom binary metadata containing your exact sentiment scores, typing speed, particle counts, and configuration settings.

How we built it

We built TYPEART entirely using vanilla HTML5, JavaScript, and CSS without relying on external canvas libraries, which allowed us to maximize frame rates and avoid render overhead. To keep performance smooth with thousands of active entities, we used flat typed arrays like Float32Array and Uint8Array to store particle properties such as positions, velocities, life spans, and colors contiguously in memory.

Particle movement is driven by a custom vector field powered by 3D Simplex noise. The velocity vectors depend on field angles calculated from the continuous sentiment score, where the angle is derived directly by scaling the 3D noise output across spatial coordinates and time.

For the visuals, we designed a dual-canvas rendering engine. One canvas handles fading particle trails using partial rectangle clears and additive blending, while the second canvas manages crisp foreground elements, connections, and typographic overlays. Finally, for image exports, we wrote a custom binary array encoder and CRC-32 algorithm to inject structured JSON metadata directly into standard PNG tEXt chunks.

Challenges we ran into

Managing particle arrays at scale while keeping frame rates consistent was one of our biggest hurdles. Early prototypes suffered from noticeable garbage collection pauses caused by creating objects inside the main animation loop. We completely eliminated that memory overhead by moving to pre-allocated typed arrays and a ring-buffer cursor system. Mapping dynamic sentiment fields smoothly was another challenge. Negative sentiment needed to feel rough and unsettled without completely breaking the physics simulation. We solved this by applying step-quantization and high-frequency jitter functions to the vector field angles whenever the sentiment score dropped below -0.4.Finally, rasterizing custom font glyphs to pull spatial coordinates in real time caused slight input delay during fast typing. We fixed this by rendering fonts to a hidden canvas buffer and down sampling pixel data efficiently on the fly.

Accomplishments that we're proud of

We are really proud of hitting a solid 60 FPS performance while running up to 4,200 active particles and complex vector field calculations simultaneously. Building the entire physics engine, math pipeline, UI, and binary PNG writer from scratch without a single third-party library was a huge win for us. Most importantly, we managed to make typing feel genuinely tactile. Every keypress releases tangible force, and changing your emotional tone genuinely alters the physical laws of the canvas universe.

What we learned

We learned firsthand how much structure-of-arrays memory layouts outperform traditional object structures in browser JavaScript engines by taking advantage of CPU cache locality. We also learned how to manipulate trigonometric functions driven by noise algorithms to achieve fluid, organic behaviors without needing massive Navier-Stokes fluid solvers. On the data side, diving into low-level binary image structures gave us a deep understanding of how PNG chunks work at the byte level and how to safely inject custom metadata without corrupting standard image viewers.

What's next for TYPEART

Next, we want to integrate the Web Audio API so musical pitch, frequency, and beat detection can drive particle turbulence alongside text sentiment. We are also planning to add WebSocket support for multi-user collaboration, letting several people type on the same canvas at once to create shared emotional artwork. Long term, we aim to port the physics engine to WebGL compute shaders, scaling our particle limit from 4,200 to well over 100,000 entities in real time.

Built With

• css
• html5
• javascript