p5.js入門その2

今度は図形に色を塗っていきます。
コードを以下の通りに書いていきましょう。

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

function draw() {
  background(220);
  fill(255, 255, 0)
  ellipse(200, 200, 80, 80);
}

丸が黄色く塗られているはずです。
丸以外でもこのように図形の後にfillを書くと色を塗ることができます。
引数の数字の意味は左から順に
赤、緑、青
の色の値です。
今回は赤と緑の色の値をマックスにしてるので黄色になりました。

次は以下のように書いてみましょう。

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

function draw() {
  background(220);
  ellipse(200, 200, 80, 80);
  stroke(255, 255, 0)
}

次は円の枠線が黄色になりました。
strokeは枠線を描写します。
引数はfillと同じように赤緑青の値です。

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

function draw() {
  background(220);
  ellipse(200, 200, 80, 80);
  stroke(255, 255, 0)
  
  strokeWeight(5)
}

strokeWeight枠線の太さを変えることができます。

これで描写はある程度のことができるようになりました。