Squares, Scripts, and Soul: How I Digitized Josef Albers’ Color Obsession

I’ve always been drawn to art that doesn’t try too hard to explain itself. Josef Albers was the master of this “quiet” confidence. He spent decades painting the exact same thing, squares nested inside squares, yet somehow, every single canvas felt like a brand-new conversation. He didn’t need complex subjects; he let the colors do all the talking.

When I was tasked with building an interactive project inspired by an art movement, Albers was the immediate choice. But I didn’t want to build a static digital museum. I wanted to create a playground where users could touch, move, and manipulate color just as Albers did with his paper scraps.

The Man Who Painted Squares for 25 Years

If you aren’t familiar with Albers, here’s the “TL;DR” : He was a Bauhaus heavyweight who eventually moved to Yale and shaped a generation of American designers. His magnum opus, Homage to the Square, wasn’t just a series; it was a 26-year-long marathon of painting four nested squares.

Why?

Because Albers was obsessed with color interaction. He proved that color isn’t a fixed fact - it’s a shapeshifter.

• A grey square is a chameleon: put it next to orange, and it looks cool and bluish.
• Slide that same grey next to a deep blue, and it suddenly glows with warmth.
• As Albers famously said, color is the “most relative medium in art”.

Turning Art Theory into a “Token Maker”

My project takes Albers’ earthy, muted palette- ochres, teals, and dusty reds, and turns them into a 3x3 interactive grid.

I call it a Token Maker because the final arrangement is uniquely yours. You drag tiles, swap their positions, and watch the mood of the entire grid shift instantly. With a simple double-click, you can save your unique composition as an image. It’s personal expression through rigid constraint, a true nod to the Bauhaus spirit.

A snapshot of my project which can be accessed through the link provided below.

[embed]Albers's Squares Edit descriptionnisheeth95ranjan-design.github.io

The Tech Under the Hood

To bring this to life, I used p5.js, a toolkit for creative coding that treats a browser like a canvas.

• The Mechanics: Everything is rendered frame-by-frame on an HTML5 canvas.
• The UX: I built a drag-and-drop system where tiles swap positions on release, and a right-click resets the board.
• The Portability: The whole project lives in a single HTML file: no installation, no fuss. It feels less like “software” and more like a physical object you can pass around.

What I Learned (The Hard Way)

The coding was actually the easy part. The real challenge? The colors.

I quickly realized that tiles that looked stunning alone often “fought” each other when placed side-by-side. If the outer colors were too similar, they blurred; if they were too opposing, the grid felt jarring. I had to dive back into Albers’ writings to balance the contrast. It reinforced his core lesson: nothing exists in isolation.

Final Thoughts: Making Art Clickable

This project reminded me that Albers’ work was about creating a controlled environment where color could perform without distraction wasn’t really about the squares.

By limiting the user’s choices to a few specific pieces, the color interactions become the star of the show. Albers figured this out decades ago with paper and glue; I just tried to make it clickable.