コミットハッシュでcanvasを変える

topに置いているcanvasはGLSLで描画している。 サイト解説でも触れていた通り、コミットハッシュによって微妙に変化が出るように実装を変えてみた。

Cloudflare Pagesでは CF_PAGES_COMMIT_SHA という環境変数が入る(これはただのGitのcommit hash) これをそのまま表示すると横のラベルになるし、数値に変換すればシェーダーに渡すseedとしても使える。

const commitHash = process.env.CF_PAGES_COMMIT_SHA;
const seedSource = commitHash ?? "local build";
const commitSeed =
  [...seedSource].reduce((sum, char, index) => {
    return sum + char.charCodeAt(0) * (index + 1);
  }, 0) % 1000 / 1000;

作った commitSeed は u_seed としてfragment shaderに渡している。 今は回転角と色味に少しだけ効かせている。

Astro側では define:vars を使って、ビルド時に作った値をブラウザで動くscriptへ渡している。 そのscript内でuniform locationを取得して、描画のたびに gl.uniform1f で注入する。 この辺は全然わからないのでcodexにほとんど書いてもらっている。

<script define:vars={{ commitSeed, fragmentSource, vertexSource }}>
  let seedLocation = null;

  seedLocation = gl.getUniformLocation(program, "u_seed");

  const draw = (time = 0) => {
    gl.useProgram(program);
    gl.uniform1f(seedLocation, commitSeed);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  };
</script>

shader側では普通のuniformとして受け取る。

uniform float u_seed;

vec2 p = rotate(uv, 1.65 + u_seed * .7);

vec3 veinCool = mix(
  vec3(0.34, 0.45, 0.74),
  vec3(0.48, 0.62, 0.82),
  u_seed
);

派手に変えすぎるとサイトの見た目が毎回別物になってしまうので、今は少しだけ変化するくらいにしている。 コミットごとに模様の角度や色が微妙に変わるくらいの変化量で一旦様子を見てみる。