Começando a Desenhar Doideras com Python

Bernardo Fontes
Jul 5, 2019 · 7 min read

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?

Image for post
Image for post
Imagem criada por mim com código Python.

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:

Download da IDE aqui!

Depois de baixar e descompactar o arquivo, você já estará pronto para começar a desenhar!

Image for post
Image for post
Algoritmo de Agregação por Difusão Limitada — código fonte

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.

Image for post
Image for post
Muito prazer! Eu sou a IDE do Processing

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 ó:

Image for post
Image for post
wow so creative!

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á!

Image for post
Image for post
Gif criado por mim com código Python

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

Image for post
Image for post

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à!

Image for post
Image for post
Tela com o resultado da busca por “python”

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:

Image for post
Image for post

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!!!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store