Playing around with a pixellation shader idea: the triangular pixellation of the image gets more definition based on the brightness of the pixel.

The result is not unlike a Sierpinski fractal.

Yes, it’s 2013 and I’m doing fractals. Don’t judge me.

8 responses to “Sierpinksi”

  1. psyruz says:

    so beatifull color!! 😀

  2. Johan says:

    That looks awesome! Can you give a few pointers on how you did it? Triangular tiling maybe?

    • joris says:

      Thanks! This effect is indeed made with triangular tiling, in a glsl shader. The technique is based on the math and trig behind hexagonal pixellation [link] and the glsl shader implementation of it [link].

      The recursive pattern is something I added myself. It’s just a for loop that makes smaller triangles when the sampled pixel’s brightness is below a certain threshold, or stops when it is above it.

      Does that help at all?

  3. Johan says:

    Thanks for your answer, it definitely helps. I stumbled upon the same links after doing some research.

    I guess one thing I’m still confused about is the different sizes for triangles based on brightness (which I think is the most beautiful part). I see how a shader implementing triangular tiling could tesselate the image in triangles but I’m not sure how in the shader I’d be able to adjust the size of the triangles based on the brightness. Or does that not happen in the shader?

    Thanks a lot for your help and your tutorials, really appreciate it.

    • joris says:

      The different sizes do happen in the shader.

      The shader checks for every pixel which triangle it belongs in, and then sets the color of that pixel the same color as the center pixel of the triangle (cf. the techniques above). You set a starting scale for the size of these triangles. This gives the first level of triangles.

      Then you check the brightness of each pixel, and if it’s below a threshold value, you decrease the triangle scale by a certain amount. Then you do the triangle checking again, resulting in the smaller triangles at the second level. If it’s higher than the threshold, just leave it as it was.

      This all happens in a for loop, so you keep checking the brightness of the pixels of the previous pass, each time checking it against a slightly lower threshold value. If it’s below, decrease the scale again and you have the next layer of triangles. Etc etc etc. I cap it at 10 iterations.

      All in all there’s quite a bit of if statements and for loops, which apparently are a no-no for shaders. It probably could be optimised quite a bit, but even at high resolutions I’m still getting a steady 60fps though. Shaders ftw!

      Are you working on something similar?

  4. Johan says:

    Thanks for the detailed answer. So you’re doing multiple passes through the shader (up to 10)?

    I was just browsing through your site and found that picture really gorgeous so I was inspired to do something similar 🙂

  5. Vincent says:

    Great work mate! I don’t suppose this one is available anywhere for sale or download, is it?

    • joris says:

      Thanks! This actually became the Triangulate effect which was added in Resolume 4.1.9. With some improved shading as well. It comes with Res’s demo , so feel free to check it out…

Leave a Reply

Your email address will not be published. Required fields are marked *