Arcos

No perfil q criei no Instagram, o CodingP5, além de rápidos resumos visuais sobre os comandos mais básicos sobre a ferramenta, apresento criações/experimentações minhas e desafios usando como referências o trabalho de outras pessoas.

Além dos comandos básicos de desenho para o desenho de pontos, linhas, retângulos e elipses, no pacote mais “avançado” está o comando para desenhar arcos. Eu acho um dos mais versáteis, pois muita coisa pode ser feita usando arcos.

Segue o “resumo visual” sobre o comando arc(), usado para o desenho de arcos, bem como um exercício baseado no trabalho Animodul, da Meikme. O trabalho deles é fantástico, baseado em muita geometria, estilização de formas e uso de cores vivas e vibrantes. Vale conferir!

Arcos

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

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

Uma obsessão pela linha

Eu queria muito ter ainda os rabiscos originais. Não sei se joguei fora ou onde eles estão, mas eram linhas q desenhei seguindo um padrão q era formar triângulos a partir de um traço único. E isso tem anos. Talvez mais de 5…

O fato é q alguns temas me são recorrentes e este não é diferente. Descobri (ou redescobri, pois tenho a impressão de ter visto o trabalho deste artista “em algum lugar no passado”) o trabalho de Ben Shahn, nascido na Lituânia e falecido nos EUA, e q, junto a Paul Klee, aumentam o time de artistas q usam a linha com maestria.

paul_klee2
Paul Klee. Para mim um dos mestres no uso da linha.

ben_shahn01
Ben Shahn. Tenho a impressão de ter visto esse trabalho em algum momento da minha vida.

Recordo-me tb de uns exercícios de desenho q eram sugeridos para serem feitos de olhos fechados, deixando o lápis/caneta riscar o papel livremente (usava-se até música em algumas ocasiões) e depois colhia-se o resultado. Geralmente as linhas eram sinuosas, mas eu investigava algo mais “robótico”, experimentando traçados mais retos com mudança de direção usando ângulos. Eram muitas as possibilidades: triângulos, quadrados, hexágonos, polígonos irregulares…

Migrando os suportes, as experiências com o “traço mágico” usando programação vão-me apresentando novos resultados a partir de variações do código, muitas delas incrivelmente simples, mas q resultam belos traçados.

Segue uma variação do exercício, desta vez usando como referência os antigos (e agora refeitos) esboços feitos a caneta sobre papel.

linhas_low
Rascunho feito a caneta

canvas2
Versão digital gerada a partir de javascript/p5

Sem dúvidas – pra mim, pelo menos – apesar da facilidade e interesse nos resultados artísticos obtidos a partir das linguagens de programação, a linguagem do gesto tem o seu poder e fascínio. Para ver o “computador desenhar”, clique aqui e divirta-se!

Uma obsessão pela linha

Traço mágico

Quando eu era garoto, havia um brinquedo q eu achava fantástico, chamado Traço mágico. Ele trazia uma tela retangular e dois controles laterais. Simples assim. Ao girar um dos controles, uma linha na cor preta era desenhada sobre a tela, q era um fundo cinza. Havia um botão para linhas verticais e um outro para linhas horizontais. Atuando sobre os dois ao mesmo tempo, a linha ficava “orgânica”. Para apagar o desenho, bastava sacudir o brinquedo. Nunca entendi como aquilo funcionava, até pq seu funcionamento não necessitava de baterias.

Traço mágico

Eu não era dos melhores, mas mesmo assim foi um brinquedo q marcou minha infância. Recentemente resolvi fazer uma “homenagem” e escrevi um código q simula o efeito gerado pelo brinquedo de forma aleatória. Para conferir o resultado, clique sobre a imagem acima ou aqui. Sugiro visitar o link e deixar o programa rodando por um tempo, enquanto vc faz outra coisa. Depois volte e confira o resultado. Para “apagar”, não adianta sacudir o celular ou o monitor. Terá q dar um “refresh” na tela.

Fiz também uma versão “avançada“. As possibilidades são infinitas.

canvas

Traço mágico

Que horas são?

Ideias não caem do céu nem dão em árvores. Pelo menos isso não acontece comigo.

Às vezes considero a criatividade como um músculo (q precisa ser trabalhado com regularidade). Outras vezes eu a encaro como uma antena (q precisa de ajuste e direção).

Mas independente da forma como eu a interpreto, o fato é q é sempre bom ter ideias, mesmo q elas pareçam batidas. Tenho muito medo de tê-las e me esbarrar em plágio consciente ou inconsciente. Mesmo assim não deixo de avançar com elas (ou não).

Gosto muito de relógios. É um tema bastante recorrente nas minhas “criações”. Volta e meia acabo tendo algum insight para um mostrador diferente para as horas e minutos. Mas no caso a seguir eu acabei brincando com os ponteiros do relógio analógico e o fato de q tanto as palavras HORA, MINUTO e SEGUNDO possuem o O como interseção (aliás, é a única letra em comum entre as 3). Boa parte daquilo q crio ganha primeiro as páginas de algum caderno (acho q venho me prometendo fazer algum vídeo sobre o caderno de ideias, mas sempre adio). As ideias hibernam, fermentam, seguem “esquecidas”. Como se esperassem algum processo, algum amadurecimento para ganhar vida.

E para esses “nascimentos”, estudar código tem sido muito bom. Em tempos pretéritos, a única coisa q eu podia fazer para conferir movimento aos meus trabalhos era usando programas como o Flash ou o After Effects. O gif abaixo mostra o resultado da experiência de escrever um relógio usando Javascript e P5. Para ver o funcionamento do mesmo em tempo real, clique aqui.

relogio

rasc_relogio

Que horas são?

Colorindo Pi

Faz um bom tempo q venho estudando alguma coisa de programação. Vencidos alguns bloqueios iniciais com internet (HTML e CSS), faltava ainda um terceiro elemento. Algumas pessoas fazem o seguinte paralelo: o HTML é o substantivo da web; o CSS seria o adjetivo e o Javascript, o verbo. De fato, boa parte da ação dentro da internet deve-se ao conhecimento e aplicação de alguma linguagem de programação e o Javascript é das mais populares.

Levei aí um bom tempo aprendendo o “a-bê-cê” de Javascript e ainda estou na fase de “soletrar” palavras, copiando frases dos outros e tentando escrever as minhas. Lembro-me q quando tinha minhas ideias, até avançava na parte visual das mesmas, mas sempre empacava na hora da programação. Ainda me recordo de um colega de trabalho, dos tempos de quando trabalhei com desenho animado, quando ele me disse: Marlon, aprende programação!

Dentre as muitas ideias “empacadas”, uma eu finalmente pude “tirar do papel” e comemoro como um grande avanço. Gosto muito da forma como as cores são “traduzidas” em números hexadecimais. Um dos meus primeiros estudos nesta área foi A cor da palavra, em que criei palavras a partir das letras da base hexadecimal (de A a F) e vi quais as cores resultantes das mesmas. Uma variação dentro deste tema seria pegar um número grande, muito grande, imensamente grande, dividi-lo em blocos de 6 algarismos e ver as cores resultantes. Então me lembrei de um dos números mais conhecidos. A minha “cobaia” foi o Pi, com seus infinitos algarismos. Com um pouquinho de paciência, consegui encontrar sites q disponibilizam seus “trocentos” primeiros algarismos. Bastaria depois “quebrar” estes algarismos, agrupá-los, criar um grid e colorir. Moleza, certo? Trabalhei com pouco mais de 10.000 algarismos de Pi. Dividindo por 6, obtive mais de 1.600 grupos, todos distintos. Mais um pouquinho de paciência e escrevi um código q serve não apenas para os 10 mil, mas eu poderia usar 100 mil, 1 milhão de algarismos, mas acho q seria um exagero (10 mil tá bom, né?).

O resultado foi um mosaico, uma “colcha de retalhos” formada por imensos “pixels” coloridos e pode ser conferido aqui. Durante o processo, lembrei-me de alguns trabalhos de Paul Klee e da minha mãe (q costurava e deve ter feito cobertas a partir de vários pedaços de tecido com certeza!).

Para um “estudante primário”, tenho ao mesmo tempo me divertido e aprendido bastante. Meu propósito estudando programação está bem longe de ser o de me tornar um desenvolvedor web. Sou (ou pelo menos me considero) artista. E todos os recursos q posso conhecer são bem-vindos como ferramentas expressivas.

pi-xel_vertical

Colorindo Pi