绘制基础图形和特殊图形原理上并没有太多差异,特殊图形也只是基础图形的组合以及函数的应用,下面逐个列举:
一、十字形
二、多边形
我们在讲绘制的时候封装了多边形的绘制:
float polygon(vec2 _st, int num) { // Remap the space to -1. to 1. _st = _st *2.-1.; // Angle and radius from the current pixel float a = atan(_st.x, _st.y) + PI; float r = TWO_PI/float(num); // Shaping function that modulate the distance float d = cos(floor(.5+a/r)*r-a) * length(_st); return 1.0-smoothstep(.4,.41,d);}复制代码
三、Pattern 图案
绘制 Pattern 图案并不需要在 0~1 坐标系内重复绘制,我们可以利用 fract()
这个函数来把放大后的坐标系拆分成若干个0~1
的坐标系。
当我们把图案和奇偶数运动结合在一起,可以制作出不一样的动画效果,首先判断奇偶数的方式有:
y = mod(x,2.0) < 1.0 ? 0. : 1. ;y = step(1.0, mod(x,2.0));y = fract(x * .5) > 0.5复制代码
下面再看看如何制作一些瓷砖类的 pattern,与之前的 pattern 不一样的是,复杂的 pattern 并非单一图形的平铺,它包含了多种不一样的图形重复,而如何在同一个画布内绘制不一样的 pattern,仍然可以借助奇偶数来帮助我们:
首先我们创建一个 2x2 的网格,通过水平和垂直的奇偶数判断,得到了四个 index 不一样的方格:
在方格内我们就可以添加不一样的图案效果: