この記事は Qiita p5js アドベントカレンダー16日目の記事です。
これはなに
p5.jsが用意している関数について理解を深める記事です。
今回はpush()とpop()について。
pushとpop
shapeなどの設定を保存するためにpushを利用し、popで元に戻す。
そんな使い方をします。
リファレンスより
push()関数は、現在の描画スタイル設定と変換を保存し、pop()関数はこれらの設定を復元する。これらの関数は常に一緒に使用されることに注意してください。これらの関数により、スタイルと変換の設定を変更し、後で元の設定に戻すことができます。push()で新しい状態が開始されると、現在のスタイルとトランスフォームの情報を基に構築されます。push()とpop()関数を埋め込むことで、より多くの制御を行うことができます。(デモは2番目の例を参照してください)。
push() には、現在の変形状態や、以下の関数で制御されるスタイル設定に関する情報を格納する。fill(), noFill(), noStroke(), stroke(), tint(), noTint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), など。textAlign(), textFont(), textSize(), textLeading(), applyMatrix(), resetMatrix(), rotate(), scale(), shearX(), shearY(), translate(), noiseSeed() の各項目。
WEBGL モードでは、追加のスタイル設定が保存されます。これらは、次の関数で制御されます：setCamera(), ambientLight(), directionalLight(), pointLight(), texture(), specularMaterial(), shininess(), normalMaterial() および shader().
push()とpop()で保存、呼び出し可能な情報は上記の関数に限られているようです。
shapeのスタイルに関すること、またWEBGLモードでは3Dオブジェクト用の関数が追加されています。
Type
push(): void;
pop(): void;
設定の保存、呼び出しだけなので渡す引数もなく、返り値もありません。
どんな時に使えそうか
現在の描画スタイル設定と変換を保存し、pop()関数はこれらの設定を復元する
という挙動を私は少し勘違いしていたようなのでまとめます。
（てっきり、push()以降の情報を保存するものと思っていました）
次のようなコードを書いて、ドットを３つ出してみましょう。
function setup(){
createCanvas(200, 200);
background(100);
noStroke();
}
function draw() {
stroke('red')
strokeWeight(10)
point(10, 10)
// これまでの設定（赤色でストローク幅10）を保存
push()
stroke('blue')
strokeWeight(20)
point(30, 30)
// 保存していた設定が蘇る
pop()
point(50, 50)
}
一つ目の丸はstroke('red')が効いているので赤色に染まっています。
その後push()とpop()の間に上書きしたい情報を書きます。
pop()以降はstroke('red')とstrokeWeight(10)が再度有効になるため、一つ目と三つ目の丸は同じものになりました。
このようにある部分だけを例外にして、その他は同じスタイルを使いたい時に使えます。
ちなみにネストもできて、2回push()をした場合は2回pop()することで元にもどるようです。