Lesson 6 of 10 · Forces in a shader
Drift
Diamonds that slide. Lazy diagonal.
Drift is gravity + wind at the same time but at different speeds. X moves slow, Y moves slightly faster. The result is a lazy diagonal, the material slides like oil on glass.
Oil stain on the sidewalk.
Asymmetric speeds
p.x += T * 0.06 and p.y += T * 0.09. Different speed per axis = diagonal. The asymmetry is what keeps it from looking mechanical.Flip speeds: swap
0.06 and 0.09. Drift changes direction. Make one negative, drift up-left.The code
void main(){
vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
vec3 col = vec3(0.02, 0.05, 0.1);
for(int i = 0; i < 5; i++){
float fi = float(i);
float sx = 0.06+fi*.012;
float sy = 0.09+fi*.018;
vec2 c = vec2(mod(fi*.7+T*sx,3.)-1.5, mod(fi*1.1+T*sy,3.)-1.5);
vec2 q = abs(p-c);
float sz = 0.13+fi*.025;
float d = q.x+q.y-sz;
vec2 qs = abs(p-c+vec2(.05,-.06));
col *= smoothstep(-.02,.12, qs.x+qs.y-sz);
col += vec3(.05+fi*.18,.75-fi*.1,.5+fi*.08) * smoothstep(.01,-.01,d) * (.55+fi*.12);
col += vec3(.03+fi*.08,.35-fi*.05,.25+fi*.04) * exp(-max(d,0.)*5.) * .25;
}
col = hueShift(col, 0.0);
gl_FragColor = vec4(col, 1.);
}