GLSL week#01 KodeLifeでVJを描く

こんにちは、Robotの王です。

KodeLife

今回はKodeLifeというソフトで、ビジュアルを作る、そして音を可視化(visualization)します。KodeLifeは簡単に音を導入したり、リアルタイムにコンパイルしたりのは特徴、特にライブコーディングの時、編集中コンパイルが通らなくても画面が元のまま走るのがありがたい機能です、非常にライブパフォーマンスに使いやすいです。言語はGLSLです、自分は主にFragment Shaderを使って勉強しながら遊んでいこうと思います。

週一ビジュアルを更新する予定です、最初は難しいことやらないので、興味のある方ぜひ、フォローしてください。

ちなみに前回の記事「このゲームクリアできるかい！？」のビジュアルもGLSLで作っていました。

【プレビュー】このゲームクリアできるかい！？｜WangXiaomeng｜note

week #01

今回の本題です、こちらを作ります↓

今回のdemoは3本の線を作って、音の高音、中音、低音部分に合わせて、それぞれ動かせる簡単なビジュアルです。

下準備

ー音源の導入、KodeLife>Preferences>Audio>Input、マイク、PC音源など選べられます。

注意してほしいのは、デフォルトにスピーカーとソフトに入力片方しかできない、音楽を聴きながら可視化したい場合、Macについてる「Audio Midi 設定」に、複数出力を作って、Soundflowerとスピーカー両方チェック入れてください。

Code

#version 150

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;

out vec4 fragColor;    //　カラー出力値

float getLine (vec2 uv, float spectrumXYZ, float offSet) {    //　ライン構成関数
   float makeLine = uv.y + (spectrumXYZ * 140) * sin(time * (spectrumXYZ + 5) + uv.x / 10) + offSet;
   return pow (makeLine, 2);
}

void main(void)    //　メイン
{
   vec2 uv = 10* (gl_FragCoord.xy * 2. - resolution) / min(resolution.x ,resolution.y);    //　正規化
   vec3 color = vec3(0.);    //　背景を黒
   
   float line[3];    //　ラインを三つ
   float disPlay = 1.;    //　ラインを白
   
   line[0] = getLine(uv, spectrum.y, 0.);    //　ライン構成
   line[1] = getLine(uv, spectrum.x, 5.);
   line[2] = getLine(uv, spectrum.z, -5.);
   
   for (int i=0; i<3; i++){disPlay *= line[i];}    //　ライン値乗算
   disPlay = 1 - disPlay * 0.0005 / (spectrum.z * 2 + 0.0005);    //　色付け
   fragColor = vec4(vec3 (disPlay), 1.0);    //　カラー出力
}