GLSL week#02 KodeLifeでVJを描く

Robotの王です。

Week02はRodom関数を使ってビジュアルを作ります。

GLSLの中Rodom()関数はないので、先に自分が関数を作っておきます。

float random (vec2 st) {
   return fract(sin(dot(st.xy,
                        vec2(5231.124 + spectrum.x/2 ,86254.4648 + spectrum.z/2)))*
      1123456.12234 + spectrum.y);
}

こちらの関数は音楽用のspectrumが入ってるので、普通はspectrum.x/2を消せば、floatがrandomの数値を返します。

このrandom()あれば、画面中のマス目を作ります。

   uv.x *= 10 * (spectrum.x * 10 + 0.8);
   uv.y *= 20 * (spectrum.x * 10 + 0.8);
   vec2 ipos = floor(uv);
   vec2 fpos = fract(uv);

vec2のuvをx,y別に分割数を設定、音楽をビジュアルに反映するので、またここのspectrumを入れました、音楽の強さによって分割数が細かくしたりします。両方同じ数値を入れた時、スケールに見える、ぜひたくさん面白いビジュアルを試してください。

Code

#version 150

#ifdef GL_ES
precision mediump float;
#endif
uniform float time;
uniform vec2 resolution;
uniform vec2 mouse;
uniform vec3 spectrum;
uniform sampler2D texture0;
uniform sampler2D texture1;
uniform sampler2D texture2;
uniform sampler2D texture3;
uniform sampler2D prevFrame;
uniform sampler2D prevPass;
in VertexData
{
   vec4 v_position;
   vec3 v_normal;
   vec2 v_texcoord;
} inData;
float random (vec2 st) {
   return fract(sin(dot(st.xy,
                        vec2(5231.124 + spectrum.x/2 ,86254.4648 + spectrum.z/2)))*
      1123456.12234 + spectrum.y);
}
out vec4 fragColor;
void main(void)
{
   vec2 uv = -1. + 2. * inData.v_texcoord;
   
   uv.x *= 10 * (spectrum.x * 10 + 0.8);
   uv.y *= 20 * (spectrum.x * 10 + 0.8);
   vec2 ipos = floor(uv);
   vec2 fpos = fract(uv);
   
   vec3 color = vec3(random( ipos ));
   color *= spectrum.y * 50;
//    color = abs(1 - color);
   
   fragColor = vec4(
       color,
       1.0);
}