About two months ago, ATB Financial reached out to me with a neat proposal to create some interactive artwork for the front cover of their annual report. That's the finished piece down below — yeah, that conspicuous empty space. Go on, touch it.
For fun, let's look at a few alternate builds I created along the way to that final version. First up, some particles spawn from the mouse/touch point. When two particles are close together, they're connected by an arc.
After a bit more work on the arcing particles, I started on a second system: wispy lines that are blown around by a vector field wind.
I then put the two systems together, and added some rhythm. First, big bright particles will form a trail behind the mouse. As those particles age, they'll start drifting apart, fading out, and laying down a spray of wispy lines. The wispy lines blow around, laying down gobs of color like a splatter-painting.
That white line down the middle of the trail of big particles? It's a reference to a design element ATB Financial use in their marketing, nicknamed "Linus". (BTW, that's why this interactive art project is named Pauling.)
Next up, a version that is very similar to the final build, but with some extra visual effects that run super slowly on Internet Explorer / Edge. This version is my favourite, though it lacks a lot of the polish that went into the final version.
And that's it. You can see the final version (the version from the top of the page) live on the ATB website for the time being. They also included a small snippet of it in their intro video. Thanks to ATB for the fun project!
If you're curious about how to program something like this, let me know on Twitter. It might be fun to break down a project like this into some sort of tutorial.
If you are a Canadian bank and would like me to make some interactive art for your web project, take off, you hoser — I'm under a non-compete for a bit yet. But if you're not a bank, and you'd like me to whip you up some interactive art (or music, or otherwise), get in touch.