Mondrian Dynamics Part 1 – Color Theory in Action


Everything is expressed through relationship. Colour can exist only through other colours, dimension through other dimensions, position through other positions that oppose them. That is why I regard relationship as the principal thing.

– Piet Mondrian

Mondrian – Plastic Reality is an orbital brickbreaking game where players explore the lives and works of five modern artists. The game is the sequel to our surprise hit Mondrian – Abstraction in Beauty from 2015, and one of the goals with this one was to take a greater level of control with regards to the game’s dynamic generation. Instead of just randomizing everything, we wanted to create a harmony in the randomness. This started with color, and the relationship between colors in particular.

Mondrian – Plastic Reality’s Color Wheel controls the visual relationship between all colors on screen in the game.

The Color Wheel is the simplest method, in art, of defining colors, no matter how we are classifying them: warm or cool, bright or dark, bold or soft. Mondrian also has a color wheel, but defines its color through code instead of on a palette. The additive RGB color space covers 16,777,216 colors (256 red * 256 green * 256 blue). However, for the purposes of scoping, Mondrian, like a classic color wheel, has 12 colors: Red, Orange, Yellow, Chartreuse, Green, Spring, Cyan, Azure, Blue, Violet, Magenta, and Rose. When defining each individual element’s color in-game – blocks, the paddle, the background, etc. – we set each color channel – R, G, or B – as the Primary, Secondary, or Saturation channel. Effectively, the Primary and Secondary channels control the brightness and hue of the element, and the Saturation channel controls how gray it will be.

Red, Rose, Magenta Adjacent Color Scheme

A max lightness is set for the entire level (randomized between 127-255), and then each element’s Primary channel is randomized between 64 and that max lightness. The secondary channel, if needed, is then set to 1/2 the Primary. The Saturation channel is then set to a Random value between 0 and the Secondary channel’s value. The result is a wide range of colors, though more in the range of 7 million colors than 16.7 million.

Blue, Yellow, Orange, Azure Tetrad color scheme

Before colors are set, however, the game must know what colors will even be allowed. This is performed via a dice role for visuals. Color Theory comes into play with the Analogous Color Schemes, where the game can determine if colors should be Monochrome (one color), Adjacent (three colors in a row in the color wheel), Triad (three colors that form a triangle in the color wheel), or Tetrad (four colors that form a rectangle in the color wheel), and even whether or not to include Compliments (opposite color to the starting color). A few other schemes are included as well, including De Stijl (Red, Blue, Yellow, Dark Gray, Light Gray), Grayscale, and Totally Random. Using this, one randomized starting color, and 128 possible levels of brightness, the game is able to generate 18,179 possible color schemes. If you also multiply the background being able to be a full color or one-color variant, that’s over 36,000 possible looks for a level, via instant dynamic generation alone.

Recreating Johannes Vermeer’s Girl with a Pearl Earring in Mondrian Maker

However, if dynamic generation isn’t your thing, you can also paint your levels. Painting your levels disables dynamic color generation on blocks, effectively meaning those blocks in your level CANNOT be randomized and will always be generated with their painted color, no matter what. This can be used to create “pixel art” works, abstract puzzles, pseudo 3D effects, whatever your creative heart desires.

Pseudo-3D achieved via Mondrian Maker’s painting tools

Dynamic generation is a core part of Mondrian, but in order to achieve an aesthetically pleasing balance between the hand-crafted and the computer generated, it’s necessary to set limits and define relationships of color in the code. Most designers think that dynamic generation is limited to gameplay, such as random level layouts in games like Nuclear Throne or from prebuilt chunks like Spelunky, but our goal is to create dynamic systems that truly stretch the bounds of what art can be. Manual & automated creativity can work together to create beautiful imagery. Relationship is the principal thing.

Azure, Green, Orange, and Rose Tetrad color scheme

If you enjoyed this post, please consider Wishlisting Mondrian – Plastic Reality on Steam or grabbing an Early Access version of the game on itch.io or GameJolt.