3_3:p5.js ロボット四変化

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;

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA