[{"data":1,"prerenderedAt":485},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-transformacoes-push-pop":139,"-pcs3021-transformacoes-push-pop-surround":480},[4,8],{"title":5,"path":6,"stem":7},"","\u002F","index",{"title":9,"icon":10,"path":11,"stem":12,"children":13},"PCS3021","i-lucide-message-circle-code","\u002Fpcs3021","pcs3021",[14,17,48,74,92,108,124,133],{"title":15,"path":11,"stem":16},"Exemplo","pcs3021\u002Findex",{"title":18,"icon":19,"path":20,"stem":21,"children":22,"page":47},"Formas geométricas","i-lucide-drafting-compass","\u002Fpcs3021\u002Fgeometrias","pcs3021\u002F2.geometrias",[23,27,31,35,39,43],{"title":24,"path":25,"stem":26},"Retângulos","\u002Fpcs3021\u002Fgeometrias\u002Fretangulo","pcs3021\u002F2.geometrias\u002F1.retangulo",{"title":28,"path":29,"stem":30},"Elipses e Círculos","\u002Fpcs3021\u002Fgeometrias\u002Felipse","pcs3021\u002F2.geometrias\u002F2.elipse",{"title":32,"path":33,"stem":34},"Triângulos","\u002Fpcs3021\u002Fgeometrias\u002Ftriangulo","pcs3021\u002F2.geometrias\u002F3.triangulo",{"title":36,"path":37,"stem":38},"Linhas","\u002Fpcs3021\u002Fgeometrias\u002Flinha","pcs3021\u002F2.geometrias\u002F4.linha",{"title":40,"path":41,"stem":42},"Pontos","\u002Fpcs3021\u002Fgeometrias\u002Fponto","pcs3021\u002F2.geometrias\u002F5.ponto",{"title":44,"path":45,"stem":46},"Polígonos","\u002Fpcs3021\u002Fgeometrias\u002Fpoligonos","pcs3021\u002F2.geometrias\u002F6.poligonos",false,{"title":49,"icon":50,"path":51,"stem":52,"children":53,"page":47},"Transformações","i-lucide-rotate-3d","\u002Fpcs3021\u002Ftransformacoes","pcs3021\u002F2.transformacoes",[54,58,62,66,70],{"title":55,"path":56,"stem":57},"Rotação","\u002Fpcs3021\u002Ftransformacoes\u002Frotacao","pcs3021\u002F2.transformacoes\u002F1.rotacao",{"title":59,"path":60,"stem":61},"Translação","\u002Fpcs3021\u002Ftransformacoes\u002Ftranslacao","pcs3021\u002F2.transformacoes\u002F2.translacao",{"title":63,"path":64,"stem":65},"Escala","\u002Fpcs3021\u002Ftransformacoes\u002Fescala","pcs3021\u002F2.transformacoes\u002F3.escala",{"title":67,"path":68,"stem":69},"Cisalhamento","\u002Fpcs3021\u002Ftransformacoes\u002Fcisalhamento","pcs3021\u002F2.transformacoes\u002F4.cisalhamento",{"title":71,"path":72,"stem":73},"Push e Pop","\u002Fpcs3021\u002Ftransformacoes\u002Fpush-pop","pcs3021\u002F2.transformacoes\u002F5.push-pop",{"title":75,"icon":76,"path":77,"stem":78,"children":79,"page":47},"Programação","i-lucide-square-code","\u002Fpcs3021\u002Fprogramacao","pcs3021\u002F3.programacao",[80,84,88],{"title":81,"path":82,"stem":83},"Variáveis","\u002Fpcs3021\u002Fprogramacao\u002Fvariaveis","pcs3021\u002F3.programacao\u002F1.variaveis",{"title":85,"path":86,"stem":87},"Expressões numéricas","\u002Fpcs3021\u002Fprogramacao\u002Fexpressoes-numericas","pcs3021\u002F3.programacao\u002F2.expressoes-numericas",{"title":89,"path":90,"stem":91},"Laço FOR","\u002Fpcs3021\u002Fprogramacao\u002Ffor","pcs3021\u002F3.programacao\u002F3.for",{"title":93,"path":94,"stem":95,"children":96,"icon":107},"Imagens","\u002Fpcs3021\u002Fimagens","pcs3021\u002F4.imagens\u002F1.index",[97,99,103],{"title":98,"path":94,"stem":95},"Usando SVG",{"title":100,"path":101,"stem":102},"Exportando SVG","\u002Fpcs3021\u002Fimagens\u002Fexportando","pcs3021\u002F4.imagens\u002F4.exportando",{"title":104,"path":105,"stem":106},"Imagens Matriciais","\u002Fpcs3021\u002Fimagens\u002Fmatriciais","pcs3021\u002F4.imagens\u002F5.matriciais","i-lucide-pen-tool",{"title":109,"path":110,"stem":111,"children":112,"icon":123},"Animações","\u002Fpcs3021\u002Fanimacao","pcs3021\u002F5.animacao\u002F1.index",[113,115,119],{"title":114,"path":110,"stem":111},"Introdução à animação",{"title":116,"path":117,"stem":118},"Variáveis locais e globais","\u002Fpcs3021\u002Fanimacao\u002Fusando-variaveis","pcs3021\u002F5.animacao\u002F2.usando-variaveis",{"title":120,"path":121,"stem":122},"Eventos","\u002Fpcs3021\u002Fanimacao\u002Feventos","pcs3021\u002F5.animacao\u002F3.eventos","i-lucide-clapperboard",{"title":125,"icon":126,"path":127,"stem":128,"children":129,"page":47},"Vetores","i-lucide-spline-pointer","\u002Fpcs3021\u002Fvetores","pcs3021\u002F6.vetores",[130],{"title":125,"path":131,"stem":132},"\u002Fpcs3021\u002Fvetores\u002Fvetores","pcs3021\u002F6.vetores\u002F7.vetores",{"title":134,"path":135,"stem":136,"children":137,"icon":126},"Funções","\u002Fpcs3021\u002Ffuncoes","pcs3021\u002F7.funcoes\u002F1.index",[138],{"title":134,"path":135,"stem":136},{"id":140,"title":71,"body":141,"categoria":473,"creditoLink":473,"creditos":473,"descricao":473,"description":474,"eaulas":473,"extension":475,"meta":476,"navigation":477,"path":72,"seo":478,"stem":73,"video":473,"youtube":473,"youtubeLink":473,"__hash__":479},"docs\u002Fpcs3021\u002F2.transformacoes\u002F5.push-pop.md",{"type":142,"value":143,"toc":469},"minimark",[144,157,169,174,273,276,279,439,442,457,465],[145,146,147,148,152,153,156],"p",{},"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 ",[149,150,151],"code",{},"push()"," e ",[149,154,155],{},"pop()",".",[145,158,159,160,162,163,165,166,168],{},"O comando ",[149,161,151],{}," 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 ",[149,164,155],{}," restaura exatamente o estado que havia sido salvo pelo ",[149,167,151],{}," 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.",[170,171,173],"h2",{"id":172},"estrutura-básica","Estrutura básica",[175,176,177,178],"code-preview",{},"Código 4.1 - estrutura geral para isolar transformações no p5.js",[179,180,181],"template",{"v-slot:code":5},[182,183,187],"pre",{"className":184,"code":185,"language":186,"meta":5,"style":5},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","push();\n  translate(200,200);\n  rotate(radians(45));\n  \u002F\u002F formas afetadas pelas transformações\npop();\n\u002F\u002F formas seguintes voltam ao estado anterior\n","js",[149,188,189,206,229,250,257,267],{"__ignoreMap":5},[190,191,194,198,202],"span",{"class":192,"line":193},"line",1,[190,195,197],{"class":196},"s2Zo4","push",[190,199,201],{"class":200},"sTEyZ","()",[190,203,205],{"class":204},"sMK4o",";\n",[190,207,209,212,215,219,222,224,227],{"class":192,"line":208},2,[190,210,211],{"class":196},"  translate",[190,213,214],{"class":200},"(",[190,216,218],{"class":217},"sbssI","200",[190,220,221],{"class":204},",",[190,223,218],{"class":217},[190,225,226],{"class":200},")",[190,228,205],{"class":204},[190,230,232,235,237,240,242,245,248],{"class":192,"line":231},3,[190,233,234],{"class":196},"  rotate",[190,236,214],{"class":200},[190,238,239],{"class":196},"radians",[190,241,214],{"class":200},[190,243,244],{"class":217},"45",[190,246,247],{"class":200},"))",[190,249,205],{"class":204},[190,251,253],{"class":192,"line":252},4,[190,254,256],{"class":255},"sHwdD","  \u002F\u002F formas afetadas pelas transformações\n",[190,258,260,263,265],{"class":192,"line":259},5,[190,261,262],{"class":196},"pop",[190,264,201],{"class":200},[190,266,205],{"class":204},[190,268,270],{"class":192,"line":269},6,[190,271,272],{"class":255},"\u002F\u002F formas seguintes voltam ao estado anterior\n",[170,274,15],{"id":275},"exemplo",[145,277,278],{},"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.",[175,280,281,282],{},"Código 4.2 - Exemplo de uso de push e pop",[179,283,284],{"v-slot:code":5},[182,285,287],{"className":184,"code":286,"language":186,"meta":5,"style":5},"function setup() {\n  createCanvas(800,600);\n  push();\n    translate(250,200);\n    rotate(radians(30));\n    rect(0,0,200,100);\n  pop();\n  rect(500,400,200,100);\n}\n",[149,288,289,303,323,332,350,368,395,405,433],{"__ignoreMap":5},[190,290,291,295,298,300],{"class":192,"line":193},[190,292,294],{"class":293},"spNyl","function",[190,296,297],{"class":196}," setup",[190,299,201],{"class":204},[190,301,302],{"class":204}," {\n",[190,304,305,308,311,314,316,319,321],{"class":192,"line":208},[190,306,307],{"class":196},"  createCanvas",[190,309,214],{"class":310},"swJcz",[190,312,313],{"class":217},"800",[190,315,221],{"class":204},[190,317,318],{"class":217},"600",[190,320,226],{"class":310},[190,322,205],{"class":204},[190,324,325,328,330],{"class":192,"line":231},[190,326,327],{"class":196},"  push",[190,329,201],{"class":310},[190,331,205],{"class":204},[190,333,334,337,339,342,344,346,348],{"class":192,"line":252},[190,335,336],{"class":196},"    translate",[190,338,214],{"class":310},[190,340,341],{"class":217},"250",[190,343,221],{"class":204},[190,345,218],{"class":217},[190,347,226],{"class":310},[190,349,205],{"class":204},[190,351,352,355,357,359,361,364,366],{"class":192,"line":259},[190,353,354],{"class":196},"    rotate",[190,356,214],{"class":310},[190,358,239],{"class":196},[190,360,214],{"class":310},[190,362,363],{"class":217},"30",[190,365,247],{"class":310},[190,367,205],{"class":204},[190,369,370,373,375,378,380,382,384,386,388,391,393],{"class":192,"line":269},[190,371,372],{"class":196},"    rect",[190,374,214],{"class":310},[190,376,377],{"class":217},"0",[190,379,221],{"class":204},[190,381,377],{"class":217},[190,383,221],{"class":204},[190,385,218],{"class":217},[190,387,221],{"class":204},[190,389,390],{"class":217},"100",[190,392,226],{"class":310},[190,394,205],{"class":204},[190,396,398,401,403],{"class":192,"line":397},7,[190,399,400],{"class":196},"  pop",[190,402,201],{"class":310},[190,404,205],{"class":204},[190,406,408,411,413,416,418,421,423,425,427,429,431],{"class":192,"line":407},8,[190,409,410],{"class":196},"  rect",[190,412,214],{"class":310},[190,414,415],{"class":217},"500",[190,417,221],{"class":204},[190,419,420],{"class":217},"400",[190,422,221],{"class":204},[190,424,218],{"class":217},[190,426,221],{"class":204},[190,428,390],{"class":217},[190,430,226],{"class":310},[190,432,205],{"class":204},[190,434,436],{"class":192,"line":435},9,[190,437,438],{"class":204},"}\n",[440,441],"p5-sketch",{"code":286},[443,444,445,446,152,448,450,451,453,454,456],"tip",{},"Pense em ",[149,447,151],{},[149,449,155],{}," como um par que sempre anda junto. Cada ",[149,452,151],{}," deve ter um ",[149,455,155],{}," correspondente. Uma boa prática é indentar o código entre eles, como no exemplo, para deixar visualmente claro qual trecho está isolado. Isso torna o código mais legível e evita erros difíceis de rastrear.",[145,458,459,460,152,462,464],{},"Experimente criar vários blocos ",[149,461,151],{},[149,463,155],{}," 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.",[466,467,468],"style",{},"html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":5,"searchDepth":208,"depth":208,"links":470},[471,472],{"id":172,"depth":208,"text":173},{"id":275,"depth":208,"text":15},null,"Veja como isolar o efeito das transformações","md",{},true,{"title":71,"description":474},"TLivg6hWwY8vDFQKAwWXdZ9YRQuBQcIqVLmX-3Nm9lc",[481,483],{"title":67,"path":68,"stem":69,"description":482,"children":-1},"Veja como inclinar o sistema de coordenadas",{"title":81,"path":82,"stem":83,"description":484,"children":-1},"Entenda como podemos usar as variáveis para armazenar valores nos nossos programas",1784150368225]