Publicado em por Lucas Lacroix

Background de Partículas Básico – JavaScript Puro


Crie uma tag canvas em seu arquivo HTML

<canvas id="particles"></canvas>

Agora basta criar um arquivo JavaScript e linka-lo ao seu HTML.

Vamos começar

Comece criando duas variáveis, canvas e context

let canvas = document.getElementById('particles');
let ctx = canvas.getContext('2d');

Logo abaixo criamos duas variáveis

particles – Referente ao número de partículas que será renderizado.

particlesArray – Vetor que conterá os dados da partícula: posição nos eixos X e Y, raio e velocidade de movimento nos eixos X e Y.

let particles = 150;
let particlesArray = [];

Precisamos também informar a largura e altura do nosso canvas, no meu caso será o mesmo tamanho da tela, mas fica a seu critério colocar o tamanho que desejar em px

canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

Podemos também criar um evento pro caso de o usuário variar o tamanho da tela.

window.onresize = () => {
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
}

O próximo passo será implementar uma função que atuará como um construtor e terá os atributos:

positionX – receberá um número aleatório que será multiplicado pela largura do canvas e será responsável pela posição inicial  no eixo X da partícula

positionY – receberá um número aleatório que será multiplicado pela altura do canvas e será responsável pela posição inicial no eixo Y da partícula

speedX – receberá um número aleatório que será multiplicado por um número qualquer dependendo do quão rápido você deseja que as partículas se movam no eixo X, se speedX for igual a um número negativo, as partículas se moverão para a esquerda se for positivo para a direita.

speedY – terá a mesma finalidade do speedX só que neste caso será o eixo X, se speedY for igual a um número negativo, as partículas se moverão para cima se for positivo para baixo

*Sendo assim, tanto no speedX quanto no speedY você poderá fazer um cálculo para fazer com que as partículas se movam na direção que você desejar.

*Se speedX e speedY forem igual a 0 a partícula ficará parada

size – receberá um número aleatório que será responsável pelo raio da partícula em px, no exemplo, o cálculo retorna um número de 1 a 3, o valor de size precisa ser maior que 0.

function Particle() {
    this.positionX = Math.round(Math.random() * canvas.width);
    this.positionY = Math.round(Math.random() * canvas.height);
    this.speedX = Math.round(Math.random() * 5 - 1);
    this.speedY = Math.round(Math.random() * 4);
    this.size = Math.round(Math.random() * 2 + 1);
}

Com isso pronto faremos um for para criar o número de partículas que você informou lá na variável particles.

for (let i = 0; i < particles; i++) {
    particlesArray.push(new Particle);
}

Desenhando Partículas

Vamos agora abrir uma função que se chamará drawParticle

function drawParticle() {

A primeira coisa a fazer depois de abrir a função é gerar um retângulo que ficará de background:

// Cor de Preenchimento 
ctx.fillStyle = '#302b62'
// Posição Inicial X, Posição Inicial Y, Largura, Altura do retângulo  
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fill();

E finalmente podemos partir para desenhar as nossas partículas

// Cor de Preenchimento
ctx.fillStyle = 'rgb(249, 251, 250)';
ctx.beginPath();
// ForEach no particlesArray para desenhar as partículas
particlesArray.forEach(particle => {
    /* Posição Inicial X, Posição Inicial Y, Raio, Angulo Inicial, 
     * Angulo Final, Sentido de Desenho true = Sentido Anti-Horário*/
    ctx.arc(particle.positionX, particle.positionY, particle.size, 0, Math.PI * 2, true);
    /* Faz a soma da posição inicial com a velocidade
     * PosiçãoX = 228; VelocidadeX = 2; PosiçãoY = 303; VelocidadeY = 3
     * A particula está na posição 228px ela será movida 2px para a 
     * direita e ao mesmo tempo será movida para baixo 3px*/
    particle.positionX += particle.speedX;
    particle.positionY += particle.speedY;
    if (particle.positionX > canvas.width) {
        particle.positionX = 0;
    }
    if (particle.positionY > canvas.height) {
        particle.positionY = 0;
    }
    ctx.closePath();
});
ctx.fill();

Agora vamos chamar uma função requestAnimationFrame para deixar a nossa função drawParticle em loop

requestAnimationFrame(drawParticle)

Depois é só fechar a função drawParticle e fazer a chamada da mesma para dar inicio a criação de partículas

}
drawParticle();

Veja como funciona

Visite: https://codepen.io/lucaslacroix/pen/QxeQdj

 

Deixe um comentário