Homage to the Square in p5.js

Looking at colors makes me feel good, and I know it’s not just me. Colors affect how we feel and perceive the world. Studies show they influence mood, cognition, even physical responses. Blue tends to calm us down, while red ramps up alertness and heart rate.

So, in this post I wanna share a project I started back in 2023 and left gathering dust on GitHub until this morning. It’s an experiment in p5.js inspired by Josef Albers’ bold and iconic Homage to the Square. Albers explored how colors interact by placing squares within squares, proving that we never see a color in isolation - its appearance always depends on the colors around it.

Albers joined Bauhaus as a student in 1920 and became a teacher in 1923, one of the first to be promoted from within. His Homage to Square pieces were made with oil paint on masonite (not p5.js 😁). He didn’t use brushes nor blending; just paint straight from the tube, spread with a palette knife into flat fields.

His goal? To show that color shifts. A single tone can look lighter, darker, even like a different hue depending on its context. He also insisted: colors are not something fixed, two identical colors can look totally different side by side.

And maybe most importantly: color can’t be understood by theory alone. You have to see it, test it, combine. The eye learns by doing.

The Experiment

Since I found this experiment so fun, I decided to create it using JavaScript, specifically p5.js - it was a way to practice coding while doing something creative. My first idea was to recreate one of Albers’ pieces, with non-interactive colors:

Interactive Version

But since we’re in an environment where we can use interactivity, I made another version where you move your mouse over the squares and they change color. If you press 1 on your keyboard, it locks the color of the largest square, so you can keep changing the other ones. Same thing for the middle square: press 2 to lock its color. And for the smallest one, just press 3. If you want to lock all of them at once, hit the spacebar. To reset everything, press r.

And, of course, if you press again any of the numbers for the locked squares, it will unlock it and let you change the color again, so you can play with some cool combinations. ☺️

Albers’ contributions to design and art are huge. Interaction of Color is still a key reference in color education. And those early Bauhaus exercises he helped shape, like folding paper, testing materials, learning by doing, are still used in design schools today.