5_7：ロボットに変換を組み込む p5.js JavaScript

「4_8：応答するロボット p5.js JavaScript」で作成したロボットに、translate()とrotate()、scale()関数を組み込みます。

次のリンクをクリックすると、実際の動作が確認できます。「ロボットに変換を組み込む」

const bodyHeight = 180;
const neckHeight = 40;
const radius = 45;
const neckY = -1 * (bodyHeight + neckHeight + radius); // => -265

function setup() {
    createCanvas(360, 480);
    strokeWeight(2);
    ellipseMode(RADIUS);
}


function draw() {
    background(204);
    // 以降の描画物全部を(mouseX, height - 40)に移動
    translate(mouseX, height - 40);
    // マウスが押されたら60%に縮める
    if (mouseIsPressed) {
        scale(0.6);
        // 放されたら元に戻す
    }
    else {
        scale(1);
    }

    // 胴体
    noStroke();
    fill(102);
    ellipse(0, -33, 33, 33);
    fill(0);
    rect(-45, -bodyHeight, 90, bodyHeight - 33);

    // 首
    stroke(102);
    line(12, -bodyHeight, 12, neckY);

    // 毛髪
    push(); // => 座標システムを分離
    translate(12, neckY); // => この変換をここだけに限定
    const angle = -PI / 30.0;
    for (let i = 0; i <= 30; i++) {
        line(80, 0, 0, 0);
        rotate(angle); // => この変換もここだけに限定
    }
    pop(); // =>  座標システムを分離

    // 頭
    noStroke();
    fill(0);
    ellipse(12, neckY, radius, radius);
    fill(255);
    ellipse(24, neckY - 6, 14, 14);
    fill(0);
    ellipse(24, neckY - 6, 3, 3);
    fill(153);
    // 小さなライトグレーの円を３つ描く(３つの目)
    ellipse(0, neckY - 8, 5, 5);
    ellipse(30, neckY - 26, 4, 4);
    ellipse(41, neckY + 6, 3, 3);
}