7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. JavaScript

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

Read Time: 4 mins
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
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.