お絵描き 関数とパラメータ
p5.jsエディタを開き、ログインしてください。ログイン後、下のプログラムを入力してください。 code:ex00.js
'use strict';
function setup() {
createCanvas(400, 400);
// 始点(100,150)から幅120、高さ80の四角形
rect(100,150,120,80);
}
function draw(){
//ここでは、background(220)をコメントにしましょう、もしくはdraw()全体を消してください。
//background(220);
}
最初に開いた画面からの追加は２箇所（コメントを除く）
'use strict';
rect(100,150,120,80);
変更は１箇所です。
background(220); -> //background(220);
これを実行すると、画面の右側に白い四角形が描画されます。
簡単な説明
'use strict'
これから作成するプログラムには、１行目に必ず入れてください。
rect(100,150,120,80);
始点（100,150）から、幅120、高さ80の四角形を描く関数の呼び出しです。
// background(220);
// は、その位置から行末までをコメント（プログラムとして解釈しない）にするという意味です。実行時は無視されます。
コメントは、後でも説明しますが非常に重要な役割を果たしますので、プログラムに直接関係無いからと言って軽視しないでください。
注：多くの文末には、「;」があります。これは、文の終わり（1命令の終了）という意味です。行末の場合は省略可能ですが、なるべく付ける癖をつけましょう。
現代のプログラミングでは、関数の利用と作成が中心となっています。ここで登場している関数は、3つ（createCanvas, rect, background）です。関数は、あるまとまった作業や機能を提供してくれる命令の集合です。
createCanvas ()関数は、キャンバスの作成、rect()関数は四角形の描画、background()関数は背景色の塗りつぶしという機能を提供してくれます。これをプログラマが一から作成することは困難であり、非効率的です。我々は関数の使い方を覚えながら、いろいろな図形の描画やゲームなどの作成をすることがわりと簡単にできます。 p5jsで準備してくれている関数は非常に多彩です。ここでは2次元の描画しか実習しませんが、3次元の描画も可能です。もちろん、それらすべての使い方や仕様を覚える必要はありません。Referenceがありますので、必要に応じて参照してください。 また、多くのサンプルもありますので、そちらも参照してください。 p5.js では、プログラムを起動するとまず最初にシステムがsetup()関数を呼び出します。その関数の呼び出しが終了すると、draw()関数を繰り返し呼び出します。setup()関数やdraw()関数を我々が自由に作成すると、その命令にしたがって描画が進んでいきます。 ともかく、setup()関数を作って、p5.jsの関数をみていきましょう。ここでは、キャンバスを作成し、そこに幅120、高さ80の四角形を描くプログラムです。
function setup(){
}
はsetupという関数の定義です。この関数は、p5.jsを実行したときに最初にシステムから呼ばれます。
{ ... } は関数の定義するブロックの開始と終了です。ブロックは、複数の(命令)文をまとめる役割をします。
はキャンバスを幅400、高さ400で作成する関数です。ここで、400, 400はパラメータで、その値が関数に渡されます。
関数はその値に応じてキャンバスを作成します。
3行目：コメント、プログラムの実行時には無視されます。 4行目：rect(100,150,120,80)は四角形を描く関数の呼び出しです。関数はパラメータを使って（ない場合もある）、実行するときの動作を決定します。ここでは、4つのパラメータを与えており、その意味は最初の2つが四角形を描く位置、 始点(100,150)です。3番目が幅 (120)、4番目が高さ (80) です。それらに具体的な数値を与えています。パラメータの順序やその意味、値の範囲などは関数作成者が決定し、その使い方をマニュアルなどで公開します。JavaScriptではパラメータは位置づけ式なので、パラメタの順序（位置）でその値の割当が決まります。 p5.jsで使える関数や定数はp5.js のReferenceにあります。わからない場合は、常にそれを参照してください。例もたくさんありますので、参考になります。rectの例 p5.jsでの座標系は、左上隅が原点（0,0）で、横方向がxで右方向が正、縦方向はyで下方向が正です。
https://scrapbox.io/files/61e912ab8323fe001dc85859.svg
角度に関しては、水平方向が0度、そこから下に向かって正の角度となります。
プログラムは通常上から下に命令文を実行するので、どこに文を入れるかで最終的な図が変わって来ます。
例えば、2つの四角形を重なるようにして描くとどうなるでしょうか。rect(50,50,90,160);を先の四角形の前に描いたときと後で描いたときで、重なりが違うと思います。p5.jsでは、図形は上書きされていくので、後ろにある図は隠れてしまいます。透明度をつけると後ろの図形も透けて見えます。
図形に色を塗るには、fill()関数を使います。例えば黄色に塗るには fill(255,255,0);を図形を描く前に実行します。 また、stroke(200,100,230); のようにすると、（縁取り）線の色が変わります。noStroke()やnoFill()のようにすると、透明になります。また線の太さは、strokeWeight(3);のようにすると、3pixelの太さになります。