【p5.js】色の基本、コメントとエラー、コメント：Coding Train(p5.js1.4〜1.6)

p5.jsの続きです。ダン先生のCoding Train、前回は「1.3 」でShapes & Drawingを見ました。今回「1.4」でColorです。それではいきましょう！

【目次】

前回のおさらい
1.4: Color - p5.js Tutorial
1.5: Errors & Console - p5.js Tutorial
1.6: Code Comments - p5.js Tutorial
最後に

※参考：前回の記事
【p5.js】基本書式とsetup（キャンバス描画）、draw（四角、線、四角の原点） Coding Train(p5.js 1.3) - クモのようにコツコツと

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

前回のおさらい

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

前回のコード

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

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

1.4: Color - p5.js Tutorial

「1.4」の動画

字幕の設定を日本語に変更する。

歯車＞字幕＞「英語-CC(English)」に変更

さらに

歯車＞字幕＞自動翻訳＞日本語

これで日本語字幕が入る。では始めましょう！

色（RGB）の基本

RGBによる色指定の基本（背景色を変更する）

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

function draw() {
   background(100); //引数一つはグレースケール
  line(0, 50, 400, 300);
  rectMode(CENTER);
  rect(200, 150, 150, 150);
}

色がピンクなのはなぜか？→デジタルカラーはR（赤）G（緑）B（青）の掛け合わせでできている
背景の関数background()に引数がある。220はR、0はG、200はB
この数字を低くすると黒になる。高くすると白になる。ペンキと違って光は混ぜるほどに明るくなる
数値の幅は0〜255。それより大きい場合は255と同じ
RGBの3つが等しいとグレースケールになる
1つしか値を入れないとグレースケールになる。

色を適用する関数（background()、fill()、stroke()）

背景色以外の色変更。塗りつぶしと輪郭。

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

function draw() {
   background(100); //引数一つはグレースケール
  rectMode(CENTER);
  fill(0,0,255); //塗りつぶし
  stroke(0,255,0); //輪郭
  rect(200, 150, 150, 150);
}

色の関数はbackground()以外にfill()、stroke()がある。fill()は塗りつぶし、stroke()は輪郭。
行line()関数は取り除く
fill(0,0,255)を追加すると塗りつぶしが青になる
stroke(0,255,0)を追加すると輪郭が緑になる

楕円（ellipse()）を追加、色指定の書き順

楕円を追加して色を変更する。色指定の書き順。

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

function draw() {
   background(100);
  rectMode(CENTER);
  fill(0,0,255);
  stroke(0,255,0);
  rect(200, 150, 150, 150);
  stroke(255); //楕円の塗りつぶし
  fill(255,0,0); //楕円の輪郭
  ellipse(150,250,100,75); //楕円追加
}

楕円ellipse()を追加する。
ellipse(150,250,100,75)で位置は左から150px、上から250px、サイズは幅が100px、高さが75px
上から下に処理されるためellipse()を四角（rect()）より下に書くと後に描画されて四角の上に重なる
楕円の塗りつぶしはfill(255,0,0)で赤に。楕円より下に書くと色がつかないため、上に書く
楕円の輪郭はfill(255,0,0)で白に。これも楕円の上に書く

塗りつぶしなし（noStroke()）、輪郭なし（noFill()）

塗りつぶしや輪郭をなくすための方法

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

function draw() {
   background(100);
  rectMode(CENTER);
  noFill(); //塗りつぶしなし
  stroke(0,255,0);
  rect(200, 150, 150, 150);
  noStroke(); //輪郭なし
  fill(255,0,0);
  ellipse(150,250,100,75);
}

輪郭をなくしたい場合srtoke(0)だと黒い輪郭になる。noStroke()にする
同様に塗りつぶしをなくしたい場合はnoFill()にする。輪郭線だけになる

RGBA（透明設定）と線の太さ（strokeWeihgt）

透明設定と線の太さの変更

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

function draw() {
   background(100);
  rectMode(CENTER);
  fill(0,255,0);
  stroke(0,0,255);
  strokeWeight(4); //線の太さ
  rect(200, 150, 150, 150) ;//RGBA
  noStroke();
  fill(255,0,0,175);
  ellipse(150,250,100,75); 
}

透明設定はRGBAといって4つ目の引数を追加する（A＝アルファのA）
楕円のrect()に4つ目の引数75を追加すると半透明になる（0は変化なし、255は消える）
ちなみに引数を2つしかかかない場合はグレースケールと透明設定になる
strokeWeight()で線の太さを変えられる。引数を4にすると4pxの太さになる

1.5: Errors & Console - p5.js Tutorial

次の動画「1.5」。こちらはp5.js固有ではなくJS全般のコンソールとエラーについて。

setup()関数の中にprint("hello")と書いても画面は何も変わらない
コンソールを見ると「hello」と記述されている
このコンソールにはエラーが表示される
例：stroke()の中の引数のカンマを取ると「カンマがない」というエラーになる
例：srtokeWeight()をstrokeweight()と書くと「その関数はない」というエラーになる（JSは大文字小文字を区別する）
例：unicornMagic()という関数を関数をかいても「そんな関数はない」というエラーになる
行末のセミコロン;を削除してもエラーにはならない。セミコロンはJSにとってはオプションな存在でなくても行末を判断可能
行末にセミコロン;があると、1行に繋げて別の行と判別される
このセミコロン;を取るとエラーになる（セミコロンはセーフティネットになる）