Cascades

An interactive particle simulation where elements cascade and interact with text, loaded via iframe.

Notes & Details

This "Cascades" demo is a fun example drawn from my explorations into **"Art and creative Javascript"**. It uses PixiJS for efficient rendering and a hidden HTML Canvas to generate a collision matrix, allowing the particles to interact realistically with the contours of the text.

The structure relies on a `Collider` class managing the overall simulation and multiple `Emitter` classes controlling the source points (cascades) for the particles. Each emitter can be configured with different properties like velocity, position, spread, and flow rate, leading to varied visual effects. The script even includes logic for weighted emitters (`setWeightedEmitters`) based on their flow rate.

Building interactive pieces like this is something I genuinely enjoy. As I mentioned in my bio, **"I adore front-end work, especially JS frameworks"** and the process of combining code with visual creativity. This demo showcases that blend—a bit of physics simulation, rendering techniques, and **"a flair for innovative front‑end experiences."** The original version also included a dat.GUI panel for real-time tweaking of parameters, making it a flexible tool for experimentation.

Read more about how this was built in this blog post.

Interested in this technique?

Let's explore how interactive elements or specific features from this demo could enhance your project.

Discuss Your Project