【p5.js】基本書式とsetup（キャンバス描画）、draw（四角、線、四角の原点） Coding Train(p5.js 1.3)

p5.jsの続きです。前回から、Dan先生のCoding trainのp5.js系の動画の副教材を目指してオンライン写経を始めました。今回は「1.3」。JSとp5.jsの基本書式。setup関数によるキャンバス描画、draw関数の中に四角や線を描いて四角の原点変更、という内容。それではいきましょう！

【目次】

1.3: Shapes & Drawing - p5.js Tutorial
JSとp5.jsの基本とsetup()（描画キャンバス）
rect()で四角を描く
line()で線を描く
rectMode()で四角の原点を変える
最後に

※参考：前回記事
【p5.js】楽しく学ぶ重要性：Coding Trainのダン先生に付いていく！(p5.js 1.1〜1.2) - クモのようにコツコツと

※参考：p5.jsを習得するためにやった事まとめ qiita.com

1.3: Shapes & Drawing - p5.js Tutorial

動画はこちら。

https://www.youtube.com/watch?v=c3TeLi6Ns1E&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&t=0s

最初に「チーン」とベルを鳴らすので、その間に一時停止して、前回の記事に描いた自動翻訳設定をする。

※参考：【p5.js】楽しく学ぶ重要性：Coding Trainのダン先生に付いていく！(p5.js 1.1〜1.2) - クモのようにコツコツと

オンライン写経した完成物はこちら。

See the Pen p5.js (Coding Train 1.3) by イイダリョウ (@i_ryo) on CodePen.

JSとp5.jsの基本とsetup()（描画キャンバス）

前回のコードのセットアップsetup()の中にすでにいくつかの機能が書いてある。
JSの一般的な方法を説明する。命令（ファンクション、コマンド）の書き方
命令（数字, 数字, 数字);
　最後の数字はカンマを入れない。
setup()の中のcreateCanvas()の数字を打ち替えると描画キャンバスが変わる。createCanvasが命令、400とかは引数（400px）。幅、高さ。数字を何も入れないと100px、100pxになる。
命令は関数という。数字は引数という。
　関数（引数, 引数, 引数)
JSとp5。命令を実行するのはどちらか。関数の構文はJS言語で書いているから動く。関数createCanvas()はp5.js（ライブラリ）で定義されているから動く。p5.jsを使用しないとエラーになる。

JSの基本的な記法と、p5.jsライブラリとJSの関係。そしてsetup()は描画キャンバスの設定であることが解説されている。

JSコード

function setup() {
   createCanvas(400, 300);
}

createCanvas()の引数を400、300と打ち替えると高さが300pxになってキャンバスサイズが横長になる。

rect()で四角を描く

p5.jsのWebサイトのリファレンスを開くと機能一覧がある。この中にcreateCanvas()もある。まずは2Dプリミティブから始める。三角、四角、円、アークなどいろいろ試せる。最初は四角から始めてみよう。
コードブロックは中括弧（波括弧）で囲まれている。setup()はキャンバスを生成する。場所ドローdrow()は物を置く場所。そのドローdrow()の括弧の中を変えていく
rect()に4つの引数を入れるとrectは四角が作られる。4つの引数の意味は？
2Dのデカルト座標系。x、yは位置。X軸は横、Y軸は縦軸のグラフ。原点からの位置になる。p5.jsの原点はグラフと違って左上にある。
ピクセルは本当に小さいので3桁くらいににする400と打つと399pxの位置になる。これは0からカウントするため。
リファレンスのrect()を見ると5つ以上の引数がある例もある。角丸になっている。
　rect(x, y, w, h, [tl], []tr], [br], [bl])
　rectは関数名、x, y, w, hは引数。角括弧の引数はオプションになる。4つの引数はX座標、Y座標、wは幅、hは高さの順番。

rect()で四角を描いている。

JSコード

function draw() {
   background(220, 0, 200);
  rect(200, 150, 150, 150);
}

左上からX（横）軸で200px、Y（縦）軸に

line()で線を描く

ここまできた時点でこんなことを言っている。

さてこれを回転させたり、跳ねさせたり、どうやってゲームを作る？そこまで行けます。
プログラミングの仕組みは割り当てをして絵を描くところから始まります。肖像画を描いたり風景を描いたり。
私がしたことは長方形を描いただけ。２時間半しゃべってますw

まだまだ先は長いw

では、次に進む方法を教えましょう。p5のリファレンスページにいきます。
line()は線を引くことができる。これも4つの引数がある。
　line(x1, x2, y1, y2) 　xは最初のポイントのX座標、yはY座標の最初のポイント。zは3Dなのであとでやりましょう。
line(0, 50,400, 300)と打ってみる。線が0, 50から始まって400, 300で終わる。
おっと、悩ましい。50,のあとにカンマを入れ忘れてしまった。。JSはスペースやタブを無視するのでカンマの次のスペースはあってもなくても動く。逆にたくさんスペースを入れても動く。
ところで今見えているこの色はどうなっている？ヒントはbackground()にある。次回やりましょう。
書いた順番で線が四角の上や下に重なる。レイヤー状になっている。line()をrect()の上に持っていくと線が四角の下になる。後で書く物ほど上になる。

四角の次はline()で線を描く方法。書いた順によってレイヤー状に重なりが変わることも触れている。下に書くほど後に処理されるので上に重なる（イラレ、フォトショなどのレイヤーの概念と逆なので注意）

JSコード

function draw() {
   background(220, 0, 200);
  line(0, 50, 400, 300);
  rect(200, 150, 150, 150);
}

左上から横に0、縦に50の位置から線が始まり、横に400、縦に300の位置（キャンバスの右下）で線が終わる。rect()より上に書かれているので四角よし下にある。

rectMode()で四角の原点を変える

もう一つ紹介したい。何にしようかな、これにしよう。rectMode()は四角の原点を変える。初期は左上になっている。
引数をCENTERにすると四角の原点がセンターになる。
次回は色について説明する

四角の原点を変えるrectMode()について解説している。

JSコード

function draw() {
   background(220, 0, 200);
  line(0, 50, 400, 300);
  rectMode(CENTER);
  rect(200, 150, 150, 150);
}

四角の原点は初期は左上だったがrectMode()の引数をCENTERにしたら中心になった。なお、CENTERは小文字にしたら動かなかった。あと、引数無しのrectMode()だけを書いたら四角自体が画面から消えた。。

最後に

f:id:idr_zz:20190912065131j:plain

今回はJSとp5.jsの関係や基本書式についても触れたため、少し時間が長めの動画になったようです。見た目の成果物はあまり代わり映えがないですが、レイヤー構成など今後の理解を進めるためには大事な回だと思います。動画の最後に「次は色についてやる」と言ってましたね。次回はそちらをオンライン写経します。それではまた！

※参考：p5.jsを習得するためにやった事まとめ qiita.com