[ CAPÍTULO 1 ]
Primeiros Passos
Olá Mundo!

O início de toda jornada começa com aquela sensação de que a caminhada será longa, mas que ao final terá valido a pena. É com esta mentalidade que você deve perseguir cada uma das folhas que ler. Ao terminar o livro você terá dominado conceitos que transcendem a arte gerativa, podendo ser usados tanto no desenvolvimento de aplicativos para fins artísticos quanto em programas com objetivos científicos. Grande parte desse conhecimento está inserido nas entrelinhas da lógica e do pensamento computacional, por essa razão você deve sempre se perguntar como pode usar o que é apresentado para impulsionar seu lado criativo e engenhoso.

Neste capítulo começaremos com uma breve introdução sobre a arte gerativa e trabalhos que marcaram sua origem, sua história e suas excitantes aplicações na atualidade. Em seguida será justificado o uso da linguagem de programação central deste livro, o Processing. A partir desse ponto você será direcionado rapidamente para a parte prática da computação e em pouco tempo estará criando seus próprios programas.

Boa leitura e mãos à obra!

1.1 Uma breve história da arte gerativa

A prática da arte gerativa, assim como o próprio termo que é usado para descrevê-la, surgiu em meados de 1960 e até hoje está em constante mutação e redefinição. Sua origem formal pode, muito provavelmente, ser traçada a uma exibição em 1965 batizada de Generative Computergraphik [1] que mostrou o trabalho de um dos pioneiros da arte digital, o acadêmico alemão Georg Nees. Uma das obras apresentadas por ele, 23-Ecke, figura 1.1, era composta por uma matriz de polígonos formados por vértices posicionados aleatoriamente em um pequeno espaço, em cada um confirmando-se as raízes do gerativo. A década de 1960 representou uma época especial para a arte digital como um todo devido ao rápido desenvolvimento dos computadores e da computação. É curioso notar que os precursores desse tipo de prática foram cientistas e acadêmicos, fato justificável uma vez que eram essas pessoas que estavam inseridas em um meio que possuía as ferramentas para o trabalho e exploração da lógica e padrões formados por regras ordenadas ou pelo caos. Além de Nees (fig. 1.2), outros importantes nomes que podemos citar são o do matemático Frieder Nake (fig. 1.3), dos artistas Manfred Mohr (fig. 1.4) e Vera Molnár (fig. 1.5) e do engenheiro Michael Noll (fig. 1.6). O ponto de marco, o computador, também é um dos motivos pelo qual muitas vezes os termos arte gerativa e arte computacional são utilizados quase como sinônimos, de maneira intercambiáveis. Rigorosamente, a arte gerativa é singular uma vez que não exige o meio computador e sim um processo com algum grau de autonomia. Por exemplo, um robô vibratório com um lápis em sua base constitui a fundação para formar uma peça gerativa, assim como reações químicas em uma placa de Petri, peças musicais em um sintetizador eletrônico ou até mesmo alterações atmosféricas em um ambiente fechado[2].

Figura 1.1 - Georg Nees, 23 Ecke, reproduzido utilizando o Processing.
Figura 1.2 - Georg Nees, Schotter.
Figura 1.3 - Frieder Nake, Random Walk Through Raster.
Figura - 1.17 - Reinterpretação de obras clássicas do movimento gerativo utilizando o Processing.
Figura 1.4 - Manfred Mohr, P122+, reproduzido utilizando o Processing.
Figura 1.5 - Vera Molnár, 144 Trapèzes.
Figura 1.6 - Michael Noll, Computer Composition With Lines.
Figura - 1.18 - Reinterpretação de obras clássicas do movimento gerativo utilizando o Processing.

No Brasil, é possível que o nome mais conhecido quando citamos a arte computacional seja o de Waldemar Cordeiro, artista plástico e teórico do movimento da arte concreta e do popcreto. Seus trabalhos com sólida base teórica, tantos nos anos 50 com o concretismo quanto nos anos 60 com o popcreto, assim como sua experiência social como paisagista e urbanista mostraram-se ideais para a experimentação da arte com computadores. Em 1968 Cordeiro iniciou uma parceria com o físico Giorgio Moscati, na qual investigaram como técnicas do domínio da matemática, física, psicologia e arte poderiam ser fundidas na expressão artística. Uma das obras da dupla, considerada a primeira obra de computer art da América Latina e dotada de uma originalidade que repercutiu internacionalmente, Derivadas de uma Imagem (figura 1.7), consistia em derivar numericamente uma imagem, repetindo o processo em até três vezes sobre a digitalização manual realizada por Cordeiro. Segundo Moscati, "Cordeiro insistiu muito em usar uma imagem com forte conteúdo humano e emotivo para ser transformada por uma "maquina fria e calculista"." [3]. Um dos pontos que chama a atenção em Cordeiro é a sua preocupação com questões que ultrapassam a pura expressão da arte; suas obras, como a citada anteriormente, provocaram discussões acerca da natureza e validade social e estética da arte pelo computador, autoria em produções digitais e até sobre o princípio visual da interpretação de estímulos sensoriais[4].

Figura 1.19 - Astronaut Michael Gernhardt during extravehicular activity (EVA) a, cortesia da NASA.
a Todos os direitos reservados pela instituição.
Figura 1.20 - Imagem reduzida.
Figura 1.21 - Quantização de cores.
Figura 1.22 - Derivada de ordem zero.
Figura 1.23 - Derivada de ordem um.
Figura 1.24 - Derivada de ordem dois.
Figura - 1.7 - Reinterpretação[14] da obra Derivadas de uma imagem, de Waldemar Cordeiro, utilizando o Processing.

Inserida em um meio de característica naturalmente permissível, a arte gerativa possibilita que sua história seja enriquecida com teorias daqueles que defendem que a mesma surgiu consideravelmente antes de 1960. Na arquitetura de civilizações antigas são evidentes as leis que permeavam escolhas de design em instalações importantes. Templos hindus, como o Kandariya Mahadeva (fig. 1.8), exibem repetições fractais em sua estrutura[5] que refletem a própria crença de um cosmos autossimilar. Padrões geométricos presentes em construções islâmicas, particularmente o complexo histórico Shah Nematollah Vali ou a praça do Resgistan (fig. 1.9), podem ser estratificados em regras geométricas bem definidas, e simultaneamente permutáveis, para formar infinitas variações como argumentado pelo artista Roman Verostko. A matemática como geradora de padrões por meio de simetrias, ciclos, repetições, combinações, transformações espaciais e sequências numéricas é encontrada em uma imensa quantidade de artefatos e pinturas das mais diversas culturas como a egípcia (fig. 1.10), céltica (fig. 1.11), grega (fig. 1.12), anglo-saxônica (fig. 1.13) e outras distribuídas espacialmente e temporalmente ao longo da história humana.

Figura 1.8 - Templo de Kandariya Mahadevab, Índia. Cortesia do fotógrafo Fernando de la Torre
b Todos os direitos reservados pelo fotógrafo original.
Figura 1.9 - Praça do Registanc, Uzbequistão. Cortesia da fotógrafa Janet Marshall.
c Todos os direitos reservados pela fotógrafa original.
Figura - 1.25 - Padrões em estruturas arquitetônicas.
Figura 1.10 - Escaravelho, egípcio, 1458-1479 a.C.
Figura 1.11 - Anel, céltico, 500-400 a.C.
Figura 1.12 - Tigela de libação, grega, 400-300 a.C.
Figura 1.13 - Pingente, anglo-saxão, início de 600 d.C.
Figura - 1.26 - Padrões em objetos culturais, cortesiad do Metropolitan Museum of Art, New York
d Todos os direitos reservados pela instituição.

Presente também na música, o gerativo pode ser rastreado ao Musikalisches Würfelspiel , figura 1.14, atribuído ao compositor clássico Mozart[6]. Esta peça era sintetizada através do jogar de dados, no qual cada número representava uma pequena seção musical que, posteriormente, eram costuradas sequencialmente formando uma espécie de música do acaso. Uma abordagem similar seria o do artista Marcel Duchamp que, entre 1912 e 1915 , criou duas[7] peças musicais baseadas na chance. Em Erratum Musica Duchamp retirava, aleatoriamente, cartas de um chapéu que continham vozes musicais, formando uma composição completamente inesperada.

Figura 1.14 - Mozart, Musikalisches Würfelspiel.

Na classe dos sistemas citados, parte deles estão sujeitos a críticas, em especial aqueles que utilizam completamente de etapas predefinidas (padrões geométricos, fórmulas matemáticas ou regras determinísticas). Margaret Boden e Ernest Edmonds evidenciam que a comunidade artística possui certa objeção quanto a esses tipos de trabalhos por não existem surpresas, e que eles estariam ligados muito mais a visualizações matemáticas, arte algoritmica ou arte computacional programada do que à arte gerativa em si. A justificativa seria que um processo definido passo a passo é inteiramente conhecido em qualquer instante de tempo, não havendo nenhum tipo de decisão autônoma pelo agente gerador. Em outras palavras, a arte gerativa é formada quando existem regras que limitam ações ao invés de impô-las, e sempre deve existir algum tipo de elemento não controlado durante sua execução[8]. Boden e Edmonds propõem uma conclusão para esse assunto de maneira sucinta e clara: atualmente, tanto os programas que literalmente seguem regras quanto aqueles que apenas as interpretam, costumam ser tão complexos que não possuem distinção no nível mais fundamental, sendo improdutivo insistir em esclarecer tecnicamente a segregação entre arte gerativa e algorítmica. As diferenças entre as duas estariam ligadas mais ao "sentimento" de falta de controle sobre o resultado gerado do que ao controle em si, já que esses dois tipos de prática são capazes de formar obras completamente imprevisíveis pelo autor na etapa de concepção.

No que concerne a nova geração de artistas gerativos, pós 1990, pode-se observar o mesmo comportamento experimental de seus precursores, mas em um espectro de abrangência muito maior. Nos anos que se seguem os computadores e ferramentas digitais começaram a ser atualizados a uma velocidade espetacular que, somados a popularização da Internet, facilitaram o processamento, compartilhamento e acesso a dados, originando a Era da Informação. Essa nova casta de artistas, armada com poderosas ferramentas tecnológicas, está focada em mesclar especialidades da engenharia e computação com a estética e forma da arte. Casey Reas e Benjamin Fry, criadores do Processing, são programadores e artistas com trabalhos (fig. 1.15) relacionados à visualização de dados e exploração da estética através do código, tornando a linha divisória entre o técnico e o artístico cada vez mais tênue. Jared Tarbell, Marius Waltz e Joshua Davis são outros exemplos de artistas que combinam algoritmos, design e estilos únicos para criar belíssimas peças gerativas. Muitos outros casos similares podem ser citados: Patrick Tresset construiu um braço robótico[9] e o programou para rascunhar ilustrações estilizadas de si. Jon McCormack desenvolveu um algoritmo capaz de sintetizar imagens de plantas evoluídas artificialmente por algoritmos genéticos formadas pelos logos de companhias de petróleo e derivados[10]. LIA (fig. 1.16) utilizou de uma impressora 3D para explorar o comportamento de esculturas[11] constituídas por filamentos de ABS[12]. Em adição aos tipos passivos de obras, a computação permite também a arte interativa, em que se usam de periféricos poderosos como o Kinect, o Leap Motion ou o óculos de realidade virtual (VR), para impulsionar uma interação muito mais pessoal e próxima ao espectador. A arte, ou o produto final dependendo do ponto de vista, se torna uma colaboração triádica do artista/programador, do computador e também do usuário. A empresa Nike explorou essa ideia em uma instalação que utilizava de um Knect e sensores conectados a uma esteira ergométrica para transformar uma pessoa que corria sobre ela em um fluxo de partículas animadas[13].

Esta pequena introdução teve o objetivo de prover uma visão holística sobre as origens e aplicações da arte gerativa. É desafiador traçar uma linha histórica detalhada de um campo que foi formalizado recentemente, na ordem de décadas, mas cuja essência experimental está presente na própria natureza humana. O que se pode observar é que a cada ano aumenta-se a demanda e o interesse por exibições que combinem o artístico e o científico, essencialmente reforçando a ânsia de uma simbiose orgânica entre forças duais, seja do caos e a ordem ou do homem e a máquina.

Figura 1.15 - Signals e, cortesia dos próprios autores, Casey Reas e Benjamin Fry.
e Todos os direitos reservados pelos artistas originais.
Figura 1.16 - Filament Sculptures f, cortesia da própria artista, LIA.
f Todos os direitos reservados pela artista original.

1.2 Processing

A partir desta seção você mergulhará no vasto oceano da programação voltada para a arte gerativa. O primeiro passo será aprender conceitos universais relacionados à programação e suas aplicações. Sempre que possível foram utilizados exemplos com foco visual para que você possa entender melhor a teoria, afinal, como o livro trata de arte computacional, espera-se pelo menos algum tipo de imagem gerada. O agente responsável por quaisquer desenhos será o computador que, como bem sabemos, não entende diretamente a linguagem humana. Consequentemente você deverá aprender uma linguagem de programação que é um método padronizado para passar instruções para um computador. Posteriormente essas instruções são compiladas, significando que elas serão convertidas para uma linguagem de máquina para serem executadas pelo hardware que compõe o computador físico. Esse processamento gera, a nível de software, uma saída que pode ser um texto, vídeo, música ou, como em nosso caso, uma imagem ou animação.

Em geral, a programação pode ser feita em qualquer linguagem, mas a sua escolha pode ser direcionada para maximizar a velocidade e eficiência do processo técnico e criativo. Existem certas linguagens de programação que se sobressaem devido a recursos nativos para trabalhar com meios que contenham muitos elementos áudio visuais, como é o caso da arte computacional. A maioria desses recursos estão relacionados com instruções que simplificam justamente a produção desses resultados. As opções para quem trabalha nesse campo vem crescendo ao longo dos anos e inclui linguagens, programas e bibliotecas, sendo algumas evidenciadas abaixo:

  • Nodebox : Software composto por uma família de ferramentas desenvolvidas para facilitar o trabalho com design e arte gerativa. Existem duas variações, uma baseada na linguagem Python e outra utilizando uma interface nodal de programação visual[15].
  • VVVV : Ambiente de programação visual com interface nodal. Especializada na síntese de vídeos, imagens e áudio em tempo real.
  • Cinder : Biblioteca aberta escrita em C++ voltada para a programação gerativa.
  • OpenFrameworks : Conjunto de ferramentas abertas desenvolvidas em C++ para auxiliar no processo criativo. É composto por uma série de outras bibliotecas relacionadas a aplicações específicas como geração e processamento de vídeo e imagens, visão computacional e modelagem 3D.
  • StructureSynth : Aplicação desenvolvida especialmente para gerar estruturas tridimensionais a partir de uma linguagem própria.
  • AdobeFlash : Plataforma comumente utilizada por web designers para criar imagens, animações e visualizações. Utiliza a linguagem de programação Action Script.
  • Processing : Desenvolvido no MIT[15], é um software e uma linguagem de programação baseada em Java e idealizada para ensinar os fundamentos relacionados a trabalhos envolvendo artes visuais.
Figura 1.28 - Processing.
Figura 1.29 - Visual Studio.
Figura - 1.30 - Ambiente de desenvolvimento.

Cada uma dessas opções possuem suas vantagens e desvantagens dependendo do tipo de arte e meio em que se deseja trabalhar. Algumas delas podem se tornar muito específicas ao fazer o uso de linguagens próprias ou focar em um único tipo de aplicação. Por motivos que serão explicados ao longo desta seção, iremos trabalhar exclusivamente com a linguagem Processing.

Processing é uma linguagem de programação cujo desenvolvimento iniciou com Ben Fry e Casey Reas em 2001, no MIT Media Lab. Aos poucos foi crescendo a agregando mais e mais entusiastas devido a sua interface simples, sintaxe amigável e grande variedade de funcionalidades. Em 2012 foi criada a Processing Foundation junto com Daniel Shiffman que aumentou a equipe como terceiro líder do projeto. A linguagem em si é baseada em Java que, por sua vez, tem um gigantesco histórico de aplicações em desktop, web e dispositivos móveis como smartphones e tablets.

A premissa do Processing é ser uma linguagem de programação inclusiva, tanto para iniciantes quanto veteranos da programação, cujo o foco é no ensino direcionado à programação criativa e arte gerativa. Seu ambiente de programação é minimalista[16] e limpo para que o programador ou artista possa expressar suas ideias de maneira direta, passando para as etapas de prototipagem, experimentação e prova de conceito o mais rápido possível. Os próprios criadores da linguagem batizaram o ambiente do Processing como um sketch book, ou "livro de rascunhos". Esta maneira de idealiza-lo foi pensada propositadamente para aproximar a arte e a programação de tal forma que o rascunho, o processo de expressar uma ideia, é tão importante quanto o produto final em si.

Em comparação com outras linguagens de programação, como C++ ou Rust, Processing geralmente produz um software com velocidade de execução menor, porém suas vantagens se sobressaem. A linguagem é composta por uma sintaxe simples e amigável com menos regras específicas e estruturais da programação, permitindo um foco maior no processo criativo. Ela também possui uma diversa gama de ferramentas próprias que permitem explorar grande parte das áreas que compõem a computação artística. Em relação a linguagens de programação visual, como as usadas no Nodebox ou VVVV, o Processing transfere mais poder ao usuário através da linguagem escrita, permitindo uma customização cirúrgica das ideias que o programador deseja expressar. Em projetos com maior volume de código a linguagem escrita também é mais fácil de ser gerenciada, organizada e compreendida.

A compatibilidade é outro ponto forte do Processing. O seu ambiente de desenvolvimento compila executáveis para plataformas Windows, Mac OS X e Linux. Somando as suas vantagens, ela também é uma linguagem aberta (open source) em que os usuários podem ajudar a corrigir problemas ou bugs assim como sugerir novas funcionalidades. Sua popularização encorajou programadores a criar variantes adaptadas para linguagens específicas como o p5.js (JavaScript), Processing.py (Python) e Quil (Clojure). Igualmente relevante, é que Processing é distribuído de graça, sendo mantido por doações.

Em se tratando de ferramentas externas à linguagem, existe uma quantidade respeitável de bibliotecas desenvolvidas por usuários, tanto para Processing quanto para Java, que podem ser instaladas. Bibliotecas são um conjunto de funções e estruturas de dados não nativas à linguagem que, quando adicionadas ao programa, ampliam ou estendem suas funcionalidades. Essa prática tem um potencial realmente impressionante nas mais diversas aplicações. Algumas dessas bibliotecas habilitam compatibilidade com periféricos como os detectores de posição Kinect da Microsoft, o LMC da Leap Motion e o microcontrolador Arduino. Outras facilitam o trabalho com especialidades que abrangem a visão computacional, visualização de dados e até mesmo motores de física (physics engine) em simulações e jogos.

Todos esses fatores contribuem fortemente na escolha do Processing como a linguagem adotada neste livro para a programação artística. Nada impede que você siga todo o texto utilizando outras linguagens uma vez que, conforme dito, os conceitos ensinados são universais, porém a sintaxe não será a mesma e você terá que realizar as devidas adaptações.

Figura 1.31 - Escrita.
Figura 1.32 - Interface nodal.
Figura 1.33 - Resultado dos códigos nodal e escrito.
Figura - 1.27 - Linguagens de programação.

1.3 Ambiente Processing

O ambiente de desenvolvimento Processing (PDE - Processing Development Environment) é o programa que você irá utilizar para escrever seus códigos, assim como executá-los. No momento em que este livro foi escrito o Processing encontra-se na sua terceira grande versão, mais especificamente a 3.5.3. Você pode obtê-lo no endereço web processing.org, na seção de download. O arquivo estará compactado e será necessário extrair o conteúdo para um local do seu computador. Este livro foi baseado na versão do Windows e para abrir o programa basta executar o aplicativo Processing.exe. A aplicação será executada em qualquer máquina que suportar o Ambiente de Execução Java[17], sendo que o Java está incluído no download. O PDE é composto pela interface e itens conforme mostrados na figura 1.34.

Abaixo é feita uma descrição sucinta de cada ponto relevante desse ambiente:

  • [1]Barra de menus: Contém os menus da aplicação que permitem criar, salvar e carregar projetos, além de consultar exemplos, importar bibliotecas e customizar a interface do PDE.
  • [2]Executar: Compila o código escrito na seção do editor de texto e mostra seu resultado na janela de exibição e/ou no console.
  • [3]Parar: Termina a execução do código, fechando a janela de exibição.
  • [4]Abas: Permite criar novas abas para escrever o código. Utilizado principalmente em programas extensos ou para organizá-los em seções, classes e funcionalidades.
  • [5]Editor de texto: É o espaço reservado para escrever o código em si.
  • [6]Área de mensagem: Mostra algumas mensagens do sistema e breves mensagens de erro que possam existir durante ou até mesmo antes da execução do programa.
  • [7]Console: É onde são exibidos os textos de saída do Processing, como aqueles gerados por algumas funções. Também pode conter eventuais descrições mais detalhadas de certos tipos de erros detectados na execução do código.
  • [8]Erros: Exibe os erros (em vermelho - figura 1.35) ou mensagens de aviso (em laranja - figura 1.36) do código. Erros são classificados como fatais e impedem ou terminam a execução do código. Alguns deles são a sintaxe incorreta, falta de argumentos nas funções ou tipos incorretos de variáveis. As mensagens de aviso estão ligadas a problemas leves como, por exemplo, o não uso de uma variável declarada, e não impedem a execução do programa.
  • [9]Debug: Ferramenta adicionada no Processing 3.0 que permite executar o seu programa passo a passo. Essa funcionalidade é muito útil quando se deseja conferir valores de variáveis ou comportamentos de algoritmos.
  • [10]Modo: Seleciona o modo de programação para o Processing que, por padrão, é a linguagem Java. Modos para JavaScript, Python ou Android podem ser adicionados através desse mesmo botão, na seta lateral, na opção Adicionar modo....
Figura 1.34 - PDE Processing para Windows com as principais funcionalidades.

Bibliotecas, como aquelas citadas na seção passada, não fazem parte da versão original do programa e para usá-las é preciso fazer seu download e instalação. Esse processo é automatizado pelo próprio PDE ao acessarmos a barra de menus, Sketch seguido por Importar Biblioteca... e Adicionar Biblioteca.... Na janela que se abrirá, figura 1.37, você pode filtrar os módulos por funcionalidades e adicioná-los através do botão Install. Outros recursos a serem carregados ou usados nos seus programas, tais como arquivos de imagens (.gif, .jpg, .tga, .png), texto (.txt, .csv) ou áudio (.wav, .au, .aif, .snd, .mp3) também devem ser explicitamente adicionados através do menu Sketch e Adicionar Ficheiro.... Selecione o arquivo desejado na interface e pressione o botão de Abrir para completar o processo.

Você pode salvar os seus códigos para futuras consultas ou reestruturações através do menu Arquivo e depois Guardar como..., que fará com que o computador crie uma pasta com o nome do seu programa contendo todos os arquivos de código, cuja extensão é .pde. Por último, uma vez que sua aplicação estiver completa, você pode exportá-la em forma de um executável, firmando que o código que você escreveu foi transformado em um software seu [18], livre para o compartilhamento com qualquer público. Ao selecionar no menu Arquivo o item Exportar Aplicação... você verá uma janela, 1.38, com opções para seleção do sistema operacional da aplicação e se você quer ou não incluir o Java para o Windows. Esta seleção aumenta o tamanho final da aplicação, mas também sua probabilidade de funcionar em plataformas que não tenham o Java instalado. O executável criado estará na própria pasta da aplicação. A interface minimalista do PDE mantém o foco direcionado para a programação, evitando preocupações com configurações desnecessárias. Mantenha o Processing aberto, pois na próxima seção você irá escrever seu primeiro programa.

Figura 1.35 - Erro - Ausência de ponto e vírgula no final de uma instrução.
Figura 1.36 - Alerta - Variável declarada, mas não utilizada no código.
Figura 1.37 - Janela de importação de bibliotecas.
Figura 1.38 - Janela de exportação de aplicação.
Figura 1.39 - Aplicação exportada como um arquivo executável.

1.4 Conversando com a máquina

Em virtude da sociedade frenética na qual vivemos, é tentador que qualquer um de nós comece a ler os parágrafos que se seguem utilizando a leitura dinâmica. Eu aconselho que você faça exatamente o contrário e diminua a velocidade do seu raciocínio. Pegue um papel, uma caneta e faça anotações do que julgar importante. Execute os códigos usando o Processing e, ainda mais importante, estude-os com calma. Aprender uma linguagem de programação pode ser intimidador a princípio, mas com o tempo você aprenderá a associar as palavras e comandos. Acima de tudo, seja persistente e você será recompensado com uma moeda muito valiosa, o conhecimento. Pronto? Então vamos começar.

Uma das maneiras mais tradicionais de se iniciar na programação é escrevendo um programa que seja capaz de exibir a frase "Ola Mundo!" . No entanto iremos escrever códigos no contexto de arte visual e nada mais pertinente do que exibir um desenho em vez de uma palavra. Sua primeira tarefa será justamente essa. Você pode começar digitando (ou copiando - processo ilustrado na figura 1.40) a linha de código abaixo no editor de texto do PDE:

Código 1.1 - Olá Mundo! -

// Desenha um quadrado:
rect(25,25,50,50);

Em seguida pressione o botão de Executar (Run - ou usando o atalho Crtl+R). Após alguns segundos você verá uma pequena janela como a da figura 1.41. Ela é chamada de janela de saída ou de exibição e mostrará o resultado de tudo que você programar no editor de texto do PDE. Você pode perceber que o computador "desenhou" uma figura (um quadrado), que é o equivalente a exibir um "Olá Mundo!" em uma linguagem de programação tradicional. Saboreie este instante, você está no caminho de se tornar um programador!

Figura 1.41 - "Olá Mundo!" na versão da arte computacional.

Bem, vamos parar por um momento e entender, com mais detalhes, o que as linhas de código 1.1, que você acabou de escrever, realmente significam. A primeira linha começa com duas barras simples (//), definindo um comentário. Comentários são qualquer tipo de anotações que o programador queira fazer, como indicar o objetivo de um código ou o raciocínio por trás do mesmo. Eles são completamente ignorados pelo programa durante sua execução.

A segunda linha contém um comando e depois foi terminada com um ponto e vírgula (;) sinalizando que aquilo que foi escrito antes dele pode ser processado pelo compilador e em seguida interpretado. Essa pontuação é necessária no final de cada uma das instruções que você digitar. Esquecer o ponto e vírgula é uma das principais causas de falhas na compilação do código. A execução dessa segunda linha faz com que o computador trace um quadrado. Isso ocorreu por que você chamou uma função do Processing que desenha um retângulo, rect() . Você pode chamar uma função toda vez que desejar fazer uma ou uma série de tarefas específicas. Os números dentro dos parênteses são os argumentos que passamos a essa função. Funções podem ter zero, um, ou mais parâmetros, ou seja, podem pedir (ou não) alguns argumentos ao serem chamadas. Em alguns casos, a função também pode devolver (ou retornar) valores ou outros dados conforme você irá aprender mais à frente.

Conhecer um pouco mais das funções que existem no Processing é especialmente importante. Muitas delas executam ações que você irá usar durante todo este livro e sempre que você trabalhar com a programação. Para funções nativas da linguagem você pode consultar a página de referência que contém uma listagem de todas as funções implementadas até o momento com uma descrição sobre cada parâmetro de entrada e saída, e ainda um exemplo. A página de referência pode ser acessada através da barra de menus em Ajuda e depois Referência, veja a figura 1.42.

Figura 1.42 - Como abrir a página de referências do Processing.

É essencial que você compreenda como consultar e chamar, de maneira eficiente, as funções do Processing. Em vista disso, investigaremos passo a passo todas as informações presentes na página de referência de uma função qualquer. Para manter a consistência, vamos abrir o link referente à função usada no código 1.1, rect(), que está abaixo da seção 2D Primitives (figuras 1.43 e 1.44), indicando que essa função cria uma forma bidimensional básica. Ao abrir a página dessa função você perceberá diversos tópicos que contém tudo que você precisa saber a respeito da mesma. A tabela 1.1 mostra uma descrição dessas informações, por ordem de importância, para uma função em geral, e para a função rect().

Funções em geral Função rect()
Name Nome para invocar a função. Para desenhar um retângulo, rect().
Description Uma descrição da função e das tarefas que ela realiza. Explica o que é um retângulo e, rapidamente, os parâmetros da função rect(). Também comenta como tornar as bordas dessa figura mais suaves.
Syntax Mostra todas as maneiras de chamar a função no editor de texto. Em nosso caso, escolhemos a versão padrão, que é rect(a,b,c,d), na qual se especificam apenas posição, comprimento e altura do retângulo.
Parameters Exibe uma explicação sobre cada um dos parâmetros a serem passado para a função, assim como o tipo de cada um deles. Para a forma utilizada, os parâmetros são:
a: Coordenada x do retângulo.
b: Coordenada y do retângulo.
c: Comprimento do retângulo.
d: Altura do retângulo.
Return Informa qual tipo de variável a função retorna. Um retorno void indica que a função não devolve nada.
Examples Mostra a janela de exibição do Processing ao executar os códigos de exemplo. Você pode ver as diversas maneiras de se desenhar um retângulo.
Related Lista funções relacionadas à função pesquisada. rectMode(): Altera a maneira que rect() desenha o retângulo.
quad(): Desenha um polígono de quatro lados.
Tabela 1.1 - Informações relevantes da página de referência de uma função do Processing.

Com base nessas informações, retorne ao código 1.1 e observe que existem números, também chamados de argumentos, entre os parênteses da função rect(). Os dois primeiros números, (25,25) compõem o par (x,y) da origem do desenho do retângulo. Neste caso, 25 pixels de distância no eixo x e 25 pixels de distância no eixo y do ponto (0,0), também conhecido como origem, da janela de exibição. Os demais valores são referentes ao comprimento e a altura do retângulo em pixels que, por possuírem o mesmo número (50), formam um quadrado em vez de um retângulo. Você aprenderá mais sobre pixels e origem da janela de exibição na próxima seção.

O intuito de passar pela explicação dessa função com detalhes foi precisamente para evidenciar que toda informação técnica que você precisar sobre as funcionalidades do Processing se encontra na própria referência do programa. Em diversos exemplos ao longo deste livro são usadas inúmeras outras funções cujas explicações são citadas apenas superficialmente. Neste caso, cabe a você, futuro (ou atual) programador artista, consultar as páginas de referências para uma explicação mais detalhada. Você pode começar a exercitar esse hábito explorando algumas das funções básicas que irá utilizar recorrentemente, como desenhar um ponto (point()), uma linha (line()), um triângulo (triangle()) e um círculo ou elipse (ellipse()).

Figura 1.45 - Figuras comumente desenhadas no Processing.
Figura 1.46 - Selecionar texto.
Figura 1.47 - Copiar texto.
Figura 1.48 - Colar texto.
Figura 1.49 - Executar programa.
Figura - 1.40 - Processo para copiar códigos do livro e executar no Processing.
Figura 1.43 - Documentação do Processing.
Figura 1.44 - Referência para a função rect().

1.5 Elementos de imagens digitais

A figura que você desenhou na seção passada, produto da função rect(25,25,50,50), ocupava exatamente o centro da janela de exibição. Esse posicionamento certeiro foi fruto da escolha cuidadosa dos argumentos da função, vínculados implicitamente ao conceito de resolução e aos indivisíveis blocos de construção que compõem todas as imagens na computação: os pixels. Quando um computador exibe uma foto ou um vídeo através de seu monitor ele cria a ilusão de uma imagem perfeitamente contínua através da manipulação individual de cores de milhares desses elementos. A figura 1.50 mostra a foto de um monitor magnificado algumas dezenas de vezes, permitindo a visualização do pixel. A resolução de um monitor, e de elementos gráficos digitais, é dada por números que indicam quantos pixels existem, respectivamente, na sua largura e altura. Por exemplo, um monitor com uma resolução de 1280x1024 é formado por 1280 colunas, cada uma com 1024 pixels na vertical, totalizando 1310720 pixels (mais de um milhão de pixels!). Quanto maior a resolução, mais pixels existem para representar os detalhes e melhor é a qualidade de uma imagem digital. A figura 1.51 faz uma comparação de uma mesma imagem com duas resoluções diferentes.

Figura 1.50 - Foto ampliada da tela de um monitor de computador.
Figura 1.52 - 770x1015.
Figura 1.53 - 77x102.
Figura - 1.51 - Imagem com diferentes resoluções.

A janela de exibição do Processing pode ser considerada como um pseudomonitor formado por pixels, cuja disposição padrão é de 100 colunas, cada uma com 100 pixels na vertical, gerando uma grade, ou resolução, de 100x100 pixels. Veja que essa janela (figura 1.54) não é nada mais do que um plano cartesiano bidimensional (apenas eixos x e y) e discreto (cada pixel é uma possível posição que pode ser preenchida com uma cor).

Figura 1.54 - Representação da janela de exibição como um plano bidimensional discreto de 14 por 14 pixels.

Os desenhos de figuras, textos, ou quaisquer elementos visuais na janela de exibição seguem as mesmas leis de desenhos da matemática. Se você conhecer o ponto da origem cartesiana, par (0,0), da janela de saída, assim como o sentido dos eixos coordenados, qualquer desenho pode ser parametrizado por coordenadas, distâncias e equações. Diferentemente das coordenadas cartesianas, a origem em um computador é localizada no canto superior esquerdo da janela, e os eixos crescem (os valores são positivos) da esquerda para a direita (eixo x - horizontal) e de cima para baixo (eixo y - vertical). Isso é tudo que você precisa saber para localizar e posicionar qualquer tipo de imagem ou figura geométrica. Veja na figura 1.55 a diferença entre o plano usado na matemática e no computador.

Figura 1.56 - Matemática.
Figura 1.57 - Computação.
Figura - 1.55 - Plano cartesiano.

Fundamentados por estes conceitos, vamos voltar ao desenho da figura geométrica. Suponha que você queira desenhar um quadrado de 50 pixels de lado centralizado na sua janela de saída e que a mesma possua uma resolução de 100x100 pixels. Sabemos que uma figura que ocupa exatamente o centro de um espaço é aquela que possuí distâncias iguais da sua forma aos limites desse espaço. Uma ótima maneira de "visualizar" melhor o que deve ser feito e planejar seus passos antes de programar é criando o hábito de rascunhar suas ideias. Observe a figura 1.58, um esboço rudimentar de nosso objetivo, e verifique como é possível obter todas as coordenadas dos vértices do quadrado.

Figura 1.58 - Calculando as coordenadas para um quadrado centralizado.

Uma consulta à referência mostra que o ponto (x,y) que a função rect() recebe para o posicionamento do retângulo é o seu canto superior esquerdo[19]. De acordo com a figura 1.58 é possível determinar que esse ponto é composto pelas coordenadas x igual a 25 e y igual a 25, desta forma a função é chamada como:

Código 1.2 -

rect(25,25,50,50);

Este tipo de procedimento para cálculos e determinação de posições de figuras na janela de exibição é rotineiro na arte computacional e no desenvolvimento de jogos ou interfaces de aplicativos para usuários. A melhor maneira de se habituar a ele é encarando exercícios práticos, então busque, sempre que possível, abordar os programas em um panorama visual. Lembre-se apenas que, se você formular o problema de maneira correta, você sempre poderá utilizar o computador como aliado para solucionar este e outros tipos de cálculos mais complexos.

1.6 Estrutura de um programa em Processing

O último ponto antes de transpormos para o cerne da programação é atentar para os elementos da estrutura básica de um programa do Processing. O código 1.1 que você escreveu anteriormente é válido, mas raramente ele será tão simplório quanto apenas uma linha de texto. A maneira mais comum de começar a escrever um programa no Processing é através das seguintes linhas de código:

Código 1.3 - Estrutura padrão de um programa no Processing -

void setup() {
// Seu código vai aqui.
}

void draw() {
// Seu código vai aqui.
}

Essa estrutura padrão faz o uso de duas funções primordiais do Processing, setup() e draw(), que adicionam uma série de características e funcionalidades na execução de seus programas. O ponto principal é que você entenda qual tipo de código você escreve dentro das chaves de cada uma dessas funções, então vamos por partes.

A função setup() representa o modo estático da aplicação e, se incluída no programa, é geralmente chamada no começo de cada uma de suas execuções (sempre que você pressionar o botão de executar). Dentro do setup() são colocadas as funções de configuração do Processing e normalmente são feitas as inicializações de variáveis declaradas anteriormente. Uma função frequentemente encontrada dentro de setup() é a size(). Ela permite alterar o tamanho da janela de exibição para uma largura e altura arbitrários. Por exemplo, a função size(640,480) gera uma janela de saída com resolução de 640x480 pixels. Outras funções de configuração incluem maneiras de desenhar figuras geométricas, filtros de suavização e mudanças nos espaços de cores.

A função draw() representa o modo dinâmico da aplicação e é aquela que define a animação da janela de exibição. Todo código que você escrever dentro das chaves dessa função será repetido múltiplas vezes por segundo. O Processing, como qualquer outro sistema de vídeo, cria animações a partir de imagens estáticas exibindo-as a uma alta frequência. Por padrão, temos o valor de 60 quadros por segundo. A progressão rápida através desses frames cria a ilusão de que as imagens estão se movimentando, gerando um vídeo ou animação. Portanto, se você quiser que um objeto se mova em tempo real na janela de exibição será necessário escrever o código dentro da função draw(). É possível alterar a frequência de repetição ou o número de frames por segundo chamando a função frameRate() dentro de setup().

Em alguns casos você perceberá essas funções sendo utilizadas individualmente e isso é perfeitamente válido se atender aos objetivos visados. Se você desejar gerar apenas uma imagem estática, um quadro, você pode muito bem fazer isso escrevendo todo código dentro da função setup() e omitir a função draw() já que não existirá uma animação. Por outro lado, você pode simplesmente omitir a função setup() e manter a draw() se quiser uma animação com as configurações padrão do Processing, porém isto não é muito comum. Existe ainda o caso de você usar uma função nativa do Processing sem o setup() e o draw(), como exemplificado na primeira linha de código apresentada neste livro, em que são usadas as configurações padrão e não existem animações.

1.7 Sumário

Neste capítulo você conheceu um pouco mais da origem da arte computacional e seu desenvolvimento ao longo dos anos. Em seguida foram apresentadas linguagens de programação, ferramentas e softwares que podem ser usados para trabalhar com a arte computacional e gerativa. Dentre eles o Processing foi escolhido devido as suas inúmeras vantagens, que se estendem desde a interface e sintaxe minimalista até sua filosofia opensource.

O próximo passo foi se familiarizar com o ambiente Processing, o PDE, que será usado para escrever todos os seus códigos. Abordando esse tema, você escreveu e executou seu primeiro programa para exibir um "Olá Mundo!" no estilo da arte computacional. Esse foi um exercício simples, mas que aludiu a assuntos como sintaxe e funções, bem como consultas as referências do Processing.

Os últimos temas explicados trataram resolução, grade de pixels e estrutura básica de um programa. Esses três pontos são importantes na medida que permitem, respectivamente, entender a janela de exibição, posicionar meticulosamente figuras nessa janela e configurar/animar seus programas. No próximo capítulo serão introduzidos os alicerces que compõe a programação e como utilizá-los no contexto da computação criativa.

 

 


[1] Boden, M. A. e Edmonds, E. A. (2009). What is generative art?. Digital Creativity 20(1): pags.21-46.

[2] Famosa peça do artista Hans Haacke intitulada Condensation Cube.

[3] Velho L. (1993). "Waldemar Cordeiro". Arteônica - Homenagem a Waldemar Cordeiro. Catálogo da exposição Sibgrapi VI.

[4] Nunes F. V. (2004). "Waldemar Cordeiro: da arte concreta ao "popcreto"". Universidade Estadual de Campinas. Dissertação de Mestrado

[5] Rian, I. M. et al (2007). "Fractal geometry as the synthesis of Hindu cosmology in Kandariya Mahadev temple, Khajuraho". Building and Environment 42(12): pags.4093-4107.

[6] Mozart, W. A. (1796). "Anleitung Walzer oder Schleifer mit zwei Würfeln zu componiren, so viele man will, ohne etwas von der Musik oder Composition zu verstehen". N. Simrock.

[7] Erratum Musica e La Mariée mise à nu par ses célibataires même. Erratum Musical

[8] Este tipo de discussão deve ser deixada para os acadêmicos no assunto uma vez que existem contra argumentos para ambos os casos. Se um programa que traça um padrão passo a passo é desenvolvido de forma que produza algo tão complexo que seja impossível de ser previsto antes de sua execução, ele pode ser considerado gerativo ou não? Da mesma forma, um sistema composto por agentes autônomos que tomam decisões preestabelecidas (mas não predeterminadas) seria gerativo? Se sim, por que, já que para uma simulação com condições iniciais conhecidas seria possível determinar os estados dos agentes em qualquer tempo? Cabe um questionamento.

[9] Paul the Robot (2011).

[10] Fifty Sisters (2012).

[11] Filament Sculptures (2014).

[12] Acrylonitrile Butadiene Styrene - Copolímero formador de um material termoplástico rígido e leve.

[13] Nike: Force of Nature (2015).

[14] O objetivo do autor é puramente mostrar, de forma visual, o conceito técnico por trás da obra ao ser aplicado em uma imagem qualquer. O processo artístico de Cordeiro em sua obra original, Derivadas de uma imagem, é muito mais complexo, e envolveu escolhas cuidadosas que abrangeram, dentre outros pontos, a seleção da imagem, o método de execução das derivadas e a interpretação final das ilustrações geradas.

[15] A programação visual é um tipo de linguagem de programação em que se “escreve” o código através blocos funcionais, ao contrário da forma tradicional que é o texto. A figura 1.27 mostra uma comparação.

[16] Veja uma comparação entre o ambiente do Processing e o Visual Studio, uma ferramenta da Microsoft, na imagem 1.30. Ambos os programas servem a propósitos diferentes, aqui se evidencia apenas as interfaces.

[17] do ingês, Java Runtime Environment ou JRE

[18] O Processing puro é licenciado sob a GNU Lesser General Public License, significando que você pode até comercializar projetos construídos com ele. Mais detalhes sobre ele podem ser encontrados na sua página de perguntas frequentes.

[19] Para o modo de desenho padrão de um retângulo. Essa informação está disponível na página de referência da função rect().