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