scale like pattern

scale like pattern
Published on Jan 22, 2020 by Jiaolyulu



This is a scale like pattern I build with shadertoy.
To see the code in shadertoy: https://www.shadertoy.com/view/WtdSD7
An interesting discovery of this shader is that how to create scale like grid.
First of all is to create a grid system that has 2 grid.
I call the red grid as grud 1, the green one as grid2.

IR sensing tissue


Then I try to figure out how this layout is fit in my pattern. I am trying to build this pattern by overlapping each circle about 13 of the circle area.
IR sensing tissue


Then I should figure out the ratio of this grid segment. As is shown in the picture, each grid is the same height of the radius of the circle, while its width is sqrt(3) of the radius.
IR sensing tissue


I have to find the shape in 3 steps.
The first step is to see that if this pixel is in the area of the cricle, whose center is at the middle of the bottom of grid 1.
The second step is to find our if this pixel, when converted into polar coordinate system, is in the range of 30 to 150 degrees.
The third step is to get rid of the area that is in the area of the circle, whose center is at the middle of the bottom of grid2.
Because I am doing abs(x), which is mirroring all of my action from the rightside to the leftside, so I can do all of this action by only giving consideration of the right side shape.

IR sensing tissue