1.4 O ponto

Ponto é o que não tem partes ou o que não tem grandeza alguma.

O ponto geométrico é um ser invisível. Deve, portanto, ser definido como imaterial.

(Ponto) É a menor unidade gráfica e, por assim dizer, o “átomo” de toda expressão pictórica.

As definições acima são de um matemático (Euclides, da sua série de livros Elementos, volume I), de um artista plástico (Wassily Kandinsky, do seu livro Ponto Linha Plano) e de um designer de tipos (Adrian Frutiger, do seu Sinais & Símbolos) sobre um mesmo tema: o ponto.

Fiz questão de trazer essas informações pois na qualidade de designer e ilustrador, estudar é o q enriquece meu trabalho. Em programação – e neste caso uma programação voltada ao visual – encontraremos um comando q desenhará para nós esta q é a entidade primeira da expressão pictórica. Para desenhar um ponto na tela do P5, basta digitar:

point(x,y);

Os valores de x e y indicam as coordenadas, a posição do ponto dentro do plano, do canvas criado.

Aproveitando a configuração padrão do editor online do P5, vamos digitar point(200, 200) na linha abaixo do comando background(220) dentro de function draw() {}. Ao clicar sobre o botão Play, o Preview à direita exibirá, no meio do canvas, um minúsculo e quase invisível ponto! Por padrão ele terá cor preta e tamanho de 1 pixel.

A orientação espacial do P5 difere um pouco do conhecido plano cartesiano q a gente viu na escola. O “ponto origem” situa-se no canto superior esquerdo do canvas. Experimente digitar point(0,0), clique sobre Play (ou deixe marcada a opção Auto-refresh) e veja o q acontece. Ao informar os valores 200 e 200 dentro dos parênteses do comando point(), na verdade estamos dizendo para o programa desenhar o ponto no meio da tela q mede 400 pixels de largura e 400 pixels de altura. Aprenderemos mais tarde formas mais automáticas de posicionar os elementos no centro da tela, por exemplo.

Vimos como determinar a localização espacial do nosso ponto. Mas podemos alterar ainda outros dois parâmetros desta entidade: seu tamanho e cor.

Para alterar o tamanho (e consequentemente nos afastarmos da definição de q um ponto não possui grandeza alguma), vamos conhecer o comando strokeWeight(), q configura a espessura do traço. Como um ponto não possui largura nem altura, aumentando o valor deste parâmetro, o ponto vai se assemelhar a um círculo. Digite 10 dentro dos parênteses de strokeWeight() – e não esqueça de sempre atualizar o navegador para ver as modificações. O ponto exibido terá 10 pixels de largura e altura. Esta é uma maneira de desenhar círculos, por exemplo.

Para alterar a cor dos pontos criados, o parâmetro se chama stroke(). Experimente digitar stroke(255) logo abaixo de strokeWeight(). O ponto criado terá cor branca.

Veja q até agora informamos valores fixos para os comandos digitados. No post anterior aprendemos q o comando random() permite a escolha de um valor aleatório dentro de um intervalo. Digitar, por exemplo strokeWeight(10, 100) quer dizer q a espessura do traço variará entre os valores 10 e 100. Se houver apenas um valor digitado, a variação será de 0 a este valor.

p5_ponto
Com um “punhado” de linhas de comando é possível desenhar a silhueta da cabeça de um famoso personagem da animação. Para organizar o código, utilize “//” para criar uma linha de comentário, um lembrete para ajudá-lo a se localizar dentro do código. No exemplo acima, as instruções para desenhar a cabeça estão depois da linha //cabeca e antes de //orelha_esq

Abaixo alguns desenhos executados apenas usando os o comando point() e variações de espessura de traço (strokeWeight) e cor de traço (stroke) e fundo (background).

Agora é sua vez. Experimente fazer desenhos simples utilizando os comandos apresentados até aqui. Vc vai se surpreender como pode obter alguns resultados interessantes com os poucos conceitos vistos até agora.

1.4 O ponto