プログラミング入門・p5js
p5jsが得意としているのは、デジタルアートを作ることですが、プログラミングをはじめて勉強するのに、これ以上の環境はないでしょう
１．プログラムとは
プログラムとは「コンピュータへの命令書」のこと！
命令書は英語や記号でコンピュータにタイプしていきます。
タイプし終わったら、コンピュータに「これやっといて」と指示をだす感じです。
２．命令の形式
プログラミング言語は数多く存在しますが、ほとんどの言語に「共通している形式」を紹介します。
まず次の４つの例を見てください。
命令１（）；
命令２（ 情報1 ）；
命令３（ 情報１，情報2 ）；
命令４（ 情報１，情報2，情報3，・・・・ ）；
というように、命令語の最後には（ ）；（ カッコとセミコロン）が付いています。
また、命令によってはカッコの中にカンマで区切って情報を書くものもあります。
実習：ここでp5jsのエディタ（命令をタイプする画面）に最初からタイプしてある
createCanvas(幅、高さ）と background(赤、緑、青）という２つの命令を見ていきましょう。
ここをクリックすると下のエディタが別のタブで開きます。 注意：翻訳するかどうか尋ねられることがありますが、「翻訳しない」を選択してくださいね。
３．つぎにキャンバスに円を描く命令と、キャンバスの座標について理解していきましょう。
円を描けという circle命令 は（）の中に次の３つの情報を指定します。
circle( ｘ, ｙ, 直径 ）；
ｘ座標０はキャンバスの左端で
ｙ座標０はキャンバスの上端になります。
指定した座標に円の中心が来ます。
４．ｐ５ｊｓの命令を出す仕組み（ちょっとだけ特殊です）
p5jsは、エディタ（命令をタイプするところ）の左上の「▷ボタン」を押すと、
function setup()の｛｝の間に書かれている いくつかの命令を１度だけコンピュータに出します。
function setup(){
命令１（）；
命令２（）；
}
setup内の命令を出し終わると、p5jsは、function draw()の｛｝の間に書かれている いくつかの命令を
停止ボタンを押すまで繰り返してコンピュータに出し続けます。
function draw(){
命令３（）；
命令４（）；
}
つまり、p5jsは｛ 命令１と命令２ ｝を出した後、｛ 命令３と命令４ ｝をずっと繰り返して出し続けるということです。
また、
プログラムの中に出てくる「＝」の記号は、「書き込め」という意味で、等しいという意味で使いません。
ｘ＝５；
の場合、「カードｘに５を書き込め」という意味になります。
今の段階では訳が分からないかもしれませんが、動画を見れば納得できると思います。
実習：ではこの仕組みを利用して、円を動かしてみましょう。
５．「命令を出す条件」を指定するｉｆというものを理解していきましょう
次のようにifで「命令を出す何らかの条件」を書いておくと、条件を満たした時だけ命令１と命令２を出します
ｉｆ（命令を出す条件）｛
命令１（）；
命令２（）；
｝
※命令が複数ない場合、つまり１つの時は｛ ｝を省略できます。
６．「命令を繰り返す条件」を指定するｗｈｉｌｅというものを理解して行きましょう
次のようにwhileで「命令を繰り返す何らかの条件」を書いておくと、
条件を満たしている間、命令１と命令２を繰り返して出し続けます。
ｗｈｉｌｅ（命令を繰り返す条件）｛
命令１（）；
命令２（）；
｝
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ここまで、命令をタイプしている時に「なるほど～」という言葉が頭の中に浮かんできているなら、プログラムの基本はばっちりです。
おまけ・・・コピペするだけで実行できます。
let cx,cy,vx,vy;
function setup() {
createCanvas(400, 400);
//中心点の座標
cx = width / 2;
cy = height / 2;
}
function draw() {
//中心点からのベクトル
vx = mouseX - cx;
vy = mouseY - cy;
background(100, 160, 255);
i = -5;
while (i <= 5) {
//下のface命令を呼び出す
face(cx + vx * i, cy + vy * i);
face(cy + vy * i, cx - vx * i);
i += 1;
}
}
//自分で作ったface命令。（関数と言います）
// x, y の位置に顔を書きます。
function face(x, y) {
fill(255, 255, 0);
circle(x, y, 100);
fill(255);
circle(x - 20, y, 30);
circle(x + 20, y, 30);
fill(0);
circle(x + 15, y, 10);
circle(x - 15, y, 10);
fill(255, 200, 200);
circle(x, y + 30, 20);
}