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