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

() translation by (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:

"number": {
  "value": 50, 
  "density": {
    "enable": true,
    "value_area": 500
  }
}

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:

"color": {
  "value": "#fff" //set white in HEX (We are using this version)
  "value": {r:255, g:255, b:255} //set white in RGB
  "value": {h:0, s:100%, l:100%} //set white in HSL
  "value": ["#f00", "#0f0", "#00f"] //set red, green and blue randomly
  "value": "random" //set colors randomly
}

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:

"opacity": {
  "value": 1,
  "random": true, // Set to false in our case
  "anim": {
    "enable": true,
    "speed": 8,
    "opacity_min": 0.4,
    "sync": false
  }
}

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.

"shape": {
  "type": "polygon",
  "stroke": {
     "width": 4,
     "color": "#fff"
  },
  "polygon": {
     "nb_sides": 6
  }
}

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:

"shape": {
  "type": "image",
  "image": {
     "src": "img/football.png", // Set image path.
     "width": 1,   // Width and height don't decide size.
     "height": 1   // They just decide aspect ratio.
  }
}

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.

1	"type": ["circle","edge","polygon"]

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:

"size": {
  "value": 25, 
  "random": true,
  "anim": {
    "enable": true,
    "speed": 20,
    "size_min": 10,
    "sync": false
  }
}

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.

"line_linked": {
  "enable": true,
  "distance": 200,
  "color": "#fff",
  "opacity": 1,
  "width": 4
}

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.