Maio em dose dupla

Este mês me deu dois grandes retornos profissionais. Primeiro, tive um trabalho selecionado no concurso realizado pela Orquestra Sinfônica da Petrobras para comemorar os 250 anos do aniversário de Ludwig Van Beethoven. Foi uma grata surpresa, pois enviei várias propostas e a selecionada foi exatamente aquela de q eu menos gostei. A caricatura q fiz concorreu nas categorias de júri popular e júri profissional e pode ser vista no perfil do instagram da orquestra. Não vou mentir q muito embora a pré-seleção já tenha sido uma vitória pra mim (eu nunca fui selecionado para uma votação popular e muito menos com um trabalho de caricatura), comecei a alimentar esperanças e expectativas, munição preciosa para um sentimento de frustração diante da “derrota”. Competições são alvo de minhas reflexões e não são de agora. Qual o principal objetivo de uma competição? Por que competir? Por que se sentir bem ao vencer? Por que se sentir mal ao… perder? Mas só se aprende fazendo. Não somos obrigados a participar de nada, mas só passando pelo desafio para conhecermos nossa “sombra” ou nossos “fantasmas”. Mas assim, sem cobranças. Essas coisas devem ser leves. E tudo é exercício.

Caricatura selecionada no Concurso Beethoven 250 anos, promovido pela Orquestra Sinfônica da Petrobras

O segundo retorno foi minha primeira exposição, montada virtualmente para atender às condições atuais decorrentes da pandemia do corona vírus. Realizada pelo Espaço Cultural do Colégio Pedro II, a exposição reúne cartuns, quadrinhos e outros desenhos meus coletados ao longo de mais de 10 anos usando redes sociais para divulgar meu trabalho. E esta é uma coisa q só me toquei por conta da exposição. Foram selecionados trabalhos meus datados de 2007 até os dias atuais. Serve como uma espécie de registro de trajetória. Mas a história começa bem antes disso. Meu primeiro cartum selecionado em um concurso, por exemplo, data de 2000, ou seja, até o presente momento seriam em torno de 20 anos de carreira…

Eu queria ter feito uma exposição quando fiz 40 anos. Não rolou. Queria uma parada tradicional, material impresso, festa de abertura, essas coisas. Mas recebo bem esta oportunidade em novo formato. É novidade inclusive para os organizadores, acostumados a realizar exposições nos “moldes tradicionais”. O fato é q a pandemia tem mexido com tudo, é uma chamada global à reinvenção, adaptação, mudanças.

Olhando para o “copo cheio”, uma coisa boa deste modelo de exposição é q ela terá caráter permanente, isto é, poderá ser vista e revista sem prazo pra terminar. Pode inclusive ser aumentada e atualizada. Bacana, não? Mas onde vc poderá ver tudo isso? Clique aqui e visite; e, se puder, divulgue; e receba minha gratidão.

Traços de Humor

Ah! e também foi dia de pagamento da minha loja virtual na Colab55, hahaha. Conhece? Não? Passa lá!

Maio em dose dupla

1.10 “Retangulando”

Finalmente chegamos ao último post desta série sobre fundamentos de Javascpript/p5. Na postagem anterior, vimos como desenhar elipses e círculos usando o comando ellipse(). Vimos também q algumas das instruções aplicadas aos comandos point() e line(), como o stroke() e o strokeWeight(), também servem para o ellipse(). Conhecemos ainda novos comandos para personalização como o fill(), o noFill() e o noStroke(). Agora vem a melhor parte: tudo o q serve para o comando ellipse() tb serve para o comando rect(), usado para desenhar retângulos e quadrados. Vejamos.

Da mesma forma q o comando ellipse() usa 4 valores para construir uma elipse, o comando rect() tb usa 4 parâmetros. A sintaxe básica é a seguinte:

rect (x, y, l, a);

Os dois primeiros parâmetros indicam as coordenadas do ponto localizado no canto superior esquerdo do retângulo. Os dois outros dizem respeito à largura e altura do retângulo respectivamente.

retangulos_1
Retângulo simples criado usando 4 valores

No exemplo acima, nota-se q o retângulo criado possui preenchimento na cor branca, espessura na cor preta e de 1px de espessura. Esses valores são o padrão. Para alterá-los, use os comandos stroke(), strokeWeight() e fill(). Caso deseje eliminar o contorno ou o preenchimento, use os comandos noStroke() e noFill() respectivamente.

retangulos_2
Retângulos criados variando os parâmetros de contorno e preenchimento

Da mesma forma q para criar um círculo, basta repetir os dois últimos valores dentro dos parênteses do comando ellipse(), para criar um quadrado, fazemos o mesmo no comando rect().

retangulos_3
Um quadrado é um retângulo de largura e altura iguais

A definição de retângulo leva em consideração a natureza dos seus 4 ângulos internos, q são iguais a 90 graus, ou seja, 4 ângulos retos (reto + ângulo = retângulo). Todavia é possível criar retângulos de cantos arredondados e até um círculo a partir de um quadrado! Para tanto, basta inserir de 1 a 4 valores após os 4 primeiros usados na criação de um retângulo, ou seja, é possível declarar até 8 valores dentro dos parênteses do comando rect()! A sintaxe é a seguinte:

rect (x, y, l, a, se, sd, id, ie);

se = raio do canto superior esquerdo;
sd = raio do canto superior direito;
id = raio do canto inferior direito;
ie = raio do canto inferior esquerdo;

retangulos_4
O comando rect() admite até 8 valores dentro dos parênteses. Os 4 últimos dizem respeito ao raio dos 4 cantos do retângulo

Para desenhar um círculo a partir de um retângulo, basta repetir os valores da largura e altura e declarar mais um valor correspondente à metade da largura (q será o raio q “arrendondará” os 4 cantos do retângulo).

retangulos_6
Um jeito diferente (mas não muito prático) de construir um círculo usando o comando rect()

E assim encerramos esta “unidade de apresentação”. Nas postagens seguintes, antes de passar para um nível mais avançado e falar sobre outros comandos de p5, vou sugerir alguns desafios e realizar alguns exercícios provando q o conteúdo visto até agora já nos permite criar coisas bem interessantes.

No instagram eu criei um perfil chamado CodingP5 (desculpem, mas a palavra em inglês fica mais sonora). Lá eu postarei coisas mais rápidas sobre p5, aproveitando q é uma plataforma mais dinâmica. Meu passo seguinte será criar um canal no YouTube para migrar essas postagens de texto para o formato de vídeo. Foi interessante ter escrito os posts no meu blog pois servirão de roteiro para mim na hora de filmar.

Também foi muito gratificante ter parado e me desafiado a colocar “no papel” conteúdos q venho estudando de forma livre. Este exercício me fez “aterrar” o conhecimento e criar um percurso, uma trajetória a ser seguida, bem como estudar de forma mais disciplinada. A jornada é longa, mas será divertida.

E como diz aquele desenho animado: por hoje é só, pessoal!

1.10 “Retangulando”

1.9 Elipses e círculos

Penúltimo post desta série sobre fundamentos de Javascript/p5, o comando da vez nos ajudará a desenhar círculos sem “apelar” para o point().

O comando ellipse(), como o nome diz, desenha elipses. Tome um cone e faça um corte diagonal na mesma sem atingir a base do objeto. O corte gera duas elipses, uma em cada parte do cone. Por isso a elipse faz parte de um conjunto de figuras chamadas de cônicas, já conhecidas no passado, mas que foram batizadas (e melhor estudadas) por um matemático grego chamado Apolônio de Perga.

elipses_marlontenorio
Página de um trabalho em que relaciono as cônicas matemáticas às figuras de linguagem

Uma das características da elipse é q ela possui dois pontos notáveis: os focos. Quanto mais próximos os focos, mais “arredondada” é a elipse. Se ambos forem iguais, isto é, sobrepostos, temos um caso particular da elipse, q é o círculo.

Circlope
Um cartum em que brinco com elipses e círculos

Agora voltemos à programação. Da mesma q forma q o comando line() trabalha com 4 dados para desenhar um segmento de linha reta, o ellipse() também precisará de 4 valores para criar uma elipse. A sintaxe é a seguinte:

ellipse(x, y, l, a);

elipses_1
Elipse “básica” utilizando 4 valores

Os valores de x e y, determinam o centro da elipse no plano. Já os valores para l e a determinam a largura e a altura da figura respectivamente. Se l e a forem iguais, teremos um círculo.

elipses_2
Se os dois últimos parâmetros do comando ellipse() forem iguais, a figura resultante será um círculo

DICA: Uma outra forma de desenhar um círculos é usar apenas três valores dentro dos parênteses. Os 2 primeiros continuam sendo as coordenadas do ponto central e o terceiro valor é interpretado duas vezes, gerando um desenho circular.

Note q por “padrão”, a elipse é desenhada com uma cor de preenchimento (branca) e um contorno (1px de espessura e na cor preta). Podemos alterar esses parâmetros, sendo q dois deles nós já vimos antes. Para a espessura do contorno usamos o comando strokeWeight() e a cor dele é modificada com o comando stroke().

elipses_3
Elipse com valores de stroke() e strokeWeight() personalizados

Agora vamos dar um passo além e conhecer mais um comando de modificação, o fill(). Esta instrução altera a cor de preenchimento da figura. Da mesma forma q o comando stroke(), se houver apenas um valor dentro dos parênteses, teremos um tom de cinza. Se tivermos 3, será gerada uma cor obedecendo ao sistema RGB.

elipses_4
Elipse com o valor de preenchimento modificado

Mas ainda é possível eliminar tanto o contorno como o preenchimento da figura. Basta usar noStroke() para sumir com o contorno e noFill() para apagar o preenchimento antes de desenhar os objetos.

elipses_5
Nas elipses acima, a primeira não possui preenchimento – noFill(); já a outra não possui contorno – noStroke()

Nosso repertório vai aumentando gradativamente. Na próxima postagem veremos um comando q nos ajudará a desenhar retângulos e quadrados.

1.9 Elipses e círculos

Uma ajudinha aí

Dicas_de_desenho_montagem

Já faz um bom tempo q eu queria fazer algo do tipo, mas ou achava arriscado falar sobre o tema ou faltava vontade mesmo.

Não vivo de desenho, mas passo boa parte do meu tempo envolvido com essa atividade. Daí o título desta “série”. Com certeza o assunto pode ter vários desdobramentos, com aprofundamentos. Não é o meu objetivo. Reuni 5 dicas q procuro fazer com regularidade. A lista não é hierárquica, nenhuma dica é melhor ou mais importante q a outra. Talvez sirva para vc ou para alguém q vc conheça e esteja precisando de uma “forcinha”.

Dica 1 – Tenha sempre um caderno à mão

Você pode ter hora certa para treinar o desenho, mas certamente um insight, uma ideia, um “estalo” não vão esperar vc estar com o melhor material, no local local adequado, com o tempo voltado para isso. Tenho ideias vendo TV, dirigindo ou no banco do carona, ouvindo uma conversa entre colegas, dormindo. Acredite, elas virão sem pedir licença ou cerimônia, atropelando seu almoço ou qq outra coisa. Também elementos da paisagem, coisas q vc vê na rua, pessoas, animais vão chamar sua atenção e se vc não estiver preparado para registrar isso tudo, uma hora ou vc vai esquecer ou vai perder os detalhes. Andar com um bloco (e lápis ou caneta, é claro) à mão ajuda a registrar essas ou outras coisas q despertem seu interesse. Tenha mais de um caderno, de tamanhos variados. Alguns vc poderá levar no bolso, outros poderão ocupar sua bolsa ou mochila ou ainda ficar em cômodos da sala, mas acostume-se a ter um caderno próximo a vc.

Dica 2 – Goste do seu traço

Sobre a dica número 1 vc já deve ter ouvido, visto ou lido coisas a respeito. Mas eu não me recordo de ter ouvido coisas similares ao q vou comentar agora (devem existir, mas eu nunca achei). Gostar do próprio traço é uma jornada para a vida. Alguns dias vc vai achar lindo o q está desenhando. Noutros, vai rasgar tudo e nada vai lhe agradar. Vai desejar desenhar como aquele seu ídolo e se frustará pq vc não é ele (e nunca será, acredite). Ainda em outros dias terá um pouco de “paz interior”, pq sabe q o seu traço é único (e é, acredite). Oscilaremos entre bons períodos e outros não tão legais, mas é assim mesmo. Estamos todos aprendendo. Nosso olhar muda, nosso gesto muda, nosso traço também. Aprendamos a gostar de cada uma dessas etapas. Uma coisa q me ajuda muito é o distanciamento. Quando vc tiver mais de um caderno preenchido (olha a dica 1 aí fazendo sentido!), poderá comprovar o q estou falando. Ao folhear meus blocos antigos, admiro os progressos, as soluções q encontro, o qto já caminhei. Pode também rolar aquela sensação de quando se olha foto antiga: q cabelo horrível! como engordei! como podia usar esse tipo de roupa! ufa! estou bem melhor agora. Tudo faz parte.

Dica 3 – Pesquise suas referências

Existe uma frase atribuída a Isaac Newton: Se eu vi mais longe, foi por estar sobre ombros de gigantes. Nosso trabalho sempre terá alguma influência de quem já viveu antes ou tem mais experiência do que a gente. Pesquisar, estudar, compreender a obra dos nossos ídolos ou referências nos ajuda a sermos nós mesmos, mas lembre-se, nada de se comparar ou querer ser um “segundo fulano ou fulana de tal”.
Como comecei com uma frase, tentei verificar a veracidade de uma outra, desta vez dita por um dos Beatles, porém não achei a fonte, mas o texto era mais ou menos assim: quanto mais copiei (copiamos?) Elvis Presley, mais me tornei John Lennon (nos tornamos Beatles).

Dica 4 – Pratique um pouco diariamente

Tá certo, essa aqui é o calcanhar de aquiles. Eu pratico desenho TODO DIA? Não, não dá. Cotidiano, imprevistos, preguiça mesmo, tudo entra no pacote para deixar para o dia seguinte. Recentemente li em um livro q bastariam apenas 15 minutos (no caderno sempre à mão, claro) diariamente para a gente treinar. Veja só, 15 minutos. Quanto tempo a gente passa em redes sociais, por exemplo? Dá uma olhadinha no aplicativo q tem no seu celular q faz isso pra vc e pense a respeito.
Dizem (outra frase q a gente ouve e meio q passa sem comprovar a veracidade, mas tentei também, sem sucesso) q um famoso violonista teria dito: quando não pratico (violão) por um dia, eu sinto a diferença; quando não pratico por dois dias, meu público nota a diferença. Se isso foi dito ou não, particularmente pouco me importa. O fato é q o exercício constante e perseverante é fundamental no desenho (e não apenas nele).

Dica 5 – Treine o desenho de observação

Pra fechar. A menos q vc tenha uma mente prodigiosa, fotográfica, como se diz, desenhar de memória é pra poucos. Ou para aqueles q já praticaram muuuuuito. Na hora de desenhar isto ou aquilo, pegue uma ou mais referências fotográficas sobre o tema, estude, compreenda, decomponha, risque e rabisque. Mais tarde isso ficará na sua cabeça e aí, sim, vc poderá desenhar… de memória.

Fico por aqui. Mais uma vez peço perdão por citar frases sem comprovar a veracidade, mas fiquemos com o conteúdo delas. E agora é só por em prática.

Uma ajudinha aí

1.8 Linhas

Estamos chegando ao final desta parte introdutória de Javascript/P5. Meu objetivo foi ser bastante “iniciático” e não avançar muito. Para finalizar as 10 postagens desta “unidade”, separei um “apêndice” q conterá três comandos de desenho muito utilizados em P5: o line(), o ellipse() e o rect(), usados para desenhar linhas retas, elipses e retângulos, respectivamente.

Neste post falaremos sobre o line().

Para criar uma linha reta, precisamos de apenas dois pontos distintos, isto é, eles não podem ser iguais. Por um ponto passam infinitas linhas, mas por dois pontos (distintos), passa apenas uma única linha reta. A sintaxe será a seguinte:

line(x1, y1, x2, y2);

Para desenhar uma linha usando P5, precisaremos de 4 valores, sendo os dois primeiros usados para desenhar o ponto inicial da linha (x1 e y1), e o dois últimos (x2, y2), para desenhar o ponto final. A seguir um exemplo simples de construção de uma linha reta.

linhas_1
Uma linha desenhada usando 4 valores, dois para o ponto inicial e dois para o ponto final

No exemplo, o ponto inicial encontra-se nas coordenadas x1 = 100, y1=100 e o ponto final está em x2=300, y2=300.

Se quisermos q a linha seja “infinita”, precisaremos usar os valores 0, widht e height para desenhar a linha, como ilustrado a seguir.

linhas_2
Linha “infinita” atravessando uma das diagonais do canvas

Da mesma forma como podemos alterar a espessura e a cor do ponto usando os comandos strokeWeight() e stroke(), podemos usar os mesmos parâmetros para modificar a espessura e o cor da linha. Se nada for configurado, a espessura da linha será de 1 pixel e a cor será preta.

linhas_3
Podemos alterar a espessura e cor da linha criada

No exemplo anterior, a espessura da linha é de 25 pixels e a cor do traço é um valor de RGB q gera a cor azul (R = 0, G  =0 e B = 255).

Existe ainda um parâmetro de “acabamento” da linha, o strokeCap(). Por padrão, as extremidades da linha serão sempre arredondadas, conforme podemos verificar no exemplo mostrado anteriormente. Esta opção é chamada strokeCap(ROUND). Existem outras duas: o strokeCap(SQUARE), q gera uma terminação reta; e o strokeCap(PROJECT), q além da terminação reta, faz o comprimento da linha ser igual ao apresentando quando o strokeCap() escolhido é o ROUND.

linhas_4
Os tipos possíveis de “acabamento” da linha em p5

Note q, da mesma forma q um ponto pode se parecer com um círculo, variando a espessura do traço (o stroke()), modificando a espessura e o acabamento da linha, podemos obter retângulos.

Nas próximas postagens veremos a forma “correta” de criar círculos (e elipses) e retângulos, sem termos de “apelar” para o point() e o line(), deixando o stroke() e o strokeWeight() para atuar sobre os contornos das figuras.

1.8 Linhas

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