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

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

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

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

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

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

この記事を書いた人

クリエイティブコーダー Watataku のプロフィール写真
ワタタク(Watataku)

上達の研究家 / アーティスト

「才能」ではなく「論理(システム)」で、人の心を動かす機能するアートを探究中

【文系・36歳・未経験】から独学でクリエイティブコーディングに挑戦し、独自の思考法で以下の実績を達成

  • 開始1年8ヶ月目までに公募6つに挑戦し、3つ入選(勝率50%)
  • 開始1年9ヶ月目に、虎ノ門ヒルズ ステーションタワー49階 スカイガーデン&プールのために制作した作品が展示される
目次

【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の座標を確認するのに方眼ノートが役に立ちます。

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

ワタタク

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

ワタタク(Watataku)
上達の研究家
アナログ絵画(2025.11~) × クリエイティブコーディング(2024.3~)

「不完全な人間(Analog)」が、「完全な論理(Algorithm)」を武器にどこまで行けるか。

手描きの一本の線(One)をコードで無限(All)に拡張し、再び一つの作品へ定着させる。「才能」ではなく「発見」と「システム」で描く、人生をかけた実験記録。

溢れる思考を、独自の脳内OS「Watataku Blueprint」で整理し、初心者から世界で活躍するまでの「激闘」と「攻略本」を公開しています。

▼【創作×上達】思考を「作品」に変える、モレスキン6冊の運用設計図
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次