diff --git a/content/06_libraries.html b/content/06_libraries.html index a53fab46..73328601 100644 --- a/content/06_libraries.html +++ b/content/06_libraries.html @@ -986,9 +986,11 @@

Collision Events

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:

-
function handleCollisions(event) {
+
+
function handleCollisions(event) {
 
 }
+

Notice that the function includes an event parameter. This is an object that includes all the data associated with a collision (or multiple collisions if more than one has occurred in that time step), such as which bodies are involved. Matter.js automatically creates this object and passes it along to the handleCollisions() callback every time a collision occurs.

Say I have a sketch of Particle objects. Each stores a reference to a Matter.js body, and I want the particles to change color when they collide. Here’s the process to follow to make that happen.

Step 1: Event, could you tell me which two things collided?

@@ -1011,11 +1013,9 @@

Collision Events

constructor(x, y, radius) { this.radius = radius; this.body = Bodies.circle(x, y, this.radius); - //{!1 .bold} this refers to this Particle object, telling the Matter.js Body to store a // reference to this particle that can be accessed later. this.body.plugin.particle = this; - Composite.add(engine.world, this.body); }
@@ -1031,11 +1031,9 @@

Example 6.10: Collision Events

for (let pair of event.pairs) { let bodyA = pair.bodyA; let bodyB = pair.bodyB; - //{!2} Retrieve the particles associated with the colliding bodies via the plugin. let particleA = bodyA.plugin.particle; let particleB = bodyB.plugin.particle; - //{!4} If they are both particles, change their color! if (particleA instanceof Particle && particleB instanceof Particle) { particleA.change(); @@ -1221,10 +1219,8 @@

The Physics World

 // The necessary geometry classes for vectors and rectangles
 let { Vec2D, Rect } = toxi.geom;
-
 // Alias the important classes from toxi.physics2d.
 let { VerletPhysics2D, VerletParticle2D, VerletSpring2D } = toxi.physics2d;
-
 // For the world’s gravity
 let { GravityBehavior } = toxi.physics2d.behaviors;

The first step is to create the world:

@@ -1377,7 +1373,7 @@

Example 6.11: Simple Spring } } -// How cute is this simple Particle class? +//{!11} How cute is this simple Particle class? class Particle extends VerletParticle2D { constructor(x, y, r) { super(x, y); @@ -1509,7 +1505,6 @@

A Soft-Body Character

function setup() { createCanvas(640, 240); physics = new VerletPhysics2D(); - // Create the vertex positions of the character as particles. particles.push(new Particle(200, 25)); particles.push(new Particle(400, 25)); @@ -1517,7 +1512,6 @@

A Soft-Body Character

particles.push(new Particle(400, 225)); particles.push(new Particle(200, 225)); particles.push(new Particle(250, 125)); - // Connect the vertices with springs. springs.push(new Spring(particles[0], particles[1])); springs.push(new Spring(particles[1], particles[2])); @@ -1540,15 +1534,12 @@

Example 6.13: Soft-Body Character

let physics;
-
 let particles = [];
 let springs = [];
 
 function setup() {
   createCanvas(640, 240);
-
   physics = new VerletPhysics2D();
-
   let bounds = new Rect(0, 0, width, height);
   physics.setWorldBounds(bounds);
   physics.addBehavior(new GravityBehavior(new Vec2D(0, 0.5)));
@@ -1574,9 +1565,7 @@ 

Example 6.13: Soft-Body Character

function draw() { background(255); - physics.update(); - //{!7} Draw the character as one shape. fill(127); stroke(0); @@ -1585,7 +1574,6 @@

Example 6.13: Soft-Body Character

vertex(particle.x, particle.y); } endShape(CLOSE); - //{!6} Mouse interaction if (mouseIsPressed) { particles[0].lock();