ベジェ曲線(Bézier Curve)



github | naochang | Curve
Illustrator等でもおなじみのベジェ曲線。ベジェ曲線には次数があり、Illustratorでは3次、Flashでは絵を描くときは3次だけど、実行するときは2次に変換される。(FlashPlayer11以降は3次もサポート)
次数が大きいほど制御点が多く、少ないアンカーポイントで線を調整ができるが、処理も重たくなる。

どのような仕組みかは、こちらのアニメーションgifを見るとわかりやすい。

3次の場合は点が4つ必要になり、通るのは始点と終点のみ。残りの2点は曲線を制御するために使われる。Illustratorなどでいうところのハンドルがそれにあたる。3次の場合は4つの始点と終点のみ繋いでいくので、それを最初の点から最後の点まで繰り返して、複数の点がなめらかに繋がるように見せるが、線が滑らかになるように点にある2つのハンドルが点を挟んで線対称となるように配置する。線対称でない場合は、Illustratorでいうハンドルを折っている状態で、滑らかではなくなる。逆にこう行った操作が容易にできるベジェ曲線は特に2Dを描くのに向いているんですね。

Continue…

エルミート曲線 (Hermite Curve)


github | naochang | Curve

最近はあまり使われないようですが、処理が軽くシンプルな3次エルミート曲線。各点にベクトルを持ち、2つの点と2つのベクトルから2点を結ぶカーブが取得できる。パラメータt\((0 \leq t \leq 1)\)を変えることにより2点の間の位置が取得可能。
式は通常3次多項式から作られ、その式の微分(tにおけるその位置での加速度)とで解いていくと式が得られる。
ほとんど参考サイトとをなぞっているだけですが、数式の出し方は以下。

Continue…

パラメトリック曲線

いままで曲線を描くパラメトリック曲線(スプラインカーブ)についてあまりちゃんと勉強する機会がなかったので、いろいろ調べてみてUnityで実装してみた。あまりコードが洗練されていないかもしれないけど、githubへアップしてみました。[ExecuteInEditMode]で設定しているので再生しなくても動きます。
github | naochang | Curve

ざっと下記のような曲線について勉強してみました。

Continue…

Shaderでコントラスト

まずはStandardのShaderをコピーして、surfaceシェーダー内にパラメーターで設定を増やした_Contrastを掛けるだけバージョン。

fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
c.rgb *= _Contrast; // 足した

次はRGBからYCbCr色空間に変換して輝度を調整。

Continue…

Shaderで波紋


uGUIのImageに、マウスの位置に波紋を表示してみる。
まず、波紋の式はこちら。

単位の波紋に対してスケール用の式を掛け合わせる。(半球をかぶせる感じ)


(なぜか角っこがジャギる…)
Continue…