learn GLSL from zero
ToolsCreate with shadersShader MakerFree online shader builderToolkitShader works ready for your siteSketcher LabPaint your landing’s hero with shaders3D StudioThe Three.js editor in your browser
GamesPlay with shadersOnomatoShaderType a word, blow it upThe WatcherAn eye that follows youAetherLiquid glass with an eye insideBloomcoreA word grows a garden of lightPyrokineThrow fire at the wallVoltaicThe pyramid throws lightningSurfSurf a shader ocean

Lesson 4 of 10 · Forces in a shader

Pulse

The hexagon pulses. Waves from the hit.

Instead of moving coordinates, you move the warp intensity. warp * (0.5 + 0.3 * sin(T * 0.4)), deformation rises and falls. The material expands and contracts.

Inhale. Exhale. The warp breathes.

Modulate amplitudeYou do not move the material, you squeeze and release it. Patterns concentrate (contract) and relax (expand). This is what makes a shader feel alive without moving it.
TryChange T*1. to T*0.3, very slow pulse. To T*3., hyperventilates. Change 0.15 (the beat amplitude) to 0.05, subtle pulse. To 0.4, huge pulse.

The code

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float beat = pow(sin(T*1.)*.5+.5, 2.)*.5 + pow(sin(T*1.+.35)*.5+.5, 2.)*.3;
  float r = 0.3 + beat * 0.15;
  vec2 ap = abs(p);
  float d = max(ap.x*.866+ap.y*.5, ap.y) - r;
  float shape = smoothstep(.02, -.02, d);
  float rings = sin(length(p)*20.-T*3.)*.5+.5;
  rings *= smoothstep(r+.3, r, length(p));
  vec2 sp = abs(p+vec2(.05,-.07));
  float shadow = smoothstep(0.,.25, max(sp.x*.866+sp.y*.5,sp.y)-r*1.1);
  float glow = exp(-max(d,0.)*3.) * .5;
  vec3 col = vec3(.06,.02,.12) * shadow;
  col += vec3(.85,.08,.35) * shape;
  col += vec3(1.,.55,.7) * rings * .15;
  col += vec3(.9,.3,.5) * glow;
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.);
}
close