# Creating particle systems along a curve

**URL:** <https://discourse.processing.org/t/creating-particle-systems-along-a-curve/6259>\
**Category:** Coding Questions\
**Created:** [December 3, 2018, 3:36pm UTC](https://discourse.processing.org/t/creating-particle-systems-along-a-curve/6259 "2018-12-03T15:36:26Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tryingtogetagrip](https://avatars.discourse-cdn.com/v4/letter/t/f08c70/32.png) [@tryingtogetagrip](https://discourse.processing.org/u/tryingtogetagrip)\
**Post date:** [December 3, 2018, 3:36pm UTC](https://discourse.processing.org/t/creating-particle-systems-along-a-curve/6259/1 "2018-12-03T15:36:27Z")

</div>

Hey all,

I have a question that I can’t seem to figure out. I know it is possible to use a mouseclick to create a new particle system (just as the example code I have attached beneath). However, what I would like is to click on the mouse and add a new particle system, but that each time you click the next particle systems is placed so that you create a curve, for example a parabola?

So instead of creating points along a curve, I was wondering how I could, for example, create particle systems along a curve. To illustrate a bit further, I made this image:

 ![afbeelding](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/276149bb1f35b3ba0d72bab8f8b87c0eb896ab2e.png)  
Does anyone know or has a cue how to program this?

PS: the example code from processing with the particle systems

```auto
type or ArrayList<ParticleSystem> systems;

void setup() {
  size(640, 360);
  systems = new ArrayList<ParticleSystem>();
}

void draw() {
  background(0);
  for (ParticleSystem ps : systems) {
    ps.run();
    ps.addParticle();
  }
  if (systems.isEmpty()) {
    fill(255);
    textAlign(CENTER);
    text("click mouse to add particle systems", width/2, height/2);
  }
}

void mousePressed() {
  systems.add(new ParticleSystem(1, new PVector(mouseX, mouseY)));
}

class ParticleSystem {

  ArrayList<Particle> particles; // An arraylist for all the particles
  PVector origin; // An origin point for where particles are birthed

  ParticleSystem(int num, PVector v) {
    particles = new ArrayList<Particle>(); // Initialize the arraylist
    origin = v.copy(); // Store the origin point
    for (int i = 0; i < num; i++) {
      particles.add(new Particle(origin)); // Add "num" amount of particles to the arraylist
    }
  }

  void run() {
    // Cycle through the ArrayList backwards, because we are deleting while iterating
    for (int i = particles.size()-1; i >= 0; i--) {
      Particle p = particles.get(i);
      p.run();
      if (p.isDead()) {
        particles.remove(i);
      }
    }
  }

  void addParticle() {
    Particle p;
    // Add either a Particle or CrazyParticle to the system
    if (int(random(0, 2)) == 0) {
      p = new Particle(origin);
    } 
    else {
      p = new CrazyParticle(origin);
    }
    particles.add(p);
  }

  void addParticle(Particle p) {
    particles.add(p);
  }
  // A method to test if the particle system still has particles
  boolean dead() {
    return particles.isEmpty();
  }
}

class CrazyParticle extends Particle {
  float theta;
  CrazyParticle(PVector l) {
    super(l);
    theta = 0.0;
  }

  void update() {
    super.update();
    float theta_vel = (velocity.x * velocity.mag()) / 10.0f;
    theta += theta_vel;
  }
  
  void display() {
    super.display();
    pushMatrix();
    translate(position.x, position.y);
    rotate(theta);
    stroke(255, lifespan);
    line(0, 0, 25, 0);
    popMatrix();
  }
}

// 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();
  }

  void update() {
    velocity.add(acceleration);
    position.add(velocity);
    lifespan -= 2.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() {
    return (lifespan < 0.0);
  }
}paste code here

```

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [December 3, 2018, 3:58pm UTC](https://discourse.processing.org/t/creating-particle-systems-along-a-curve/6259/2 "2018-12-03T15:58:26Z")

</div>

Hi,

You are almost there. Now, the only thing you need to do is to define a function that as the shape you want your curve to have. Then simply use the values generated by that function instead of the mouseX and mouseY variables.

For example:

```auto
ArrayList<ParticleSystem> systems;

void setup() {
  size(640, 360);
  systems = new ArrayList<ParticleSystem>();
  
  // Add the particule system based on the function f
  for (int x = 0; x < width; x += 20) {
    systems.add(new ParticleSystem(1, new PVector(x, f(x))));
  }
  
}

// the function f
float f(float x) {
  return height * (- x * x + width * x)/(- width * width / 4 + width * width / 2);
}

void draw() {
  background(0);
  for (ParticleSystem ps : systems) {
    ps.run();
    ps.addParticle();
  }
  if (systems.isEmpty()) {
    fill(255);
    textAlign(CENTER);
    text("click mouse to add particle systems", width/2, height/2);
  }
}

void mousePressed() {
  systems.add(new ParticleSystem(1, new PVector(mouseX, mouseY)));
}

class ParticleSystem {

  ArrayList<Particle> particles; // An arraylist for all the particles
  PVector origin; // An origin point for where particles are birthed

  ParticleSystem(int num, PVector v) {
    particles = new ArrayList<Particle>(); // Initialize the arraylist
    origin = v.copy(); // Store the origin point
    for (int i = 0; i < num; i++) {
      particles.add(new Particle(origin)); // Add "num" amount of particles to the arraylist
    }
  }

  void run() {
    // Cycle through the ArrayList backwards, because we are deleting while iterating
    for (int i = particles.size()-1; i >= 0; i--) {
      Particle p = particles.get(i);
      p.run();
      if (p.isDead()) {
        particles.remove(i);
      }
    }
  }

  void addParticle() {
    Particle p;
    // Add either a Particle or CrazyParticle to the system
    if (int(random(0, 2)) == 0) {
      p = new Particle(origin);
    } else {
      p = new CrazyParticle(origin);
    }
    particles.add(p);
  }

  void addParticle(Particle p) {
    particles.add(p);
  }
  // A method to test if the particle system still has particles
  boolean dead() {
    return particles.isEmpty();
  }
}

class CrazyParticle extends Particle {
  float theta;
  CrazyParticle(PVector l) {
    super(l);
    theta = 0.0;
  }

  void update() {
    super.update();
    float theta_vel = (velocity.x * velocity.mag()) / 10.0f;
    theta += theta_vel;
  }

  void display() {
    super.display();
    pushMatrix();
    translate(position.x, position.y);
    rotate(theta);
    stroke(255, lifespan);
    line(0, 0, 25, 0);
    popMatrix();
  }
}

// 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();
  }

  void update() {
    velocity.add(acceleration);
    position.add(velocity);
    lifespan -= 2.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() {
    return (lifespan < 0.0);
  }
}

```

---

<div class="post-metadata">

**Author:** ![Whahahahaha](https://avatars.discourse-cdn.com/v4/letter/w/3be4f8/32.png) [@Whahahahaha](https://discourse.processing.org/u/Whahahahaha)\
**Post date:** [December 3, 2018, 3:59pm UTC](https://discourse.processing.org/t/creating-particle-systems-along-a-curve/6259/3 "2018-12-03T15:59:34Z")

</div>

@tryingtogetagrip not sure if it’s what you want, but:

```auto
void mousePressed() {
  for (int x = 0; x < width; x+=70) {
    float y = sq((x-width/2)/15);
    systems.add(new ParticleSystem(1, new PVector(x, y)));
  }
}

```

follows the parabola y = (x/15)^2 , centered in the middle. to make sure there aren’t too many particle systems slowing the program down, I used steps of 70.

be sure to experiment with whatever equation of a parabola you want

---

<div class="post-metadata">

**Author:** ![tryingtogetagrip](https://avatars.discourse-cdn.com/v4/letter/t/f08c70/32.png) [@tryingtogetagrip](https://discourse.processing.org/u/tryingtogetagrip)\
**Post date:** [December 3, 2018, 4:31pm UTC](https://discourse.processing.org/t/creating-particle-systems-along-a-curve/6259/4 "2018-12-03T16:31:25Z")

</div>

Oh wauw, thanks a lot! That makes a lot of sense.

Thanks for all the help jb4x and whahahahaha ! 🙂