( )Tipografia_Generativa=Projecto; Final }

 

aviso

Não fazer trabalhos em processing a não ser que queiram mesmo ser persistentes no processo para obter resultados. Mas isto sou eu que nunca tinha lidado com processing. Ficam avisados.

}

//Este projeto nasceu com a vontade que já há algum tempo tinha de me estrear neste mundo que é o processing. Como nunca fui muito ligada à parte digital do design evitando a todo o custo este percurso na minha licenciatura, onde escolhi, no 2º Ano Design Gráfico, havendo também a opção de Design Multimédia. Contudo mais tarde percebi que não me posso distanciar da parte da multimédia pois esta acaba sempre por andar de braços dados com o gráfico e decidi por isso que esta seria a oportunidade perfeita para pesquisar e trabalhar em algo que já queria explorar à algum tempo, mas que nunca tinha tido a motivação para o fazer, a arte generativa, mais concretamente a tipografia generativa.

Neste período de tempo que tivemos, foi proposto, pela docente, a criação e desenvolvimento de um objecto que relacionasse a tipografia com a multimédia, no qual o utilizador pudesse usufruir de novos conhecimentos e experiências proporcionados pela sua utilização. A ideia consistiu em criar uma exploração tipográfica interactiva utilizando como base uma fonte já existente para poder intervir sobre a mesma.

Após alguns meses de pesquisa incessante e em primeiros contactos com javascrip, linguagem de programação do processing, encontrei várias referências que me foram úteis e essenciais para poder aprender melhor sobre esta matéria. Todas as referências seguem abaixo para quem quiser explorar:

Introduction – Processing Tutorial (recomendo imenso o canal de YT)

Type Directors Club – On Generative Typography

Type + Code: Processing For Designers

Processing Load Font  (o site oficial do processing aqui contém muita informação útil para principiantes)

//Outra dica que também posso deixar é quando aparece uma linha de código com erro basta copiar esse erro e “googlar” e aparece sempre um fórum com alguém a solucionar o problema, felizmente.

pro.PNG
Programação do Código

A fonte utilizada foi a Roboto, pois é uma fonte da Google e é uma fonte a que, indirectamente, já estamos “habituados”, pois hoje em dia é utilizada na maioria da web, tendo sido concebida e pensada exclusivamente para ecrã. Decidi assim que era a fonte ideal para usar neste projecto pois o espectador iria sentir que o esqueleto da fonte utilizada lhe era familiar de alguma maneira, mesmo inconscientemente. Podem descarregar a Roboto aqui.

 

>Estes foram alguns dos diversos resultados/aspectos que fui obtendo ao longo deste processo de alterar valores nas linhas de código.

teste009
Aspecto ao longo do processo de programaçãoteste002

teste007.PNGteste001.PNG

<O código completo pode ser consultado aqui (na tab de código), decidi pôr no OpenProcessing,  site onde podemos colocar o nosso código online em virtude de ajudar outra pessoa, pois é algo que também me ajudou a entender como funcionava melhor esta linguagem, podem também observar os comentários ao longo do código para melhor compreensão (estes estão em Inglês).

O facto de utilizar a Roboto online no site openprocessing permite que os acentos e outros caracteres sejam reconhecidos também, o que penso que não aconteceria com outra fonte.

Para quem quiser colocar o código no processing,  para obter outra letra que não o “A”, que aparece por definição, basta clicar no teclado e escolher a letra pretendida (como indicado no próprio site), e com isto consegui incluir a componente Interactiva, inicialmente imposta pela Cadeira.

A princípio o código deu-me imensas dores de cabeça, mas no final acabei por gostar imenso deste trabalho, sempre aliado pela componente tipográfica que tanto gosto.

Estes Foram os resultados Finais:

 

shot A.PNG
Alfabeto concluído

gif-A.gif git-C.gif

{

 

/Decidi fazer um poster e um specimen como forma de uso e exploração da Type criada.

Mas claro que até na exportação do poster houve problemas!

Capturar.PNG
Complicações ao longo do processo

erro.PNG

Acabei por ter que encurtar os frames da exportação do poster para formato gif (como fazer aqui) pois o ficheiro estava bastante pesado de tantas layers no photoshop, coisa que é meio impossível não ter quando se exporta frames através do processing, no entanto, eis o resultado final:

 

Poster-Edit-Gif
Poster interactivo e respectivo mockup

poster_mockup_MD

Porque não quis que este trabalho se ficasse apenas pelo ecrã, resolvi explorar outro tipo de suporte, neste caso voltando aos “básicos”.

 

>>

//Specimen;

20180621_155230
Specimen Impresso

20180621_155211

 

gif-specimen

 

No specimen impresso tentei analisar outras formas de utilização da type. No início do specimen podemos observar umas impressões em acetato, que funcionam como forma de transpor o digital para papel, fazendo uma analogia às layers do computador, agora representadas em papel. Estas páginas em acetato funcionam como page flip e recriam assim o movimento inicialmente gerado em processing.

O movimento gradual gerado a partir de código tem uma componente “random” que possibilita o designer de obter resultados que dificilmente seriam possíveis sem recurso a máquinas.
A noção de obra de arte proveniente de um computador é tema que irá envolver grandes questões nos próximos anos, enquanto isso vai-se fazendo estas “explorações”.

Um obrigado à professora Mónica por me apoiar nos meus projectos pessoais e por estar sempre disponível para discutir coisas sobre este trabalho.

Obrigado

;}

 

 

3 Comments

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão /  Alterar )

Google photo

Está a comentar usando a sua conta Google Terminar Sessão /  Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão /  Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão /  Alterar )

Connecting to %s