[{"data":1,"prerenderedAt":431},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-transformacoes-escala":139,"-pcs3021-transformacoes-escala-surround":426},[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":63,"body":141,"categoria":419,"creditoLink":419,"creditos":419,"descricao":419,"description":420,"eaulas":419,"extension":421,"meta":422,"navigation":423,"path":64,"seo":424,"stem":65,"video":419,"youtube":419,"youtubeLink":419,"__hash__":425},"docs\u002Fpcs3021\u002F2.transformacoes\u002F3.escala.md",{"type":142,"value":143,"toc":415},"minimark",[144,148,172,177,232,235,238,378,381,396,411],[145,146,147],"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.",[145,149,150,151,155,156,159,160,163,164,167,168,171],{},"O comando ",[152,153,154],"code",{},"scale(fator)"," multiplica as coordenadas seguintes pelo valor informado. Um valor ",[152,157,158],{},"2"," dobra o tamanho, enquanto ",[152,161,162],{},"0.5"," reduz o tamanho pela metade, e ",[152,165,166],{},"1"," mantém o tamanho original. Também é possível passar dois parâmetros, como ",[152,169,170],{},"scale(2, 0.5)",", para aplicar fatores diferentes nas direções horizontal e vertical, o que distorce a forma proporcionalmente em cada eixo.",[173,174,176],"h2",{"id":175},"estrutura-básica","Estrutura básica",[178,179,180,181],"code-preview",{},"Código 4.1 - estrutura geral para aplicação de escala no p5.js",[182,183,184],"template",{"v-slot:code":5},[185,186,190],"pre",{"className":187,"code":188,"language":189,"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",[152,191,192,209,216],{"__ignoreMap":5},[193,194,197,201,205],"span",{"class":195,"line":196},"line",1,[193,198,200],{"class":199},"s2Zo4","scale",[193,202,204],{"class":203},"sTEyZ","(fator)",[193,206,208],{"class":207},"sMK4o",";\n",[193,210,212],{"class":195,"line":211},2,[193,213,215],{"class":214},"sHwdD","\u002F\u002F ou com fatores diferentes por eixo:\n",[193,217,219,221,224,227,230],{"class":195,"line":218},3,[193,220,200],{"class":199},[193,222,223],{"class":203},"(fatorX",[193,225,226],{"class":207},",",[193,228,229],{"class":203}," fatorY)",[193,231,208],{"class":207},[173,233,15],{"id":234},"exemplo",[145,236,237],{},"Para um exemplo de como utilizar esse comando, teste o Código 4.2 e compare os dois retângulos.",[178,239,240,241],{},"Código 4.2 - Exemplo de escala do sistema de coordenadas",[182,242,243],{"v-slot:code":5},[185,244,246],{"className":187,"code":245,"language":189,"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",[152,247,248,263,286,313,333,347,372],{"__ignoreMap":5},[193,249,250,254,257,260],{"class":195,"line":196},[193,251,253],{"class":252},"spNyl","function",[193,255,256],{"class":199}," setup",[193,258,259],{"class":207},"()",[193,261,262],{"class":207}," {\n",[193,264,265,268,272,276,278,281,284],{"class":195,"line":211},[193,266,267],{"class":199},"  createCanvas",[193,269,271],{"class":270},"swJcz","(",[193,273,275],{"class":274},"sbssI","800",[193,277,226],{"class":207},[193,279,280],{"class":274},"600",[193,282,283],{"class":270},")",[193,285,208],{"class":207},[193,287,288,291,293,296,298,300,302,305,307,309,311],{"class":195,"line":218},[193,289,290],{"class":199},"  rect",[193,292,271],{"class":270},[193,294,295],{"class":274},"50",[193,297,226],{"class":207},[193,299,295],{"class":274},[193,301,226],{"class":207},[193,303,304],{"class":274},"100",[193,306,226],{"class":207},[193,308,304],{"class":274},[193,310,283],{"class":270},[193,312,208],{"class":207},[193,314,316,319,321,324,326,329,331],{"class":195,"line":315},4,[193,317,318],{"class":199},"  translate",[193,320,271],{"class":270},[193,322,323],{"class":274},"300",[193,325,226],{"class":207},[193,327,328],{"class":274},"200",[193,330,283],{"class":270},[193,332,208],{"class":207},[193,334,336,339,341,343,345],{"class":195,"line":335},5,[193,337,338],{"class":199},"  scale",[193,340,271],{"class":270},[193,342,158],{"class":274},[193,344,283],{"class":270},[193,346,208],{"class":207},[193,348,350,352,354,356,358,360,362,364,366,368,370],{"class":195,"line":349},6,[193,351,290],{"class":199},[193,353,271],{"class":270},[193,355,295],{"class":274},[193,357,226],{"class":207},[193,359,295],{"class":274},[193,361,226],{"class":207},[193,363,304],{"class":274},[193,365,226],{"class":207},[193,367,304],{"class":274},[193,369,283],{"class":270},[193,371,208],{"class":207},[193,373,375],{"class":195,"line":374},7,[193,376,377],{"class":207},"}\n",[379,380],"p5-sketch",{"code":245},[382,383,384,385,388,389,392,393,395],"tip",{},"A escala afeta tudo o que é multiplicado pelas coordenadas, incluindo a espessura das bordas definida por ",[152,386,387],{},"strokeWeight()",". Ao aplicar ",[152,390,391],{},"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 ",[152,394,387],{}," manualmente.",[145,397,398,399,402,403,406,407,410],{},"Experimente usar um valor negativo, como ",[152,400,401],{},"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 ",[152,404,405],{},"push()"," e ",[152,408,409],{},"pop()"," ajuda a controlar até onde seu efeito se aplica. Mais detalhes e exemplos podem ser encontrados na referência do p5.js.",[412,413,414],"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":211,"depth":211,"links":416},[417,418],{"id":175,"depth":211,"text":176},{"id":234,"depth":211,"text":15},null,"Veja como redimensionar o sistema de coordenadas","md",{},true,{"title":63,"description":420},"NoVfdBehBWV2v3U7axZKJ9gOXC5D9vPgZgNeSSTBGus",[427,429],{"title":59,"path":60,"stem":61,"description":428,"children":-1},"Veja como deslocar o sistema de coordenadas",{"title":67,"path":68,"stem":69,"description":430,"children":-1},"Veja como inclinar o sistema de coordenadas",1784150367994]