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

Mais uma de Carnaval

Dando seguimento às postagens “temáticas” (juro q não é de propósito), segue mais um estudo bem simples (e olha q é simples mesmo) misturando 4 coisas: pontilhismo, carnaval, Mattotti e P5.

O pontilhismo é uma técnica de pintura e desenho em que as imagens são definidas por pequenas manchas ou pontos. No final do século XIX, essa técnica ganhou bastante visibilidade e Seurat e Signac foram seus maiores expoentes na Europa (apesar de ridicularizados na época).

A ideia de fragmentar uma imagem em unidades “elementares” é bastante antiga. Vamos encontrar muitos exemplos na antiguidade e no período bizantino na forma de mosaicos, por exemplo.

mosaico-bizantino
Exemplo de mosaico, expressão típica na arte bizantina

Lorenzo Mattotti é um desenhista de histórias em quadrinhos e ilustrador da Itália. Dentre seus trabalhos, destaca-se um q ele fez para o livro Carnaval – Cores e Movimentos (Casa 21). São ilustrações coloridas e em preto e branco assinadas por ele, além de textos de autoria de renomados especialistas, cada um abordando um tema sobre a história, tradições e elementos do carnaval.

carnaval_mattotti.jpg
Capa do livro Carnaval – Cores e Movimentos, com diversas ilustrações assinadas por Lorenzo Mattotti

Misturando essas ideias e algumas linhas de programação em P5, resolvi traduzir uma das imagens do livro usando “confetes digitais” como unidade de “pintura”.

mattotti_pontilhismo
‘Árduo” trabalho de pontilhismo executado em P5 sobre uma das ilustrações do livro Carnaval – Cores e Movimentos

Basta clicar aqui ou sobre a imagem acima para ver a figura ganhar forma. Aconselho deixar o programa rodando enquanto vc curte o Carnaval. Volte mais tarde (ou na quarta-feira de cinzas!) para ver o resultado.

Mais uma de Carnaval

Wucius Wong em P5

Não lembro bem quando, mas faz tempo q comprei um livro de capa azul chamado Príncipios de Forma e Desenho, de Wucius Wong, um pintor chinês nascido em 1936, figura de destaque na arte contemporânea chinesa. Realmente eu queria me recordar o motivo da compra, mas o fato é q este é o tipo de livro q eu espero não ter q me desfazer.  A edição q eu tenho é de 1998. Entrei na faculdade de desenho industrial em 1997. E lá se vão mais de 20 anos desde a compra do livro. Atualmente estou numa “batalha”, lendo Sinais e Símbolos, do Adrian Frutiger. Digo batalha pq não se trata de um romance. É o tipo de livro q merece ser estudado. Assim que terminá-lo, quero ler (de verdade) o livro do Wucius Wong. Mas vamos falar um pouco mais sobre este último.

513lxOmnqFL
Capa da edição de 1998, que saiu pela editora Martins Fontes

Todo em preto & branco, o autor chinês apresenta uma série de conceitos e exercícios de expressão bidimensional e tridimensional. O volume único na verdade é a compilação de 3 dos 4 livros escritos por Wong: Principles of Two-Dimensional Design, Principles of Three-Dimensional Design e Principles of Two-Dimensional Form. Ficou de fora o Principles of Color Design (até pq para este uma impressão em cores seria indispensável), mas já tá bom, pois o volume tem mais de 340 páginas. Lendo o prefácio e a orelha do livro, percebe-se uma coisa interessante: a presença da informática como ferramenta de expressão. O autor relata o quanto os desenhos ganharam em celeridade (e precisão) quando os programas gráficos computacionais entraram em cena. Talvez maravilhado com essa possibilidade o autor fizesse tanta questão em apresentar os programas q ele usou. Entretanto o curioso (quase engraçado) é notar q alguns dos programas citados ou não existem mais ou foram modificados, pois as recursos computacionais mudam muito rápido. O livro apresenta informações de escolha de programas, primeiros passos, setup básico de computador. Eu acho essa a parte mais “datada” da obra, quase dispensável para um leitor do século XXI q já nasce imerso em tecnologia.

Mas o material mais importante certamente não é esse. O livro é rico em padrões e composições muito bonitas e atraentes, algo q posso considerar como conteúdo atemporal pois se foi feito à mão ou usando um programa gráfico, o resultado visual é o mais impressionante. Padrões geométricos e figurativos encantam a humanidade desde a antiguidade e são quase um patrimônio da criação humana, tamanha é a sua presença nas mais diversas culturas e civilizações.

IMG_20200215_143344
Padrões e composições exemplificam os conceitos do livro. No canto inferior direito da página à direita está a imagem q serviu para um dos meus estudos

Diante dessa pluralidade de possibilidades de execução, pensei: poderia fazer algumas dessas composições usando programação “bruta”? Claro q um CorelDraw, um Illustrator ou mesmo um Inkscape são ferramentas mais amigáveis para fazer tais coisas, menos sofridas até. Todavia o desafio q me proponho é fazer alguns testes, algumas pontes entre o resultado figurativo gerado e os comandos de uma linguagem como “ferramentas” de desenho. Também é uma forma de aprender a traduzir o q vejo e treinar representar além do lápis e papel ou dos programa de computador.

Devo dizer q não é fácil, principalmente pela minha pouca bagagem ainda no terreno da programação, mas são bons desafios e exercícios. Apresento dois deles – q tb podem ser conferidos no meu perfil no Openprocessing.

wuciuswong

animation
Uma das possibilidades que a programação abre é poder gerar figuras animadas, uma vez que todas as imagens dos livros são estáticas

 

Wucius Wong em P5

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

Geometria, I Ching, sistemas de numeração e um pouco de análise combinatória

O título é grande, mas vcs vão perceber q faz um certo sentido.

Dia desses eu estava pesquisando um polígono para fazer uma história em quadrinhos: o octógono. Por definição, um octógono é um polígono que possui oito lados. Simples assim. Entretanto só me interessava o octógono regular, ou seja, aquele q possui os oito lados de mesmo tamanho e todos os ângulos com a mesma medida.

Durante a pesquisa, esbarrei-me com a figura utilizada no I Ching. Não conheço nada sobre o oráculo chinês e vou focar apenas nos aspectos formais do desenho. De cara nota-se a presença de 8 conjuntos de traços, chamados trigramas. E por que 8? Porque 8 é o número de grupos de três elementos possíveis de serem formados utilizando os dois “valores” apresentados, isto é, o traço inteiro e o traço interrompido. Se quiséssemos grupos contendo 4 traços, o resultado seria 2^4 (2 elevado a 4), e teríamos 16 possibilidades.

iching_i-ching
O símbolo do yin yang cercado pelos oito trigramas do I-Ching. Com 2 valores é possível formar 8 grupos de 3 elementos, isto é, 2^3 (2 elevado a 3).

Depois percebi q poderia fazer uma associação numérica entre símbolos e números e atribuí ao traço interrompido o valor 0 e ao traço inteiro o valor 1. Nota-se, desta forma, q o desenho do I Ching usa um sistema binário na sua construção: cada trigrama pode ser escrito em zeros e uns.

iching_binario
Associação dos traços de construção dos trigramas aos algarismo 0 e 1.

iching_i-ching-binarioFinalmente “traduzi” para o sistema decimal os “números binários” do desenho do I-Ching.  Encontrei algumas variações para a disposição dos trigramas no octógono, mas uma delas parece ser a mais utilizada: aquela q dispõe o “7” no topo e o “0” na base. Note que se tomarmos os números associados aos lados opostos do octógono, sempre teremos a soma dos mesmos igual a 7.  Além disso notei duas “linhas de crescimento”: uma partindo do 0 e indo até o 3 e outra, oposta, partindo do 4 em direção ao 7.iching_i-ching-decimal.jpgEsse foi um exercício de investigação sem nenhuma pretensão mais séria. Beira o entretenimento e não possui aplicação prática. Todavia, são atividades como essa q exercitam minha criatividade, pois trabalho com associações e interpretações livres. Para fechar o post, reservei uma análise q seria a mais “viajante” dentro deste estudo.

O símbolo do yin yang também aparece no desenho. Percebi algumas variações na sua disposição dentro do octógono, mas a q escolhi tb foi a mais utilizada. Ao analisar as duas “gotas” contrastantes do símbolo, notei uma associação interessante com os números binários dos trigramas. Os números 000, 001, 010 e 011 (q seriam o 0, 1, 2 e 3 no sistema decimal) possuem o 0 como algarismo de “maior peso” (assinalados em negrito). Já os números 100, 101, 110 e 111 (o 4, 5, 6 e 7 no sistema decimal) possuem o 1 ocupando a posição mais “pesada” do número. Assim como o preto e o branco são as partes binárias do desenho, este padrão tb aparece nos números associados às “gotas” do desenho. O 0 é formado pela repetição de três algarismos 0, representando a parte mais “concentrada” da cor escura do símbolo do yin yang, ao passo que o 7 é formado por três algarismo 1, sendo a parte mais “concentrada” da gota clara do desenho.

iching_i-ching-binario copy
A parte preta do símbolo do yin yang parece “reger” os números mais “baixos”, q possuem o 0 na posição mais “pesada” do número. A parte branca do símbolo “regeria” os números q possuem o 1 como posição de maior peso.

E isso é só o começo. Outras interpretações podem surgir e acho melhor parar por aqui antes q me perguntem o q ando fumando ou se já tomei “meu remédio” hoje.

Geometria, I Ching, sistemas de numeração e um pouco de análise combinatória

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?