[{"data":1,"prerenderedAt":476},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-transformacoes-escala":183,"-pcs3021-transformacoes-escala-surround":471},[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":95,"body":185,"categoria":464,"creditoLink":464,"creditos":464,"descricao":464,"description":465,"eaulas":464,"extension":466,"meta":467,"navigation":468,"path":96,"seo":469,"stem":97,"video":464,"youtube":464,"youtubeLink":464,"__hash__":470},"docs\u002Fpcs3021\u002F4.transformacoes\u002F3.escala.md",{"type":186,"value":187,"toc":460},"minimark",[188,192,216,221,276,280,283,423,426,441,456],[189,190,191],"p",{},"A terceira transformação geométrica essencial é a escala, que aumenta ou reduz o tamanho das formas ao esticar ou comprimir o sistema de coordenadas. Novamente, o que muda é o referencial de desenho, e não a forma em si: uma mesma figura pode aparecer maior ou menor dependendo do fator de escala aplicado.",[189,193,194,195,199,200,203,204,207,208,211,212,215],{},"O comando ",[196,197,198],"code",{},"scale(fator)"," multiplica as coordenadas seguintes pelo valor informado. Um valor ",[196,201,202],{},"2"," dobra o tamanho, enquanto ",[196,205,206],{},"0.5"," reduz o tamanho pela metade, e ",[196,209,210],{},"1"," mantém o tamanho original. Também é possível passar dois parâmetros, como ",[196,213,214],{},"scale(2, 0.5)",", para aplicar fatores diferentes nas direções horizontal e vertical, o que distorce a forma proporcionalmente em cada eixo.",[217,218,220],"h2",{"id":219},"estrutura-básica","Estrutura básica",[222,223,224,225],"code-preview",{},"Código - estrutura geral para aplicação de escala no p5.js",[226,227,228],"template",{"v-slot:code":5},[229,230,234],"pre",{"className":231,"code":232,"language":233,"meta":5,"style":5},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","scale(fator);\n\u002F\u002F ou com fatores diferentes por eixo:\nscale(fatorX, fatorY);\n","js",[196,235,236,253,260],{"__ignoreMap":5},[237,238,241,245,249],"span",{"class":239,"line":240},"line",1,[237,242,244],{"class":243},"s2Zo4","scale",[237,246,248],{"class":247},"sTEyZ","(fator)",[237,250,252],{"class":251},"sMK4o",";\n",[237,254,256],{"class":239,"line":255},2,[237,257,259],{"class":258},"sHwdD","\u002F\u002F ou com fatores diferentes por eixo:\n",[237,261,263,265,268,271,274],{"class":239,"line":262},3,[237,264,244],{"class":243},[237,266,267],{"class":247},"(fatorX",[237,269,270],{"class":251},",",[237,272,273],{"class":247}," fatorY)",[237,275,252],{"class":251},[217,277,279],{"id":278},"exemplo","Exemplo",[189,281,282],{},"Para um exemplo de como utilizar esse comando, teste o Código  e compare os dois retângulos.",[222,284,285,286],{},"Código  - Exemplo de escala do sistema de coordenadas",[226,287,288],{"v-slot:code":5},[229,289,291],{"className":231,"code":290,"language":233,"meta":5,"style":5},"function setup() {\n  createCanvas(800,600);\n  rect(50,50,100,100);\n  translate(300,200);\n  scale(2);\n  rect(50,50,100,100);\n}\n",[196,292,293,308,331,358,378,392,417],{"__ignoreMap":5},[237,294,295,299,302,305],{"class":239,"line":240},[237,296,298],{"class":297},"spNyl","function",[237,300,301],{"class":243}," setup",[237,303,304],{"class":251},"()",[237,306,307],{"class":251}," {\n",[237,309,310,313,317,321,323,326,329],{"class":239,"line":255},[237,311,312],{"class":243},"  createCanvas",[237,314,316],{"class":315},"swJcz","(",[237,318,320],{"class":319},"sbssI","800",[237,322,270],{"class":251},[237,324,325],{"class":319},"600",[237,327,328],{"class":315},")",[237,330,252],{"class":251},[237,332,333,336,338,341,343,345,347,350,352,354,356],{"class":239,"line":262},[237,334,335],{"class":243},"  rect",[237,337,316],{"class":315},[237,339,340],{"class":319},"50",[237,342,270],{"class":251},[237,344,340],{"class":319},[237,346,270],{"class":251},[237,348,349],{"class":319},"100",[237,351,270],{"class":251},[237,353,349],{"class":319},[237,355,328],{"class":315},[237,357,252],{"class":251},[237,359,361,364,366,369,371,374,376],{"class":239,"line":360},4,[237,362,363],{"class":243},"  translate",[237,365,316],{"class":315},[237,367,368],{"class":319},"300",[237,370,270],{"class":251},[237,372,373],{"class":319},"200",[237,375,328],{"class":315},[237,377,252],{"class":251},[237,379,381,384,386,388,390],{"class":239,"line":380},5,[237,382,383],{"class":243},"  scale",[237,385,316],{"class":315},[237,387,202],{"class":319},[237,389,328],{"class":315},[237,391,252],{"class":251},[237,393,395,397,399,401,403,405,407,409,411,413,415],{"class":239,"line":394},6,[237,396,335],{"class":243},[237,398,316],{"class":315},[237,400,340],{"class":319},[237,402,270],{"class":251},[237,404,340],{"class":319},[237,406,270],{"class":251},[237,408,349],{"class":319},[237,410,270],{"class":251},[237,412,349],{"class":319},[237,414,328],{"class":315},[237,416,252],{"class":251},[237,418,420],{"class":239,"line":419},7,[237,421,422],{"class":251},"}\n",[424,425],"p5-sketch",{"code":290},[427,428,429,430,433,434,437,438,440],"tip",{},"A escala afeta tudo o que é multiplicado pelas coordenadas, incluindo a espessura das bordas definida por ",[196,431,432],{},"strokeWeight()",". Ao aplicar ",[196,435,436],{},"scale(2)",", uma borda de dois pixels passa a ser desenhada com quatro pixels. Se você quiser manter a espessura constante independentemente da escala, será necessário ajustar o ",[196,439,432],{}," manualmente.",[189,442,443,444,447,448,451,452,455],{},"Experimente usar um valor negativo, como ",[196,445,446],{},"scale(-1, 1)",", e veja que a forma é espelhada horizontalmente, pois a coordenada horizontal passa a crescer no sentido oposto. Esse recurso é bastante útil para criar reflexos ou inverter desenhos sem precisar recalcular todas as coordenadas. Como as demais transformações, a escala é cumulativa, então combiná-la com ",[196,449,450],{},"push()"," e ",[196,453,454],{},"pop()"," ajuda a controlar até onde seu efeito se aplica. Mais detalhes e exemplos podem ser encontrados na referência do p5.js.",[457,458,459],"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":255,"depth":255,"links":461},[462,463],{"id":219,"depth":255,"text":220},{"id":278,"depth":255,"text":279},null,"Veja como redimensionar o sistema de coordenadas","md",{},true,{"title":95,"description":465},"tBj43dDQ-Bu_kmV2LGEpGU6-J8zmW0WsatSkbGk6hYM",[472,474],{"title":91,"path":92,"stem":93,"description":473,"children":-1},"Veja como deslocar o sistema de coordenadas",{"title":99,"path":100,"stem":101,"description":475,"children":-1},"Veja como inclinar o sistema de coordenadas",1786195202515]