5_6：変換状態の保存と復元 p5.js JavaScript

変換の効果が以降の関数に影響しないように分離させることができます。push()関数は現在の座標システムのコピーを保存し、pop()関数は保存した座標システムを復元します。これらの関数は、あるシェイプにだけ特定の変換が必要で、ほかのシェイプには適用したくない場合に役立ちます。push()とpop()は必ずペアで使用します。

変換の分離

変換をpush()とpop()ではさむことで、pop()以降の変換と分離させます。

function setup() {
    createCanvas(120, 120);
    background(204);
}

function draw() {

    push(); // =>現在の座標システムのコピーを保存して、新しい描画状態を開始
    // 新しい描画状態 => シェイプがマウスに追随する
    translate(mouseX, mouseY);
    fill(0, 255, 255)
    rect(0, 0, 30, 30);
    // 新しい描画状態を終える
    pop(); // => 保存した座標システムに戻すことで、元の状態に戻す

    // 座標軸を移動
    translate(35, 10);
    fill(255, 0, 0);
    rect(0, 0, 15, 15); // =>このシェイプはマウスに追随しない
}

複数のpush()とpop()

初期状態A => push() 新しい状態B => push() 新しい状態C => pop() １つ前の状態B => pop() 初期状態A といった制御が可能になります。

function setup() {
    createCanvas(130, 120);
    background(204);
    // 最初の描画状態 A
    ellipse(0, 50, 33, 33); // 左の円

    // 新しい描画状態Bを開始
    push();
    strokeWeight(10); // 線を太く
    fill(255, 0, 0); // 塗を赤く
    ellipse(33, 50, 33, 33); // 左から２つめの円

    // 別の新しい描画状態Cを開始
    push();
    stroke(0, 0, 255); // 線は青
    ellipse(66, 50, 33, 33); // 左から３つめの円

    pop(); // 前の状態Bに戻す
    ellipse(100, 50, 33, 33); // 右から２つめの円

    pop(); // 最初の状態Aに戻す
    ellipse(130, 50, 33, 33); // 右の円
}

push()とpop()

説明

push()関数は現在の描画スタイル設定と変換を保存し、pop()関数はその設定を復元する。これらの関数はいっしょに使用する必要がある。push()とpop()を使用することで、スタイルと変換設定を変更し、後で前のものに戻すことが可能になる。

push()は、現在の変換状態と、次の関数によって制御されるスタイル設定に関する情報を保存する。
fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textMode(), textSize(), textLeading()

シンタックス

push()
pop()

pushとpopのイメージ

pushは「押し下げる」、popは「跳ね上げる」というニュアンスでとらえることができます。push()とpop()ではさんだ変換を入れておく箱があるとします。これには上から押し付けるようにして変換を入れます。箱の底にはばねがついていて、ばねは変換が入れられると縮みます。変換は、前に入れたものほど下に、新しく入れたものほど上に来ます。これがpushです。

変換を取り除きたいときは、このばねの留め金をはずします。するとばねが伸びて一番上の変換(直近に入れた変換)がぽーんと跳ねて箱から飛び出ます。これがpopです。