見出し画像

趣味としてのクリエイティブ・コーディング:103:y軸が逆!に慣れよう

趣味としてのクリエイティブ・コーディング 座標編、p5.js や Processing での座標に慣れるため、今回は演習をしていきましょう。

演習のコードは p5.js で、実行は Web 上で簡単に実行できる OpenProcessing を使いたいと思います。

OpenProcessing の使い方は前回の記事を参照ください。
趣味としてのクリエイティブ・コーディング:102:OpenProcessing を使おう

習うより慣れよ

第一回で説明のとおり、p5.js や Processing の座標、原点と xy軸はこの図のようになっています。

この図を見て意味わかりますよね?

「原点が左上、x 軸方向は左から右、y 軸方向は上から下に値が大きくなる。一般的なグラフとかとは y 軸方向が逆。」ということは頭の中では十分理解できると思います。

では、あとは慣れるだけ!

実際に線を引いて慣れていきましょう。
線を引くには line() を使います。

書き方はこう。

line(始点の x, 始点の y, 終点の x, 終点の y)

p5.js リファレンス:line()
https://p5js.org/reference/#/p5/line

始点 0, 0 から 終点 250, 200 まで線を引く場合ならこうです。

line(0, 0, 250, 200)

下記のコードを OpenProcessing にコピペして実行してみてください。

※もちろん、全て打ち込んでから実行しても OK!その方が勉強になりますよ!
function setup() {
 createCanvas(500, 400);
 background(240);
 fill(255);
 stroke(0);
 noLoop();
}
function draw() {
 rect(0, 0, width, height);
 line(0, 0, 250, 200);
}

こうなりましたか?


始点と終点は逆でも結果は同じになります。

 line(0, 0, 250, 200);
 line(250, 200, 0, 0);

どちらでも結果はこう。


練習問題1

じゃあ、今の状態からこのメールのアイコンみたいな感じにするにはどうしたらいいでしょう?

斜めの線を新たに一本引けばいいですよね。
その線の始点はさっきの線の終点と同じだから 250, 200 ですね。

終点の x軸側は右側、つまりプラス方向に伸びて横幅いっぱいまでだから width あるいは 500 でもいいです。
座標の値を意識する練習のために 500 の方を採用しましょう。

終点の y軸側は上、つまりマイナス方向に伸びて原点まで行ってるので 0。

つまりこれを追加ですね。

line(250, 200, 500, 0);

もちろん始点と終点が逆の

line(500, 0, 250, 200);

でも OK ですよ。

練習問題2

それでは、今書いた 2つの line() のカッコの中の値を変えてバッテンにするには?


解答例

line(0, 0, 500, 400);
line(0, 400, 500, 0);

練習問題3

次は line() を2つ追加して真ん中に十字を書いてみましょう。


解答例

line(0, 200, 500, 200);
line(250, 0, 250, 400);

練習問題4

今書いた 2つの line() を左に 1/4幅、上に1/4高さだけ移動してみて。


解答例

line(0, 100, 500, 100);
line(125, 0, 125, 400);

練習問題5

2つ line() を追加してこう。


解答例

line(0, 300, 500, 300);
line(375, 0, 375, 400);

練習問題6

左上と右下に小さいバッテン。


解答例

line(0, 100, 125, 0);
line(375, 400, 500, 300);

次は四角形を描きましょう

だいぶ慣れてきましたか?
次は直線じゃなくて四角形を描いてみましょう。

四角形を描くには rect() を使います。

書き方はこう。
rect(基点の x, 基点の y, 四角形の幅, 四角形の高さ)

p5.js リファレンス:rect()
https://p5js.org/reference/#/p5/rect

基点は四角形の左上、幅は右方向、高さは下方向になります。

基点の位置は rectMode() で変えられますが、今回は使いません。

試しに先のコードに基点 250, 200、幅が 250、高さが 200 の四角形を追加すると…

rect(250, 200, 250, 200);

こうなります。

四角形の中が白く塗りつぶされるのでこうなります。

ちょっと分かりづらいので灰色で塗りましょう。
下記を rect() の直前に入れてください。

fill(200);


練習問題7

では、この四角形を上に 1/4高さ、左に 1/4幅移動してみてください。
移動だから基点が変わるだけですよ。


解答

rect(125, 100, 250, 200);

練習問題8

じゃあ、最後です。
高さが 20 ずつ増えていく、段の幅が 50 の階段を追加して下さい。
ヒントは 「基点はそこじゃない」です。


解答例

rect(125, 80, 50, 20);
rect(175, 60, 50, 40);
rect(225, 40, 50, 60);
rect(275, 20, 50, 80);
rect(325, 0, 50, 100);

慣れるには数こなすしかない!

いかがでしょう?最後の問題はちょっと引っかかったのではないでしょうか?

引っかかったとしても大丈夫。大抵の人はこれ引っかかります。
同じようなことに何回も引っかかりながら繰返しこなしていくうちに慣れていくものです。
安心して引っかかりまくってください。👍

もしすんなり一発で書けたならあなた天才!もう卒業です!





この記事が面白かったらサポートしていただけませんか? ぜんざい好きな私に、ぜんざいをお腹いっぱい食べさせてほしい。あなたのことを想いながら食べるから、ぜんざいサポートお願いね 💕