Começando a Desenhar Doideras com Python
--
Já pensou que loucura seria poder desenhar usando o seu computador ao invés de papel? Não estou mentindo quando digo que isso está a menos meia dúzia de cliques de distância de você. Meu nome é Bernardo Fontes, também conhecido como Berin, e preparei esse texto para te ajudar a ter o Processing rodando na sua máquina utilizando o modo Python. E aí, bora desenhar?
Queria só me apresentar rapidinho, mas caso você esteja com muita pressa de gastar a sua onda com seus rabiscos, é só pular para a próxima sessão. Eu estudo o uso do Processing com o modo Python para criação de arte gerativa desde o meio de 2018, depois de conhecer o Alexandre Villares e a Monica Rizzolli, duas pessoas encantadoras e com trabalhos incríveis. Tudo o que produzi até então está disponível como software livre, aberto para o uso como referência de estudo e linkado nesta minha página de sketches.
Acredite em mim, será muito mais divertido se você só se basear nos códigos abertos para a escrever suas próprias versões do que simplesmente copiar e colar. Muitas surpresas boas surgirão no caminho da busca pela sua implementação. Eventualmente, elas serão até mais interessantes do que o resultado esperado. Mas, bem, já falei muito e vamos ao que interessa!
Passo 1 — Instalando o Processing
Estou assumindo que você já saiba o que é o Processing. Mas, se não for o caso, não tem problema! Dá uma sacada neste vídeo do Daniel Shiffman que você vai entender rapidinho.
Como o Processing é pensado para artistas visuais, designers, professores e não para high skilled full-stack developers and command line ninjas, a sua instalação é muito simples! Você nem vai precisar saber o que é um terminal pra terminá-la. O primeiro passo é fazer o download da IDE do Processing. Para isso, clique no link abaixo e faça o download do arquivo zip de acordo com o seu sistema operacional:
Depois de baixar e descompactar o arquivo, você já estará pronto para começar a desenhar!
Passo 2 — Conhecendo a IDE do Processing
Dentre os arquivos, deverá existir um Processing.exe para usuários de Windows, um Processing.app para usuários de Mac e um executável processing para usuários Linux. Execute este arquivo e a IDE do Processing será incializada. O acrônimo IDE vem de integrated development environment, ou simplificando, ele é um editor de texto com tudo carregado para você conseguir executar código ali escrito. No nosso caso, é uma IDE para “executar” desenhos.
Para garantir que a instalação foi um sucesso, copie o código abaixo, cole ele na IDE e aperte naquele botãozinho de play ali de cima (ou use o atalho Ctrl + R ou Cmd + R):
void setup(){
size(100, 100);
}void draw(){
fill(255, 0, 0);
ellipse(width / 2, height / 2, 30, 30);
}
Se tudo estiver funcionando direitinho, uma nova janela de 100 por 100 pixels deverá ser aberta e, no meio dela, haverá um círculo vermelho. Tipo isso aqui ó:
Mas, que doidera é essa!? Que que tá acontecendo!? Não vou entrar muito em detalhes do código porque pretendo fazer isso em um outro post, mas o resumão é que este é um código que tem dois métodos: o setup e o draw. Métodos são pedaços de código que tem um nome, podem aceitar dados (que são chamados de parâmetros) e executam um comportamento específico. No caso acima, nenhum deles aceitam parâmetros. Sobre o comportamento, o primeiro configura e cria uma tela e o segundo desenha coisas nela. Sim, é simples assim.
A linguagem de programação em que este código foi escrito é famosinha e se chama Java. Todo o Processing é feito e roda em cima dessa tal de Java e isso não é um problema. O problema é que esta é uma linguagem trabalhosa e não tão intuitiva para pessoas que estão tendo o seu primeiro contato com programação. Em contrapartida, o Python, uma outra linguagem de programação, é bem mais simples e menos restritiva para novatas.
Para a sorte delas, a IDE permite que a gente use outras linguagens que não somente Java para criar nossos desenhos e, uma delas, é o Python. Então, vamos lá!
Passo 3 — Instalando o Modo Python
Dentro da IDE, no canto superior direito, tem um círculo que tem tipo uma borboletinha dentro e um retângulo escrito Java com uma setinha pra baixo. Estou falando disso aqui
Se você clicar nesse retângulo, um menu aparecerá com a opção Add Mode… Precisamos clicar nessa opção para instalar o modo Python.
A próxima janela possui quatro abas: Libraries, Modes, Tools e Examples. Essa janela é importante pois é onde conseguimos instalar extensões e bibliotecas que desempenham funções mais específicas como, por exemplo, exportar as imagens geradas como PDFs. Mas não precisamos nos preocupar com nada disso por enquanto.
Dentro da aba Modes, existe um campo de busca para facilitar a nossa vida. Digite “python” e na listagem deverão aparecer 2 resultados. O que queremos instalar é o Python Mode for Processing 3, do Jonathan Feinberg. Basta então selecioná-lo, clicar no botão de Install e voilà!
Passo 4 — Utilizando o Modo Python
Depois de terminar o download e a instalação, já estamos prontos para usar o Python e seus módulos antigravidade. Lembra do retângulo escrito Java ao lado da borboletinha? Então, clique lá de novo e você verá que agora também temos a opção Python disponível. A selecione e a IDE deverá abrir e fechar de novo.
Mas Bernardo, fiz isso e tá tudo igual… A IDE fechou e abriu de novo mas com a mesma cara, sem mudar nada… #comofaz?
Sim, a IDE continua igual, mas agora ela tem baterias incluídas e está “entendendo” não mais código Java, mas sim o tal do Python. Duvida? Ok, então vamos a mais uma rodada de copia-cola-executa, só que agora um pouquinho mais divertida:
def setup():
size(700, 280)
colorMode(HSB, 255)def draw():
rect_height = height / 7
y_positions = range(0, height, rect_height) for y in y_positions:
color_pos = map(y, 0, height, 0, 255) # not Python's map
fill(color_pos, 210, 210)
stroke(27)
strokeWeight(2)
rect(0, y, width, y + rect_height)
Como viram, é um código bem parecido porque estão ali o setup e draw, só que escritos de um jeito diferente. Nosso desenho está mais pythônico. O seu resultado devem ser 7 retângulos com umas cores parecidas com a imagem abaixo:
Passo 5 — Desenhar!
Agora veio a hora que todos nós queríamos, botar a mão na massa! Todos os métodos que o Processing implementa no Java estão disponíveis da mesma forma no modo Python. Viram o uso do fill ou do rect no nosso exemplo? São dois exemplos disso, assim como o map, colorMode, stroke e strokeWeight. Para ter uma noção do tanto de coisa que você pode usar, dê uma navegada pela página da referência do Processing e dê asas a sua criativadade.
Pretendo falar sobre códigos e técnicas em outros posts futuros, mas já queria deixar aqui algumas referências e links com bastante material para aprender e começar a fazer os seus desenhos:
- Python para Zumbis: excelente curso introdutório e gratuito criado pelo adorável Fernando Masanori;
- Coding Train: o canal do Daniel Shiffman com vários tutoriais e desafios de código que podem te servir de inspiração;
- The Nature of Code: um livro maravilhoso para aprender a como simular sistemas naturais;
- Generative Design: uma compilação dos exemplos de um excelente livro sobre arte gerativa implementados utilizando p5.js;
- Processing-brasil: lista de discussão no Google Groups sobre Processing e outros temas ligado a arte e tecnologia.
- Noite de Processing: encontros mensais que acontecem em São Paulo (toda última terça-feira do mês) e em Recife (toda última quarta-feira do mês);
Divirta-se e, por favor, compartilhe seus desenhos para que mais pessoas possam estudar e aprender com eles. Eu mesmo estou muito curioso para ver o que você vai criar!
Caso você tenha dúvidas sobre qualquer parte do processo de instalação, pode deixar comentários aqui que tentarei ajudar ao máximo. Se quiser acompanhar os desenhos que crio e compartilho diariamente, pode me seguir no Twitter em @bbfontes, no Instagram em @fontes.bernardo ou então no Github em @berinhard.
Até a próxima e boa fritação!!!
