MATTHEW
SCHRADER

Parallax Branded Grid

A parametric tessellation system (p5.js + Blender Geometry Nodes) that cut iteration time by 30×.

Context

We hired an agency to develop a new brand texture. They delivered a tessellated parallelogram (rhombus) grid as a layered Photoshop template. The look was on-brief, but the file structure wasn't built for high-volume production.

The Problem

The grid existed as dozens of hand-built layers. Toggling tiles meant manually switching layer visibility. Adapting to new aspect ratios and crops was slow. Impact: a single variation took 10–15 minutes; a batch could take hours.

Solution, Part 1

Replaced the layered PSD with a script that recreates the agency's rhombus precisely, calculates tile positions mathematically to align 1:1 with the PSD template, randomly culls ~50% of tiles to create visual rhythm, and exports each tile as an individual PNG when manual Photoshop control is needed.

Solution, Part 2

With the pattern now parametric, built a Geometry Nodes rig to introduce depth and dimensionality, organic variation beyond strict tessellation, and motion-ready controls for animation and future use.

Outcome

A visually faithful system that replaces manual layer toggling with code-driven generation—cutting iteration time per variation and making multi-format production practical.

  • 01. Date : 2024
  • 02. Client : Wargaming West
  • 03. Tools used : P5.JS, Blender, Photoshop
01.