トップページに、Processingについて書いた記事を、辞書のように見つけやすくしてみました

【Processing】座標について分かりやすく解説【方眼ノートを使うと理解しやすく、作品をつくりやすくしてくれる】

【Processing】座標について分かりやすく解説【方眼ノートを使うと理解しやすく、作品をつくりやすくしてくれる】
  • URLをコピーしました!
ワタタク

Processingの座標ってXとYが出てくるんかぁ……。数学が苦手なんだけど、分かるんかなぁ?

僕は若い頃、自分の意見を言えず、数学が嫌いなのに理系の高校の理数科に行き、その後に文系の大学に進学した僕でも、Processingの座標を理解できています。

XとYが出てきて「嫌だなぁ。」と感じるかもしれませんが、Processingの座標を超簡単に言いますと、出発場所から、5歩右に歩いて、5歩下に歩く。という感じです。

Processingの座標が分かりやすいように、方眼ノートの使い方も書いていますので、参考にしてください。

この記事を書いた人
  • クリエイティブコーディング初心者が、アーティストとして活躍するまでの上達の過程を発信
  • コンセプトは「クリエイティブコーディング1万時間の歩き方」
  • 参考にしてもらえるブログにするため、Processingを独学で勉強して共有中

目次

【Processing】座標の英語訳と読み方と意味

座標の英語訳を知っていると、Processingの英語のコンテンツ(Youtubeなど)で、スムーズに理解しやすくなります。

座標の英語訳について
座標の英語coordinate
英語の読み方コーディネイト

あわせて知っておきたい座標に関する英語

英語意味
X coordinateX座標
Y coordinateY座標
locate the coordinates座標を求める
coordinate system座標系
coordinate axis座標軸
ワタタク

コーディネイトって読んだり聞こえたりしたら、座標のことを言ってるんだなと思えるように。

【Processing】なぜ座標について理解しておく必要があるのか

Processingの座標についての知識は、Processingで作品を描くために必要です。

座標についてしっかりと分かっておくと、作品の位置を調整しやすいです。

ワタタク

簡単に分かるので、心配しなくてもOK。

【Processing】座標について分かりやすく解説【画像つき】

Processingの座標について。

STEP
X軸について

X軸は横です。

Processingのx軸の画像。
STEP
Y軸について

Y軸は縦です。

Processingのy軸の画像。
STEP
(Xの数値, Yの数値)という書き方をする

Xが0、Yが0なら(0, 0)と書きます。

STEP
(0, 0)の原点の位置について

(0, 0)の位置

Processingの(0, 0)の座標の位置。
STEP
(5, 0)の位置について

Xが5、Yが0の位置

Processingの(5,0)の座標の位置。
STEP
(5,5)の位置について

(5, 5)の位置

Processingの(5,5)の座標の位置。
ワタタク

ProcessingでXを書く必要があるなら横の位置、YはXから縦に移動する位置と覚えておくといいね。

Processingの座標のXとYの数値は、自分で決めることができる

Processingは、XとYの数値は自分で決めることができます。

設定したいXとYの大きさXとYの表記
Xが1000
Yが1000
(1000, 1000)
Xが1600
Yが900
(1600, 900)
Xが1000
Yが1500
(1000, 1500)

実際にProcessingで、XとYの数値は自分で決めるときは、size()を使います。

書き方に関しては、以下の記事を参考にしてください。

SNSで作品を共有するときに適切な、画像サイズを調べる時間も節約できます。

Processingの座標の理解は、方眼ノートが役に立つ

Processingの座標は、方眼ノートを使うと理解しやすく、作品の位置を調整しやすいです。

例えば(1000, 1000);の画像サイズに合わせて作品をつくるとき、方眼ノートに以下のように書きます。

Processingの(1000, 1000)の画像。

左下の(200,800)に作品を描きたいなら、その位置をマークします。

Processingで、(200,800)の位置を示す画像。

(200,800)の位置を確認できたら、ellipseやrectなどで作品を書いていきます。

【Processing】座標を学んだ後は、世界の見え方がこう変わる

四角が並んでいるものを見るとProcessingの座標に見える。

四角が並んでいる物を見ると、Processingの座標が思い浮かぶ。

スタディプランナーを見ると、Processingの座標に見える。

スタディプランナーの四角が並んでいるところを見ると、Processingの座標が思い浮かぶ。
ワタタク

お風呂のタイルもProcessingの座標を思い浮かべてしまう。縦に2枚を意識して見たら(1000, 1500)かぁ。Pinterestのサイズ。何を描こうかなぁ。みたいな感じ。

方眼ノートを使いこなして、Processingの作品のアイデアをメモするのが重要

僕は作品をつくるとき、方眼ノートにアイデアを描いています。

頭の中だけで作品の位置を調整しにくいのですが、方眼ノートを使えば位置を調整しやすくなりました。

作品が複雑になればなるほど、Processingの座標を確認するのに方眼ノートが役に立ちます。

初心者の段階から、方眼ノートを使った作品づくりに慣れておくといいですね。

ワタタク

それでは今日もレッツワクワクコーディング。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次