Interlockings

Description

This week, I felt inspired by the classics; Casey Reas and Zach Lieberman. They are both masters of creating optical illusions by coding complicated interlockings using simple shapes and patterns. So I decided to try it in my own way. I have always wanted to try doing moire patterns with shaders layered on top of each other, so that was my only plan going into this.

You can press 'f' to fullscreen (when viewing from the editor website, apparently not from Glitch) and move the shapes with your mouse.

Design Process

I started by creating a single plane and adding a shader to it to make it fullscreen. I made the shader "repeat" in the UV Y space by using sine waves and multiplying. It's important to use a shader here because I wanted to draw A LOT of lines and I needed it to run quickly; drawing lots of p5.js line()'s would not work here. I then made the UV space rotate around a point by an angle offset (sent in as a uniform to the shader). I made several more of these planes, put them into a list in an animator object, and then animated each them, using their index as an offset for everything to give variation (color, angle, starting position, probably more). The moire results were interesting but the composition was too uniform and therefore it kets boring fast.



At some point, I started playing with the shader, and by happy accident managed to get the UV to fall off. This created shapes that looked nice when layered on top of each other, and still exhibited some moire patterns here and there. I used chroma.js, an excellent library for making color gradients, and animated it so that each shape fades between different colors in a gradient. I then used a blendMode() to make them overlap.



I added a pow() function to the UV so that it gets stretched at certain points, giving some line variation. The last step was to offset the centers of the shapes so that they overlapped less. This finally got the result I liked!

Reflection

The results were fun! It definitely looks inspired by Casey Reas. Would love to do more of these if I get the time.