// Made-up force let force = createVector(0, 0.1); mover.applyForce(force);-
I now have the following.
+I now have this:
//{!1} Attraction force between two objects
let force = attractor.attract(mover);
mover.applyForce(force);
diff --git a/content/06_libraries.html b/content/06_libraries.html
index 4934f470..208a4e75 100644
--- a/content/06_libraries.html
+++ b/content/06_libraries.html
@@ -659,7 +659,7 @@ Before moving on, I want to stress that what you draw in your canvas window doesn’t magically experience perfect physics just by the mere act of creating Matter.js bodies. The chapter’s examples have worked because I’ve been carefully matching the way I’ve drawn each p5.js body with the way I’ve defined the geometry of each Matter.js body. If you accidentally draw a shape differently, you won’t get an error—not from p5.js or from Matter.js. However, your sketch will look odd, and the physics won’t work correctly because the world you’re seeing won’t be aligned with the world as Matter.js understands it.
To illustrate, let me return to Example 6.5. A lollipop is a compound body consisting of two parts, a rectangle (this.part1) and a circle (this.part2). I’ve been drawing each lollipop by getting the positions for the two parts separately: this.part1.position and this.part2.position. However, the overall compound body also has a position, this.body.position. It would be tempting to use that as the position for drawing the rectangle, and to figure out the circle’s position manually using an offset. After all, that’s how I conceived of the compound shape to begin with (look back at Figure 6.8):
show() {
- //{!1} Getting the body position rather than the parts.
+ //{!1} Getting the body position rather than the parts
let position = this.body.position;
let angle = this.body.angle;
push();
@@ -983,7 +983,7 @@ Collision Events
The global mousePressed() function in p5.js is executed whenever the mouse is clicked. This is known as a callback, a function that’s called back at a later time when an event occurs. Matter.js collision events operate in a similar fashion. Instead of p5.js just knowing to look for a function called mousePressed() when a mouse event occurs, however, you have to explicitly define the name for a Matter.js collision callback:
Matter.Events.on(engine, 'collisionStart', handleCollisions);
This code specifies that a function named handleCollisions should be executed whenever a collision between two bodies starts. Matter.js also has events for 'collisionActive' (executed over and over for the duration of an ongoing collision) and 'collisionEnd' (executed when two bodies stop colliding), but for a basic demonstration, knowing when the collision begins is more than adequate.
-Just as mousePressed() is triggered when the mouse is clicked, handleCollisions() (or whatever you choose to name the callback function) is triggered when two shapes collide. It can be written as follows.
+Just as mousePressed() is triggered when the mouse is clicked, handleCollisions() (or whatever you choose to name the callback function) is triggered when two shapes collide. It can be written as follows:
function handleCollisions(event) {
@@ -1051,7 +1051,7 @@ A Brief Interlude: Integration Me
I’ve managed to get most of the way through this material related to physics simulation without really needing to dive into calculus. As I wrap up the first half of this book, however, it’s worth taking a moment to examine the calculus behind what I’ve been demonstrating and how it relates to the methodology in certain physics libraries (like Box2D, Matter.js, and the upcoming Toxiclibs.js). This way, you’ll know what to say at the next cocktail party when someone asks you about integration.
I’ll begin with a question: “What does integration have to do with position, velocity, and acceleration?” To answer, I should first define differentiation, the process of finding a derivative. The derivative of a function is a measure of how a function changes over time. Consider position and its derivative. Position is a point in space, while velocity is the change in position over time. Therefore, velocity can be described as the derivative of position. And what’s acceleration? The change in velocity over time. Acceleration is the derivative of velocity.
Integration, the process of finding an integral, is the inverse of differentiation. For example, the integral of an object’s velocity over time tells us the object’s new position when that time period ends. Position is the integral of velocity, and velocity is the integral of acceleration.
-Since the physics simulations in this book are founded on the notion of calculating acceleration based on forces, integration is needed to figure out the object’s location after a certain period of time (like one cycle of the draw() loop). In other words, you’ve been doing integration all along! It looks like the following.
+Since the physics simulations in this book are founded on the notion of calculating acceleration based on forces, integration is needed to figure out the object’s location after a certain period of time (like one cycle of the draw() loop). In other words, you’ve been doing integration all along! It looks like the following:
velocity.add(acceleration);
position.add(velocity);
This methodology is known as Euler integration, or the Euler method (named for the mathematician Leonhard Euler, pronounced Oiler). It’s essentially the simplest form of integration and is very easy to implement in code—just two lines! However, while it’s computationally simple, it’s by no means the most accurate or stable choice for certain types of simulations.
@@ -1540,14 +1540,14 @@ Example 6.13: Soft-Body Character
physics = new VerletPhysics2D();
physics.setWorldBounds(new Rect(0, 0, width, height));
physics.addBehavior(new GravityBehavior(new Vec2D(0, 0.5)));
- // Particles at vertices of character.
+ // Particles at vertices of character
particles.push(new Particle(200, 25));
particles.push(new Particle(400, 25));
particles.push(new Particle(350, 125));
particles.push(new Particle(400, 225));
particles.push(new Particle(200, 225));
particles.push(new Particle(250, 125));
- // Springs connecting vertices of character.
+ // Springs connecting vertices of character
springs.push(new Spring(particles[0], particles[1]));
springs.push(new Spring(particles[1], particles[2]));
springs.push(new Spring(particles[2], particles[3]));
diff --git a/content/10_nn.html b/content/10_nn.html
index 718dc590..9b626baa 100644
--- a/content/10_nn.html
+++ b/content/10_nn.html
@@ -427,7 +427,7 @@ The Perceptron Code
I can then make an input array to go with the desired output.
// Don’t forget to include the bias!
let trainingInputs = [x, y, 1];
-Assuming that I have a perceptron variable, I can train it by providing the inputs along with the desired answer:
+Assuming that I have a perceptron variable, I can train it by providing the inputs along with the desired answer.
perceptron.train(trainingInputs, desired);
If I train the perceptron on a new random point (and its answer) for each cycle through draw(), it will gradually get better at classifying the points as above or below the line.
diff --git a/content/images/06_libraries/06_libraries_15.png b/content/images/06_libraries/06_libraries_15.png
index d6af47dc..44ef61a5 100644
Binary files a/content/images/06_libraries/06_libraries_15.png and b/content/images/06_libraries/06_libraries_15.png differ
diff --git a/content/images/07_ca/07_ca_2.png b/content/images/07_ca/07_ca_2.png
index 9bf2c844..57635a1b 100644
Binary files a/content/images/07_ca/07_ca_2.png and b/content/images/07_ca/07_ca_2.png differ
diff --git a/content/images/08_fractals/08_fractals_9.png b/content/images/08_fractals/08_fractals_9.png
index e8ce03c8..fda142bc 100644
Binary files a/content/images/08_fractals/08_fractals_9.png and b/content/images/08_fractals/08_fractals_9.png differ
diff --git a/content/images/xx_1_creature_design/xx_1_creature_design_4.png b/content/images/xx_1_creature_design/xx_1_creature_design_4.png
index 53f7700f..a4ff2b7c 100644
Binary files a/content/images/xx_1_creature_design/xx_1_creature_design_4.png and b/content/images/xx_1_creature_design/xx_1_creature_design_4.png differ
diff --git a/content/images/xx_1_creature_design/xx_1_creature_design_5.png b/content/images/xx_1_creature_design/xx_1_creature_design_5.png
index 74512720..63a7a154 100644
Binary files a/content/images/xx_1_creature_design/xx_1_creature_design_5.png and b/content/images/xx_1_creature_design/xx_1_creature_design_5.png differ