[WebGL]二変数関数で様々なグラフを描いてみた

無題
Pocket

グラフィックスのための数学の勉強がしたかったので、勉強も兼ねつつブログに数学関連の記事を書いていくことにしました。

「プログラムなら分かるけど数式になると途端にわからん!」という人をターゲットにしています。

自分自身が文系出身なので、ツッコミどころも多いかもしれませんがご了承下さい。

 

多変数引数とは

多変数引数とは、下記の式のように複数の変数からなる関数です。

z = f(x, y) = x2 + y2

 

数式だと分かりにくいですが、プログラムで書くと下記のようになります。

簡単ですね。

 

ちなみに、上記のように2変数を受け取る関数を「二変数関数」というらしいです。

 

グラフ化してみる

以下のコードをテンプレートとして、以降はformula関数のみを書き換えていきます。

 

まずは一番簡単な下記の式からグラフを描画してみます。

z = f(x, y) = 0

動作結果はz = 0なので、こんな感じの平らなグラフになります。

無題

 

グラフいろいろ

二次関数のグラフは、下の画像のように原点から垂れ下がったようなグラフになります。

z = f(x, y) = x2 + y2

無題

 

また、下記のグラフも似たような性質を示します。

z = f(x, y) = |x| + |y|

無題

 

z = f(x, y) = |x|1/2 + |y|1/2

無題

 

x、yのどちらかをマイナスにすると、馬の鞍のような形のグラフになります。

z = f(x, y) = x2 – y2

無題

 

三角関数を使うと、波打つようなグラフが出力されます。

z = f(x, y) = sin(x2 + y2)

無題

 

時間軸を加えてみる

コードを少し書き換え、時間軸を加えた三変数関数にすることで図形を動かせます。

 

z = f(x, y, t) = sin(x2 + y2 + t)

無題

 

z = f(x, y, t) = sin(2x + t) + sin(2x + t) * 0.4

無題

 

色々紹介しましたが、結構遊べるので演出づくりなどにも活かせると思います。

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

(Required)

Proudly powered by WordPress   Premium Style Theme by www.gopiplus.com