Figuring out the Visuals: Pushed Particles

April 2, 2018

Last time, I was trying to make a spiral so that it could lay the foundations for creating wormhole-like animation. The result looked quite basic and still needs more development.

 

I decided to experiment with particles, perhaps to add on to the previous visual or create an entirely new one, we'll see. 

 

My goal for this experimentation was to figure out how to make a stream of particles repel away from the mouse when clicked. The mouse clicking will act as a substitute for something being "pushed" against the flexible screen.

 

Processing Code:

// Main Code

 

ParticleSystem ps;

 

void setup() {
  size(600, 600, P2D);
  ps = new ParticleSystem();
}

 

void draw() {
  background(0);
  blendMode(ADD);

  PVector gravity = new PVector(0, 0.01);

           // Initialise force.
  ps.applyForce(gravity);                

           // Send "force" into PSystems which is then sent the individual Particle class.

 

  PVector center = new PVector(width/2, height/2);
  PVector mouseVec = new PVector(mouseX, mouseY);

  PVector attractor = new PVector(0, 0);


  if (mousePressed) {
    attractor.add(mouseVec);

           // Point direction towards mouse
    attractor.sub(center);                

           // Push away from center into mouse
    attractor.limit(0.12);                

           // Limit attractor range (because normal range force is too strong)

 

    ps.applyForce(attractor);
    println("Wind Vector X:" + attractor.x + " Wind Vector Y:" + attractor.y);
  }

 

  ps.addParticle(); 
  ps.run();
}

// Particle Systems Class

 

class ParticleSystem {
  ArrayList<Particle> particles; // Create the ArrayList.

 

  ParticleSystem() {
    particles = new ArrayList<Particle>();
  }
 
 void applyForce(PVector force) {
   for (Particle p : particles) {

     // Apply the force to every single particle in the system.
     p.applyForce(force);        

     // Personal Reminder: "applyForce" is a method we made in the Particle class.
   } 
 }

 

  void addParticle() {

     // Add a Particle Object into the ParticleSystems class.


    particles.add(new Particle());
  }

 

  void run() {

     // This is empty without the method above. We need to add the Particle Objects into the ArrayList.


    for (int i = particles.size()-1; i >= 0; i--) {
      Particle p = particles.get(i);
      p.display();
      p.update();

      if (p.isDead()) {
        particles.remove(i);     // Remove object
      }
    }
  }
}

class Particle {
  PVector loc;
  PVector vel;
  PVector acc;

  float lifespan = 255; // Attached to alpha;


  Particle() {
    vel = new PVector(random(-0.3, 0.3), random(-1, 1));
    acc = new PVector(0, 0.1);
    loc = new PVector(width/2, height/2);
  }

 

  void applyForce(PVector force) {
    acc.add(force);
  }

 

  void update() {
    vel.add(acc);
    loc.add(vel);
    acc.mult(0);

    // Reminder: This is to make sure that the acceleration does not accumulate too much


    lifespan -= 5;
  }

 

  void display() {
    noStroke();
    fill(0, 180, 255, lifespan);
    ellipse(loc.x, loc.y, 10, 10);
  }

 

  boolean isDead() {
    if (loc.y >= height) {
      return true;
    } else {
      return false;
    }
  }
}

I created a force that pushes the particles towards the mouse only when the mouse it clicked.

 

This was the result of the code above:

 

 

I added more particles to make it look "fuller".

// In the ParticleSystems class, I added these two lines of code to introduce more particles

 

  void addParticle() {

     // Add a Particle Object into the ParticleSystems class.


    particles.add(new Particle());
    particles.add(new ParticleB());
    particles.add(new ParticleC());

  }

// The Fillers

 

class ParticleB extends Particle {

  ParticleB() {
    super(); // Inherits all of the original arguments;
  }
  
  void display() {
    fill(100, 0, 0, lifespan);
    ellipse(loc.x, loc.y, 10, 10);
  }
}

 

class ParticleC extends Particle {

  ParticleC() {
    super(); // Inherits all of the constructor arguments;
  }

  void display() {
    fill(0, 0, 100, lifespan);
    ellipse(loc.x, loc.y, 10, 10);
  }
}

Here's the result of the above code:

 

 

Next, I figured out to make the mouse block the stream of particles. This time, I made the particles move towards the mouse without needing to click. I also changed the look of the particles.

 

Modified Main Code:

ParticleSystem ps;
Repeller repeller;

PImage orb;  // Changed the particle into an actual image

 

void setup() {
  size(300, 600, P2D);
  ps = new ParticleSystem();
  
  orb = loadImage("orb.png");
}

 

void draw() {
  background(0);
  blendMode(BLEND);

  PVector gravity = new PVector(0, 0.01); // Initialise force.
  ps.applyForce(gravity);                

          // Send "force" into PSystems which is then sent the individual Particle class.
  PVector mouseVec = new PVector(mouseX, mouseY);
  ps.addParticle();

 

  if (mousePressed) {
    repeller = new Repeller(new PVector(mouseVec.x, mouseVec.y));
    ps.applyRepeller(repeller);
    println("Clicked");
  }


  ps.run();
}

Here's me playing around with the result:

 

 

Here's a close-up version with a downward stream and modified particles:

 

 

Please reload

Featured Posts

Building the Set-up

April 30, 2018

1/7
Please reload

Recent Posts

April 30, 2018

April 14, 2018

March 27, 2018

Please reload

Russell Dela Bueno Balad | russellbalad@gmail.com | Hong Kong

  • Instagram - White Circle
  • SoundCloud - White Circle
  • Vimeo - White Circle
  • LinkedIn - White Circle