pcocessingが楽しい
手段が目的に変わる瞬間
今、自分の中でprocessingでのお絵かきが熱い。もともとは「立方体を一辺を軸に回転させた時どうなるか」ってシミュレーションする手段だったはずなのに、だんだんと幾何学模様を描くこと自体が楽しくなってきてしまって、本来の目的を見失いかけている。
processingのいいところは、お絵かきプログラミングと言う目的がはっきりしているところだ。また、書いたコードが目に見えるってものもわかりやすくて良い。アイコンとかも可愛い。
====
回転する立方体のアニメ（リベンジ）
二点透視の消失点の位置 - ハメ太郎のブログ http://hametaro.hatenablog.com/entry/2013/02/25/085154
processingというプログラミング言語を使って回転する立方体のアニメーションを改めて描いてみた。以下、気づいたこと。
processingは簡単な図形を描くには最適である
まぁ、他にどんなプログラミング言語があるかも知らないズブの素人が、「回転する立方体が描きたい」という目的で選んだわけだが、非常にわかりやすい内容だった。
簡単とはいえども慣れればもっと複雑な図形も書ける様だ。processingは2Dと3Dを区別して表現することができるらしく、3Dで描けばもっと簡単だったらしい。じゃあ、なぜそうしなかったかといえば、3Dで描く方法がわからなかったということもあるし、2Dで奥行きを表現するというこれまで学んだ遠近法で描いてみたかったということも有る。そもそも、なぜ慣れないプログラミングに手を出したかといえば、手書きで描いていてはなめらかに回転しているアニメを作るのは難しかったからだ。0°、30°、60°が描けてもその間が途切れていては連続しているように見えないのだ。
やってみると結構めんどくさかった
というわけで、数式を与えてやれば、変化する角度に応じて適当に描いてくれるのではないかなと思ってやってみた。手順は以下のとおり
1. 右消失点(VP1)、左消失点(VP2)、対角線の消失点(VP3,VP4)の位置を求める
2. 回転の基準、軸と成る一辺(AB)を描く。
3. A,BとVP1,VP2,VP3を結ぶ。
A-VP1…①、A-VP2…②、B-VP1…③、B-VP2…④、A-VP3…⑤、A-VP4…⑥
4. ④と⑥の交点をDとすると、それを垂直に伸ばした線と②の交点がC
5. quad(A,B,D,C);で面ABDCを描く
6. a=++a;で角度aを増やして最初に戻る
という感じ。
注意すべき点はVP3の位置。0<a<180なら下。180<a<360なら上。
そして、面ABDCと９０°で交わる面ABFEのことも考えると、90°刻みで場合分けする必要がある。これを簡単にまとめる頭が無いということもあってめちゃくちゃめんどくさいことになってしまった。
ただ、何度も言うように3Dで描けば標準のメソッドで簡単に回転できるので、ここまでした意味はないのかもしれないが、ちゃんと回ったってことで満足なので今回はそれでいい。http://r-dimension.xsrv.jp/classes_j/2_interactive3d/
http://www.d-improvement.jp/learning/processing/2011-b/11.html
めっちゃ脇道に逸れまくってるけど、本来の目的は立体感のある絵、人体を描くっていうことだからそろそろ本腰入れよう
二点透視、三点透視の消失点の位置
楽をしようとしたけど…
二点透視、三点透視にもだいぶ慣れてきたので、これらを使った構図の絵をたくさん書いてみようと思い、値を入力するだけで消失点の位置を計算するようにExcelファイルを作ってみた。参考:http://www33.atwiki.jp/kndy/pages/37.html
が、よくよく考えて見れば、消失点の位置がわかった所で、またガイドを引いて、グリッドを作って…という操作を毎回するのは面倒だ。更に調べてみるとphotoshopにはアクションという便利な機能があって、同じ操作なら自動で繰り返し実行してくれるらしい。また、更に便利なのがphotoshopはjavascriptを実行することができるらしい。するとα、βが変わっても対応できるのでは無いかと思って調べてみた…がっ…駄目っ…難しすぎる。そもそも、プログラミングなど吉里吉里をいじった時にほんの少し触ったことがあるだけなので、できるはずがなかったのだ。
しかし、諦め半分で「遠近法 プログラム」などどグーグル先生に聞いてみたところ、自作のプログラムを公開している人がいた。努力の結晶であろうそのプログラムを勝手に使ってもいいのかわからないが、一応リンクを貼っておく。本当に感謝してもしきれない。
http://wfkn.blog.fc2.com/blog-entry-300.html
ーーーーーーーーーーーーーーーーー以下引用ーーーーーーーーーーーーーーーーーー
aは水平方向の視野の広さです。値は視野角のタンジェントです。
つまり、1に設定すれば左右それぞれ45度ずつ、すなわち90度の視野角があることになります。
bは垂直方向の視野の広さです。
デフォルトのこの値も実際にやってみると、視野は広く取りすぎている気がしますが、ゆがんだ遠近法というのも魅力だという風に思いなして放っておきます。
angle_yは立方体を垂直方向の軸のまわりに回転させる角度です。
要するに一点透視図法の時は、これが0で二点透視のときは0でないということです。
angle_xは何度見上げるかを表しています。
三点透視のときに使うものと思ってください。
あまり大きくすると変な感じです。なんでなんでしょうね。
nは線の多さです。
以下の部分からコピペすれば多分大丈夫です。
ーーーーーーーーーーーーーーーーー以上引用ーーーーーーーーーーーーーーーーーー
上の表で言うところの画角＝a、α=angle_y、β＝angle_xということだと思う。
僕は横方向の視野角だけで、垂直方向の視野角のことは考えてなかったみたいだ。
十進BASICをダウンロードして、実行してみた。
α＝45°、β=0°。画角は60°。つまりa=tan30°=0.57で計算した。
これは非常に便利だ。素晴らしい。
と思っていたら、更にphotoshopでのスクリプトも公開してあった…すごすぎ…
http://wfkn.blog.fc2.com/blog-entry-330.html
たぶんrequestが適当に引いた二本の直線から消失点を割り出し、補助線を引いてくれるもので、coordinateが指定した座標から伸びる補助線を書いてくれるもの…だとおもう。コレまでの苦労が嘘みたいなほど便利なのでこれからぜひ使って行きたい。
使う上でのメモ（引用）
・背景の補助線を使う際の手順
１．フォトショップで、例のスクリプトを使ってパスを作成。
２．そのままパスの線を描画させるとなぜかフリーズしがちなので一度閉じる。
３．レイヤーは分けたほうが、使いやすい。せいぜい３，４だけだ。贅沢に使うべし。
４．なんとなく大体のイメージをつくる。ラフのこと。
５．CLIPで、補助線にあわせるようにして定規をつくる。
６．注意すべきはPSDのまま保存すると定規は消えてしまうということ。
７．以後、描くのみ。
階段の描き方
以前に一点透視で階段を描いたが、二点透視でも描いてみた
特に何処が難しいということでは無いが、このままではいかんせん使いづらい。普通の階段は段の部分と踊り場、そして上りと下りの二つが並んでいるものだ。
しかし、この描き方では手間がかかる。そこで応用したいのが下の描き方だ。
http://tech.clip-studio.com/howto/illuststudio/tora/070
断面を描いて、パースに沿って段を作るという流れ。コレは楽だ。
