Ícones abstratos

Esta publicação é uma continuação desta

Depois de ter publicado as figurinhas abstratas e de ter percebido que alguns aplicativos alteram o próprio ícone de chamada – como, por exemplo, os de calendário e relógio que colocam o dia do mês ou o desenho do relógio no ícone – fiquei com vontade de continuar o projeto das figurinhas abstratas e meter uma arte generativa dentro do celular de cada pessoa. Diariamente, a partir da meia-noite, uma nova arte abstrata baseada em desenhos vetoriais seria gerada e tomaria o lugar do ícone anterior. Há possibilidades de:

  • gerar novo ícone;
  • alterar horário de alteração;
  • salvar ícone gerado;
  • etc…

Progressos dos testes com SVG

Este texto é uma continuação deste.

Criei um repositório no GitHub para manter as versões organizadas. Vou fazer aqui uma lista de backlog para eu não me perder no projeto. Na real já deturpei um pouco a primeira intenção. Mas o que importa é o desgoverno do avanço epistemológico. Affe…

Acabei criando também um kanban no Trello. Puxa vida, que rapaz mais organizado.

Mas o maior avanço deste tema aconteceu hoje durante uma conversa com meu primo Marcel. Marcel é professor de matemática na Universidade Federal do Pará. Perguntei pra ele sobre a existência de alguma solução para criar as curvas fechadas simples – que elas não fossem do tipo não-simples. Ele não sabia. Mas fomos conversando sobre o assunto e a conclusão que cheguei com a ajuda dele foi que melhor será não trabalhar com o desenho, mas sim com as formas. Fazer um amontoado de formas para montar as que eu quero. Um número de formas pré-definidas que fossem alteradas em sua escala, deformação horizontal e vertical, rotação. Depois seriam amontoadas e soldadas. Como na imagem destacada desta publicação.

Formas aleatórias

Ontem consegui fazer funcionar a biblioteca de JavaScript SVG.js. Aí consegui fazer um morph com um retângulo (que seria um botão) para um retangulão (que viraria uma cor de fundo de tela). Primeiro peguei o tamanho da tela do ‘cliente’, posicionei o botão no meio da tela e, quando ele era clicado, os 4 pontos que o formam viravam uma imagem final e um comando de morph era lançado.

Hoje pensei que poderia retomar uma ideia antiga: criar um gerador de formas aleatório. Baseado nas formas que costumo fazer nas minhas séries de desenho/pintura, um criador de curvas vetoriais fechadas simples que se alternassem em morph.

Na real, esta galeria mostra a investigação com formas que eu estava fazendo um ano atrás. Ela imediatamente me dá a ideia de outra possibilidade de exploração de um gerador de imagens aleatórias – que seria esta composição com as formas criadas de modo a gerar uma imagem harmoniosa ou não. Enfim, vou organizar um método para explorar isso.

Também devo dizer que esta volta ao digital se deve a minha condição de estar desempregado e sem trabalho e sem meu local de desenvolvimento de projetos artísticos – a salinha. Ela está em reforma, estão trocando o telhado! Que beleza! E aqui vai o método de criação das formas:

1 – Uma imagem em SVG pode ser do tipo polígono, retângulo, círculo, etc, etc. Estas são figuras geométricas primitivas. As que eu pretendo trabalhar são do tipo path – que não tem um nome e são formadas ora por retas, ora por curvas entre um ponto e outro.

2 – Uma curva fechada simples tem no mínimo 3 pontos. Acho importante estabelecer um número de pontos inicial para trabalhar por causa do efeito morph que pretendo aplicar à forma resultante. Apesar de que, ao que me parece, o morph funcionou bem para formas com números diferentes de pontos.

3 – Um path em SVG pode ser formado pelos seguintes comandos – e cada um exige um formato de números posteriores que determinarão o que acontecerá a partir deste comando. Aqui está uma boa referência que ensina quais são estes ‘comandos’ e que ‘argumentos’ eles solicitam.

 M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

Quando usado o comando com letra minúscula, o deslocamento é relativo. Com letra maiúscula é absoluto. Provavelmente vou usar a linha para o próximo ponto ser feita com deslocamento para um ponto cartesiano absoluto para manter os pontos dentro de um conjunto.

Os limites dos números que serão usados como argumentos de cada comando para fazer a forma serão estudados conforme o desenvolvimento do projeto – assim como de que maneira farei uma forma aleatória ser uma curva fechada simples (que não tenha cruzamento na linha que a forma).


Vou iniciar o projeto usando apenas as linhas retas. Portanto usando apenas os comandos das letras M, L, H, V e Z. Vamos lá.