Poli.school
Formas geométricas

Pontos

Veja como desenhar pontos individuais

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 point(), útil para marcar posições específicas ou compor desenhos a partir de conjuntos de pontos.

O comando point(x, y) recebe apenas dois parâmetros, que indicam a posição horizontal (x) e vertical (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.

Estrutura básica

Código 4.1 - estrutura geral para definição de pontos no p5.js
point(x, y);

Exemplo

Para um exemplo de como utilizar esse comando, teste o Código 4.2 e veja os pontos formados.

Código 4.2 - Exemplo de definição de pontos
function setup() {
  createCanvas(800,600);
  strokeWeight(10);
  point(200,200);
  point(400,300);
  point(600,200);
  point(400,450);
}
Carregando sketch…
Como um ponto ocupa apenas um pixel por padrão, o comando 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.

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 beginShape(). Mais detalhes e exemplos podem ser encontrados na referência do p5.js.

Copyright © 2026