【GLSL】動くパターン

See the Pen animating pattern by aadebdeb (@aadebdeb) on CodePen.

precision mediump float;

uniform float u_time;
uniform vec2 u_mouse;
uniform vec2 u_resolution;

float fillCircle(vec2 pos, vec2 center, float radius) {
  float d = distance(pos, center);
  return step(d, radius);
}

float strokeCircle(vec2 pos, vec2 center, float radius, float width) {
  float d = distance(pos, center);
  return step(radius - width / 2.0, d) - step(radius + width / 2.0, d);
}

void main(void) {

  vec3 color = vec3(.847, .886, .071);

  vec2 fStep = vec2(80., 100.);
  vec2 fPos = mod(gl_FragCoord.xy + vec2(u_time) * 0.2, fStep);
  float fValue = fillCircle(fPos, fStep / 2., 20.);
  color = fValue == .0 ? color : vec3(.749, .118, .337);

  vec2 sStep = vec2(200., 150.);
  vec2 sPos = mod(gl_FragCoord.xy - vec2(u_time) * vec2(-0.1, 0.1), sStep);
  float sValue = strokeCircle(sPos, sStep / 2., 50., 25.);
  color = sValue == .0 ? color : vec3(.0, .498, .694);

  gl_FragColor = vec4(color, 1.0);
}