【Shade.to】iOSノードベースShaderエディタで図形を描く

OverView

前回iOSでノードベースのShaderを作成することができるアプリ”Shade”の紹介を書きました。
今回はそのShadeを使って図形を描いてみます。

おもちゃラボさんのシェーダだけで描く図形10選の記事をとても参考にさせて頂きました。 ちくわさんいつもありがとうございます。

http://nn-hokuson.hatenablog.com/entry/2018/05/24/195206

Environment

  • iPad Pro 11-inch
  • iOS 12.2

Method

2色直線塗り分け【Step】

StepノードはXがedgeよりも小さい場合は0を返し、大きい場合は1を返す。

  • Step nodeのxに”uv.u”を入れstepに繋げedgeを調整すると縦に分割される
  • Step nodeのxに”uv.v”を入れstepに繋げedgeを調整すると横に分割される

直線を引く【Step * 2, Substract】

2色直線塗り分けの応用。
2回stepを使って分割を行えば良いのだが、2回目の分割は白と黒の部分を反転させたいため、2回目のstepに入力するuvは1-uvを行い値を反転させる。

  • uvを反転させるには1-uvを行う

複数の直線を引く【Sin * 倍率, Step】

Sin nodeのxにuvのuまたはvを入力し、倍率を設定することにより複数の線が描画できます。

  • Sin nodeのxに”uv.v”を入れ倍率を上げると複数”縦”の線が描画される。
  • Sin nodeのxに”uv.v”を入れ倍率を上げると複数”横”の線が描画される。

塗り潰された円を描く【Distance, Vector 2D】

2色直線塗り分けの応用。Distance nodeを用いる。

Distanceノードは指定した値からどのくらい離れているかを出力する。

入力値AとBにそれぞれuvとVector 2D nodeを繋げ、Vector 2D nodeで設定した値がここでは円の中心点となる。さらにstep nodeを用いて輪郭をはっきりさせる。

  • 円を描くならとりあえずDistanceにuvと中央座標

円の輪郭だけを描く【Distance, Sin, Step】

まず塗り潰された円と同じ要領でDistance nodeにuvと中心座標を入力。

その後sin nodeに入力し倍率を上げ、step nodeにつなげ、輪郭をはっきりさせると塗り潰されていない輪郭だけの円が完成する。

  • 塗り潰された円と同じ要領で円を描いたモノを適度に倍率を上げsinにつなげ、step

線を動かす【Time】

sin nodeを使っている場合はsin nodeに値を入力する前にtime nodeの値を足せば良い。

つまりはsin(x + time)、アニメーションの向きを逆にしたい場合はsin(x – time)にする。

また、sin nodeを使わないで線や円を描いている場合は動かすには少し方法を考えなければならない。

市松模様を描く【Sin, Add, Multiply, Step】

複数の直線を引く時同様の方法で複数の縦線と横線を作る。
その後その2つをadd nodeかmultiply nodeを使って足すか掛けるかを行う。

足した場合は斜めの市松模様、掛けた場合は縦線と横線がそのまま組み合わさった回転していない市松模様になる。

最後にstep nodeを使って0,1で白黒はっきりさせれば完成。

同じ図形を繰り返させる【Multiply, Fract】

今までuv nodeをはじめの入力値としてそのままくっ付けていたが、そのままくっ付けるのではなく、uvを何倍かに掛け、fract nodeを使って小数点以下で出力されたものを今までのように入力すれば繰り替えされる。

Ref.

コメントする

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