[{"data":1,"prerenderedAt":459},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-geometrias-linha":183,"-pcs3021-geometrias-linha-surround":454},[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":47,"body":185,"categoria":447,"creditoLink":447,"creditos":447,"descricao":447,"description":448,"eaulas":447,"extension":449,"meta":450,"navigation":451,"path":48,"seo":452,"stem":49,"video":447,"youtube":447,"youtubeLink":447,"__hash__":453},"docs\u002Fpcs3021\u002F2.geometrias\u002F4.linha.md",{"type":186,"value":187,"toc":443},"minimark",[188,197,219,224,271,275,278,413,416,436,439],[189,190,191,192,196],"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 ",[193,194,195],"code",{},"line()",", que traça um segmento de reta entre dois pontos.",[189,198,199,200,203,204,207,208,211,212,207,215,218],{},"O comando ",[193,201,202],{},"line(x1, y1, x2, y2)"," recebe quatro parâmetros. O primeiro par (",[193,205,206],{},"x1"," e ",[193,209,210],{},"y1",") indica a posição do ponto inicial da linha, e o segundo par (",[193,213,214],{},"x2",[193,216,217],{},"y2",") indica a posição do ponto final. O p5.js conecta esses dois pontos com um segmento de reta.",[220,221,223],"h2",{"id":222},"estrutura-básica","Estrutura básica",[225,226,227,228],"code-preview",{},"Código - estrutura geral para definição de linhas no p5.js",[229,230,231],"template",{"v-slot:code":5},[232,233,237],"pre",{"className":234,"code":235,"language":236,"meta":5,"style":5},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","line(x1, y1, x2, y2);\n","js",[193,238,239],{"__ignoreMap":5},[240,241,244,247,251,255,258,260,263,265,268],"span",{"class":242,"line":243},"line",1,[240,245,242],{"class":246},"s2Zo4",[240,248,250],{"class":249},"sTEyZ","(x1",[240,252,254],{"class":253},"sMK4o",",",[240,256,257],{"class":249}," y1",[240,259,254],{"class":253},[240,261,262],{"class":249}," x2",[240,264,254],{"class":253},[240,266,267],{"class":249}," y2)",[240,269,270],{"class":253},";\n",[220,272,274],{"id":273},"exemplo","Exemplo",[189,276,277],{},"Para um exemplo de como utilizar esse comando, teste o Código  e veja as linhas formadas.",[225,279,280,281],{},"Código - Exemplo de definição de linhas",[229,282,283],{"v-slot:code":5},[232,284,286],{"className":234,"code":285,"language":236,"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",[193,287,288,303,327,355,382,407],{"__ignoreMap":5},[240,289,290,294,297,300],{"class":242,"line":243},[240,291,293],{"class":292},"spNyl","function",[240,295,296],{"class":246}," setup",[240,298,299],{"class":253},"()",[240,301,302],{"class":253}," {\n",[240,304,306,309,313,317,319,322,325],{"class":242,"line":305},2,[240,307,308],{"class":246},"  createCanvas",[240,310,312],{"class":311},"swJcz","(",[240,314,316],{"class":315},"sbssI","800",[240,318,254],{"class":253},[240,320,321],{"class":315},"600",[240,323,324],{"class":311},")",[240,326,270],{"class":253},[240,328,330,333,335,338,340,342,344,347,349,351,353],{"class":242,"line":329},3,[240,331,332],{"class":246},"  line",[240,334,312],{"class":311},[240,336,337],{"class":315},"100",[240,339,254],{"class":253},[240,341,337],{"class":315},[240,343,254],{"class":253},[240,345,346],{"class":315},"700",[240,348,254],{"class":253},[240,350,337],{"class":315},[240,352,324],{"class":311},[240,354,270],{"class":253},[240,356,358,360,362,364,366,368,370,373,375,378,380],{"class":242,"line":357},4,[240,359,332],{"class":246},[240,361,312],{"class":311},[240,363,337],{"class":315},[240,365,254],{"class":253},[240,367,337],{"class":315},[240,369,254],{"class":253},[240,371,372],{"class":315},"400",[240,374,254],{"class":253},[240,376,377],{"class":315},"500",[240,379,324],{"class":311},[240,381,270],{"class":253},[240,383,385,387,389,391,393,395,397,399,401,403,405],{"class":242,"line":384},5,[240,386,332],{"class":246},[240,388,312],{"class":311},[240,390,346],{"class":315},[240,392,254],{"class":253},[240,394,337],{"class":315},[240,396,254],{"class":253},[240,398,372],{"class":315},[240,400,254],{"class":253},[240,402,377],{"class":315},[240,404,324],{"class":311},[240,406,270],{"class":253},[240,408,410],{"class":242,"line":409},6,[240,411,412],{"class":253},"}\n",[414,415],"p5-sketch",{"code":285},[417,418,419,420,423,424,427,428,431,432,435],"tip",{},"A espessura da linha pode ser ajustada com o comando ",[193,421,422],{},"strokeWeight()",", informando o número de pixels desejado. Já a cor é definida com ",[193,425,426],{},"stroke()",". Assim, ",[193,429,430],{},"strokeWeight(5)"," seguido de ",[193,433,434],{},"stroke(255,0,0)"," produz linhas vermelhas com cinco pixels de espessura.",[189,437,438],{},"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.",[440,441,442],"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":305,"depth":305,"links":444},[445,446],{"id":222,"depth":305,"text":223},{"id":273,"depth":305,"text":274},null,"Veja como criar linhas retas","md",{},true,{"title":47,"description":448},"5a0x5msWw67TYgr85RKsckdE3VtB6HUsFkmBoiCPfic",[455,457],{"title":43,"path":44,"stem":45,"description":456,"children":-1},"Veja como criar triângulos",{"title":51,"path":52,"stem":53,"description":458,"children":-1},"Veja como desenhar pontos individuais",1786195201212]