クリエイティブコーディングの記録

この連載に載っているものを自分のcodepen に移植して動かすのが、終わったので次の教材を探していたら、ちょうどよいものがあった。

The Book of Shadersというサイトだ。

更新が途中までになっているが、Noiseのところのコンテンツが充実していることに驚き、これからはこれで勉強しようかなと思った。

続きはいつ出るんだろう?寄付したいと思うくらいだ。日本語版作るのにコントリビュートしたいくらいだ。

ようやくマウスイベントをシェーダーの中に取り込み、シェーダーに反映させることができた。

これはマウスポインタに追従できるようにした。

シェーダーで線を引くことがこんなに大変だとは思わなかった

教科書には熱い言葉で数とグラフを操るとはどういうことかが書いてあり、良い日本語だなと思った。かっこいいよね。

線を引くコードはThree.jsでカスタムシェーダーとして動くようにして、解説を書き加えたのがこれ。動かし方はCodpenをみてほしい。

smoothstepを使って、y=xに近いものほど1を返すことで直線をひいているのだ。

 ////////////////////////////////////////////////////////////////////////
 // シェーダーの生成 
 ////////////////////////////////////////////////////////////////////////
 const fragmentShader = `
     #include <common>

     //iResolution: 解像度
     uniform vec3 iResolution;
     uniform float iTime;
     uniform float lineWidth;
     uniform float numberOfDivisions;
     // マウスの位置
     uniform vec2 u_mouse;
     
     ///////////////////////////////////////////////////////////
     // plot関数 (0.0~1.0の間の値を使って、Y軸に線を引く)
     ////////////////////////////////////////////////////////////
     float plot(vec2 position) {    
         // smoothstep(min, max, between) この関数はその範囲の間で0.0から1.0まで滑らかに変化する数値を返す
         // 入力値がminより小さい場合、smoothstep()は0を返します。
         // 入力値がmaxと等しいか、maxより大きい場合、smoothstep()は1を返します。
         // 入力がminとmaxの間にある場合、smoothstep()は0と1.0の間の値を(比例して)返します。
         // 最初の2つのパラメータは値の変化の起こる範囲の始まりと終わり
         // 3つめのパラメータはチェックの対象になる値
         // 0.02 よりもabs(position.y - position.x)が小さければ0を返す
         // abs(position.y - position.x) が 0か、0よりも大きい場合 1を返す
         // abs(position.y - position.x) が 0.02 ~ 0 の間にある場合、 0と1.0の間の値を(比例して)返す
         return smoothstep(0.02, 0.0, abs(position.y - position.x));
     }
     
     ////////////////////////////////////////////////////////////
     // mainImage関数 (基本はここで操作)
     ////////////////////////////////////////////////////////////
     
     // out 出力用 in 入力用
     void mainImage( out vec4 fragColor, in vec2 fragCoord ){
         
         //正規化(原点を中心におく)
         vec2 position = (fragCoord.xy * 2.0 - iResolution.xy) / min(iResolution.x, iResolution.y);
         
         // 左下が0 右上が1 になるから ひだりしたであればあるほど黒くなるし、右上になればなるほど白くなる
         // 縦で別れているのは、xの値をyにもいれているから
         float y = position.x;
         
         vec3 color = vec3(y);
         
         // ラインの描画 (x=y の直線時は1になる)
         float pct = plot(position);
         // x=y の直線に近づければ近づくほど、pctは1に近づくから 黒と緑の2色を制御できている
         color = (1.0 - pct) * color + pct * vec3(0.0, 1.0, 0.0);

         // 画面への出力
         fragColor = vec4(color, 1.0);
     }

     ////////////////////////////////////////////////////////////
     // main 関数
     /////////////////////////////////////////////////////////////
     void main() {
       mainImage(gl_FragColor, gl_FragCoord.xy);
     }
 `;

1年前に比べると格段にわかって面白い。

色んな角度から、グラフの断面を頭の中でぐるぐる動かして、ここを光らせるには、角度を急にしなきゃいけないから・・・ここをの傾きを傾かせればいいんだよね・・

的なことを考えていると、
今まで平面で文字列に過ぎなかった数学が、急に色を持って三次元になって目の前に現れてくるのだ。

久しぶりの目覚める感覚。これだから勉強はやめられないし、一年前にわからなかったことが急にわかるようになるから面白いのだ。

多分この、グラフを操る感覚が後々きれいなものを作るのにつながってくるのだろうと思う。

今は地味な白黒かもしれないが、急にきれいなものを作れるようになるレベルアップが楽しみだ。





この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
まりーな/エンジニア

エンジニアとして働いている成長記録やおもしろいと思ったこと色々書いていこうとおもいます 頂いたご支援は、資料や勉強のための本、次のネタのための資金にし、さらに面白いことを発信するために使います 応援おねがいします

読んでくれてありがとうございます
エンジニアしてますtwiiter:@marina10172013好きなもの Adobe.Ai.AE.Ps/Sketch/Blender/デジタルファブリケーション