If you're seeing this message, it means we're having trouble loading external resources for Khan Academy.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

In the real world, the one we're seeking inspiration from here, we have more than one moving object - we're surrounded by many objects of varying mass and location. Let's look at how we can get our Mover to better simulate that aspect of the real world.

To do this, we’ll need a quick review of object-oriented programming. Again, we’re not covering all the basics of OO programming here. However, since the idea of creating a world filled with objects is pretty fundamental to all the examples in this course, it’s worth taking a moment to walk through the steps of going from one object to many.

As a reminder, this is what our current Mover looks like. It is identical to the Mover object that we created when we first introduced vectors, but with two additions—mass and a new applyForce() method: 

Now that our object is set, we can choose to create, say, twenty Mover instances with an array, initializing them with a loop

var movers = [];

for (var i = 0; i < 20; i++) {
    movers[i] = new Mover();
}

But now we have a small issue. If we refer back to the Mover object’s constructor…

var Mover = function() {
    this.mass = 1;
    this.position = new PVector(30, 30);
    this.velocity = new PVector(0, 0);
    this.acceleration = new PVector(0, 0);
};

…we discover that every Mover object is made exactly the same way. What we want are Mover objects with varying mass that start at varying locations. Here is where we need to increase the sophistication of our constructor by adding arguments.

var Mover = function(m, x, y) {
    this.mass = m;
    this.position = new PVector(x, y);
    this.velocity = new PVector(0, 0);
    this.acceleration = new PVector(0, 0);
};

Notice how the mass and location are no longer set to hardcoded numbers, but rather initialized via arguments passed through the constructor. This means we can create a variety of Mover objects: big ones, small ones, ones that start on the left side of the screen, ones that start on the right, etc.

// A big Mover on the left side of the window
var m1 = new Mover(10, 0, height/2);
// A small Mover on the right side of the window
var m2 = new Mover(0.1, width, height/2);

With an array, however, we want to initialize all of the objects with a loop.

for (var i = 0; i < movers.length; i++) {
    movers[i] = new Mover(random(0.1, 5), 0, 0);
}

For each mover created, the mass is set to a random value between 0.1 and 5, the starting x-location is set to 0, and the starting y-location is set to 0. Certainly, there are all sorts of ways we might choose to initialize the objects; this is just a demonstration of one possibility.

Once the array of objects is declared, created, and initialized, the rest of the code is simple. We run through every object, hand them each the forces in the environment, and enjoy the show.

var draw = function() {
  background(50, 50, 50);
  
  for (var i = 0; i < movers.length; i++) {
    var wind = new PVector(0.01, 0);
    var gravity = new PVector(0, 0.1);
    movers[i].applyForce(wind);
    movers[i].applyForce(gravity);
    movers[i].update();
    movers[i].display();
    movers[i].checkEdges();
  }
};

Here's how the program looks, all together. Note how in the program, the smaller circles reach the right of the window faster than the larger ones. This is because of our formula: acceleration = force divided by mass. The larger the mass, the smaller the acceleration.


This "Natural Simulations" course is a derivative of "The Nature of Code" by Daniel Shiffman, used under a Creative Commons Attribution-NonCommercial 3.0 Unported License.