Shader Learn

12 从画面到配方

镜像与万花筒:折叠坐标

只画一个小图案,靠折叠坐标让它出现很多次:abs 做上下左右对称,极坐标里的 mod 做万花筒。

212
习题调参数0%

做出这个五片的万花筒

每个像素运行一次拖动数字,或直接改代码

JS 这一侧gl.uniform2f(uResolution, …, …)

对称不是把形状复制几份,而是折叠坐标:abs(p) 把四个象限折成一个;在极坐标里对角度取 mod 再取 abs,就把圆切成 n 片、每片镜像。形状代码一行都不用改。

试一试

  • 依次切换三种折叠方式:形状代码有没有变?
  • 万花筒模式下,把片数调到 3、8、12
  • 打开像素调试,在“画面显示”里选 a:看角度被折成了什么样