[{"data":1,"prerenderedAt":414},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-geometrias-linha":139,"-pcs3021-geometrias-linha-surround":409},[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":36,"body":141,"categoria":402,"creditoLink":402,"creditos":402,"descricao":402,"description":403,"eaulas":402,"extension":404,"meta":405,"navigation":406,"path":37,"seo":407,"stem":38,"video":402,"youtube":402,"youtubeLink":402,"__hash__":408},"docs\u002Fpcs3021\u002F2.geometrias\u002F4.linha.md",{"type":142,"value":143,"toc":398},"minimark",[144,153,175,180,227,230,233,368,371,391,394],[145,146,147,148,152],"p",{},"A linha é o elemento gráfico mais fundamental em desenhos digitais e serve de base para muitas outras construções. No p5.js, ela é criada com o comando ",[149,150,151],"code",{},"line()",", que traça um segmento de reta entre dois pontos.",[145,154,155,156,159,160,163,164,167,168,163,171,174],{},"O comando ",[149,157,158],{},"line(x1, y1, x2, y2)"," recebe quatro parâmetros. O primeiro par (",[149,161,162],{},"x1"," e ",[149,165,166],{},"y1",") indica a posição do ponto inicial da linha, e o segundo par (",[149,169,170],{},"x2",[149,172,173],{},"y2",") indica a posição do ponto final. O p5.js conecta esses dois pontos com um segmento de reta.",[176,177,179],"h2",{"id":178},"estrutura-básica","Estrutura básica",[181,182,183,184],"code-preview",{},"Código 4.1 - estrutura geral para definição de linhas no p5.js",[185,186,187],"template",{"v-slot:code":5},[188,189,193],"pre",{"className":190,"code":191,"language":192,"meta":5,"style":5},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","line(x1, y1, x2, y2);\n","js",[149,194,195],{"__ignoreMap":5},[196,197,200,203,207,211,214,216,219,221,224],"span",{"class":198,"line":199},"line",1,[196,201,198],{"class":202},"s2Zo4",[196,204,206],{"class":205},"sTEyZ","(x1",[196,208,210],{"class":209},"sMK4o",",",[196,212,213],{"class":205}," y1",[196,215,210],{"class":209},[196,217,218],{"class":205}," x2",[196,220,210],{"class":209},[196,222,223],{"class":205}," y2)",[196,225,226],{"class":209},";\n",[176,228,15],{"id":229},"exemplo",[145,231,232],{},"Para um exemplo de como utilizar esse comando, teste o Código 4.2 e veja as linhas formadas.",[181,234,235,236],{},"Código 4.2 - Exemplo de definição de linhas",[185,237,238],{"v-slot:code":5},[188,239,241],{"className":190,"code":240,"language":192,"meta":5,"style":5},"function setup() {\n  createCanvas(800,600);\n  line(100,100,700,100);\n  line(100,100,400,500);\n  line(700,100,400,500);\n}\n",[149,242,243,258,282,310,337,362],{"__ignoreMap":5},[196,244,245,249,252,255],{"class":198,"line":199},[196,246,248],{"class":247},"spNyl","function",[196,250,251],{"class":202}," setup",[196,253,254],{"class":209},"()",[196,256,257],{"class":209}," {\n",[196,259,261,264,268,272,274,277,280],{"class":198,"line":260},2,[196,262,263],{"class":202},"  createCanvas",[196,265,267],{"class":266},"swJcz","(",[196,269,271],{"class":270},"sbssI","800",[196,273,210],{"class":209},[196,275,276],{"class":270},"600",[196,278,279],{"class":266},")",[196,281,226],{"class":209},[196,283,285,288,290,293,295,297,299,302,304,306,308],{"class":198,"line":284},3,[196,286,287],{"class":202},"  line",[196,289,267],{"class":266},[196,291,292],{"class":270},"100",[196,294,210],{"class":209},[196,296,292],{"class":270},[196,298,210],{"class":209},[196,300,301],{"class":270},"700",[196,303,210],{"class":209},[196,305,292],{"class":270},[196,307,279],{"class":266},[196,309,226],{"class":209},[196,311,313,315,317,319,321,323,325,328,330,333,335],{"class":198,"line":312},4,[196,314,287],{"class":202},[196,316,267],{"class":266},[196,318,292],{"class":270},[196,320,210],{"class":209},[196,322,292],{"class":270},[196,324,210],{"class":209},[196,326,327],{"class":270},"400",[196,329,210],{"class":209},[196,331,332],{"class":270},"500",[196,334,279],{"class":266},[196,336,226],{"class":209},[196,338,340,342,344,346,348,350,352,354,356,358,360],{"class":198,"line":339},5,[196,341,287],{"class":202},[196,343,267],{"class":266},[196,345,301],{"class":270},[196,347,210],{"class":209},[196,349,292],{"class":270},[196,351,210],{"class":209},[196,353,327],{"class":270},[196,355,210],{"class":209},[196,357,332],{"class":270},[196,359,279],{"class":266},[196,361,226],{"class":209},[196,363,365],{"class":198,"line":364},6,[196,366,367],{"class":209},"}\n",[369,370],"p5-sketch",{"code":240},[372,373,374,375,378,379,382,383,386,387,390],"tip",{},"A espessura da linha pode ser ajustada com o comando ",[149,376,377],{},"strokeWeight()",", informando o número de pixels desejado. Já a cor é definida com ",[149,380,381],{},"stroke()",". Assim, ",[149,384,385],{},"strokeWeight(5)"," seguido de ",[149,388,389],{},"stroke(255,0,0)"," produz linhas vermelhas com cinco pixels de espessura.",[145,392,393],{},"Experimente usar linhas dentro de estruturas de repetição para criar padrões visuais interessantes, como leques, grades ou efeitos de moiré. Variando a posição inicial ou final de cada linha em pequenos incrementos, é possível gerar composições complexas a partir desse elemento tão simples. Mais detalhes e exemplos podem ser encontrados na referência do p5.js.",[395,396,397],"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 .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":260,"depth":260,"links":399},[400,401],{"id":178,"depth":260,"text":179},{"id":229,"depth":260,"text":15},null,"Veja como criar linhas retas","md",{},true,{"title":36,"description":403},"J1MrY9ReGRwITMgMCKAPaRB3xqWPTzY-aHVlKcMiGKk",[410,412],{"title":32,"path":33,"stem":34,"description":411,"children":-1},"Veja como criar triângulos",{"title":40,"path":41,"stem":42,"description":413,"children":-1},"Veja como desenhar pontos individuais",1784150367313]