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.

Because of the complexity of these programs, they will run slowly if every step is simultaneously running. Hover your mouse over the example images to activate them.

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"
var m;

function setup(){ // Runs once at start
  createCanvas(640, 480); // Set screen size
  background(0); // Make background black
  m = new Mover(100, 100, 10); //set up "m" as a "Mover" object
}


function 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 {  
  //CONSTRUCTOR: This is the "constructor." It's a special function
  //that is used to make a new Mover, and set up any variables it needs.
  //The variables have "this." in the name, indicating they are part of the
  //object made using the constructor.
  //We called the constructor in the setup() of this program.
  //You can put "arguments" in the constructor parentheses
  //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.
  constructor(_x, _y, _speed) {
    this.x = _x; //we'll use this as the starting x position
    this.y = _y; //we'll use this as the starting y position
    this.speed = _speed; //we'll use this as the starting 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.
  //(Note how in a "class," the function doesn't have the word "function" before it.)
  display() {
    if(this.x<0 || this.x>width){ // If the Mover goes off the screen...
      this.speed = -1*this.speed; // Reverse the speed (multiply it by -1)
    }
    this.x = this.x+this.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(this.x,this.y,13,13); //Draw the circle
  }

}

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

// declare 4 "Mover" objects
var m;
var m2;
var m3;
var m4;

function setup(){ // Runs once at start
  createCanvas(640, 480); // Set screen size
  background(0); // Make background black
  m = new Mover(100, 100, 10); //set up "m" as a "Mover" object
  m2 = new Mover(110, 110, 5);
  m3 = new Mover(120, 120, 1);
  m4 = new Mover(130, 130, 7);
}


function 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 
  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 {  
  //CONSTRUCTOR: This is the "constructor." It's a special function
  //that is used to make a new Mover, and set up any variables it needs.
  //The variables have "this." in the name, indicating they are part of the
  //object made using the constructor.
  //We called the constructor in the setup() of this program.
  //You can put "arguments" in the constructor parentheses
  //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.
  constructor(_x, _y, _speed) {
    this.x = _x; //we'll use this as the starting x position
    this.y = _y; //we'll use this as the starting y position
    this.speed = _speed; //we'll use this as the starting 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.
  //(Note how in a "class," the function doesn't have the word "function" before it.)
  display() {
    if(this.x<0 || this.x>width){ // If the Mover goes off the screen...
      this.speed = -1*this.speed; // Reverse the speed (multiply it by -1)
    }
    this.x = this.x+this.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(this.x,this.y,13,13); //Draw the circle
  }

}

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


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


function setup(){ // Runs once at start
  createCanvas(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 < 100 (the number of objects we
  //want), and adds 1 to i each loop. So it will run 100 times.
  //
  //Each time the code loops, it creates a new Mover, and adds it to the end of the array
  for (var i = 0; i < 100; i++)
  {
    //Every time this code loops, it creates a new 'Mover,' and adds it to the array
    //It initializes each 'Mover' with random values for x, y, and speed
    m.push(new Mover(int(random(width)), int(random(height)), int(random(7)+1)));
  }
}


function 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 (var i = 0; i < m.length; i++)
  {
    m[i].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 {  
  //CONSTRUCTOR: This is the "constructor." It's a special function
  //that is used to make a new Mover, and set up any variables it needs.
  //The variables have "this." in the name, indicating they are part of the
  //object made using the constructor.
  //We called the constructor in the setup() of this program.
  //You can put "arguments" in the constructor parentheses
  //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.
  constructor(_x, _y, _speed) {
    this.x = _x; //we'll use this as the starting x position
    this.y = _y; //we'll use this as the starting y position
    this.speed = _speed; //we'll use this as the starting 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.
  //(Note how in a "class," the function doesn't have the word "function" before it.)
  display() {
    if(this.x<0 || this.x>width){ // If the Mover goes off the screen...
      this.speed = -1*this.speed; // Reverse the speed (multiply it by -1)
    }
	
	if(dist(this.x, this.y, mouseX, mouseY)<100)// If Mover is close to mouse, jump down
    {
      this.y += 10;
      if (this.y >= height){ //If object jumps off of bottom of screen, jump back to top
        this.y-=height;
      }
    }
	
    this.x = this.x+this.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(this.x,this.y,13,13); //Draw the circle
  }

}

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

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

function setup(){ // Runs once at start
  createCanvas(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 < 100 (the number of objects we
  //want), and adds 1 to i each loop. So it will run 100 times.
  //
  //Each time the code loops, it creates a new Mover, and adds it to the end of the array
  for (var i = 0; i < 100; i++)
  {
    //Every time this code loops, it creates a new 'Mover,' and adds it to the array
    //It initializes each 'Mover' with random values for x, y, and speed
    m.push(new Mover(int(random(width)), int(random(height)), int(random(7)+1)));
  }
}


function 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 (var i = 0; i < m.length; i++)
  {
    m[i].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 {  
  //CONSTRUCTOR: This is the "constructor." It's a special function
  //that is used to make a new Mover, and set up any variables it needs.
  //The variables have "this." in the name, indicating they are part of the
  //object made using the constructor.
  //We called the constructor in the setup() of this program.
  //You can put "arguments" in the constructor parentheses
  //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.
  constructor(_x, _y, _speed) {
    this.x = _x; //we'll use this as the starting x position
    this.y = _y; //we'll use this as the starting y position
    this.speed = _speed; //we'll use this as the starting speed
	this.diameter = 13; // Added a new variable, 'diameter' to change size
  }

  //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.
  //(Note how in a "class," the function doesn't have the word "function" before it.)
  display() {
    if(this.x<0 || this.x>width){ // If the Mover goes off the screen...
      this.speed = -1*this.speed; // Reverse the speed (multiply it by -1)
    }
	
	// If Mover is close to mouse, make its diameter increase
    if(dist(this.x, this.y, mouseX, mouseY)<100)  
    {
      this.diameter +=1;
    }
    else{
      this.diameter = 13;
    }
	
    this.x = this.x+this.speed; // Add the 'speed' to the x value to make it move to another position.
    stroke(100, 50, 0); //Stroke color
    fill(random(255), random(255), random(255)); //Strobing fill color
    ellipse(this.x,this.y,this.diameter, this.diameter); //Draw the circle
  }

}

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

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

function setup(){ // Runs once at start
  createCanvas(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 < 100 (the number of objects we
  //want), and adds 1 to i each loop. So it will run 100 times.
  //
  //Each time the code loops, it creates a new Mover, and adds it to the end of the array
  for (var i = 0; i < 100; i++)
  {
    //Every time this code loops, it creates a new 'Mover,' and adds it to the array
    //It initializes each 'Mover' with random values for x, y, and speed
    m.push(new Mover(int(random(width)), int(random(height)), int(random(7)+1)));
  }
}


function 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 (var i = 0; i < m.length; i++)
  {
    m[i].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 {  
  //CONSTRUCTOR: This is the "constructor." It's a special function
  //that is used to make a new Mover, and set up any variables it needs.
  //The variables have "this." in the name, indicating they are part of the
  //object made using the constructor.
  //We called the constructor in the setup() of this program.
  //You can put "arguments" in the constructor parentheses
  //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.
  constructor(_x, _y, _speed) {
    this.x = _x; //we'll use this as the starting x position
    this.y = _y; //we'll use this as the starting y position
    this.speed = _speed; //we'll use this as the starting speed
	this.diameter = 13; // Added a new variable, 'diameter' to change size
  }

  //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.
  //(Note how in a "class," the function doesn't have the word "function" before it.)
  display() {
    if(this.x<0 || this.x>width){ // If the Mover goes off the screen...
      this.speed = -1*this.speed; // Reverse the speed (multiply it by -1)
    }
	
	// If Mover is close to mouse, make its diameter increase
    if(dist(this.x, this.y, mouseX, mouseY)<100)  
    {
      this.diameter +=1;
    }
    else{
      this.diameter = 13;
    }
	
    this.x = this.x+this.speed; // Add the 'speed' to the x value to make it move to another position.
    
	stroke(255, 100);
    strokeWeight(15);
    fill(255);
	
    ellipse(this.x,this.y,this.diameter, this.diameter); //Draw the circle
	
	//example of interaction among things
    //every object scans the other objects in the array 'm'
    for (var i = 0; i < m.length; i++)
    {
      //make temporary variable to store the current 'other' Mover we're checking
      var 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(this.x, this.y, other.x, other.y)<50)
        {
          //and do something, like draw a line between them
          stroke(255, 125);
          strokeWeight(5);
          line(this.x, this.y, other.x, other.y);
        }
      }
    }
  }

}

EXAMPLES

ASSIGNMENT

Resources:

P5 Language Reference for more P5 commands
Rubric - Expectations and scoring for this assignment

Code template. You may use this as a basis, or come up with your own totally original design. If you use this template, you're expected to change it substantially:

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

function setup(){ // Runs once at start
  createCanvas(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 < 100 (the number of objects we
  //want), and adds 1 to i each loop. So it will run 100 times.
  //
  //Each time the code loops, it creates a new Mover, and adds it to the end of the array
  for (var i = 0; i < 100; i++)
  {
    //Every time this code loops, it creates a new 'Mover,' and adds it to the array
    //It initializes each 'Mover' with random values for x, y, and speed
    m.push(new Mover(int(random(width)), int(random(height)), int(random(7)+1)));
  }
}


function 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 (var i = 0; i < m.length; i++)
  {
    m[i].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 {  
  //CONSTRUCTOR: This is the "constructor." It's a special function
  //that is used to make a new Mover, and set up any variables it needs.
  //The variables have "this." in the name, indicating they are part of the
  //object made using the constructor.
  //We called the constructor in the setup() of this program.
  //You can put "arguments" in the constructor parentheses
  //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.
  constructor(_x, _y, _speed) {
    this.x = _x; //we'll use this as the starting x position
    this.y = _y; //we'll use this as the starting y position
    this.speed = _speed; //we'll use this as the starting speed
	this.diameter = 13; // Added a new variable, 'diameter' to change size
  }

  //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.
  //(Note how in a "class," the function doesn't have the word "function" before it.)
  display() {
    if(this.x<0 || this.x>width){ // If the Mover goes off the screen...
      this.speed = -1*this.speed; // Reverse the speed (multiply it by -1)
    }
	
	// If Mover is close to mouse, make its diameter increase
    if(dist(this.x, this.y, mouseX, mouseY)<100)  
    {
      this.diameter +=1;
    }
    else{
      this.diameter = 13;
    }
	
    this.x = this.x+this.speed; // Add the 'speed' to the x value to make it move to another position.
    stroke(100, 50, 0); //Stroke color
    fill(random(255), random(255), random(255)); //Strobing fill color
    ellipse(this.x,this.y,this.diameter, this.diameter); //Draw the circle
  }

}