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

確かに 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つを意識していれば何も怖いことはありません。

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