If you're seeing this message, it means we're having trouble loading external resources on our website.

Se você está atrás de um filtro da Web, certifique-se que os domínios *.kastatic.org e *.kasandbox.org estão desbloqueados.

Conteúdo principal

Uma partícula única

Antes de criarmos um ParticleSystem completo, temos que criar um objeto que descreva uma única partícula. A boa notícia: nós já fizemos isso. Nosso objeto Mover da seção de Forças serve perfeitamente como modelo. Para nós, uma partícula é um corpo independente que se move sobre a tela. Ele tem uma location, velocity, e acceleration, um construtor para iniciar tais variáveis e funções para auto exibição display() e atualização da própria localização update().
// Um objeto para uma partícula simples
var Particle = function(position) {
  this.acceleration = new PVector();
  this.velocity = new PVector();
  this.position = position.get();
};

Particle.prototype.update = function(){
  this.velocity.add(this.acceleration);
  this.position.add(this.velocity);
};

Particle.prototype.display = function() {
  stroke(0, 0, 0);
  fill(175, 175, 175);
  ellipse(this.position.x, this.position.y, 8, 8);
};
Isso é o mais simples que uma partícula pode ser. Começando aqui, nós podemos levar a nossa partícula em diversas direções. Podemos adicionar um método applyForce() para afetar o comportamento da partícula (vamos fazer isso em um exemplo futuro). Nós podemos adicionar variáveis para descrever cor e forma, ou usar image() para desenhar a partícula. Por agora, entretanto, vamos focar em adicionar apenas um detalhe adicional: tempo de vida.
Os sistemas de partículas típicos envolvem algo chamado de emissor. O emissor é a fonte das partículas e controla as configurações iniciais para as partículas, localização, velocidade, etc. Um emissor pode transmitir uma única rajada de partículas, um fluxo contínuo de partículas ou os dois. O ponto é que para uma implementação típica como essa, uma partícula nasce no emissor mas não dura para sempre. Se ela fosse durar para sempre, nosso programa iria eventualmente travar já que o número de partículas cresceria até uma quantidade gigantesca com o tempo. Enquanto as novas partículas nascem, precisamos que as velhas morram. Isso cria a ilusão de um fluxo infinito de partículas e não afeta a performance do nosso programa.
Existem diversas maneiras de decidir quando uma partícula morre. Por exemplo, ela pode entrar em contato com outro objeto ou pode simplesmente deixar a tela. Para o nosso primeiro objeto Particle, entretanto, nós iremos simplesmente adicionar uma propriedade timeToLive. Ela vai atuar como um contador, fazendo a contagem regressiva de 255 até 0, quando iremos considerar a partícula como "morta". E então expandiremos o objeto Particle como segue:
// Um objeto para uma partícula simples
var Particle = function(position) {
  this.acceleration = new PVector();
  this.velocity = new PVector();
  this.position = position.get();
  this.timeToLive = 255;
};

Particle.prototype.update = function(){
  this.velocity.add(this.acceleration);
  this.position.add(this.velocity);
  this.timeToLive -= 2;
};

Particle.prototype.display = function() {
  stroke(255, 255, 255, this.timeToLive);
  fill(127, 127, 127, this.timeToLive);
  ellipse(this.position.x, this.position.y, 8, 8);
};
A razão que escolhemos para começar o timeToLive em 255 e contar até 0 é por pura conveniência. Com esses valores, podemos utilizar o timeToLive como a transparência alfa para a elipse também. Quando a partícula estiver "morta", ela também terá desaparecido da tela.
Com a adição da propriedade timeToLive, nós iremos precisar de um método adicional — uma função que possa ser consultada (para uma resposta verdadeira ou falsa) sobre se a partícula está viva ou morta. Isso será útil quando estivermos escrevendo o objeto ParticleSystem, cuja tarefa será gerenciar a lista das próprias partículas. Escrever essa função é muito fácil; ela apenas precisa retornar Verdadeiro se o valor de timeToLive for menor do que 0.
Particle.prototype.isDead = function() {
  return this.timeToLive < 0;
};
Antes de entrarmos na próxima etapa de criar muitas partículas, vale a pena parar um pouco e se certificar que a nossa partícula funciona corretamente gerando um rascunho com um único objeto Particle. Aqui está o código completo abaixo, com duas pequenas adições. Acrescentamos um método conveniente chamado run() que chama tanto update() como display() para nós. Além disso, fornecemos à partícula uma velocidade inicial aleatória, bem como uma aceleração para baixo (visando simular a gravidade).
Agora que temos um objeto para descrever uma única partícula, estamos prontos para o próximo grande passo. Como podemos manter o controle de muitas partículas, quando não podemos garantir exatamente quantas delas podemos ter em um dado momento?

Quer participar da conversa?

Nenhuma postagem por enquanto.
Você entende inglês? Clique aqui para ver mais debates na versão em inglês do site da Khan Academy.