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?

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

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?

Golomb, P5, yin yang, pássaros, corações e o que mais aparecer

Final de 2018, São Paulo. Fui apresentar meu trabalho sobre caligramas a partir de conceitos matemáticos na USP e ganhei um presente: uma palestra para turbinar minha criatividade proferida pelo amigo Antonio José Lopes Bigode. Durante algumas horas, fui apresentado a muito material de qualidade, mas algo q ficou registrado na minha mente foi uma engenhosa régua q podia ser feita com poucas marcações e ainda assim realizar muitas medidas. Trata-se de uma régua de Golomb (em homenagem ao matemático Solomon W. Golomb).

Veja a figura abaixo:

golomb-01

A “régua 1” traz todas as marcações de 0 a 3 e podemos realizar as medidas de 0 a 3. Todavia a segunda “régua” suprime a marcação relativa ao 2, mas ainda assim é possível realizar uma medida tomando o intervalo entre 1 e 3 (q é igual a 2). O desafio é encontrar réguas ditas perfeitas, ou seja, q possuam poucas marcações e consigam realizar todas as medições do seu intervalo. Até então, a maior régua perfeita encontrada tem tamanho igual a 6 e é feita usando apenas 4 marcações.

Intrigado com essa ideia, queria criar algo usando esse pensamento e bolei um “grid” formado por circunferências cujos diâmetros obedecem à regra da “régua de 6” (na figura abaixo, o grid é mostrado na parte superior esquerda). Passei então a preencher os espaços manualmente.

golomb-01

O resultado me agradou muito, mas não sei quanto tempo levaria para realizar todas as combinações possíveis desses “yin yangs assimétricos” (como acabei chamando). Resolvi então fazer algo usando P5. Minhas tentativas ainda estão rasas e não consegui programar algo q me ofereça o resultado q desejo.

Na imagem a seguir, consegui preencher de forma aleatória as circunferências do “grid” q eu criei, mas as “gotas” dos “yin yangs” ainda são um desafio para mim.

golomb_testes.png

Deixando de lado esse desafio mais “cascudo”, resolvi tentar algo mais fácil. Voltei então para a “régua de 3”, mas abandonei a ideia do “yin yang”. Rabiscando bastante, percebi q a combinação de 3 semi-círculos (e mais tarde triângulos tb) de diâmetros 1, 2 e 3 poderiam gerar sínteses gráficas interessantes. Ainda no P5, resolvi brincar um pouco e o resultado pode ser conferido abaixo: 3 composições criadas aleatoriamente, ao toque da tela (do celular ou do monitor). Clique sobre cada imagem e vc poderá conferir o efeito em uma outra nova janela.

birds1birds2birds3

Golomb, P5, yin yang, pássaros, corações e o que mais aparecer

Calçadas

Em meus movimentos cíclicos, eis-me novamente envolvido com as possibilidades q a programação pode oferecer para o trabalho de artistas visuais. Venho há um bom tempo estudando Processing e migrei para o P5, uma biblioteca q roda em Javascript e q aproveitou bastante do q aprendi com o Processing. Se for do seu interesse conhecer um pouco mais sobre P5, recomendo o canal Coding Train, do Daniel Shiffman. O cara manda muito bem e é minha referência no assunto.

Vou a passos lentos, num ritmo próprio. Aproveito, como sempre faço, a inspiração vinda do mundo q me cerca e, motivado pelo calçamento de algumas cidades, achei interessante reproduzir o desenho de alguns deles usando o P5. Tomei como ponto de partida as calçadas de duas grande cidades brasileiras: São Paulo e Rio de Janeiro. Lugares onde vivi/vivo e q são fonte de inspiração sempre.

É um desejo meu desenvolver alguns tutoriais para falar sobre design/ilustração/programação, mas tudo está meio embrionário. Em futuro próximo, quero comentar como foi o processo criativo para criar esses padrões, mas por ora o resultado pode ser conferido aqui e aqui.

rio_sp

Calçadas