ファイルあさってたら懐かしいGIF出てきた。
この画像は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、低負荷で綺麗な絵作れて便利だけど、言語としてめっちゃ難易度たかい。