[{"data":1,"prerenderedAt":398},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-geometrias-ponto":139,"-pcs3021-geometrias-ponto-surround":393},[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":40,"body":141,"categoria":386,"creditoLink":386,"creditos":386,"descricao":386,"description":387,"eaulas":386,"extension":388,"meta":389,"navigation":390,"path":41,"seo":391,"stem":42,"video":386,"youtube":386,"youtubeLink":386,"__hash__":392},"docs\u002Fpcs3021\u002F2.geometrias\u002F5.ponto.md",{"type":142,"value":143,"toc":382},"minimark",[144,153,168,173,211,214,217,360,363,371,378],[145,146,147,148,152],"p",{},"O ponto é a mais simples de todas as primitivas gráficas e representa uma única coordenada na tela. No p5.js, ele é criado com o comando ",[149,150,151],"code",{},"point()",", útil para marcar posições específicas ou compor desenhos a partir de conjuntos de pontos.",[145,154,155,156,159,160,163,164,167],{},"O comando ",[149,157,158],{},"point(x, y)"," recebe apenas dois parâmetros, que indicam a posição horizontal (",[149,161,162],{},"x",") e vertical (",[149,165,166],{},"y",") do ponto a ser desenhado. Por padrão, cada ponto ocupa apenas um pixel na tela, o que pode torná-lo difícil de enxergar dependendo do fundo.",[169,170,172],"h2",{"id":171},"estrutura-básica","Estrutura básica",[174,175,176,177],"code-preview",{},"Código 4.1 - estrutura geral para definição de pontos no p5.js",[178,179,180],"template",{"v-slot:code":5},[181,182,186],"pre",{"className":183,"code":184,"language":185,"meta":5,"style":5},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","point(x, y);\n","js",[149,187,188],{"__ignoreMap":5},[189,190,193,197,201,205,208],"span",{"class":191,"line":192},"line",1,[189,194,196],{"class":195},"s2Zo4","point",[189,198,200],{"class":199},"sTEyZ","(x",[189,202,204],{"class":203},"sMK4o",",",[189,206,207],{"class":199}," y)",[189,209,210],{"class":203},";\n",[169,212,15],{"id":213},"exemplo",[145,215,216],{},"Para um exemplo de como utilizar esse comando, teste o Código 4.2 e veja os pontos formados.",[174,218,219,220],{},"Código 4.2 - Exemplo de definição de pontos",[178,221,222],{"v-slot:code":5},[181,223,225],{"className":183,"code":224,"language":185,"meta":5,"style":5},"function setup() {\n  createCanvas(800,600);\n  strokeWeight(10);\n  point(200,200);\n  point(400,300);\n  point(600,200);\n  point(400,450);\n}\n",[149,226,227,242,266,281,300,319,336,354],{"__ignoreMap":5},[189,228,229,233,236,239],{"class":191,"line":192},[189,230,232],{"class":231},"spNyl","function",[189,234,235],{"class":195}," setup",[189,237,238],{"class":203},"()",[189,240,241],{"class":203}," {\n",[189,243,245,248,252,256,258,261,264],{"class":191,"line":244},2,[189,246,247],{"class":195},"  createCanvas",[189,249,251],{"class":250},"swJcz","(",[189,253,255],{"class":254},"sbssI","800",[189,257,204],{"class":203},[189,259,260],{"class":254},"600",[189,262,263],{"class":250},")",[189,265,210],{"class":203},[189,267,269,272,274,277,279],{"class":191,"line":268},3,[189,270,271],{"class":195},"  strokeWeight",[189,273,251],{"class":250},[189,275,276],{"class":254},"10",[189,278,263],{"class":250},[189,280,210],{"class":203},[189,282,284,287,289,292,294,296,298],{"class":191,"line":283},4,[189,285,286],{"class":195},"  point",[189,288,251],{"class":250},[189,290,291],{"class":254},"200",[189,293,204],{"class":203},[189,295,291],{"class":254},[189,297,263],{"class":250},[189,299,210],{"class":203},[189,301,303,305,307,310,312,315,317],{"class":191,"line":302},5,[189,304,286],{"class":195},[189,306,251],{"class":250},[189,308,309],{"class":254},"400",[189,311,204],{"class":203},[189,313,314],{"class":254},"300",[189,316,263],{"class":250},[189,318,210],{"class":203},[189,320,322,324,326,328,330,332,334],{"class":191,"line":321},6,[189,323,286],{"class":195},[189,325,251],{"class":250},[189,327,260],{"class":254},[189,329,204],{"class":203},[189,331,291],{"class":254},[189,333,263],{"class":250},[189,335,210],{"class":203},[189,337,339,341,343,345,347,350,352],{"class":191,"line":338},7,[189,340,286],{"class":195},[189,342,251],{"class":250},[189,344,309],{"class":254},[189,346,204],{"class":203},[189,348,349],{"class":254},"450",[189,351,263],{"class":250},[189,353,210],{"class":203},[189,355,357],{"class":191,"line":356},8,[189,358,359],{"class":203},"}\n",[361,362],"p5-sketch",{"code":224},[364,365,366,367,370],"tip",{},"Como um ponto ocupa apenas um pixel por padrão, o comando ",[149,368,369],{},"strokeWeight()"," é essencial para torná-lo visível. Aumentando esse valor, o ponto passa a ser desenhado como um pequeno círculo, facilitando a visualização e o destaque de posições importantes.",[145,372,373,374,377],{},"Experimente usar pontos dentro de estruturas de repetição para criar campos de pontos, texturas ou representações de dados. Percorrendo coordenadas de forma sistemática, é possível preencher a tela com padrões pontilhados ou plotar informações. Os pontos também são a base conceitual dos vértices usados em ",[149,375,376],{},"beginShape()",". Mais detalhes e exemplos podem ser encontrados na referência do p5.js.",[379,380,381],"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":244,"depth":244,"links":383},[384,385],{"id":171,"depth":244,"text":172},{"id":213,"depth":244,"text":15},null,"Veja como desenhar pontos individuais","md",{},true,{"title":40,"description":387},"AEcHYZ6_Rf-GtFOzWNrxgrnQhXn0v8ZN4za-uLJW1rY",[394,396],{"title":36,"path":37,"stem":38,"description":395,"children":-1},"Veja como criar linhas retas",{"title":44,"path":45,"stem":46,"description":397,"children":-1},"Veja como criar uma forma geométrica customizada",1784150367461]