I have been learning GLSL. Besides my classes I have been working myself through thebookofshader.com.
In chapter 7 the focus lies on creating shapes. One of the first exercises is to create an image in the style of Piet Mondrian. At first this seems very simple, “It’s just a couple of rectangles”, but it turned out to be a very valuable lesson and I’m glad I pulled through and didn’t skip it.
The goal of learning GLSL is not just adding another skillset, but learning to think more technical. What’s fun about shaders, I guess math in general, is that there are multiple paths to the same solution. Thinking more technical means getting comfortable with the different paths and learning their benefits and downsides.
Here is what I did for this exercise:
First and foremost did I create a function to create a single rectangle. In a way it’s all about defining the thickness of the outline. This was more or less provided in a previous example in the chapter.
Since we are mainly working with the rectangles outline, I first tried to create and position multiple colored rectangles in a way that the outline overlap perfectly. This is were I started to ponder on how to approach this. This would work, but what if I wanted to change the thickness or the proportions of a rectangle? I would have to change everything for them to match.
The second approach: Create multiple colored rectangles without outlines and use them as a “background” and sort of add the black lines on top. At first I created these lines as I previusly did. The position is defined by the thickness. But once more, what if I wanted to change the thickness? This was the moment something clicked in my brain, which encouraged me to make this blogpost. I can move the rectangles with simple uv operations. This way I can create a construct for a vertical and horizontal line as a variable and only apply the uv operation to place them. This made it much more easier to adapt and read.
The final result isn’t perfect as I haven’t adapted the same principle with the colored rectangles. But I still wanted to share this epiphany.
If the embed doesn’t work, you can find the final shader here: https://www.shadertoy.com/view/WX2yRR