月 の 上

glsl.jsでビカビカするぞ

ファイルあさってたら懐かしいGIF出てきた。

f:id:amagitakayosi:20141210231841g:plain

この画像はIBNIZっていう最高のソフトウェアを起動して適当にキーボード叩いた状態を撮影したもの。
IBNIZはビット演算で映像と音を生成する。
無心でキーボード叩くだけで最高の映像素材が手に入る。

processingとかで、フレーム数を数える変数とか使って適当にやると似たようなことできる。
最近Filtersとかいうアプリちょっと流行ってるし、GLSLでビカビカするかー、となった。

GLSL触りたいって人、まずGLSL Sandbox見ると思う。
GLSL Sandboxはglsl.jsを使ってる。
これ使うと、ページ内の適当なcanvasに描画できる。

今のブログの背景、冒頭のGIFとGLSLビカビカを交互に表示してる。
↓こんな感じでビカビカできる↓

<canvas id="viewport" width="800" height="800"></canvas>
<script id="fragment" type="x-shader/x-fragment">
#ifdef GL_ES
precision mediump float;
#endif

uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

int mod (int x, int y) {
   int r = int(x / y);
   return x - r * y;
}

void main (void) {
  int t = mod(int(time) / (1000 / 30), 256);
  vec2 p = ( gl_FragCoord.xy / resolution.xy );
  int r = int(pow(float(t), 2.0) * sin(p.x * p.x * float(mod(t * 131, 303))));
  int g = int(pow(float(t * 808), 7.0) * cos((-p.x * 1002.0) * (time * 102.3) / float(mod(t * 131, 303))));
  int b = int(pow(float(t), 3.0) * sin((p.y * time * 11.) * float(mod(t * 131, mod(303, 19)))));
  float fr = float(mod(r * r, 256)) / 200.0;
  float fg = float(mod(g * b, 256)) / 200.0;
  float fb = float(mod(b * b, 256)) / 200.0;
  gl_FragColor = vec4(pow(cos(-fr * 93.1 - fb) + 0.5, 2.), cos(fg * 53.1) + 0.5, pow(cos(fb * 3.1) + 0.5, 2.), 1.0);
}
</script>
<script>
$(function () {
  if (!Glsl.supported()) alert("WebGL is not supported.");
  var glsl = Glsl({
    canvas: document.getElementById("viewport"),
    fragment: document.getElementById("fragment").textContent,
    variables: {
      time: 0, // The time in ms
      mouse: [0, 0]
    },
    update: function (time) {
      this.set("time", time);
    }
  }).start();
});
<script>

GLSL、低負荷で綺麗な絵作れて便利だけど、言語としてめっちゃ難易度たかい。