この記事は 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()することで元にもどるようです。

参考

p5.js reference | push()
p5.js reference | pop()