「2_8:p5.js Robotの描画」で見たロボットを描画するコードに変数を追加し、代入する数値を変えることで、ロボットの見た目を変化させるサンプルです。
変更する変数は次の3つです。
// パターン1
const y = 390;
const bodyHeight = 180;
const neckHeight = 40;
以下は変更しない固定のコードです。
const x = 60;
const radius = 45;
const neckY = y - bodyHeight - neckHeight - radius;
function setup() {
createCanvas(170, 480);
strokeWeight(2);
ellipseMode(RADIUS);
}
function draw() {
background(204);
// 首
stroke(102);
line(x + 2, y - bodyHeight, x + 2, neckY);
line(x + 12, y - bodyHeight, x + 12, neckY);
line(x + 22, y - bodyHeight, x + 22, neckY);
// アンテナ
line(x + 12, neckY, x - 18, neckY - 43);
line(x + 12, neckY, x + 42, neckY - 99);
line(x + 12, neckY, x + 78, neckY + 15);
// 胴体
noStroke();
fill(102);
ellipse(x, y - 33, 33, 33);
fill(0);
rect(x - 45, y - bodyHeight, 90, bodyHeight - 33);
fill(102);
rect(x - 45, y - bodyHeight + 17, 90, 6);
// 頭
fill(0);
ellipse(x + 12, neckY, radius, radius);
fill(255);
ellipse(x + 24, neckY - 6, 14, 14);
fill(0);
ellipse(x + 24, neckY - 6, 3, 3);
fill(153);
// 小さなライトグレーの円を3つ描く(3つの目)
ellipse(x, neckY - 8, 5, 5);
ellipse(x + 30, neckY - 26, 4, 4);
ellipse(x + 41, neckY + 6, 3, 3);
}
パターン1の変数の値で実行すると、ロボットは次のように描画されます。
パターン2では次の値を代入します。
// パターン2
const y = 460;
const bodyHeight = 260;
const neckHeight = 95;
その結果です。
パターン3と4のコードと、その結果です(左がパターン3、右がパターン4)。
// パターン3
const y = 310;
const bodyHeight = 80;
const neckHeight = 10;
/ パターン4
const y = 420;
const bodyHeight = 110;
const neckHeight = 140;