A square of particles goes through a sequence of transformations (called variations), following the arrows from the bottom of the list to the top. Most of the functions have random parameters. The image is the density of where those particles land.
| click a function | select it |
| < > beside a row | step it through the 51 variations |
| small asterisk beside a row | replace it with a random function |
| circular arrow beside a row | randomize its parameters (when available) |
| circular arrow above the list | randomize parameters of all variations |
| symbols above the list | new set, colors, 2D/3D, bounding |
| wheel over a row | same as < > |
| + - above the list | add / remove at the top of the chain |
| + - below the list | add / remove at the bottom of the chain |
| drag | 2D: translate the selected function 3D: rotate the view |
| shift + drag | rotate the selected function |
| wheel | scale the selected function |
| double click | reset its translation |
| ↑ ↓ | move the cursor |
| ← → | change the function at the cursor |
| Z | new random set of functions |
| Y | randomize parameters of all |
| Q | randomize parameters of the selected one |
| F / D | add / remove at the top of the list |
| P / O | insert / delete at the cursor |
| A | re-render |
| N | colour mode (2 in 2D, 9 in 3D) |
| ! | 2D / 3D mode |
| = | 3D projection |
| E | bounding mode |
| + / - | more / less opacity per particle |
| * / / | final sinusoid stretching |
| T / R | scale all functions |
| 4 8 6 2 | translate the selected function |
| 1 / 3 | scale the selected function |
| 0 / 5 | reset translation (selected / all) |
| . | reset scale of the selected function |
| S | save the function list + PNG |
The original's shortcuts, aimed at an AZERTY layout. Arrow keys work on any layout.
| d-pad | select and change functions |
| A | random new set of functions |
| B | randomize parameters of all |
| X | randomize parameters of the selected one |
| Y | 2D: bounding · 3D: projection |
| L1 / R1 | add / remove function |
| left stick | translate the selected function |
| right stick | scale / rotate it (view rotation in 3D) |
| L2 | the on-screen info panel |
Variograph is by Etienne Jacob (bleuje), originally written in openFrameworks with compute shaders. This is a WebGL2 port of it, verified against the original shader.
Inspired by work from GenerateMe, who did the parameter randomization work for the variations. The variations themselves come from the fractal flames world.
Gallery of images made with Variograph
See GenerateMe's original tumblr (see early posts in archive)