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