Lesson 2 of 10 · Forces in a shader
Gravity
The circles fall. Each at its own weight.
The first force: add T to a coordinate. p.y += T * 0.2 displaces the field upward continuously, as if gravity pulled the material down and you watched from above.
Honey in slow motion.
p.y += T * speedPositive speed = rises (texture falls). Negative = falls (texture rises). The number controls how heavy it feels.
Change
0.12 to 0.04, thick lava. To 0.6, waterfall. Change the other 0.1 (how much each circle differs from the next) to 0.0 and they all fall in unison.The code
void main(){
vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
vec3 col = vec3(0.04, 0.02, 0.1);
for(int i = 0; i < 5; i++){
float fi = float(i);
float speed = 0.12 + fi * 0.1;
float x = -0.8 + fi * 0.4;
float y = mod(-T*speed + fi*1.3, 3.) - 1.5;
vec2 c = vec2(x, y);
float r = 0.1 + fi * 0.03;
float d = length(p-c)-r;
float ds = length(p-c+vec2(.04,-.07-speed*.15))-r;
col *= smoothstep(-.02,.15,ds);
col += vec3(.92,.2,.06) * smoothstep(.02,-.02,d) * (.6+fi*.1);
col += vec3(.95,.55,.2) * exp(-max(d,0.)*4.) * .25;
col += vec3(.5,.1,.02) * smoothstep(.0,-.3,d+.3) * smoothstep(-.8,.0,p.y-y) * .1;
}
gl_FragColor = vec4(col, 1.);
}