I’ve effectively removed mass from the equation, making the acceleration of an object equal to force. This is great news. After all, in Chapter 1 I described acceleration as the key to controlling the movement of objects in a canvas. I said that position changes according to velocity, and velocity according to acceleration. Acceleration seemed to be where it all began. Now you can see that force is truly where it all begins.
Let’s take the Mover class, with position, velocity, and acceleration:
class Mover {
- constructor(){
+ constructor() {
this.position = createVector();
this.velocity = createVector();
this.acceleration = createVector();
@@ -125,7 +125,7 @@ mover.update();
Newton’s second law is really \vec{F} = M \times \vec{A}, not \vec{F} = \vec{A}. How can I incorporate mass into the simulation? To start, it’s as easy as adding a this.mass instance variable to the Mover class, but I need to spend a little more time here because of another impending complication.
First, though, I’ll add mass:
class Mover {
- constructor(){
+ constructor() {
this.position = createVector();
this.velocity = createVector();
this.acceleration = createVector();
@@ -593,7 +593,7 @@ function setup() {
// The x values are spaced out evenly according to i.
movers[i] = new Mover(40 + i * 70, 0, mass);
}
- liquid = new Liquid(0, height/2, width, height/2, 0.1);
+ liquid = new Liquid(0, height / 2, width, height / 2, 0.1);
}
function draw() {
@@ -941,10 +941,10 @@ function draw() {
Although less accurate than using precise equations of motion, the examples built in this chapter can model both the two-body and three-body problems. To begin, I’ll move the attract() method from the Attractor class into the Mover class (which I will now call Body).
// The Mover is now called a Body
class Body {
-
+
/* All the other stuff from before. */
- // The attract method is now part of the Body class.
+ // The attract method is now part of the Body class.
attract(body) {
let force = p5.Vector.sub(this.position, body.position);
let d = constrain(force.mag(), 5, 25);
@@ -959,7 +959,7 @@ let bodyB;
function setup() {
createCanvas(640, 240);
- // Creating two Body objects A and B
+ // Creating two Body objects A and B
bodyA = new Body(320, 40);
bodyB = new Body(320, 200);
}
@@ -967,7 +967,7 @@ function setup() {
function draw() {
background(255);
- // A attracts B and B attracts A
+ //{!2} A attracts B and B attracts A
bodyA.attract(bodyB);
bodyB.attract(bodyA);
@@ -988,8 +988,8 @@ function draw() {
createCanvas(640, 240);
bodyA = new Body(320, 40);
bodyB = new Body(320, 200);
-
- // Assigning horizontal velocities (in opposite directions) to each Body
+
+ // Assigning horizontal velocities (in opposite directions) to each Body
bodyA.velocity = createVector(1, 0);
bodyB.velocity = createVector(-1, 0);
}
diff --git a/content/03_oscillation.html b/content/03_oscillation.html
index 0a5bdcf..70fd467 100644
--- a/content/03_oscillation.html
+++ b/content/03_oscillation.html
@@ -120,7 +120,7 @@ function draw() {
The logical next step is to incorporate this idea of angular motion into the Mover class. First, I need to add some variables to the class’s constructor.
class Mover {
- constructor(){
+ constructor() {
this.position = createVector();
this.velocity = createVector();
this.acceleration = createVector();
@@ -665,7 +665,7 @@ function setup() {
function draw() {
background(255);
-
+
// Each time through draw, the angle that increments is set to startAngle
let angle = startAngle;
@@ -946,7 +946,7 @@ function draw() {
The Pendulum class needs all these properties, too.
class Pendulum {
- constructor(){
+ constructor() {
// Length of arm
this.r = ????;
// Pendulum arm angle
diff --git a/content/04_particles.html b/content/04_particles.html
index 1d257b3..ef9e14c 100644
--- a/content/04_particles.html
+++ b/content/04_particles.html
@@ -456,7 +456,7 @@ function draw() {
function setup() {
createCanvas(640, 240);
- emitter = new Emitter(width/2, 20);
+ emitter = new Emitter(width / 2, 20);
}
function draw() {
@@ -869,7 +869,7 @@ for (let animal of kingdom) {
applyForce(force) {
// {!2} Divide force by mass.
- const f = force.copy();
+ let f = force.copy();
f.div(this.mass);
this.acceleration.add(f);
}
@@ -885,8 +885,8 @@ for (let animal of kingdom) {
function draw() {
background(255);
- //{inline} Apply a force to all particles?
-
+ /* Apply a force to all particles? */
+
emitter.addParticle();
emitter.run();
}
@@ -954,7 +954,7 @@ class Emitter {
run() {
//{!7} Can’t use the enhanced loop because checking for particles to delete.
for (let i = this.particles.length - 1; i >= 0; i--) {
- const particle = this.particles[i];
+ let particle = this.particles[i];
particle.run();
if (particle.isDead()) {
this.particles.splice(i, 1);
@@ -1117,7 +1117,7 @@ class Emitter {
run() {
for (let i = this.particles.length - 1; i >= 0; i--) {
- const particle = this.particles[i];
+ let particle = this.particles[i];
particle.run();
if (particle.isDead()) {
this.particles.splice(i, 1);
diff --git a/content/05_steering.html b/content/05_steering.html
index c6beb48..49af2ff 100644
--- a/content/05_steering.html
+++ b/content/05_steering.html
@@ -957,7 +957,7 @@ function setup() {
}
}
Now, when it comes time to manipulate all the vehicles in draw(), I can loop through the array and call the necessary methods.
-function draw(){
+function draw() {
for (let vehicle of vehicles) {
vehicle.update();
vehicle.show();
@@ -1035,11 +1035,10 @@ function draw() {
This isn’t enough. I have a fleeing vector now, but what I really need is the average of the fleeing vectors for all the vehicles that are too close. How do I compute an average? Add up all the vectors and divide by the total.
//{!1 .bold} Start with an empty vector.
let sum = createVector();
- //{!1 .bold} We have to keep track of how many Vehicles are too close.
+ //{!1 .bold} We have to keep track of how many Vehicles are too close.
let count = 0;
for (let other of vehicles) {
-
let d = p5.Vector.dist(this.position, other.position);
if (this !== other && d < desiredseparation) {
let diff = p5.Vector.sub(this.position, other.position);
@@ -1055,7 +1054,7 @@ function draw() {
// if nothing is too close (not to mention I can’t
// divide by zero!).
if (count > 0) {
- //{.bold}
+ //{.bold}
sum.div(count);
}
Once I have the average vector (stored in the variable sum), that vector can be scaled to the maximum speed and become the desired velocity—the vehicle desires to move in that direction at maximum speed! (In fact, I really don't have to divide by count anymore since the magnitude is set manually.) And once I have the desired velocity, it’s the same old Reynolds story: steering equals desired minus velocity.
@@ -1154,7 +1153,7 @@ function draw() {
//{!1 .line-through}
this.applyForce(steer);
- //{!1} Instead of applying the force return the vector.
+ //{!1} Instead of applying the force return the vector.
return steer;
}
This is a subtle change, but incredibly important: it allows the strength of these forces to be weighted all in one place.