3/16

GLSL

void main() {
  vec2 st = gl_FragCoord.xy / uResolution;

  // Grid
  vec2 grid = vec2(50.0, 25.0);
  st *= grid;

  vec2 ipos = floor(st);

  vec2 vel = floor(vec2(10.0 + uTime * 10.0));
  vel *= vec2(-1.0, 0.0);

  vel *= (step(1.0, mod(ipos.y, 2.0)) - 0.5) * 2.0;
  vel *= random(ipos.y);

  // tは 0~totalCells を繰り返す。 headはx,y
  float totalCells = grid.x * grid.y;
  float t = mod(uTime * max(grid.x, grid.y) + floor(1.0 + uTime), totalCells);
  vec2 head = vec2(mod(t, grid.x), floor(t / grid.x));

  // 上からびっしり並べられる見た目が完成
  vec3 color = vec3(1.0);
  color *= step(grid.y - head.y, ipos.y);
  color += (1.0 - step(head.x, ipos.x)) * step(grid.y - head.y, ipos.y + 1.0);
  color = clamp(color, vec3(0.0), vec3(1.0));

  // ランダムを用いてびっしりな見ためから隙間のある見た目に
  vec2 offset = vec2(0.1, 0.0);
  color.r *= random(floor(st + vel + offset));
  color.g *= random(floor(st + vel));
  color.b *= random(floor(st + vel - offset));
  color = step(0.5, color);

  //タイル間の微妙なスキマを開ける
  color *= step(0.1, fract(st.x + vel.x)) * step(0.1, fract(st.y + vel.y));
  
  gl_FragColor = vec4(color, 1.0);
}

最後のタイル間の微妙なスキマを開ける文だけ結構わからなかった。

内省

月曜は午前中だけにしようかな。図書館休みだし、映画館も安いし息抜きにちょうどよい。
っていって結局暇だったら触ってるけど。