0

I am trying to create an effect where a particle system appears where movement is detected on the screen. So far I have a motion detection and particle system working but the particles all spawn in the same spot and I need them to all be random from where they spawn. Any help is appreciated

ps.addParticle(new PVector(argX, argY)); ps.run();

2
  • 2
    Please post a minimal reproducible example that focuses on the problem instead of your entire sketch. For example we don't really need to see the minim or the video code. Just use hardcoded values for your particle system, that way we can see the problem by copying and pasting your code. Nov 30, 2016 at 0:16
  • Ok I have a piece of code here where my values are non existent and I am unsure as to why this is happening, any suggestions?
    – JHewitt
    Nov 30, 2016 at 1:33

1 Answer 1

0

I'm guessing you're starting with Daniel Shiffman's Simple Particle System demo (also available in Processing via Examples > Topics > Simulate > Simple Particle System).

If that's the case, notice that the ParticleSystem has an origin PVector which is used when a particle is added:

void addParticle() {
    particles.add(new Particle(origin));
  }

If you want to change the spawn position for all particles you can simply change the origin's x,y values.

If you want to spawn a new particle at a random position a simple option is to create an override option for the addParticle() method to pass your random x,y positions:

void addParticle(PVector customPosition) {
    particles.add(new Particle(customPosition));
  }

Here's the full example with tweaks so you can drag the particle system origin or press any key to spawn a new particle at a random position:

ParticleSystem ps;

void setup() {
  size(640, 360);
  ps = new ParticleSystem(new PVector(width/2, 50));
}

void draw() {
  background(0);
  ps.addParticle();
  ps.run();
}

void mouseDragged(){
  ps.origin.set(mouseX,mouseY);
}
void keyPressed(){
  ps.addParticle(new PVector(random(width),random(height)));
}
// A class to describe a group of Particles
// An ArrayList is used to manage the list of Particles 

class ParticleSystem {
  ArrayList<Particle> particles;
  PVector origin;

  ParticleSystem(PVector position) {
    origin = position.copy();
    particles = new ArrayList<Particle>();
  }

  void addParticle() {
    particles.add(new Particle(origin));
  }

  void addParticle(PVector customPosition) {
    particles.add(new Particle(customPosition));
  }

  void run() {
    for (int i = particles.size()-1; i >= 0; i--) {
      Particle p = particles.get(i);
      p.run();
      if (p.isDead()) {
        particles.remove(i);
      }
    }
  }
}


// A simple Particle class

class Particle {
  PVector position;
  PVector velocity;
  PVector acceleration;
  float lifespan;

  Particle(PVector l) {
    acceleration = new PVector(0, 0.05);
    velocity = new PVector(random(-1, 1), random(-2, 0));
    position = l.copy();
    lifespan = 255.0;
  }

  void run() {
    update();
    display();
  }

  // Method to update position
  void update() {
    velocity.add(acceleration);
    position.add(velocity);
    lifespan -= 1.0;
  }

  // Method to display
  void display() {
    stroke(255, lifespan);
    fill(255, lifespan);
    ellipse(position.x, position.y, 8, 8);
  }

  // Is the particle still useful?
  boolean isDead() {
    if (lifespan < 0.0) {
      return true;
    } else {
      return false;
    }
  }
}

For more info be sure to check out the Particle Systems Nature of Code chapter

Additionally have a peek at Chapter 6's optimisation notes on

Making gajillions of unnecessary PVector objects.

Update: You can run a demo bellow curtesy of p5.js:

var system;

function setup() {
  createCanvas(720, 400);
  system = new ParticleSystem(createVector(width/2, 50));
}

function draw() {
  background(51);
  system.addParticle();
  system.run();
}
function mouseDragged(){
  system.origin.set(mouseX,mouseY);
}
function keyPressed(){
  system.addParticleAt(createVector(random(width),random(height)));
}

// A simple Particle class
var Particle = function(position) {
  this.acceleration = createVector(0, 0.05);
  this.velocity = createVector(random(-1, 1), random(-1, 0));
  this.position = position.copy();
  this.lifespan = 255.0;
};

Particle.prototype.run = function() {
  this.update();
  this.display();
};

// Method to update position
Particle.prototype.update = function(){
  this.velocity.add(this.acceleration);
  this.position.add(this.velocity);
  this.lifespan -= 2;
};

// Method to display
Particle.prototype.display = function() {
  stroke(200, this.lifespan);
  strokeWeight(2);
  fill(127, this.lifespan);
  ellipse(this.position.x, this.position.y, 12, 12);
};

// Is the particle still useful?
Particle.prototype.isDead = function(){
  if (this.lifespan < 0) {
    return true;
  } else {
    return false;
  }
};

var ParticleSystem = function(position) {
  this.origin = position.copy();
  this.particles = [];
};

ParticleSystem.prototype.addParticle = function() {
  this.particles.push(new Particle(this.origin));
};

ParticleSystem.prototype.addParticleAt = function(position) {
  this.particles.push(new Particle(position));
};

ParticleSystem.prototype.run = function() {
  for (var i = this.particles.length-1; i >= 0; i--) {
    var p = this.particles[i];
    p.run();
    if (p.isDead()) {
      this.particles.splice(i, 1);
    }
  }
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>

Particle System Preview

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.