趣味としてのクリエイティブ・コーディング:101:座標って難しい?

最近「座標でつまずいてクリエイティブコーディングやめた」的な話をいくつか耳にしました。

確かに p5.js や Processing で使う座標は慣れが必要ですね。
それもあって、このシリーズではなるべく座標には触れないようにしてきました。

でも、いつまでも触れないわけにもいきません。ここからのシリーズで「座標」を克服してしまいましょう!

なぜ「座標」は難しいのか?

「点の位置を x軸と y軸上の値で表す」、これ言い方は硬いと思いますけど、言ってる中身はそんなに難しいわけじゃありません。

x = 10, y = 20 の点の位置がグラフ上のどこになるかはなんとなくわかるはず。

なのになぜ p5.js や Processing でプログラミングするときの座標は難しいと感じるのか?

その原因はたぶんこれだと思うんです。

・よく見るグラフと p5.js や Processing での y 軸方向が逆
・原点の移動
・極座標と回転、ときどき三角関数

y 軸の方向が逆

よく見るグラフって、こんな風だったり、

こんなだったりしますよね?

どちらも y 軸は下から上に向けて値が大きくなっていきます。

これが「普通」ってもんです。

ところが、p5.js や Processing のグラフはこうです。

x 軸は左から右にですが、y 軸は上から下に向けて値が増えていきます。
y 軸の方向が逆ですね。

さらに x = 0, y = 0 の位置(原点)が画面の左上隅になっています。
だからさっきのグラフをそのまま描こうとするとこうなります。

変でしょう?

変なんです。
p5.js や Processing のグラフは普通じゃないんです。「異常」なんです。

普通じゃないから、気をつけないとつまずいてしまうのは当たり前なんです。

ちょっと待って! y を反転させれば普通のグラフでは?

これでは使いづらいので、コーディングで必ず y にマイナスを掛けて、頭の中では「普通」のグラフで考えるということも出来ます。
でも、これはお奨めしません。

それをやるといつまで経っても p5.js や Processing での座標に慣れることが出来ずに、図形の移動や回転についていけなくなると思うからです。

慣れましょう!
意識するのは原点の位置と軸方向です。 この 2つを意識していれば何も怖いことはありません。

慣れるため、次回から一緒に練習して行きましょう。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

北海道産の小豆が高騰!ぜんざいの危機迫る! 健やかなぜんざいライフのため、サポートよろしくお願いします!

やめて!! 本気にしちゃうじゃない…♥
5

deconbatch

趣味としてのクリエイティブ・コーディング

全くのプログラミング初心者の方に向けた、一緒にクリエイティブ・コーディングしませんか、というお誘い
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。