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

1.3 Primeiros passos

Já decidimos q vamos estudar P5 e vamos usar o editor online do próprio projeto. Se vc leu o post anterior, viu q é possível salvar os estudos feitos para acesso futuro, mas para isso será necessário criar uma conta.

Assim q o editor é carregado, algumas linhas de comando padrão são exibidas automaticamente: são as primeiras funções q veremos e q acompanharão todos os nossos estudos daqui pra frente.

A primeira delas é a function setup(){}, onde declaramos todas as informações q serão lidas uma única vez. Já o conteúdo q estiver dentro das chaves da  function draw() {} será executado em loop.

Logo na parte superior do editor, abaixo da linha de menu, existem dois botões: um de Play e outro de Stop. Se vc clicar sobre o Play, poderá ver o resultado das linhas de comando da área à esquerda do editor na área à direita, o Preview.

p5-editor
Interface do P5 WebEditor. O Preview à direita exibe o resultado do código à esquerda. No exemplo acima, foi criada uma tela (canvas) de 400x400px e preenchida com um valor de cinza (background(220))

Vamos “traduzir” o q está acontecendo. Em function setup() {} está escrito o comando createCanvas e dois valores entre parênteses. Essa instrução nada mais faz do q criar uma “tela” para nosso trabalho e delimitar suas dimensões em largura e altura em pixels, isto é, o width e o height. Vc pode alterar os valores apresentados, não esquecendo de clicar sobre o botão de Play para ver os novos resultados. Pensando q essa operação será realizada inúmeras vezes, existe uma configuração no editor q atualiza a navegador automaticamente. Marque a opção Auto-refresh e em seguida torne a modificar os valores dentro dos parênteses do createCanvas.

DICA: para criar um canvas q tome toda a extensão da área útil do navegador, digite windowWidth, windowHeight dentro dos parênteses do comando createCanvas.

Agora vamos à segunda função do nosso programa. Dentro de function draw() {} temos o comando background e um valor dentro de dois parênteses. Esta é uma instrução q preenche o fundo da tela criada com uma cor. O padrão de cor adotado é o RGB, q trabalha com intervalos de 0 a 255 para cada canal de cor, isto é 256 valores para R (red), 256 para G (green) e 256 para B (blue). Quando o valor entre parênteses só mostra um único número, o background assumirá um tom de cinza variando de 0 (preto) a 255 (branco). Se por acaso vc digitar dois valores (separados por vírgulas), o segundo valor configura a opacidade do tom de cinza.

Experimente recortar a linha de comando de background de function draw() {}, colar em function setup() {} logo abaixo de createCanvas e clique sobre o Play. Vc verá q o resultado é o mesmo. Então pq não deixar o background aí? A resposta é q haverá momentos em q alguns comandos serão listados dentro do setup e outras vezes dentro de draw. Tudo dependerá do nosso objetivo.

Que tal criar nosso primeiro desafio? Vamos alterar a cor de fundo da tela para um valor de cinza aleatório, entre 0 e 255. Para tanto, conheceremos um dos comandos mais importantes dentro da nossa linguagem de programação: o random()Digite dentro dos parênteses do background o comando random() e dentro dos parênteses deste o valor 255. Vai ficar assim:

background(random(255));

Clique sobre o botão de Play. O q acontece? O canvas criado “piscará”, apresentando valores q variam entre 0 e 255. Isto acontece pq tudo o q está listado dentro de function draw() {} é lido em loop, ou seja, indefinidamente. A velocidade de leitura do loop é dada por um parâmetro chamado frameRate(), q é baseada na “taxa de atualização” (ou refresh rate) da tela do dispositivo. No caso dos computadores, este valor é de 60fps na maioria dos casos.

p5-editor_random
O comando random() acima muda a cor de fundo da tela numa escala de cinza entre 0 e 255. Se for digitado dentro de function draw() {}, a atualização da tela obedecerá ao frame rate do dispositivo de leitura

Como fazer para exibir um valor aleatório por vez? Uma das opções é digitar esta linha de comando dentro de function setup() {}, pois como todo o conteúdo aí listado é lido apenas uma única vez, o valor gerado aleatoriamente dentro random() só mudará qdo o programa for carregado novamente.

Parece simples, parece óbvio, parece muito “blá-blá-blá” para pouca coisa, mas meu objetivo neste post não foi apenas mostrar a interface do editor online do P5. Para mim, o mais importante não é apenas ser um repetidor de passos de um tutorial. Quando recortamos, por exemplo, a linha de background da função draw e a transferimos para o setup, na verdade estamos experimentando e nos questionando o q pode acontecer se uma linha estiver nesta ou naquela localização. O programa é lido de forma linear, linha por linha, de cima para baixo. Veremos q ter atenção tanto em relação à sintaxe qto à ordem de digitação das linhas é fundamental para obter o resultado desejado. Aqui, a “ordem dos tratores altera o viaduto”.

A gente se vê na próxima “lição”!

1.3 Primeiros passos