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

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

次はこの教科書ちょいちょい見ていこうかな
Noiseのとこのコンテンツの充実度すごいわhttps://t.co/zGSdAh6EJF

— まりーな (@marina10172013) June 8, 2021

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

The Book of Shaders

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

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

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

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

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

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

>この例のように数学的な関数を様々な場面で用いると、コードを表現豊かに操ることができます。鍼で気の流れを操るようにデータの流れを操るのです。

ここの日本語訳スキ

— まりーな (@marina10172013) June 12, 2021

線を引くコードは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に近づくから　黒と緑の２色を制御できている
         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);
     }
 `;

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

グラフの断面を頭の中でぐるぐる動かして考えている
いろんな切り口の断面がぐるぐるする

— まりーな (@marina10172013) June 12, 2021

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

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

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

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

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