TYPE & CODE: Ferramentas para criar sua tipografia generativa!

Olá, cabras e muléres da peste! O Tipo da Fonte está de volta com mais um post da série TYPE & CODE quentiiiinho pra vocês!

Hoje, falaremos um pouco sobre algumas ferramentas disponíveis para desenvolver gráficos em movimento, e aplicá-las em tipografia generativa. Em seguida, aprofundaremos em uma delas (sem spoilers, continua lendo que você descobre hehe).

Antes que você pergunte: Sim, elas são plataformas de codificação. E não, você não irá sofrer uma morte terrível por causa disso! Seja leigo ou avançado em qualquer linguagem de programação, os softwares selecionados têm como principal objetivo lidar com o aprendizado, portanto podemos encontrar open source, apostilas, tutoriais facilmente pela internet. Os sites das plataformas, inclusive, insistem em te fornecer tais materiais, e a acompanhar seu crescimento.

Então, tá preparado para lançar um feitiço Ridiculous no medo de programar? Respira fundo, Harry Potter, segura firme a varinha e vem comigo!

 

Opentype

OpenType é um formato de fontes de computador escalável, inicialmente desenvolvido pela Microsoft, e mais tarde em cooperação com a Adobe Systems. Foi anunciado pela primeira vez em 1996, e no final de 2002 a Adobe completou a conversão de todas as fontes que comercializava em PostScript para OpenType.

O OpenType é mais conhecido como o sucessor do formato TrueType (desenvolvido pela Apple Computer e licenciado à Microsoft) e do formato PostScript Type 1 (desenvolvido pela Adobe). Possui diversas vantagens: a codificação suporta várias linguagens diferentes num só arquivo, como o cirílico, hebraico e grego, possui opções avançadas de tipografia, suportando tratamentos tipográficos complexos como as ligaduras, e um número enorme de caracteres (até 65,536!). Tudo isso, e ainda é mais leve que seus antecessores! É de cair o olho da órbita!

No caso das fontes/famílias tipográficas da Adobe no formato OpenType que contenham funções avançadas de tipografia, seus nomes acompanham por convenção o sufixo “Pro”. A Helvetica, por exemplo, no formato OpenType com funções avançadas chama-se Helvetica Pro. Seus arquivos podem ser utilizados em Mac OS, Windows e alguns sistemas Unix. As extensões de ficheiros OpenType normalmente são “.OTF”, mas também podem ser “.TTF” ou “.TTC”.

Certos programas, como o Scribus, o Adobe InDesign, o QuarkXPress e o Adobe Photoshop, permitem aproveitar todas as funcionalidades do OpenType. Entre várias opções, é possível escolher caracteres alternativos para além dos “padrões” caso o ficheiro da fonte tipográfica contenha esses caracteres . Por exemplo, você pode usar formas diferentes da letra “A” ou “a”,  aplicando-as num texto ou em outro contexto diferente.

 

Para saber mais sobre a OpenType, dá uma olhadinha neste link com informações mais detalhadas.

 

DrawBot

DrawBot é um aplicativo poderoso e gratuito para MacOSX (não funciona em Windows :/) que convida você a escrever scripts Python simples para gerar gráficos bidimensionais. Os primitivos de gráficos embutidos suportam retângulos, ovais, curvas, polígonos, texto e transparência.

Foi criada pelos célebres Just van Rossum e Erik van Blokland como forma de explorar elementos de programação nas artes visuais.

DrawBot é uma ferramenta ideal para ensinar os conceitos básicos de programação, assim como o Processing. Os alunos desenham gráficos coloridos e interativos ao se familiarizar com variáveis, declarações condicionais, funções, etc.

 

Além disso, você pode salvar seus projetos em diferentes formatos de arquivo, como o PDF escalável, svg, vídeo, png, jpeg, tiff… Ah, a opção de alta qualidade também está disponível!

DrawBot é escrito em Python. O download binário é totalmente autônomo (ou seja, não precisa de uma instalação em Python), mas o código-fonte está disponível se você quiser rodar o seu próprio.

Você pode dar uma olhada em mais motion graphics feitos na plataforma aqui.

 

JavaScript

Existem várias bibliotecas e plataformas que utilizam-se do JavaScript para compilar os algoritmos em navegador.

Temos o WebGL, uma biblioteca de js que permite a renderização de gráficos interativos em 2D e 3D dentro de um HTML. É suportado por uma vasta gama de navegadores, e roda bibliotecas gráficas como a Three.js, que desenha elementos geométricos, modelos 3D, partículas, animações, vídeos, dentre outros. É muito útil pra quando você quiser trazer interatividade para sua webpage de maneira divertida e visualmente agradável.

Outras bibliotecas como Vanilla.js,  Sketch.js e P5.js (sim, o Processing possui uma extensão para navegador! Grito!) são bastante utilizadas. Confere neste link alguns exemplos de tipografia explorados no JavaScript.

 

Processing

Criado em 2001 no MIT Media Lab por John Maeda e seus estudantes, Processing é um software com o objetivo inicial de ensinar programação para designers e ilustradores dentro do contexto visual. Ao longo do tempo, a popularidade da plataforma cresceu e construiu uma comunidade global ativa até hoje, regida por Ben Fry, Casey Reas e Dan Shiffman. Tem linguagem própria, é open source e gratuito para uso nos maiores sistemas operacionais (Windows, MAC e /GNULinux).

A exploração das artes visuais abre um leque de utilidades, desde prototipação até a produção de peças gráficas, animações, interações, etc. Vários projetos desenvolvidos fizeram parte de exposições culturais, festivais de música e dança, produções audiovisuais e instalações interativas.

O mais interessante é que a linguagem do Processing é muito fácil e intuitiva, como JavaScript ou Phyton, então mesmo que você nunca tenha programado na vida, apenas um pouco de raciocínio lógico e algumas linhas de código são necessários para desenvolver coisas incríveis!

Tal estímulo permite o engajamento de uma nova geração de artistas visuais que considerem programação como parte essencial de suas práticas criativas. Convenhamos… Processing é vida, não mores? <3

 

Conhecendo o Processing

Como o Processing é simples de entender e codificar, além de ser acessível a todos os sistemas operacionais, vamos abraçá-lo como nossa plataforma de aprendizado, certo? Assim, você poderá fazer os tutoriais de tipografia experimental no e-book de Type&Code que vêm por ai! Opa, não tinha falado sobre isso? Agora que você já sabe, fique atento!

Bem, para começar, você precisa baixar o software na sua máquina. Como foi dito, o download é gratuito e disponível no site: https://processing.org/download/

Depois de baixá-lo, abra o primeiro documento. Vê? Essa é a janela principal. É bem simples: nada mais que um bloco de notas, onde você irá redigir seu código. Antes de iniciar a programar, vamos dar uma olhadinha nos botões e funcionalidades, assim você se familiariza melhor com o ambiente:

 

Lá em cima você vê dois botões: o de play, que roda seu script, e o de stop, que pára a execução. Na aba de Arquivos, temos diversas opções, como o acesso a exemplos prontos de código, a abrir e salvar sketches, exportar programas, dentre outros. Nas outras abas temos diversas possibilidades, também,  mas por hora focaremos no básico.

Vamos ver o default do sketch? Clique no play. Perceba que o Processing já abre uma janela cinza de 100×100 pixels sem ter nenhum código pronto. Agora feche a janela, porque começaremos a rabiscar!

 

Princípios básicos de programação e sintaxe da linguagem

“Ok, Giovanna… Não sei nem por onde começar. #AjudaLuciano”

Relaxe, jovem! A gente tá aqui pra aprender passo a passo, entendendo como cada elemento da sintaxe funciona, pra que você crie tipografias generativas maravilhosas com os tutoriais do e-book. Vamos lá!

A priori, escreva no seu sketch as seguintes linhas:

void setup(){

}

void draw(){

}

Void setup() e void draw() são as funções essenciais do Processing. Devem ser inseridas antes de qualquer linha de código, pois são responsáveis por regular a quantidade de vezes que o algoritmo vai ser executado.

Toda informação que você digitar dentro de void setup() será executada apenas uma vez, enquanto que no void draw() executará num loop, uma vez a cada frame. Geralmente, no void setup() ficam declarações iniciais, como tamanho e cor da tela, e no void draw() é que fica a parte divertida do algoritmo.

Vamos testar juntos! Escreva entre as chaves da função setup() os comandos abaixo, e em seguida clique em “play”:

size(500, 500);
background(#a6c546);

A função size(width,height); redefine o tamanho da tela. No caso, você a ajustou para 500×500 pixels. Já com a função background(); você pode mudar a cor de fundo, seja por código hexagonal, seja com código RBG. Veja:

Que tal desenhar algumas formas geométricas? Então, comigo, ainda na função setup(), digite os seguintes comandos:

fill(255);
noStroke();
rect(0, 0, 260, 100);

fill(255);
noStroke();
rect(0, 100, 120, 500);

Estamos progredindo, hein? O Processing tem muitas funções geométricas, como a utilizada acima. A rect(x1,y1,width,height) desenha retângulos a partir das coordenadas de onde será desenhado e de suas dimensões.

Como funciona as coordenadas na plataforma? Simples: o ponto central (0,0) encontra-se na ponta superior esquerda. À medida que se desloca para a direita, o valor de x aumenta, e à medida que se desloca para baixo, o valor de y aumenta. Do contrário, seus valores diminuem.

Portanto, acabamos de desenhar dois retângulos: um que começa no ponto (0,0) e outro que começa no ponto (0,100). O primeiro, possui largura de 250px e altura de 100px, enquanto que as dimensões do outro são de 120×500 pixels.

Outro lado bacana é que podemos definir vários parâmetros da forma. Por exemplo, tá vendo essa função fill()? Ela serve para definir as cores, também em código hexagonal ou RGB. E a função noStroke()? Bem, ela serve pra tirar a borda do retângulo. Caso quisesse mantê-la, a apagaria. Teste no seu computador e veja o resultado.

A função para desenhar elipses tem os mesmos parâmetros da do retângulo.  Acompanhe comigo:

fill(255);
noStroke();
ellipse(550, 250, 600, 600);

fill(#a6c546);
noStroke();
ellipse(550, 250, 325, 325);

ellipse(x, y, width, height) foi a função que utilizamos. A diferença é que uma elipse é branca e a outra é da cor do fundo, para que pareça um “c”. Claramente, temos funções próprias para desenhar uma forma geométrica aberta, no entanto permaneceremos nas básicas. Veja como ficou:

 

Agora, desenhe uma linha:  line(x inicial, y inicial, x final, y final). Faça triângulos: triangle(x1, y1, x2, y2, x3, y3). Experimente formas diferentes, tamanhos, cores e posições diversas. Utilize-se da página de refência do Processing para mais funções. Não se preocupe em estar bonito; rabisque até sentir segurança no que faz. Daí, solte a imaginação e faça sua primeira peça visual codificada! Uhuuuuuul!

 

Links de referência e tutoriais básicos

Open Processing

Website de compartilhamento de vários códigos feitos no Processing. Excelente para inspirações! Veja aqui: www.openprocessing.org/

The Nature Of Code

Livro escrito pela comunidade mundial Processing para ensinar a fazer várias peças visuais. O livro pode ser lido online, sem precisar comprá-lo. Confere mais: www.natureofcode.com/

The Code Train

O canal de tutorial no youtube mais colorido e divertido de todos os tempos! É gravado por um dos responsáveis da comunidade atualmente. Duvido você não soltar a gargalhada: www.youtube.com/user/shiffman

Processing.org

Nada melhor que acessar ao site oficial do Processing. Lá, você encontra tutoriais, referência de todas as funções da linguagem, fóruns de discussão, livros de aprendizado… E muito mais! Dá só uma olhada: www.processing.org/

Coding Game

Tem dificuldade de aprender lógica de programação? Que tal aprender jogando? Neste website, você pode ter esta experiência! Se joga: www.codingame.com/training
Outras plataformas, como o Khan Academy e o Code Academy, fornecem cursos básicos de programação, para você ficar craque!

Ufa! Aprendemos muita coisa hoje, não? E olha que não foi nem a ponta do iceberg. Muitas coisas podem ser exploradas. Percebeu que nem tocamos na função void draw()? É nela que a magia da arte generativa acontece! Se você ficou com sede de mais, quer aprender a fazer sua própria tipografia generativa e a montar um typespecimen massa, espera um cadim que O Tipo da Fonte estará lançando seu primeiro e-book: “TYPE + CODE: Experimentos em Tipografia Generativa” em breve! Nele, além dos dois primeiros posts da série, terão vários tutoriais show! Fiquem atentos!

Para ter acesso às novidades do blog, assine nossa newsletter, é gratuito! A redação está com tudo para oferecer os melhores conteúdos de tipografia e suas vertentes. Por hoje é só, jovens. Sempre bom tê-los aqui na nossa casa. Até mais!