Project 5: Particle Systems, or "Flocks of Objects"

In order to make a complex system with hundreds of moving parts, we're going to use a few programming concepts to save us some work and make things go smoothly. These include loops, which are commands which repeat a certain number of times (e.g. repeatedly updating the positions of 100 on-screen objects), as well as classes and objects.

The relationship between a class and an object is a bit like that between a cookie cutter and a cookie. A class is a chunk of code we write once, describing the properties of the objects we want to create. From this class, we can create as many objects as we like.

TUTORIAL

Creating our Own Objects

Rather than a tutorial with detailed directions, this tutorial takes the form of a series of steps, with comments in the code itself describing what is happening, and what is bieng added each time.

We start by making a class for a simple object that bounces left to right, and using that class to create a single object on the screen. Bit by bit, we add complexity to the program, with multiple objects, and more complex behaviors for them.

Step 1 - Making a basic 'bouncer' object class:


// declare a new "Mover" object named "m"
Mover m = new Mover(100, 100, 10); 

void setup(){ // Runs once at start
  size(640, 480); // Set screen size
  background(0); // Make background black
}


void draw(){ // Runs every frame
  background(0); // Cover all with black background
  m.display(); // This calls the function in "m" to draw it on the screen 
}

// Here is the code that sets up what a "Mover" is,
// what values (variables) it has, and what
// behaviors (functions) it has
class Mover {  
  //DATA: Here are the values we want every Mover to have 
  int x; // x position of the Mover
  int y; // y position of the Mover
  int speed; // Speed of the Mover

  //CONSTRUCTOR: This is the "constructor." It's a special function
  //that is used to make a new Mover. We called it at the top
  //of this program. You can put "arguments" in the cosntructor
  //to set variables when each new object is made.
  //So "new Mover(100, 100, 10);" sets x to 100, y to 100, speed to 10.
  Mover(int _x, int _y, int _speed) {
    x = _x;
    y = _y;
    speed = _speed;
  }

  //This is a function for actually drawing the mover on the screen.
  //It uses the x, y , and speed values to draw the mover in the right position.
  //It also includes code for the "bouncing" behavior  
  void display() {
    if(x<0 || x>width){ // If the Mover goes off the screen...
      speed = -1*speed; // Reverse the speed (multiply it by -1)
    }
    x = x+speed; // Add the 'speed' to the x value to make it move to another position.
    stroke(100, 50, 0); //Stroke color
    fill(200, 100, 0); //Fill color
    ellipse(x,y,13,13); //Draw the circle
  }

}

Step 2 - Making multiple 'Movers' (new code highlighted in yellow):

// declare 4 "Mover" objects
Mover m = new Mover(100, 100, 10);
Mover m2 = new Mover(110, 110, 5);
Mover m3 = new Mover(120, 120, 1);
Mover m4 = new Mover(130, 130, 7);

void setup(){ // Runs once at start
  size(640, 480); // Set screen size
  background(0); // Make background black
}

void draw(){// Runs every frame
  background(0); // Cover all with black background
  //Call the "display()" function in all the movers to draw them on screen
  m.display();
  m2.display();
  m3.display();
  m4.display();
}

// Here is the code that sets up what a "Mover" is,
// what values (variables) it has, and what
// behaviors (functions) it has
class Mover {
  //DATA: Here are the values we want every Mover to have
  int x; // x position of the Mover
  int y; // y position of the Mover
  int speed; // Speed of the Mover

  //CONSTRUCTOR: This is the "constructor." It's a special function
  //that is used to make a new Mover. We called it at the top
  //of this program. You can put "arguments" in the cosntructor
  //to set variables when each new object is made.
  //So "new Mover(100, 100, 10);" sets x to 100, y to 100, speed to 10.
  Mover(int _x, int _y, int _speed) {
    x = _x;
    y = _y;
    speed = _speed;
  }

  //This is a function for actually drawing the mover on the screen.
  //It uses the x, y , and speed values to draw the mover in the right position.
  //It also includes code for the "bouncing" behavior  
  void display() {
    if(x<0 || x>width){ // If the Mover goes off the screen...
      speed = -1*speed; // Reverse the speed (multiply it by -1)
    }
    x = x+speed; // Add the 'speed' to the x value to make it move to another position.
    stroke(100, 50, 0); //Stroke color
    fill(200, 100, 0); //Fill color
    ellipse(x,y,13,13); //Draw the circle
  }

}

Step 3 - Using arrays and loops to make hundreds of objects (new code highlighted in yellow):


Mover[] m = new Mover[100]; // Creates an ARRAY of 100 Mover objects

void setup(){ // Runs once at start
  size(640, 480); // Set screen size
  background(0); // Make background black
  
  //This is a 'for' loop, which we can use to repeat code without typing it all
  //You give it variable with a starting value, a limit, and a change in
  //value which will happen each time it loops.
  //This 'for' loop starts when i=0, continues while i < m.length (the number of objects in our
  //array, 100), and adds 1 to i each loop. So it will run 100 times.
  //
  //The code inside the loop is 'stepping' through each empty space in our array 'm',
  //starting in space m[0], and ending in space m[99].
  //In each of these spaces, it's creating a new mover and sticking it in there.
  for (int i = 0; i < m.length; i++)
  {
    //Every time this code loops, it creates a new 'Mover' in a slot in the array
    //It initializes each 'Mover' with random values for x, y, and speed
    m[i] = new Mover(int(random(width)), int(random(height)), int(random(7)+1));
  }
}

void draw(){ //Runs every frame
  background(0); // Cover all with black background 
  
  //Another 'for' loop. This one calls 'display' for all the 'Movers' in
  //the array we made.
  for (int i = 0; i < m.length; i++)
  {
    m[i].display();
  }
}

//The 'Mover' class is mostly the same, however we've added some new behaviors
//in the 'display' function
class Mover {

  int x;
  int y;
  int speed;

  Mover(int _x, int _y, int _speed) {
    x = _x;
    y = _y;
    speed = _speed;
  }

  void display() {
    if(x<0 || x>width){ //If Mover goes off screen, reverse direction
      speed *= -1;
    }
    
    if(dist(x, y, mouseX, mouseY)<100)// If Mover is close to mouse, jump down
    {
      y += 10;
      if (y >= height){ //If object jumps off of bottom of screen, jump back to top
        y=1;
      }
    }
    
    x = x+speed;
    stroke(100, 50, 0);
    fill(200, 100, 0);
    ellipse(x,y,13,13);
  }

}

Step 4 - Adding different behaviors and variables to objects (new code highlighted in yellow):

//This code is mostly the same as the previous, but we've added
//other behaviors to the Mover class's display() function

Mover[] m = new Mover[100];

void setup(){
  size(640, 480);
  background(0);
  for (int i = 0; i < m.length; i++)
  {
    m[i] = new Mover(int(random(width)), int(random(height)), int(random(7)+1));
  }
}

void draw(){
  background(0);
  for (int i = 0; i < m.length; i++)
  {
    m[i].display();
  }
}

class Mover {

  int x;
  int y;
  int speed;
  int diameter = 13; // Added a new variable, 'diameter' to change size

  Mover(int _x, int _y, int _speed) {
    x = _x;
    y = _y;
    speed = _speed;
  }

  void display() {
    if(x<0 || x>width){ //If Mover goes off screen, reverse direction
      speed *= -1;
    }
    
    // If Mover is close to mouse, make its diameter increase
    if(dist(x, y, mouseX, mouseY)<100)  
    {
      diameter +=1;
    }
    else{
      diameter = 13;
    }
    
    x = x + speed;
    stroke(100, 50, 0);
    // Random flicker fill
    fill(random(50, 255), random(50, 255), random(50, 255));
    ellipse(x,y,diameter,diameter);
  }

}

Step 5 - Having Objects React to Each Other:


//This code is mostly the same as the previous, but we've added
//other behaviors to the Mover class's display() function
Mover[] m = new Mover[100];
void setup(){
  size(640, 480);
  background(0);
  for (int i = 0; i < m.length; i++)
  {
    m[i] = new Mover(int(random(width)), int(random(height)), int(random(1,4)));
  }
}
void draw(){
  background(0);
  for (int i = 0; i < m.length; i++)
  {
    m[i].display();
  }
}
class Mover {
  int x;
  int y;
  int speed;
  int diameter = 13; // Added a new variable, 'diameter' to change size
  Mover(int _x, int _y, int _speed) {
    x = _x;
    y = _y;
    speed = _speed;
  }
  void display() {
    if(x<0 || x>width){ //If Mover goes off screen, reverse direction
      speed *= -1;
    }
    
    // If Mover is close to mouse, make its diameter increase
    if(dist(x, y, mouseX, mouseY)<100)  
    {
      diameter +=1;
    }
    else{
      diameter = 13;
    }
    
    x = x + speed;
	
    stroke(255, 100);
    strokeWeight(15);
    fill(255);
    ellipse(x,y,diameter,diameter);
    
    //example of interaction among things//
    //every object scans the other objects in the array 'm'
    for (int i = 0; i < m.length; i++)
    {
      //make temporary variable to store the current 'other' Mover we're checking
      Mover other = m[i];
		
      //it's not a good idea to make the interact with itself
      //'this' is how the object refers to itself
      if (this != other) // "If the Mover I'm looking at is not me..."
      {
        //after I determine it's another thing I check the distance
        if (dist(x, y, other.x, other.y)<50)
        {
          //and do something, like draw a line between them
          stroke(255, 125);
          strokeWeight(5);
          line(x, y, other.x, other.y);
        }
      }
    }
  }
}

EXAMPLES

ASSIGNMENT

Project 5: Particle Systems, or "Flocks of Objects"

Creating our Own Objects

Resources: