Vectorform Brandingprocedural effects for print, desktops, TV, and VR

Evolutionary Brand Development

Over the past decade I've create a huge number of procedural and realtime systems for Vectorform. Most often for clients and internal tools, but also for branding development and office installations. The following examples show the evolution and progression of the Vectorform brand, as viewed through the realtime animations I've created to support it.


Based on what I'd learned during previous OpenCL projects in Quartz Composer, I created a dynamic particle field connected by small lines that faded with distance. By processing the resulting data field after the application of procedural noise, I created false projection UV data that could destroy itself then coalesce again; revealing whatever imagery was needed as shifting polygons continually evolved.


The 2013 system was used in screen savers and animations, but also to render out static graphics for use on desktops, shirts, and even the office elevator. Pushing the limits of GPU buffer sizes at the time, I was able to create antialiased results at up 8192 pixels square (16384 was almost possible, but typically resulted in system instability).

The generative effects were also ported to After Effects using FxFactory Pro, which enabled higher quality compositing in pre-rendered situations. This setup was used to create things like 8k video loops for display on 4k monitor arrays.


Moving away from the older styles defined in 2013, I created a more efficient procedural system for the Vectorform brand in 2016 with updated animations and a different approach to the use of polygons; utilising them more as background textures than hero elements. Due to performance issues with Apple's implementation of OpenCL in OSX, using a GLSL shader made for a much more robust system this time around. This was featured as the primary lobby display system, rendering day and night every week along with dynamically loaded welcome text and directions.


With 2017 came the development of a new branding look set by the design team. Though still a continuing evolution of established themes, it was a stylistic departure from the more atmospheric and depth-based elements before. Along with flatter graphics and more reliance on bold diagonal cuts on printed materials, a heavier reliance on colour gradients and imagery was also used.

For live displays such as the office lobby, I created the "molecule" animation using layered iterators in Quartz Composer, while images are processed live using custom CIfilter code I wrote. Using a flat file system similar to the 2016 experience, settings are loaded via plain text along with directories of photos that populated the background. This gives anyone with access to the shared directory control over all messaging and imagery, and can be used to customise the lobby for events, holidays, and welcoming new hires.


As the online brand continued to outpace the printed brand assets, I worked with the lead designer at the time to determine a more up to date direction that better matched the website and better set up the brand going forward. This included a major refresh of the lobby experience, and the development of a number of toolsets and GLSL shaders to generate random but tilable patterns, and then animate those preset tiles in realtime on low end hardware using RGBA encoded texture sources.

I further extended the lobby display experience this year to support image based slideshows and movie playback, alongside the previous background images style and brand new procedural lines. I also built an entire preferences and preset system in PHP/HTML/JS/CSS, allowing users to customise the CSV settings file more easily, including customising the dynamically rendered colour scheme.