[{"data":1,"prerenderedAt":444},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-transformacoes-cisalhamento":183,"-pcs3021-transformacoes-cisalhamento-surround":439},[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":99,"body":185,"categoria":432,"creditoLink":432,"creditos":432,"descricao":432,"description":433,"eaulas":432,"extension":434,"meta":435,"navigation":436,"path":100,"seo":437,"stem":101,"video":432,"youtube":432,"youtubeLink":432,"__hash__":438},"docs\u002Fpcs3021\u002F4.transformacoes\u002F4.cisalhamento.md",{"type":186,"value":187,"toc":428},"minimark",[188,192,204,209,268,272,275,396,399,407,424],[189,190,191],"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.",[189,193,194,195,199,200,203],{},"Existem dois comandos para isso. O ",[196,197,198],"code",{},"shearX(angulo)"," inclina as formas ao longo do eixo horizontal, enquanto o ",[196,201,202],{},"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.",[205,206,208],"h2",{"id":207},"estrutura-básica","Estrutura básica",[210,211,212,213],"code-preview",{},"Código - estrutura geral para aplicação de cisalhamento no p5.js",[214,215,216],"template",{"v-slot:code":5},[217,218,222],"pre",{"className":219,"code":220,"language":221,"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",[196,223,224,247,254],{"__ignoreMap":5},[225,226,229,233,237,240,243],"span",{"class":227,"line":228},"line",1,[225,230,232],{"class":231},"s2Zo4","shearX",[225,234,236],{"class":235},"sTEyZ","(",[225,238,239],{"class":231},"radians",[225,241,242],{"class":235},"(anguloEmGraus))",[225,244,246],{"class":245},"sMK4o",";\n",[225,248,250],{"class":227,"line":249},2,[225,251,253],{"class":252},"sHwdD","\u002F\u002F ou, para inclinar na vertical:\n",[225,255,257,260,262,264,266],{"class":227,"line":256},3,[225,258,259],{"class":231},"shearY",[225,261,236],{"class":235},[225,263,239],{"class":231},[225,265,242],{"class":235},[225,267,246],{"class":245},[205,269,271],{"id":270},"exemplo","Exemplo",[189,273,274],{},"Para um exemplo de como utilizar esse comando, teste o Código  e veja o retângulo inclinado.",[210,276,277,278],{},"Código  - Exemplo de cisalhamento horizontal",[214,279,280],{"v-slot:code":5},[217,281,283],{"className":219,"code":282,"language":221,"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",[196,284,285,300,323,342,362,390],{"__ignoreMap":5},[225,286,287,291,294,297],{"class":227,"line":228},[225,288,290],{"class":289},"spNyl","function",[225,292,293],{"class":231}," setup",[225,295,296],{"class":245},"()",[225,298,299],{"class":245}," {\n",[225,301,302,305,308,312,315,318,321],{"class":227,"line":249},[225,303,304],{"class":231},"  createCanvas",[225,306,236],{"class":307},"swJcz",[225,309,311],{"class":310},"sbssI","800",[225,313,314],{"class":245},",",[225,316,317],{"class":310},"600",[225,319,320],{"class":307},")",[225,322,246],{"class":245},[225,324,325,328,330,333,335,338,340],{"class":227,"line":256},[225,326,327],{"class":231},"  translate",[225,329,236],{"class":307},[225,331,332],{"class":310},"250",[225,334,314],{"class":245},[225,336,337],{"class":310},"200",[225,339,320],{"class":307},[225,341,246],{"class":245},[225,343,345,348,350,352,354,357,360],{"class":227,"line":344},4,[225,346,347],{"class":231},"  shearX",[225,349,236],{"class":307},[225,351,239],{"class":231},[225,353,236],{"class":307},[225,355,356],{"class":310},"30",[225,358,359],{"class":307},"))",[225,361,246],{"class":245},[225,363,365,368,370,373,375,377,379,381,383,386,388],{"class":227,"line":364},5,[225,366,367],{"class":231},"  rect",[225,369,236],{"class":307},[225,371,372],{"class":310},"0",[225,374,314],{"class":245},[225,376,372],{"class":310},[225,378,314],{"class":245},[225,380,337],{"class":310},[225,382,314],{"class":245},[225,384,385],{"class":310},"150",[225,387,320],{"class":307},[225,389,246],{"class":245},[225,391,393],{"class":227,"line":392},6,[225,394,395],{"class":245},"}\n",[397,398],"p5-sketch",{"code":282},[400,401,402,403,406],"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 ",[196,404,405],{},"shearX()"," vira um paralelogramo inclinado, mantendo a base fixa enquanto o topo é empurrado para o lado.",[189,408,409,410,412,413,416,417,412,420,423],{},"Experimente combinar ",[196,411,405],{}," e ",[196,414,415],{},"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 ",[196,418,419],{},"push()",[196,421,422],{},"pop()"," para delimitar seu alcance. Mais detalhes e exemplos podem ser encontrados na referência do p5.js.",[425,426,427],"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":249,"depth":249,"links":429},[430,431],{"id":207,"depth":249,"text":208},{"id":270,"depth":249,"text":271},null,"Veja como inclinar o sistema de coordenadas","md",{},true,{"title":99,"description":433},"ys2hkn0jNlrKv5IbW60cKamG5C1bZegNIwQeFP2xeXs",[440,442],{"title":95,"path":96,"stem":97,"description":441,"children":-1},"Veja como redimensionar o sistema de coordenadas",{"title":103,"path":104,"stem":105,"description":443,"children":-1},"Veja como isolar o efeito das transformações",1786195202626]