Advertisement
  1. Code
  2. JavaScript

Particles.js: Controle de Contagem e Formas de Partículas

by
Read Time:5 minsLanguages:
This post is part of a series called An Introduction to Particles.js.
Particles.js: Introduction
Particles.js: Motion and Interaction

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

O tutorial anterior sobre Particles.js discutiu rapidamente vários recursos da biblioteca e como começar a usá-la. Nesse tutorial, cobriremos em detalhes todos os aspectos da Particles.js que lidam com aparência física das partículas.

Número, Cor e Opacidade

As primeiras coisas a lidar são o número de partículas e a densidade. A densidade determina o número de particulas juntas em um determinada área. É habilitada por padrão com "value_area": 800. Eis o JSON que permite controlar o número de partículas:

Se colocarmos "enable": false, o número de partículas mostrado será extamente 50. Dobrando o valor de value_area reduzirá o número de particulas, aproximadamente, pela metade.

Existem três formas de pintar as partículas. Podemo usar cores no formato HEX, RGB ou HSL. Por um bug na biblioteca, os formatos RGB e HSL só funcionam quando removemos a cor padrão da biblioteca.

Se quisermos uma cor aleatória da partícula, podemos fazê-lo com o valor "random". Por fim, para termos uma cor aleatória de uma lista de cores, podemos prover um vetor com as cores no formato HEX. Eis o JSON que pinta as partículas:

A propriedade opacity nos dá muito controle. Podemos configurar um valor exato ou valores aleatórios usando "random": true. Não só isso, mas também podemos animar a opacidade das partículas. Eis o JSON para a opacidade das partículas:

Usar "sync": true animará a opacidade de todas as partículas ao mesmo tempo. Usar "opacity_min": 0.4 garante que a opcidade nunca será menor que 0.4 para qualquer partícula durante a animação. Eis uma demo com estrelas movendo-se pelo espaço. Altere o número, cor e opacidade das partículas para ver o efeito.

Forma e Tamanho

Particles.js tem cinco valores diferentes para criar formas básicas. Uma forma simples como circle gera uma partícula circular, triangle gera partículas triangulares e edge gera quadrados. Podemos usar o valor polygon para criar um polígono de nb_sides, onde provemos o valor de nb_sides. Para criar uma forma de estrela, podemos configurar a forma como estrela. O parâmetro stroke adiciona um contorno com uma certa cor e largura em todas as partículas. Eis o JSON que criará hexágonos.

Também é possível mostrar imagens ao invés de formas básicas. Primeiro, especificamos a forma como image. Depois, configuramos a fonte da imagem e as largura e altura. Vale lembrar que largura e altura não determinarão o tamanho das particulas mas suas proporções. Eis um JSON que criará partículas com imagens de asteróides:

A biblioeca permite juntar múltiplas formas. Por exemplo, podemos criar círculos, quadrados e hexágonos simultaneamente. Nesse caso, tudo que precisamos fazer é passar um vetor com todas as formas.

A propriedade size tem todas as opções da propriedade opacity. Podemos configurar um tamanho aleatório, bem como animar o tamanho de partículas individualmente. Vejamos esse JSON:

Se usarmos "random": false, todas as partículas terão tamanho 25. Quando usamos "random": true, size serve como tamanho limitador das partículas. Usar "sync": true dentro da animação alterará o tamanho de todos os elementos simultaneamente. Abramos essa demo e tentemos valores diferentes para o número de lados do polígono, animação e outras propriedades para vermos como afetam o resulta do final.

Ligando Partículas

Quando as partículas estão próximas o suficiente, podemos conectá-las através de linhas, habilitando line_linked.

A propriedade tem quatro valores adicionais. distance especifica a distância máxima para o desenho das linhas. Também podemos usar color com valores HEX. A opacidade das linhas varia com a distância entre as partículas. Os valores especificados em opacity são a opacidade das linhas quando as partículas estão realmente próximas. Por fim, width determina o quão largas as linhas serão. Eis o JSON que acompanha a demonstração.

Podemos ver que as linhas desaparecem assim que a distância entre as partículas é maior que 200px.

Ideias Finais

Tentamos cobrir tudo relacionado às formas, tamanhos, cores e outras propriedades físicas das partículas. O exemplo do tutorial ilustra claramente o quão fácil é usar a biblioteca. Se precisarmos de uma biblioteca de partículas, deveríamos usar a Particles.js.

No próximo tutorial ensinaremos como controloar a movimentação das partículas e suas interações entre si e com o usuário. Quaisquer dúvidas em relação ao tutorial, deixe um comentário abaixo.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.