[{"data":1,"prerenderedAt":405},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-transformacoes-rotacao":139,"-pcs3021-transformacoes-rotacao-surround":400},[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":55,"body":141,"categoria":393,"creditoLink":393,"creditos":393,"descricao":393,"description":394,"eaulas":393,"extension":395,"meta":396,"navigation":397,"path":56,"seo":398,"stem":57,"video":393,"youtube":393,"youtubeLink":393,"__hash__":399},"docs\u002Fpcs3021\u002F2.transformacoes\u002F1.rotacao.md",{"type":142,"value":143,"toc":389},"minimark",[144,148,168,173,218,221,224,347,350,362,385],[145,146,147],"p",{},"Outra transformação geométrica fundamental é a rotação, que gira o sistema de coordenadas em torno da origem. Assim como a translação, ela não gira a forma diretamente, mas sim o referencial em que a forma será desenhada. Tudo o que vier depois do comando aparecerá girado.",[145,149,150,151,155,156,159,160,163,164,167],{},"O comando ",[152,153,154],"code",{},"rotate(angulo)"," recebe um único parâmetro, que é o ângulo de rotação. Por padrão, o p5.js interpreta esse valor em radianos, não em graus. Para facilitar, você pode usar a função ",[152,157,158],{},"radians()"," para converter um valor em graus, ou empregar diretamente constantes como ",[152,161,162],{},"PI"," e ",[152,165,166],{},"HALF_PI",". A rotação acontece sempre em torno da origem atual do sistema de coordenadas, que fica no canto superior esquerdo caso nenhuma translação tenha sido aplicada.",[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 rotaçã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","rotate(radians(anguloEmGraus));\n\u002F\u002F formas desenhadas aqui aparecem giradas\n","js",[152,187,188,211],{"__ignoreMap":5},[189,190,193,197,201,204,207],"span",{"class":191,"line":192},"line",1,[189,194,196],{"class":195},"s2Zo4","rotate",[189,198,200],{"class":199},"sTEyZ","(",[189,202,203],{"class":195},"radians",[189,205,206],{"class":199},"(anguloEmGraus))",[189,208,210],{"class":209},"sMK4o",";\n",[189,212,214],{"class":191,"line":213},2,[189,215,217],{"class":216},"sHwdD","\u002F\u002F formas desenhadas aqui aparecem giradas\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 veja o retângulo inclinado.",[174,225,226,227],{},"Código 4.2 - Exemplo de rotaçã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  translate(400,300);\n  rotate(radians(30));\n  rect(0,0,200,100);\n}\n",[152,233,234,249,272,292,312,341],{"__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":209},"()",[189,247,248],{"class":209}," {\n",[189,250,251,254,257,261,264,267,270],{"class":191,"line":213},[189,252,253],{"class":195},"  createCanvas",[189,255,200],{"class":256},"swJcz",[189,258,260],{"class":259},"sbssI","800",[189,262,263],{"class":209},",",[189,265,266],{"class":259},"600",[189,268,269],{"class":256},")",[189,271,210],{"class":209},[189,273,275,278,280,283,285,288,290],{"class":191,"line":274},3,[189,276,277],{"class":195},"  translate",[189,279,200],{"class":256},[189,281,282],{"class":259},"400",[189,284,263],{"class":209},[189,286,287],{"class":259},"300",[189,289,269],{"class":256},[189,291,210],{"class":209},[189,293,295,298,300,302,304,307,310],{"class":191,"line":294},4,[189,296,297],{"class":195},"  rotate",[189,299,200],{"class":256},[189,301,203],{"class":195},[189,303,200],{"class":256},[189,305,306],{"class":259},"30",[189,308,309],{"class":256},"))",[189,311,210],{"class":209},[189,313,315,318,320,323,325,327,329,332,334,337,339],{"class":191,"line":314},5,[189,316,317],{"class":195},"  rect",[189,319,200],{"class":256},[189,321,322],{"class":259},"0",[189,324,263],{"class":209},[189,326,322],{"class":259},[189,328,263],{"class":209},[189,330,331],{"class":259},"200",[189,333,263],{"class":209},[189,335,336],{"class":259},"100",[189,338,269],{"class":256},[189,340,210],{"class":209},[189,342,344],{"class":191,"line":343},6,[189,345,346],{"class":209},"}\n",[348,349],"p5-sketch",{"code":231},[351,352,353,354,357,358,361],"tip",{},"Como a rotação sempre ocorre em torno da origem, é muito comum usar um ",[152,355,356],{},"translate()"," antes do ",[152,359,360],{},"rotate()"," para posicionar a origem no ponto em que você deseja que o giro aconteça. No exemplo, movemos a origem para o centro do canvas antes de girar, fazendo com que a rotação parta desse ponto, e não do canto da tela.",[145,363,364,365,368,369,372,373,375,376,379,380,163,382,384],{},"Experimente trocar ",[152,366,367],{},"radians(30)"," por outros ângulos, ou usar diretamente valores como ",[152,370,371],{},"PI\u002F4"," (equivalente a 45 graus) e ",[152,374,162],{}," (equivalente a 180 graus). Você também pode alterar o modo de interpretação dos ângulos com o comando ",[152,377,378],{},"angleMode(DEGREES)",", o que permite passar valores em graus sem a conversão. A ordem entre ",[152,381,356],{},[152,383,360],{}," altera o resultado final, então vale a pena testar as duas sequências. Mais detalhes e exemplos podem ser encontrados na referência do p5.js.",[386,387,388],"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":390},[391,392],{"id":171,"depth":213,"text":172},{"id":220,"depth":213,"text":15},null,"Veja como girar o sistema de coordenadas","md",{},true,{"title":55,"description":394},"F2WP_StpLR0u3lQYgAYGI7yUt9hw-Kh8cj-7XhSqPJc",[401,403],{"title":44,"path":45,"stem":46,"description":402,"children":-1},"Veja como criar uma forma geométrica customizada",{"title":59,"path":60,"stem":61,"description":404,"children":-1},"Veja como deslocar o sistema de coordenadas",1784150367622]