Particle.js: Introdução

() translation by (you can also view the original English article)

Há um certo apelo por mini partículas movendo-se aleatoriamente, interagindo entre si ou com você. Caso haja uma situação em que é preciso lidar com muitas partículas, Particle.js é a resposta. Pelo nome, vê-se que é uma biblioteca JavaScript que ajuda a criar sistemas de partículas. Além disso, é leve, fácil de usar e dá-nos controle total.

Nesse tutorial, cobriremos todos os recursos da biblioteca e o iniciaremos nela. Esse é o primeiro artigo de uma série, cobrindo apenas o básico.

Instalação e Uso

Primeiro, precisamos hospedar a biblioteca. Podemos enviá-la para um servidor ou usar a CDN jsdeliver.

1	<script src="//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

Também precisamos criar um elemento DOM onde Particle.js criará as partículas. Dê um id memorável para posterior referência.

1	<div id="particles-js"></div>

Para criar um sistema básico e padrão de párticulas, precisamos de uma única linha JavaScript para iniciar a biblioteca.

1	particlesJS();

As párticulas são brancas por padrão. Também são interconectas por finas linhas brancas. Caso não veja algo agora, mude a cor do plano de fundo. Eis o CSS que estiliza nossa div:

1	#particles-js {
2	background: cornflowerblue;
3	}

Clique em qualquer lugar da demo abaixo. Após cada clique, Particle.js criará quatro novas partículas.

Customizando Opções

Embora tenha tomado apenas quatro linhas de código para criar a demo anterior, o resultado final não é o que queremos. As partículas são muitas e parecem muito grandes. Talvez as partículas pudessem ter uma forma diferente ou tamanhos aleatórios. Particle.js permite configurar todas essas e outras porpriedades via JSON, referenciado durante inicialização. A sintaxe geral para invocar a função seria algo assim:

1	particlesJS(dom-id, path-json, callback (optional));

Aqui, dom-id é o id do elemento onde queremos que as partíclas apareçam. path-json é o caminho do arquivo JSON com a configuração, e callback é um função callback opcional. Ao invés de um caminho, podemos passar, diretamente, JSON como segundo parâmetro.

Criemos chuva de neve usando essa ótima biblioteca. No começo, a função parecerá com:

1	particlesJS("snowfall", 'assets/snowflakes.json');

Removemos a função callback e alteraramos o id DOM para algo mais específico. Os flocos de neve provavelmente terão forma esférica. Cairão de cima para baixo e não terão tamanho uniforme. E, diferente da nossa primeira demo, não serão conectados por linhas.

Movendo as Partículas

No começo, nosso arquivo snowflakes.json terá o código a seguir:

{
  "particles": {
  
  },
  "interactivity": {
    
  }
}

Todas nossas configurações relacionas às propriedades físicas como forma, tamanho e movimento irão dentro de particles. Toda a configuração que determina comportamento de interação irá dentro de interactivity.

Criaremos 100 partículas. Mas costuma depender do espaço disponível. Como discutido antes, também configuraremos a forma circular. O arquivo deve estar mais ou menos assim:

{
  "particles": {
    "number": {
      "value": 100
    },
    "shape": {
      "type": "circle"
    }
  },
  "interactivity": {
    
  }
}

Estamos usando 10 para o tamanho dos flocos. Como os flocos variam em tamanho, colocaremos random como true. Assim, os flocos podem variar entre zero e o limite máximo especificado. Para desabilitar ou remover todas as linhas unindo as párticulas, podemos configurar enable como false, dentro de line_linked.

Para mover as partículas, precisamos "enable": true em move. Deixando assim, as partículas movimentar-se-ão atropeladamente, como estivessem no espaço. Podemos configurar a direção das partículas com "direction": "bottom". Embora a movimentação geral seja para baixo, as partículas precisam mexer-se um pouco aleatoriamente para parecerem natural. Alcançamos isso com "straight": false. Agora, snowflake.json terá o código a seguir:

{
  "particles": {
    "number": {
      "value": 100
    },
    "shape": {
      "type": "circle"
    },
    "size": {
      "value": 10,
      "random": true
    },
    "line_linked": {
      "enable": false
    },
    "move": {
      "enable": true,
      "speed": 2,
      "direction": "bottom",
      "straight": false
    }
  },
  "interactivity": {
    
  }
}

Com o código JSON acima, obteremos isso:

Mudando Comportamento Interacional

Se colocarmos o mouse na demo acima, perceberemos que as linhas ainda existem mas, apenas, nesse momento. Para removê-las completamente, podemos configurar o evento onhover desabilitando-o com "enable": false. Clique na demo acima e verá que, toda vez, quatro novas partículas são criadas. É o comportamento padrão. Podemos alterá-lo usando a propriedade particles_nb filha de push. Configurei o número para 12, nesse caso.

Também podemos determinar se detectamos os eventos na janela ou canvas usando a opção detect_on.

Eis nosso arquivo JSON completo:

{
  "particles": {
    "number": {
      "value": 100
    },
    "shape": {
      "type": "circle"
    },
    "size": {
      "value": 10,
      "random": true
    },
    "line_linked": {
      "enable": false
    },
    "move": {
      "enable": true,
      "speed": 2,
      "direction": "bottom",
      "straight": false
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false
      }
    },
    "modes": {
      "push": {
        "particles_nb": 12
      }
    }
  }
}

Como podemos ver, não habilitamos o evento onclick. Ele é habilitado por padrão. De forma similar, poderíamos remover outras opções, como "detect_on": "canvas" em interactivity e "straight": false em move. Mantivemo-nos para iniciantes não se confundirem e perguntar o porque das partículas não caírem em linha reta.

Para tentar valores diferentes e modificar os flocos, experimente essa demo no CodePen.

Ideias Finais

Começar com Particles.js é fácil. Se já trabalhou com sistemas de partículas antes, será rápido aprender essa biblioteca. Esse tutorial foi só uma introdução. Nos próximos dois, cobriremos todos os aspectos dela e mais detalhes.

Caso haja perguntas sobre o tutorial, deixe seu comentário.