WebSketch | Sistema de Partículas (1)

A criação de um sistema simples de particulas é fácil, depende do que se pretende, mas basicamente é criar vários elementos semelhantes, por exemplo um circulo, mas com caracteristicas diferentes, como tamanho, e atribuir-lhes movimentos (velocidades) diferentes.

Cada partícula é um círculo, de cor, raio, posição inicial e velocidade (e direcção) aleatórios, mas dentro dos limites definidos. Para a criação de cada particula utilizou-se a seguinte função:

function create_particle()
{
    this.radius = Math.random()*particleMaxRadius;

    //position
    this.x = Math.random()*(width-this.radius);
    this.y = Math.random()*(height-this.radius);
    
    //velocity
    this.vx = Math.random()*40-20;
    this.vy = Math.random()*40-20;

    //color
    var r = Math.floor(Math.random()*255), b = Math.floor(Math.random()*255);
    this.color = "rgb("+r+",0, "+b+")";
}

Para o desenho de cada partícula, p:

ctx.beginPath();
ctx.fillStyle = "rgb("+ p.color.r + ","+ p.color.g +","+ p.color.b +")";
ctx.arc(p.x, p.y, p.radius, Math.PI*2, false);
ctx.fill();

Em setup(), prenncheu-se o array de particulas, particles, com o auxilio da função create_particle().

Em draw(), leu-se esse array para o desenho de cada partícula. Note-se que aqui também atualizou-se a direcção da particula, para quando bater nos limites do canvas, inverter o movimento.

if (p.x + p.radius > width) p.vx = -p.vx;
else if (p.x - p.radius < 0) p.vx = -p.vx;
if (p.y + p.radius > height) p.vy = -p.vy;
else if (p.y - p.radius < 0) p.vy = -p.vy;

O código completo:

var canvas, ctx, 
    width = 500, height = 500,
    delay = 33,
    nParticles = 50, particleMaxRadius = 5;

var particles = [];
var x = 100; var y = 100;

function setup() {
    canvas = document.getElementById('canvas'),
    ctx = canvas.getContext("2d");

    for(var i = 0; i != nParticles; i++)
    {
        particles.push(new create_particle());
    }

    setInterval(draw, delay);
} 

function draw()
{
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, width, height);

    for(var t = 0; t != particles.length; t++)
    {
        var p = particles[t];
        
        ctx.beginPath();
        ctx.fillStyle = p.color;
        ctx.arc(p.x, p.y, p.radius, Math.PI*2, false);
        ctx.fill();
                            
        p.x += p.vx;
        p.y += p.vy;

        if (p.x + p.radius > width) p.vx = -p.vx;
        else if (p.x - p.radius < 0) p.vx = -p.vx;
        if (p.y + p.radius > height) p.vy = -p.vy;
        else if (p.y - p.radius < 0) p.vy = -p.vy;
    }
}

function create_particle()
{
    this.radius = Math.random()*particleMaxRadius;

    //position
    this.x = Math.random()*(width-this.radius);
    this.y = Math.random()*(height-this.radius);
    
    //velocity
    this.vx = Math.random()*40-20;
    this.vy = Math.random()*40-20;

    //color
    var r = Math.floor(Math.random()*255), b = Math.floor(Math.random()*255);
    this.color = "rgb("+r+",0,"+b+")";
}