Faça efeitos de tipografia 3D interativos

Contente

• 01. Inicie o processo
• 02. Atualize a partícula
• 03. Vá com o fluxo
• 04. Siga, mas não muito de perto
• 05. Exibir a partícula
• 06. Enrole
• 07. Deleite do invólucro
• 08. Faça muitas partículas
• 09. Configure tudo
• 10. Outras telas
• 11. Faça uma grade
• 12. Faça partículas
• 13. Desenhe a tela
• 14. Crie um efeito de fluxo
• 15. Atualize a matriz
• 16. Atualize as partículas
• 17. Adicione o texto
• 18. Detecte a posição do mouse
• 19. Coloque no lugar
• 20. Escreva o CSS
• 21. Terminar

A tipografia sempre desempenhou um papel importante no arsenal de ferramentas de qualquer designer, pois eles selecionam a fonte certa que irá aprimorar a mensagem e apresentar o contexto certo para o que está sendo comunicado. Nos últimos oito anos, os web designers tiveram a capacidade de incluir fontes personalizadas, como a tipografia cinética, em seu design e ter controle tipográfico semelhante ao dos designers de impressão.

Dê uma olhada em muitos dos sites que são apresentados como premiados ou recebendo títulos de "site do dia" e você logo notará que o uso da tipografia torna-se central para o design, permitindo que eles superem a concorrência. Isso pode variar de formas de letras animadas, movimento reativo para as interações do usuário, até o uso ousado de formulários de tipo ocupando o centro do palco (mantenha seus arquivos de tipografia seguros no armazenamento em nuvem).

Se você deseja criar um site que chame a atenção sem confusão, experimente também um construtor de sites. E certifique-se de que o desempenho do seu site seja otimizado com a melhor hospedagem na web.

• Fontes 3D: 9 dicas de tipo principal

Neste tutorial, o efeito de texto usará as formas das letras como uma máscara para algumas trilhas de partículas rápidas e de fluxo livre que irão girar e mover-se dinamicamente pelas letras. Não só haverá essa bela animação, mas como ela será renderizada no elemento de tela HTML5, ela será transformada em 3D para girar em direção ao mouse conforme ele se move pela tela. Isso é perfeito para cabeçalhos de sites ou apenas quando você precisa chamar a atenção do usuário para uma frase de chamariz.

Baixe os arquivos do tutorial aqui

01. Inicie o processo

Abra a pasta ‘start’ dos arquivos de projeto em seu IDE de código. O projeto vai começar criando a classe de objeto de partícula. Isso será usado para criar as imagens fluidas dentro do texto no projeto. Abra o arquivo ‘sketch.js’ e adicione a seguinte variável para começar a criar a partícula base.

função Particle () {this.pos = createVector (random (width), random ((height - 100))); this.vel = createVector (0, 0); this.acc = createVector (0, 0); this.maxspeed = maxSpeed; this.prevPos = this.pos.copy ();

02. Atualize a partícula

Para mover a partícula, uma função de atualização será executada a cada quadro, isto irá calcular a velocidade da partícula e a aceleração da velocidade. A velocidade será eventualmente limitada por uma variável global que será adicionada posteriormente. A velocidade é adicionada à posição da partícula individual. Ao criar uma partícula, vários milhares serão criados na tela a qualquer momento.

this.update = function () {this.vel.add (this.acc); this.vel.limit (this.maxspeed); this.pos.add (this.vel); this.acc.mult (0); }

03. Vá com o fluxo

Para dar às partículas seu movimento de fluxo, um campo de fluxo gerado por ruído será seguido. A função criada aqui permite que o vetor de fluxo seja passado e depois seguido, daí o nome desta função. A força da direção do vetor será aplicada à partícula.

this.follow = função (vetores) {var x = floor (this.pos.x / scl); var y = floor (this.pos.y / scl); índice de var = x + y * cols; força var = vetores [índice]; this.applyForce (forçar); }

04. Siga, mas não muito de perto

Para impedir que todas as partículas se amontoem, o que pode acontecer facilmente com esse tipo de movimento, as partículas terão uma quantidade muito pequena de aleatoriedade adicionada à sua posição. Isso fará com que uma pequena quantidade de dispersão ocorra.

this.scatter = função (vetores) {this.pos.x + = random (-0,9, 0,9); this.pos.y + = aleatório (-0,9, 0,9); } this.applyForce = function (force) {this.acc.add (force); }

05. Exibir a partícula

A função show aqui exibe a partícula. A primeira coisa que ele faz é adicionar um traço de um pixel de cor cinza claro para criar a linha. A linha é desenhada de sua posição atual até sua última posição no quadro anterior. A posição anterior é armazenada para a próxima vez no loop.

this.mostrar = função () {curso (180); strokeWeight (1); linha (this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y); this.updatePrev (); } this.updatePrev = function () {this.prevPos.x = this.pos.x; this.prevPos.y = this.pos.y; }

06. Enrole

A função de bordas funciona se a partícula atinge a borda da tela e, em caso afirmativo, a envolve para chegar ao lado oposto. Esta seção trata da posição x para detectar se ela é maior que a largura da tela e enviá-la para a borda esquerda e vice-versa.

this.edges = function () {if (this.pos.x> width) {this.pos.x = 0; this.updatePrev (); } se (this.pos.x 0) {this.pos.x = largura; this.updatePrev (); }

07. Deleite do invólucro

Esse código é o restante da detecção de borda e detecta a partícula no eixo y na parte superior e inferior da tela. Os colchetes aqui envolvem toda a classe de partículas. Isso significa que, ao usar essa classe, muitas partículas podem ser criadas.

if (this.pos.y> height) {this.pos.y = 0; this.updatePrev (); } if (this.pos.y 0) {this.pos.y = height; this.updatePrev (); }}}

08. Faça muitas partículas

Agora que a partícula é criada, é hora de pensar em fazer muitas partículas. Para fazer isso, todo o nosso código pode ir acima da classe de função Particle. Aqui, várias variáveis ​​globais são declaradas para permitir que o sistema seja executado. Eles serão chamados em vários momentos durante o código, para que possam ser explorados.

var inc = 0,1; var scl = 100, zoff = 0; var cols, linhas, movimento = 0; partículas var = []; var flowfield; var img; var maxSpeed; var t, calcX = 0, calcY = 0, currX = 0, currY = 0, targetX = 0, targetY = 0;

09. Configure tudo

A função de configuração, declarada aqui, define como a tela ficará no início. A primeira detecção feita é para ver qual é a largura da tela. Se for relativamente grande, uma imagem grande será carregada, a tela será criada e dimensionada via CSS para caber na tela.

função setup () {if (windowWidth> 1200) {img = loadImage ("assets / studio.png"); var canvas = createCanvas (1920, 630); maxSpeed ​​= 10,5; }

10. Outras telas

O restante da instrução if verifica diferentes resoluções de tela e carrega uma imagem que é mais apropriada para aquele tamanho de tela. Elementos de tela de tamanhos diferentes são criados da mesma forma. Isso serve principalmente para impedir que um celular lide com mais pixels do que o necessário.

else if (windowWidth> 900) {img = loadImage ("assets / studio-tablet-wide.png"); var canvas = createCanvas (1200, 394); scl = 60; maxSpeed ​​= 7; } else {img = loadImage ("assets / studio-tablet-tall.png"); var canvas = createCanvas (700, 230); scl = 40; maxSpeed ​​= 5; }

11. Faça uma grade

Depois que o tamanho da tela é calculado, a tela é colocada dentro da tag div do cabeçalho na página index.html. Várias colunas e linhas são calculadas com base na largura e na altura; é um pouco como uma grade invisível. Finalmente, uma matriz é definida para o campo de fluxo.

canvas.parent ('cabeçalho'); cols = chão (largura / scl); filas = chão (altura / scl); campo de fluxo = novo Array (cols);

12. Faça partículas

O número de partículas é configurado com base na largura da tela - se a tela tiver 1920 pixels de largura, 2500 partículas serão criadas e ela se moverá para baixo a partir daí. Um loop for cria as novas partículas. A cor de fundo da tela é definida para quase todo branco.

var numParticles = Math.floor ((2500/1920) * largura); para (var i = 0; i numPartículas; i ++) {partículas [i] = nova Partícula (); } fundo (245); }

13. Desenhe a tela

Os resultados de todos os cálculos são desenhados na tela a cada quadro na função de desenho. Em primeiro lugar, um retângulo cinza claro com uma opacidade muito baixa preenche a tela para esmaecer o que foi desenhado anteriormente. Depois de desenhado, o preenchimento é desativado, pois as partículas serão compostas de traços, e não de preenchimentos.

função draw () {noStroke (); encher (245, 10); rect (0, 0, largura, altura); Sem preenchimento(); var yoff = 0;

14. Crie um efeito de fluxo

Para obter o efeito de fluxo, existem dois loops ‘for’ movendo-se pelas linhas e colunas para atualizar os valores de ruído. Estes são então transformados em ângulos a partir do valor do ruído pronto para atualizar as partículas para cada uma das posições na tela.

para (var y = 0; y linhas; y ++) {var xoff = 0; para (var x = 0; x cols; x ++) {var index = (x + y * cols); ângulo var = ruído (xoff, yoff, zoff) * TWO_PI * 4; var v = p5.Vector.fromAngle (ângulo);

15. Atualize a matriz

A matriz de fluxo é atualizada com o ângulo e os valores são aumentados de forma que o deslocamento de cada posição é aumentado cada vez que sobe. Isso pode parecer complicado, mas na verdade apenas cria um movimento de fluxo aleatório para as partículas seguirem na tela.

v.setMag (1); campo de fluxo [índice] = v; xoff + = inc; } yoff + = inc; zoff + = 0,001; }

16. Atualize as partículas

Agora, as partículas estão todas em loop em sua matriz. Cada partícula individual é instruída a seguir o campo de fluxo, atualizar, verificar as bordas da tela, espalhar levemente e finalmente ser desenhada na tela usando a função show. Salve o arquivo e teste o ‘index.html’ para ver as partículas se movendo.

para (var i = 0; i partículas.comprimento; i ++) {partículas [i] .seguir (campo de fluxo); partículas [i]. atualização (); partículas [i]. bordas (); partículas [i] .espalhamento (); partículas [i] .show (); }}

17. Adicione o texto

O texto é uma máscara colocada por cima. Para fazer isso, a imagem correta é colocada sobre o topo das partículas. Adicione este código antes da chave de fechamento da função de desenho. Salve e verifique o navegador para ver o efeito funcionando com o texto agora.

imagem (img, 0, 0);

18. Detecte a posição do mouse

A posição do mouse é referenciada e os valores xey são mapeados em ângulos de graus que podem ser movidos. No eixo y, isso será de -25 a 25 e vice-versa para o eixo x. O código restante deve ser colocado após o último código ter sido adicionado, antes do final da função de desenho.

targetY = Math.round (map (mouseX, 0, largura, -25, 25)); targetX = Math.round (map (mouseY, 0, height, 25, -25));

19. Coloque no lugar

A posição do alvo agora é um pouco facilitada para que os graus lentamente atinjam o seu alvo. Isso é criado usando um algoritmo de atenuação clássico de tirar a posição atual do destino e multiplicar por um número baixo.

var vx = (targetX - currX) * 0,05; var vy = (alvoY - atualY) * 0,05; calcX + = vx; calcY + = vy;

20. Escreva o CSS

A variável 't' aqui pega os valores calculados e os coloca em uma string CSS usando os valores de transformação de rotateX e rotateY. A posição atual é calculada a partir da posição para a qual a tela é girada no momento.

t = ’rotateX (’ + calcX + ’deg) rotateY (’ + calcY + ’deg)’; currX = calcX; currY = calcY;

21. Terminar

Agora o CSS é aplicado ao elemento canvas neste código. Salve a página e visualize-a no navegador. Agora o mouse atualiza totalmente a rotação da tela para que ela gire conforme o mouse se move. É claro que todas as partículas naquele espaço se movem com ele na tela.

canvas.style.WebkitTransform = t; canvas.style.msTransform = t; canvas.style.transform = t;

Este artigo foi publicado originalmente na revista de web design Web Designer. Compraredição 271ouse inscrever.