特鲁谢镶嵌
In information visualization and graphic design, Truchet tiles are square tiles decorated with patterns that are not rotationally symmetric. When placed in a square tiling of the plane, they can form varied patterns, and the orientation of each tile can be used to visualize information associated with the tile's position within the tiling.
简而言之,特鲁谢镶嵌基于基本型的平铺。每个平铺单元可以具有随机方向而获得丰富的拼接效果。 首先准备一个平铺单元的坐标系统: vec2 uv = (2.fragCoord-iResolution.xy)/iResolution.y; vec2 gv = fract(uv3.)-.5; if(gv.x>.48 ||gv.y>.48) col = vec3(1,0,.6); 说起来,上次卡通火焰的shader发布后,又收到了FabriceNeyret2大佬的回复😭学到了这样的小tricks:
define S(v,r) smoothstep( r, r+ 3./iResolution.y, v )
这样AA的单位是真实像素,不会在缩放时影响效果!之后文章里的S()都是这样自定义的smoothstep~ vec2 n = hash(floor(uvscale));//random if(n.x<0.5) gv.x=-1.; if(n.y<0.5) gv.y*=-1.; m = S(gv.x+gv.y,0.);//Contrasting triangles m = 2.-S(abs(length(gv-vec2(-.5))-0.5),1.)- S(abs(length(gv-vec2(.5))-0.5),1.);//Quarter-circles 对坐标轴进行随机翻转,即可获得基础的Truchet Tiles。 m = 1.-S(abs(gv.x+gv.y),0.15);//diagonal m = 1.-S(abs(abs(gv.x+gv.y)-.5),.25);//Maze pretty like this one! 用上上篇的知识点写了个函数,使图形在直线和圆弧之间变幻: float dist(vec2 p,float t){ return pow(pow(p.x,t)+pow(p.y,t),1./t); } 完成!今天暂且到这里,明天利用truchet画点小画儿。
updated 02.11
——————出现了!mac和win显示完全不同的情况。这一大坨白白是啥啊! float dist(vec2 p,float t){ p=abs(p);//新加了这一行! return pow(pow(p.x,t)+pow(p.y,t),1./t); } debug了一下终于正常了,原因是dist函数在第三象限有问题...不知道为啥昨天在mac上是ok的呜呜