() translation by (you can also view the original English article)
No artigo anterior sobre Particle.js, aprendemos como criar partículas com formas e tamanhos variados. Embora tenha sido bom ver as partículas se movendo, ainda podemos fazer mais. No momento, não há qualquer interação entre as partículas ou coisa do tipo. Apenas passam umas pelas outras como se a outra não existisse.
Nesse tutorial, ensinaremos a mover partículas como quisermos, controlando suas direções, velocidade e mais. Também aprenderemos sobre os vários modos de interação e eventos.
Controlando Movimentação da Partícula
Nem todas partículas em sistema de partículas movem-se aleatoriamente. Mesmo que o fizessem, existiriam outras forças em ação. Por exemplo, poderiam acelerar ao aproximarem-se de outras ou voltar após colisões. Todas essas opções podem ser controladas por várias propriedades disponíveis sobre move.
Caso não queiramos que as partículas se movam, podemos usar "enable": false. Podemos especificar a velocidade delas usando o parâmetro speed. Podemos movê-las em velocidades aleatóris usando "random": true. Por outro lado, para movê-las em direções aleatórias, usemos "direction": none.
Cedo ou tarde, pelo menos uma das partículas alcançará os limites do sistema. O parâmetro out_mode é o responsável por sinalizar se ela bate e volta ou se sai de outro lugar. Ao usarmos out, a partícula sai da área visível do sistema. Quando usamos bounce, as partículas voltam ao atingidrem o limite do sistema.
Não parece natural quando elas passam uma pelas outras sem alterar velocidade. Para alterar a velocidade após cada colisão, usamos "bounce": true. Curiosamente, funcionará apenas se as propriedads line_linked ou attraction estiverem habilitadas. Partículas inverterão suas direções após cada colisão, mesmo que a colisão não seja frontal.
Por fim, discutiremos a atração. Uma vez habilitada, as partículas mudaram suas velocidades sempre que estiverem próximas a outras. A mudança pode ser positiva ou negativa, dependendo dos valores dos parâmetros. A atração em cada direção é inversamente proporcional aos respectivos parâmetros, rotateX e rotateY. Os valores padrões são bem altos para observamos certo nível de atração Po outro lado, se os valores forem muito baixos, as partículas ganharão muita velocidade após certo tempo.
Segue o JSON responsável pela movimentação das partículas:
1 |
"move": { |
2 |
"enable": true, |
3 |
"speed": 20, |
4 |
"random": true, |
5 |
"direction": "none", |
6 |
"bounce": true, |
7 |
"out_mode": "bounce", |
8 |
"attract": { |
9 |
"enable": true, |
10 |
"rotateX": 10, |
11 |
"rotateY": 10 |
12 |
}
|
13 |
}
|
É preciso ter em mente que ao usar straight: true e direction: none ao mesmo tempo, as partículas não se movimentarão.
Eventos de Interação e Modos
Tudo bem por hora, mas e se as partículas também interagissem com os usuários? E como seria essa interação?
Respondendo a primeira pergunta, sim, podem interagir com usuários. Particle.js pode responder a três eventos: hover, click e resize. Contudo, é lembre-se que os eventos podem ser detectados no próprio canvas ou na janela em si, com o parâmetro detect_on. Agora, os eventos serão ativados quando pairar, clicar ou redimensionar o canvas ou janela.
Ao usar "resize": true, as partículas se ajustarão no espaço restante sem qualquer distorção. Ao usarmos "resize": false, elas mudarão suas formas para acomodar quaisquer mudanças no tamanho do canvas.
1 |
"detect_on": "canvas", |
2 |
"events": { |
3 |
"onhover": { |
4 |
"enable": true, |
5 |
"mode": "repulse" |
6 |
},
|
7 |
"onclick": { |
8 |
"enable": true, |
9 |
"mode": "push" |
10 |
},
|
11 |
"resize": true |
12 |
}
|
E qual a participação do parâmetro mode no código acima? Ele define como as partículas interagem com o usuário. A biblioteca provê cinco modos de interação: grab, bubble, repulse, push e remove.
O modo grab cria linhas conectando o ponto de pairar do mouse e as partículas próximas, até uma distância determinada. Esse modo funciona apenas com o evento hover. O JSON abaixo desenha uma linha de opacidade 1 para conectar todas as partículas dentro de 800px.
1 |
"grab": { |
2 |
"distance": 800, |
3 |
"line_linked": { |
4 |
"opacity": 1 |
5 |
}
|
6 |
}
|
O modo bubble altera o tamanho e opacidade de todas as partículas dentro de uma distância específica por um tempo determinado. O modo repulse faz as partículas serem repelidas do local do clique. Ambos esses modos podem ser usados com hover ou click. A duração é aplicável apenas a eventos clique em ambos os casos.
1 |
"bubble": { |
2 |
"distance": 600, |
3 |
"size": 60, |
4 |
"duration": 0.1, |
5 |
"opacity": 1 |
6 |
},
|
7 |
"repulse": { |
8 |
"distance": 500, |
9 |
"duration": 0.5 |
10 |
}
|
Que tal mexer um pouco com a demo e torná-la ainda melhor?
O modo push adiciona um certo número de partículas a cada clique. As partículas serão adicionadas no local do clique. Similarmente, o modo remove remove partículas do canvas. As partículas são removidas aleatoriamente.
1 |
"push": { |
2 |
"particles_nb": 3 |
3 |
},
|
4 |
"remove": { |
5 |
"particles_nb": 1 |
6 |
}
|
Ideias Finais
Os três tutoriais nessa série cobriram tudo que Particles.js tem a oferecer. Também mencionamos certas particularidades para não ter dúvidas quando algumas situações acontecerem, como no caso de partículas não mexerem.
Para saber mais sobre todos os parâmetros discutidos aqui, por favor, leia mais na documentação da biblioteca. Além do mais, se ficar preso em algum ponto do uso da biblioteca ou se a algo não se comportar como devia, sugerimos que leia o código fonte para ver o que ela tem por baixo dos panos.
