[{"data":1,"prerenderedAt":401},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-transformacoes-translacao":139,"-pcs3021-transformacoes-translacao-surround":396},[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":59,"body":141,"categoria":389,"creditoLink":389,"creditos":389,"descricao":389,"description":390,"eaulas":389,"extension":391,"meta":392,"navigation":393,"path":60,"seo":394,"stem":61,"video":389,"youtube":389,"youtubeLink":389,"__hash__":395},"docs\u002Fpcs3021\u002F2.transformacoes\u002F2.translacao.md",{"type":142,"value":143,"toc":385},"minimark",[144,148,168,173,218,221,224,352,355,367,381],[145,146,147],"p",{},"Até agora, para posicionar uma forma na tela, você informava diretamente suas coordenadas. As transformações geométricas oferecem outra maneira de trabalhar: em vez de mover a forma, elas movem o próprio sistema de coordenadas em que a forma será desenhada. A primeira dessas transformações é a translação.",[145,149,150,151,155,156,159,160,163,164,167],{},"O comando ",[152,153,154],"code",{},"translate(x, y)"," desloca a origem do sistema de coordenadas. Por padrão, a origem (ponto ",[152,157,158],{},"0, 0",") fica no canto superior esquerdo do canvas. Após um ",[152,161,162],{},"translate(200, 150)",", por exemplo, a origem passa a estar na posição ",[152,165,166],{},"200, 150",", e todas as formas desenhadas em seguida terão suas coordenadas calculadas a partir desse novo ponto. É importante entender que a transformação afeta apenas os comandos que vêm depois dela.",[169,170,172],"h2",{"id":171},"estrutura-básica","Estrutura básica",[174,175,176,177],"code-preview",{},"Código 4.1 - estrutura geral para aplicação de translação no p5.js",[178,179,180],"template",{"v-slot:code":5},[181,182,186],"pre",{"className":183,"code":184,"language":185,"meta":5,"style":5},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","translate(deslocamentoX, deslocamentoY);\n\u002F\u002F formas desenhadas aqui usam a nova origem\n","js",[152,187,188,211],{"__ignoreMap":5},[189,190,193,197,201,205,208],"span",{"class":191,"line":192},"line",1,[189,194,196],{"class":195},"s2Zo4","translate",[189,198,200],{"class":199},"sTEyZ","(deslocamentoX",[189,202,204],{"class":203},"sMK4o",",",[189,206,207],{"class":199}," deslocamentoY)",[189,209,210],{"class":203},";\n",[189,212,214],{"class":191,"line":213},2,[189,215,217],{"class":216},"sHwdD","\u002F\u002F formas desenhadas aqui usam a nova origem\n",[169,219,15],{"id":220},"exemplo",[145,222,223],{},"Para um exemplo de como utilizar esse comando, teste o Código 4.2 e compare os dois retângulos.",[174,225,226,227],{},"Código 4.2 - Exemplo de translação do sistema de coordenadas",[178,228,229],{"v-slot:code":5},[181,230,232],{"className":183,"code":231,"language":185,"meta":5,"style":5},"function setup() {\n  createCanvas(800,600);\n  rect(50,50,150,100);\n  translate(300,200);\n  rect(50,50,150,100);\n}\n",[152,233,234,249,272,301,321,346],{"__ignoreMap":5},[189,235,236,240,243,246],{"class":191,"line":192},[189,237,239],{"class":238},"spNyl","function",[189,241,242],{"class":195}," setup",[189,244,245],{"class":203},"()",[189,247,248],{"class":203}," {\n",[189,250,251,254,258,262,264,267,270],{"class":191,"line":213},[189,252,253],{"class":195},"  createCanvas",[189,255,257],{"class":256},"swJcz","(",[189,259,261],{"class":260},"sbssI","800",[189,263,204],{"class":203},[189,265,266],{"class":260},"600",[189,268,269],{"class":256},")",[189,271,210],{"class":203},[189,273,275,278,280,283,285,287,289,292,294,297,299],{"class":191,"line":274},3,[189,276,277],{"class":195},"  rect",[189,279,257],{"class":256},[189,281,282],{"class":260},"50",[189,284,204],{"class":203},[189,286,282],{"class":260},[189,288,204],{"class":203},[189,290,291],{"class":260},"150",[189,293,204],{"class":203},[189,295,296],{"class":260},"100",[189,298,269],{"class":256},[189,300,210],{"class":203},[189,302,304,307,309,312,314,317,319],{"class":191,"line":303},4,[189,305,306],{"class":195},"  translate",[189,308,257],{"class":256},[189,310,311],{"class":260},"300",[189,313,204],{"class":203},[189,315,316],{"class":260},"200",[189,318,269],{"class":256},[189,320,210],{"class":203},[189,322,324,326,328,330,332,334,336,338,340,342,344],{"class":191,"line":323},5,[189,325,277],{"class":195},[189,327,257],{"class":256},[189,329,282],{"class":260},[189,331,204],{"class":203},[189,333,282],{"class":260},[189,335,204],{"class":203},[189,337,291],{"class":260},[189,339,204],{"class":203},[189,341,296],{"class":260},[189,343,269],{"class":256},[189,345,210],{"class":203},[189,347,349],{"class":191,"line":348},6,[189,350,351],{"class":203},"}\n",[353,354],"p5-sketch",{"code":231},[356,357,358,359,362,363,366],"tip",{},"Repare que os dois retângulos do exemplo usam exatamente as mesmas coordenadas em ",[152,360,361],{},"rect(50,50,150,100)",", mas aparecem em posições diferentes. Isso acontece porque o ",[152,364,365],{},"translate()"," moveu a origem entre um comando e outro. A forma não mudou; o referencial em que ela foi desenhada é que mudou.",[145,368,369,370,372,373,376,377,380],{},"Experimente aplicar dois comandos ",[152,371,365],{}," em sequência e veja que seus efeitos se somam, pois cada um desloca a origem a partir da posição em que ela já se encontrava. As transformações são cumulativas, e essa característica é o que permite construir movimentos e composições complexas. Para evitar que esse acúmulo atrapalhe, costuma-se usar os comandos ",[152,374,375],{},"push()"," e ",[152,378,379],{},"pop()",", apresentados em outra página. Mais detalhes e exemplos podem ser encontrados na referência do p5.js.",[382,383,384],"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 .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}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":5,"searchDepth":213,"depth":213,"links":386},[387,388],{"id":171,"depth":213,"text":172},{"id":220,"depth":213,"text":15},null,"Veja como deslocar o sistema de coordenadas","md",{},true,{"title":59,"description":390},"5WKm9l36OIu9L4zob91EFbxyCzgxrZZBgdd6-rczLsQ",[397,399],{"title":55,"path":56,"stem":57,"description":398,"children":-1},"Veja como girar o sistema de coordenadas",{"title":63,"path":64,"stem":65,"description":400,"children":-1},"Veja como redimensionar o sistema de coordenadas",1784150367919]