Introduction

In the background of this page you can see an invisible sprite leaving a trail of multi-colored “smoke.” Feel free to click and drag on the page itself, your cursor will also give off colored smoke. The experience works in both light and dark mode but is best viewed in dark mode, so click the ⚪️/⚫️ button to switch. Scroll down for an empty area to interact with the smoke and for information on the settings.

Caution: If there is any lag, move the bottom slider to the right. However, if you have a fast computer, best high-definition results come from moving the bottom slider to the left.

Note: All settings can also be toggled by pressing on the keyboard key that matches the first letter of the setting.

⏸

Information

The colors emitted by the cursor are determined by both the direction and the speed of the drag. The “Glitter” setting adds more variance to the colors and “Lock Color Direction” causes the colors to be determined only by the initial direction of the drag.

There is a play/pause button to turn on/off the smoke. However, you can also press any key on your keyboard that doesn’t match the first letter of the above settings to play/pause, and if you want to see changes one frame at a time you can press the period (".") key. Smoke can be emitted by the cursor even when paused.

The sliders can change how the smoke works. The top slider changes how quickly the smoke spreads, and the middle slider varies the density of the smoke, effectively changing the way the smoke spreads where higher values seem to make it flow more like watercolor paint. The bottom slider changes the pixel size of the fluid.

The buttons show what is going on under-the-hood controlling how the smoke moves, and are painted with multicolored gradients. In the case of both Pressure and Divergence, lighter green/yellow-red colors represent positive values and darker blue-magenta colors represent negative values. The gradients cycle between colors creating bands such that it either is linear where the $N$th band has $N$ times the strength as the first band (as in the case of Pressure), or it has $\sqrt[4]{2^{N-1}}$ times the strength as the first band (as in the case of Divergence, i.e. it’s a logarithmic scale). Velocity is shaded such that every direction is prescribed its own hue, and the strength of the hue is the velocity in that direction.

Extra Details

The smoke shader should work both on desktop and on mobile, although it’s better on desktop. It is best rendered on chrome, as if your monitor is capable of rendering P3 colors (most macs can, for example) then the colors will render as P3 colors (giving a wider gamut, making even more colorful smoke and gradients!).

Colors themselves are picked from the Okhsl color space, allowing for perceptually smoother gradients. The colors are technically floats, and while monitors do not normally render float values for colors, this allows for colors to be rendered extra smooth by adding a little noise, preventing banding.

Click-and-drag actions are somewhat sinusoidal (with a bit of noise), for that reason when quick and long paths are made with your cursor the smoke will seemingly have a lot of texture.

The smoke will also adjust easily to the screen changing sizes (although the smoke does behave slightly differently depending on the ratio of the dimensions, where it will spread farther across the wider dimension), so feel free to experiment with that as well.