[{"data":1,"prerenderedAt":399},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-transformacoes-cisalhamento":139,"-pcs3021-transformacoes-cisalhamento-surround":394},[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":67,"body":141,"categoria":387,"creditoLink":387,"creditos":387,"descricao":387,"description":388,"eaulas":387,"extension":389,"meta":390,"navigation":391,"path":68,"seo":392,"stem":69,"video":387,"youtube":387,"youtubeLink":387,"__hash__":393},"docs\u002Fpcs3021\u002F2.transformacoes\u002F4.cisalhamento.md",{"type":142,"value":143,"toc":383},"minimark",[144,148,160,165,224,227,230,351,354,362,379],[145,146,147],"p",{},"Além de transladar, girar e escalar, o p5.js permite aplicar uma transformação chamada cisalhamento, também conhecida como inclinação. Ela distorce o sistema de coordenadas empurrando um dos eixos em uma direção, transformando retângulos em paralelogramos e criando um efeito de perspectiva ou movimento.",[145,149,150,151,155,156,159],{},"Existem dois comandos para isso. O ",[152,153,154],"code",{},"shearX(angulo)"," inclina as formas ao longo do eixo horizontal, enquanto o ",[152,157,158],{},"shearY(angulo)"," inclina ao longo do eixo vertical. Ambos recebem um ângulo que, por padrão, é interpretado em radianos, seguindo a mesma lógica da rotação. Quanto maior o ângulo, mais acentuada será a inclinação aplicada às formas desenhadas em seguida.",[161,162,164],"h2",{"id":163},"estrutura-básica","Estrutura básica",[166,167,168,169],"code-preview",{},"Código 4.1 - estrutura geral para aplicação de cisalhamento no p5.js",[170,171,172],"template",{"v-slot:code":5},[173,174,178],"pre",{"className":175,"code":176,"language":177,"meta":5,"style":5},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","shearX(radians(anguloEmGraus));\n\u002F\u002F ou, para inclinar na vertical:\nshearY(radians(anguloEmGraus));\n","js",[152,179,180,203,210],{"__ignoreMap":5},[181,182,185,189,193,196,199],"span",{"class":183,"line":184},"line",1,[181,186,188],{"class":187},"s2Zo4","shearX",[181,190,192],{"class":191},"sTEyZ","(",[181,194,195],{"class":187},"radians",[181,197,198],{"class":191},"(anguloEmGraus))",[181,200,202],{"class":201},"sMK4o",";\n",[181,204,206],{"class":183,"line":205},2,[181,207,209],{"class":208},"sHwdD","\u002F\u002F ou, para inclinar na vertical:\n",[181,211,213,216,218,220,222],{"class":183,"line":212},3,[181,214,215],{"class":187},"shearY",[181,217,192],{"class":191},[181,219,195],{"class":187},[181,221,198],{"class":191},[181,223,202],{"class":201},[161,225,15],{"id":226},"exemplo",[145,228,229],{},"Para um exemplo de como utilizar esse comando, teste o Código 4.2 e veja o retângulo inclinado.",[166,231,232,233],{},"Código 4.2 - Exemplo de cisalhamento horizontal",[170,234,235],{"v-slot:code":5},[173,236,238],{"className":175,"code":237,"language":177,"meta":5,"style":5},"function setup() {\n  createCanvas(800,600);\n  translate(250,200);\n  shearX(radians(30));\n  rect(0,0,200,150);\n}\n",[152,239,240,255,278,297,317,345],{"__ignoreMap":5},[181,241,242,246,249,252],{"class":183,"line":184},[181,243,245],{"class":244},"spNyl","function",[181,247,248],{"class":187}," setup",[181,250,251],{"class":201},"()",[181,253,254],{"class":201}," {\n",[181,256,257,260,263,267,270,273,276],{"class":183,"line":205},[181,258,259],{"class":187},"  createCanvas",[181,261,192],{"class":262},"swJcz",[181,264,266],{"class":265},"sbssI","800",[181,268,269],{"class":201},",",[181,271,272],{"class":265},"600",[181,274,275],{"class":262},")",[181,277,202],{"class":201},[181,279,280,283,285,288,290,293,295],{"class":183,"line":212},[181,281,282],{"class":187},"  translate",[181,284,192],{"class":262},[181,286,287],{"class":265},"250",[181,289,269],{"class":201},[181,291,292],{"class":265},"200",[181,294,275],{"class":262},[181,296,202],{"class":201},[181,298,300,303,305,307,309,312,315],{"class":183,"line":299},4,[181,301,302],{"class":187},"  shearX",[181,304,192],{"class":262},[181,306,195],{"class":187},[181,308,192],{"class":262},[181,310,311],{"class":265},"30",[181,313,314],{"class":262},"))",[181,316,202],{"class":201},[181,318,320,323,325,328,330,332,334,336,338,341,343],{"class":183,"line":319},5,[181,321,322],{"class":187},"  rect",[181,324,192],{"class":262},[181,326,327],{"class":265},"0",[181,329,269],{"class":201},[181,331,327],{"class":265},[181,333,269],{"class":201},[181,335,292],{"class":265},[181,337,269],{"class":201},[181,339,340],{"class":265},"150",[181,342,275],{"class":262},[181,344,202],{"class":201},[181,346,348],{"class":183,"line":347},6,[181,349,350],{"class":201},"}\n",[352,353],"p5-sketch",{"code":237},[355,356,357,358,361],"tip",{},"O cisalhamento diferencia-se da rotação porque não gira a forma como um todo, e sim desloca progressivamente cada linha em relação à anterior. Por isso, um quadrado submetido a ",[152,359,360],{},"shearX()"," vira um paralelogramo inclinado, mantendo a base fixa enquanto o topo é empurrado para o lado.",[145,363,364,365,367,368,371,372,367,375,378],{},"Experimente combinar ",[152,366,360],{}," e ",[152,369,370],{},"shearY()"," na mesma forma e observe como as inclinações se acumulam, gerando distorções mais complexas. Esse recurso é útil para simular itálico em desenhos, criar sombras projetadas ou dar sensação de profundidade. Assim como as outras transformações, o cisalhamento é cumulativo e afeta apenas os comandos posteriores, então vale usar ",[152,373,374],{},"push()",[152,376,377],{},"pop()"," para delimitar seu alcance. Mais detalhes e exemplos podem ser encontrados na referência do p5.js.",[380,381,382],"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":205,"depth":205,"links":384},[385,386],{"id":163,"depth":205,"text":164},{"id":226,"depth":205,"text":15},null,"Veja como inclinar o sistema de coordenadas","md",{},true,{"title":67,"description":388},"lhfj2B4n8LVewBOeCWblL2Zl5JiI6wkRi9XqxJPRZ-w",[395,397],{"title":63,"path":64,"stem":65,"description":396,"children":-1},"Veja como redimensionar o sistema de coordenadas",{"title":71,"path":72,"stem":73,"description":398,"children":-1},"Veja como isolar o efeito das transformações",1784150368163]