Liquid Tilt

傾けると液体が動く。文字の上を液体が覆うと appearance が反転する。

mobilep5jssensor 2026-03

experiment

このスケッチはモバイルデバイス向けです。スマホで開いてください。

傾けて

code

s.draw = () => {
  s.background(0);

  const targetLevel = s.map(s.rotationX, -45, 45, H * 0.85, H * 0.15);
  level = s.lerp(level, targetLevel, 0.05);

  const targetSlosh = s.map(s.rotationY, -45, 45, -s.TWO_PI, s.TWO_PI);
  slosh = s.lerp(slosh, targetSlosh, 0.05);

  const hue = s.map(s.rotationZ, 0, 360, 0, 360);
  s.fill(hue, 75, 90);
  s.noStroke();

  s.beginShape();
  s.vertex(0, H);
  for (let x = 0; x <= W; x += 4) {
    const y = level
      + s.sin(x * 0.015 + slosh + s.frameCount * 0.04) * 18
      + (s.noise(x * 0.008, s.frameCount * 0.008) - 0.5) * 24;
    s.vertex(x, y);
  }
  s.vertex(W, H);
  s.endShape(s.CLOSE);
};