push()

独自のスタイルと変換を含む描画グループを開始します。

デフォルトでは、fill()のようなスタイルや rotate()のような変換は、 その後のすべての描画に適用されます。push()とpop() 関数を使用すると、スタイルと変換の効果を特定のグループの図形、画像、テキストに限定できます。 例えば、図形のグループをマウスに追従させて移動させることができますが、スケッチの他の部分には影響を与えません：

// 描画グループを開始します。
push();

// 原点をマウスの位置に移動します。
translate(mouseX, mouseY);

// 顔のスタイルを設定します。
noStroke();
fill('green');

// 顔を描きます。
circle(0, 0, 60);

// 目のスタイルを設定します。
fill('white');

// 左目を描きます。
ellipse(-20, -20, 30, 20);

// 右目を描きます。
ellipse(20, -20, 30, 20);

// 描画グループを終了します。
pop();

// 虫を描きます。
let x = random(0, 100);
let y = random(0, 100);
text('🦟', x, y);

上記のコードスニペットでは、虫の位置はtranslate(mouseX, mouseY)の影響を受けません。 なぜなら、その変換はpush()とpop()の間に含まれているからです。 虫は予想通りキャンバス全体を移動します。

注意：push()とpop()は常にペアで呼び出されます。 両方の関数が描画グループを開始し終了するために必要です。

push()とpop()はネストして サブグループを作成することもできます。例えば、上記のコードスニペットを変更して カエルの目により詳細を加えることができます：

// 描画グループを開始します。
push();

// 原点をマウスの位置に移動します。
translate(mouseX, mouseY);

// 顔のスタイルを設定します。
noStroke();
fill('green');

// 顔を描きます。
circle(0, 0, 60);

// 目のスタイルを設定します。
fill('white');

// 左目を描きます。
push();
translate(-20, -20);
ellipse(0, 0, 30, 20);
fill('black');
circle(0, 0, 8);
pop();

// 右目を描きます。
push();
translate(20, -20);
ellipse(0, 0, 30, 20);
fill('black');
circle(0, 0, 8);
pop();

// 描画グループを終了します。
pop();

// 虫を描きます。
let x = random(0, 100);
let y = random(0, 100);
text('🦟', x, y);

このバージョンでは、各目を描くコードはそれぞれ独自のpush()とpop()関数の間に 含まれています。これにより、描画の正しい部分に詳細を追加しやすくなります。

push()とpop()は 以下の関数の効果を含みます：

• fill()
• noFill()
• noStroke()
• stroke()
• tint()
• noTint()
• strokeWeight()
• strokeCap()
• strokeJoin()
• imageMode()
• rectMode()
• ellipseMode()
• colorMode()
• textAlign()
• textFont()
• textSize()
• textLeading()
• applyMatrix()
• resetMatrix()
• rotate()
• scale()
• shearX()
• shearY()
• translate()

WebGLモードでは、push()とpop()は いくつかの追加のスタイルの効果も含みます：

• setCamera()
• ambientLight()
• directionalLight()
• pointLight() texture()
• specularMaterial()
• shininess()
• normalMaterial()
• shader()