GLSL 效果示例

六边形蜂窝:让每个格子独立闪烁

以格子编号决定闪烁,相邻格子的动画不会完全同步。

在线示例

修改右侧代码,左侧预览会实时更新。

观察什么

以格子编号决定闪烁,相邻格子的动画不会完全同步。

实现原理

错行网格形成蜂窝近似,格子编号驱动独立脉冲。边缘和颜色取自同一坐标,避免纹样游离。

找到控制效果的代码

vec2 q=p*7.,size=vec2(1.7320508,1.);vec2 a=mod(q,size)-size*.5,b=mod(q-size*.5,size)-size*.5;vec2 cell=dot(a,a)<dot(b,b)?a:b;vec2 id=q-cell;float d=max(abs(cell.y),dot(abs(cell),vec2(.8660254,.5)));float line=1.-smoothstep(.43,.48,d);c=palette(hash(id)+u_time*.12)*line*(.4+.6*sin(hash(id)*6.+u_time));

动手修改

把 q=p*7. 改为 q=p*4.。蜂窝格会变大,每个格子的明暗脉动仍由其 id 的哈希值决定。

调试与成本

两个错开的候选网格选出最近的六边形单元,不需要邻域采样循环。把调色板输入中的 u_time*.12 改为 0.,可停止色相流动,同时保留独立的逐格明暗脉动。

用到的内置函数

一步步学会这个效果