Push e Pop

Você já viu que as transformações geométricas, como translação, rotação, escala e cisalhamento, são cumulativas: cada uma delas se soma às anteriores e afeta todos os comandos seguintes. Isso pode ser um problema quando você quer aplicar uma transformação a apenas uma forma, sem que ela influencie o restante do desenho. Para resolver isso, o p5.js oferece os comandos push() e pop().

O comando push() salva o estado atual do sistema de coordenadas, incluindo todas as transformações aplicadas e também configurações de estilo como cor e espessura de borda. O comando pop() restaura exatamente o estado que havia sido salvo pelo push() correspondente. Tudo o que estiver entre esses dois comandos fica isolado: as transformações e estilos aplicados nesse trecho valem apenas ali dentro e são descartados ao final.

Estrutura básica

push();
  translate(200,200);
  rotate(radians(45));
  // formas afetadas pelas transformações
pop();
// formas seguintes voltam ao estado anterior

Exemplo

Para um exemplo de como utilizar esses comandos, teste o Código 4.2 e veja que o segundo retângulo não é afetado pela rotação.

function setup() {
  createCanvas(800,600);
  push();
    translate(250,200);
    rotate(radians(30));
    rect(0,0,200,100);
  pop();
  rect(500,400,200,100);
}

Experimente criar vários blocos push() e pop() para desenhar diferentes formas transformadas de maneira independente, cada uma com sua própria rotação, posição ou escala. Esse padrão é a base para compor cenas complexas, animar múltiplos objetos e organizar desenhos que combinam muitas transformações sem que elas interfiram umas nas outras. Mais detalhes e exemplos podem ser encontrados na referência do p5.js.