1.7 Interagindo

Costumo classificar em três grupos o q podemos criar usando Javascript/p5:

  • imagens estáticas (criar e manipular);
  • imagens em movimento (animações);
  • interações.

Esta classificação é bem pessoal e pode sofrer alterações conforme eu aprenda mais a respeito da linguagem. Por enquanto ela satisfaz aos meus objetivos.

Até o momento vimos de forma bem rudimentar a criação de imagens a partir do uso de um comando de desenho (o point()) e alguns modificadores (o stroke() e o strokeWeight()). Existem outros comandos para o desenho de outras formas básicas, mas foi uma opção minha não falar sobre eles até agora. Com certeza esses comandos serão abordadas no “apêndice” desta unidade inicial cujo objetivo é reunir o q considero mais elementar em p5.

Depois, abordamos as variáveis, sua função e o emprego delas para a criação de uma animação simples. O conhecimento de um comando de condicional, o if(), permitiu-nos dar um passo à frente neste assunto.

Para encerrar a lista acima, falta abordar o terceiro item. Até então, note q a “audiência” nada faz além de assistir ao q o programa executa. Quer seja a criação de um ponto na tela ou a movimentação dele, tudo é assistido de forma passiva. Em uma interação, a audiência pode agir e mudar o comportamento do q o programa faz. Veremos de forma bem iniciática como isso acontece.

Vamos partir do mesmo programa q gerou o ponto no meio do canvas, mostrado no post anterior.

interacao_1

Só para revisar, a sequência de comandos acima gera um ponto de 10px (strokeWeight(10)) na cor preta (stroke(0) na posição x = 200 e y = 200. Este ponto permanecerá imóvel até o fim dos tempos.

Para interagirmos na sua posição, por exemplo, e movê-lo no canvas, vamos conhecer dois comandos: o mouseX e o mouseY.

Tanto um quanto o outro registram a posição do mouse no eixo X e eixo Y e retornam um valor numérico. Podemos usar estes valores nas coordenadas X e Y do comando point(), por exemplo. Vai ficar assim:

interacao_2
Os comandos mouseX e mouseY acima atuam sobre as coordenadas do ponto em tempo real

Execute o código e note q o ponto preto acompanhará o movimento do mouse no canvas criado.

Como “bônus” para esta postagem, uma rápida modificação no programa acima nos fornecerá um tosco Paint (quem for da velha guarda vai saber do q estou falando). Para tanto basta recortar a linha background() q está em function draw() {} e colar em function setup () {}, logo após o createCanvas().

interacao_5
Acima, um protótipo de programa de desenho beeeem basicão!

Agora é só se divertir com seu primeiro programa de desenho!

Acesse aqui o código final desta postagem.

1.7 Interagindo

1.6 Começando a animar

Até agora vimos comandos e sintaxes para criação de imagens estáticas. A partir do conhecimento e uso de variáveis, é possível gerar imagens em movimento, por exemplo. Veremos como produzir nossas primeiras animações usando P5.

O código a seguir gera um “ponto” preto de 10px de diâmetro no centro de um canvas de 400×400 pixels.

ponto_estatico

Agora vamos escrever, depois do comando point(), a seguinte linha:

x = x + 1;

O q isso quer dizer? Quer dizer q na próxima vez q a sequência de comandos for lida (pois tudo o q está dentro de function draw() {} é lido em loop), o ponto será desenhando mais 1 pixel à direita do anterior.

ponto_movimento_com_rastro
Se o background estiver escrito em function setup(), o ponto deixa um “rastro” ao se mover

Se o comando background estiver escrito em function setup() {}, o ponto anterior não é apagado, criando um “rastro”. Para evitar isso e o ponto se “mover” sem deixar vetígios, basta escrever o comando de background()  dentro de function draw() {}.

ponto_movimento
Aqui o ponto se move sem deixar “vestígios” pois o comando background foi escrito em function draw()

Variando a parcela da soma (experimente escrever x + 10 ou x + 0.5, por exemplo), teremos “velocidades” diferentes para o deslocamento do ponto. Para valores negativos (x – 1, por exemplo), o ponto corre no sentido oposto.

Alterando o valor inicial de x para 0, veremos o ponto percorrer toda a largura do canvas até sumir pela borda direita.

ponto_x-inicial=0
Acima o valor inicial de x = 0 faz com q a animação comece na borda esquerda do canvas

DICA: uma forma abreviada de escrever x = x + 1 é escrever x++.

Mas e se quisermos q o ponto volte ao local original qdo chegar à borda oposta? Ou se quisermos q ele mude de sentido? Para isso vamos conhecer um comando de condicional, o if.

Vamos ao primeiro caso: voltar ao local original qdo o ponto atingir a borda direita, partindo da borda esquerda. Para tanto, basta escrever as linhas de código a seguir, após o incremento de x:

if (x > width) {
x = 0;
}

As linhas acima dizem q quando o valor de x for maior q a largura da tela (a condição deve ser escrita dentro dos parênteses), a variável deve voltar ao valor 0, o q significa voltar à borda esquerda do canvas (essa instrução fica dentro das chaves).

if_caso1
Começando a se mover a partir da borda esquerda do canvas, qdo o ponto atingir a margem direita, ele volta automaticamente para a posição original com x= 0

Vamos ao segundo caso: mudar o sentido da animação.

Aqui precisamos modificar um pouco o código original para atingir nosso objetivo. A primeira coisa a fazer é criar uma variável q será o nosso valor de incremento, ao invés de escrever um número à soma de x como fizemos até agora.

Em function setup() {}, vamos atribuir um valor para inc. Por exemplo, inc = 1.

Em seguida vamos inserir esta variável na soma de x, ou seja, x = x + inc.

O “pulo do gato” vem agora. Após a linha de soma, vamos criar duas condicionais. A primeira delas será para quando x chegar à borda direita. Quando isso acontecer, o valor de inc será negativo, o q fará o ponto mudar o sentido da animação, ou seja:

if (x > width) {
inc = -inc;
}

E a segunda condicional será qdo o ponto atingir a borda esquerda do canvas. Novamente o inc deverá sofrer nova inversão, conforme as linhas abaixo:

if (x < 0) {
inc = -inc;
}

if_caso2

Experimente e veja o ponto mover-se de um lado para o outro infinitamente!

DICAS: Para “enxugar” o código e deixá-lo mais “limpo”, existem algumas formas de “abreviação” de escrita. Na imagem a seguir veremos 2 delas.

if_caso2_shortcode

A primeira diz respeito à soma x = x + inc q pode ser escrita como x += inc

Já a segunda é a utilização de duas barras verticais “||” dentro da condicional if . Isso significa q se a primeira condição OU a segunda condição acontecerem, a expressão será verdadeira e a operação dentro das chaves será executada.

Clique aqui para ver o código final.

1.6 Começando a animar

1.5 Variáveis

Vamos dar continuidade aos nossos estudos de P5 e ver novos conceitos.

Até agora estamos trabalhando com valores inseridos diretamente dentro dos comandos do P5. Esse procedimento “engessa” o código, pois se precisarmos modificar um parâmetro q se repete, por exemplo, teremos q alterar um por um. Uma saída para este tipo de situação seria criar um recurso para facilitar a alteração de valores de um parâmetro. Para tanto vamos conhecer algo q é tão natural no dia a dia de um programador como é o ato de respirar: declarar variáveis.

Variável é um elemento q pode armazenar valores, ou seja, q pode variar seu conteúdo. Ao invés de associar valores diretamente no código, criamos variáveis, associamos valores a elas e inserimos as variáveis dentro do código. Uma vez feita uma alteração de valores na variável, todos os lugares dentro do código q usarem essa variável serão afetados pela mudança. Observe o código abaixo:

semaforo_sem_variavel

Temos um “semáforo” desenhado no meio da tela, formado por 3 pontos de mesmo tamanho (strokeWeight igual a 30 pixels) e cada um com um valor de cor (stroke) diferente. Suponhamos que eu deseje deslocar o “semafóro” para direita ou para a esquerda, por exemplo. Bastaria modificar o primeiro valor do comando point() dos 3 círculos, q atualmente é 200, ou seja, teremos q repetir uma operação três vezes para ter o resultado desejado. Imagine se fossem 100 ou 500 pontos? Como “otimizar ” essa operação e ganhar tempo? Podemos criar uma variável chamada posX (vc pode dar quase qualquer nome para uma variável pois existem exceções) e associar um valor a ela. Se eu quiser alterar a posição do semáforo, bastará modificar o valor da variável uma única vez, e tudo dentro do código q utilizar aquela variável sofrerá a mudança. Vejamos como vai ficar.

No início do código escrevemos let posX; para criarmos as variáveis chamadas globais. Dentro de function setup() {} eu escrevo o valor desejado para a variável criada. No nosso exemplo posX será igual a 200. Feito isso, precisamos agora inserir a variável “dentro” do código. Como desejamos q essa variável atue na coordenada X dos pontos criados, cada comando point() terá a variável posX no primeiro parâmetro dentro dos parênteses. O código ficará como abaixo:

semaforo_variavel

A princípio nada acontece, pois posX tem um valor q nós já usamos anteriormente, mas ao mudar o valor de 200 para 300 dentro de posX, todos os pontos do semáforo serão deslocados. Veja qto trabalho a gente economiza usando variáveis!

Indo um pouco além. Uma variável pode assumir diversos tipos de valores (números, palavras, inclusive comandos). Experimente digitar posX = random(width) logo acima do comando background(220) dentro de function draw() {} e veja o q acontece.

semaforo_variavel_random
O código acima, quando executado, apresenta o semáforo em diversas posições ao longo do eixo X, pois a variável posX assume valores aleatórios dentro a largura do canvas.
1.5 Variáveis

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

1.2 Escolhendo um editor para programar

Depois de decidir qual linguagem estudar, um passo importante é escolher um “ambiente” para programar, isto é, um editor de código.

Quando comecei a estudar Processing, o editor q utilizei era nativo da linguagem: bastava fazer o download (q pode ser feito aqui, se vc se interessar) e começar a escrever na interface oferecida. Para ver o resultado da programação, um botão de Play exibe o código em ação.

Quando comecei a estudar HTML e CSS, conheci alguns editores de código. O Sublime Text foi o primeiro e a opção sugerida por um curso rápido q fiz e gostei do programa. Mais tarde, tomei conhecimento de outros. O último foi o Visual Studio Code. Sempre experimentava a sugestão dos instrutores dos cursos q fazia, mas o fato é q até hoje o Sublime atende às minhas necessidades. Até porque eu conseguia programar em Processing a partir de alguns complementos q podem ser instalados manualmente e sair do editor nativo. Mas minha dica seria: se vc já usa algum editor e se dá bem com ele, continue usando. Caso contrário, experimente um dos citados acima.

Quando passei a programar em P5, o fato de já usar um editor de código profissional ajudou, pois o P5 é uma biblioteca de Javascript, e esses editores reconhecem o Javascript naturalmente. A diferença é q para rodar um programa escrito em P5 são necessárias 4 coisas:

  • o arquivo da biblioteca P5;
  • o arquivo de extensão JS contendo as linhas de código;
  • um arquivo HTML q “chama” os dois arquivos anteriores;
  • um navegador de internet para carregar o arquivo HTML.

Quem já tem alguma noção de linguagens para web sabe q um arquivo HTML pode conter linhas q carregam arquivos externos, como folhas de estilo (CSS) ou scripts (JS).

Entretanto (como tudo evolui), atualmente utilizo o editor online do P5. Além de não precisar instalar nada, o editor é “inteligente”, pois sinaliza erros de sintaxe ou de digitação. E ainda é possível salvar os arquivos, fazer upload de aquivos externos (como fontes e imagens) e fazer o download dos arquivos criados para serem trabalhados em um editor “offline”, como os citados anteriormente.

Se vc quer começar a programar em P5, use o editor online. Até porque será nele q vou trabalhar as próximas postagens. Vá até o site do editor, crie um perfil para poder salvar arquivos e experimente a interface, q é bastante simples.

p5-editor
Interface do P5 Web Editor

Pra terminar, uma última dica: o OpenProcessing. Trata-se de uma plataforma para escrita e hospedagem de códigos, dentre outras coisas. Nele é possível editar programas próprios e de outros autores, além  de divulgar seu trabalho de forma mais visual e atraente. Se no editor do P5 eu escrevo meus programas, é no meu perfil do OpenProcessing onde divulgo meus estudos.

openprocessing_marlontenorio
Minha página no OpenProcessing, onde hospedo meus estudos

No próximo post vamos começar a programar de fato. Até lá!

1.2 Escolhendo um editor para programar

1.1 Por que estudar programação?

Eu deveria gravar um vídeo, mas não tenho muita intimidade com câmeras. Talvez escrever me ajude a mudar de suporte no futuro e eu grave um depoimento audiovisual. Minha intenção é, nesta série de postagens, contar um pouco como tem sido minha jornada dentro do aprendizado de uma linguagem de programação voltada à produção de conteúdo visual (e audiovisual também).

Comecei a me interessar por programação porque gosto de efeitos visuais. Não me refiro ao termo quando utilizado na indústria cinematográfica, mas ao resultado obtido a partir de uma sequência de instruções (linhas de comando) que pode gerar uma animação, uma imagem abstrata, um filtro aplicado a uma imagem.

Não me recordo precisamente a data, mas a primeira opção que apareceu na minha vida foi o Processing, uma linguagem de programação de código aberto que se destina a artistas visuais, designers ou curiosos sobre o tema. Ele roda em Java e é bastante poderoso. Existe bastante material na internet e muita gente boa ensinando como usá-lo, todavia o material que encontrei está em língua inglesa. Na época em que comecei a estudar, tive muita dificuldade em pensar de forma abstrata e o fato de que os resultados precisavam ser processados (existe um termo mais específico para isso) no próprio editor do código (vc pode fazer o download no site do projeto) foi para mim um dificultador na hora de divulgar os resultados dos estudos, por exemplo.

Deixei isso de lado e fui tocar minha vida. Nesse momento, estudei HTML, CSS e um pouco de Javascript para atender a algumas demandas que apareceram no meu trabalho e para aumentar meu repertório de habilidades (pensando em uma nova posição no mercado ou dar vazão a projetos pessoais). Foi mais ou menos neste período que voltei a estudar Processing novamente. Mesmo sabendo que teria dificuldades em hospedar meus “sketches” online, estava disposto a conhecer mais a linguagem. E foi aí que apareceu o P5, uma biblioteca que roda em Javascript com uma semelhança muito grande com o Processing e que pode “renderizar” o código em um navegador de internet! Era tudo o que eu queria. Como eu já estava estudando Processing, não foi muito difícil migrar de um para o outro. Alguma mudança de sintaxe, alguns termos diferentes, mas não precisei “jogar fora” tudo o que já havia começado a aprender.

E de lá pra cá venho me dedicando ao estudo de P5 e sou grato pelo período dedicado ao Processing. Se precisar voltar a este último, ou assistir a tutoriais nesta linguagem, não vejo problemas, pois, como eu disse, a semelhança entre os dois é bem grande.

Mas por que aprender programação? A resposta é muito pessoal. Mais ainda no meu caso, em que a linguagem que estou estudando não necessariamente me garante renda extra, por exemplo. Convencer as pessoas para aprender algo sem uma aplicação prática imediata não é tarefa fácil e nem sei se é necessária.

De qualquer forma vou deixar dois vídeos de duas pessoas que foram meus primeiros “instrutores”. Neles, os autores respondem à pergunta “por que aprender programação” com mais propriedade do que eu. Estão ambos em língua inglesa, mas espero que consigam entender.

1.1 Por que estudar programação?

14 de março

Hoje é o Dia de Pi. Na língua inglesa faz mais sentido, pois inverte-se a ordem do dia e do mês, isto é, fica 3/14, os três primeiros dígitos do número mais conhecido da matemática. Até quem não gosta da matéria sabe da existência dele. Não vou me aprofundar na matéria, pois exigiria um post longo. Pra data não ficar em branco, fiz aí a minha homenagem, uma animação usando P5 e os primeiros 700 algarismos do infinito homenageado. Cada linha possui os algarismos em sequência. Eles vão alterando. Ficou bacana (eu acho rs). Para ver animado, clique sobre a imagem abaixo. A animação e o código estão hospedados na minha conta no OpenProcessing.

frame00001

14 de março