diff --git a/content/06_libraries.html b/content/06_libraries.html index b5ae1da8..63411ce8 100644 --- a/content/06_libraries.html +++ b/content/06_libraries.html @@ -268,7 +268,7 @@

Bodies

restitution: 0.8, density: 0.002 }; -let box = Matter.Bodies.rectangle(x, y, w, h, options); +let box = Bodies.rectangle(x, y, w, h, options);

Each key in the object literal (for example, friction) serves as a unique identifier, and its value (0.5) is the data associated with that key. You can think of an object literal as a simple dictionary or lookup table—in this case, holding the desired settings for a new Matter.js body. Note, however, that while the options argument is useful for configuring the body, other initial conditions, such as linear or angular velocity, can be set via static methods of the Matter.Body class:

// Set an arbitrary initial linear and angular velocity.
 const v = Vector.create(2, 0);
@@ -328,7 +328,7 @@ 

Example 6.1: Matter.js De // Create the physics engine. let engine = Engine.create(); // Create a renderer and assign it to the p5.js canvas. - let render = Matter.Render.create({ + let render = Render.create({ canvas: canvas.elt, engine, options: { width: width, height: height }, }); @@ -409,7 +409,7 @@

Step 1: Add Matter.js to the p5.

As it stands, the sketch makes no reference to Matter.js. That clearly needs to change. Fortunately, this part isn’t too tough: I’ve already demonstrated all the elements needed to build a Matter.js world. (And don’t forget, in order for this to work, make sure the library is imported in index.html.)

First, I need to add aliases for the necessary Matter.js classes and create an Engine object in setup():

//{!3} Aliases for Engine, Bodies, and Composite
-let { Engine, Bodies, Composite } = Matter;
+const { Engine, Bodies, Composite } = Matter;
 
 //{!1} The engine is now a global variable!
 let engine;
@@ -733,7 +733,7 @@ 

Example 6.6: Matter.js Pendulum

bodyB: this.bob, length: this.len, }; - this.arm = Matter.Constraint.create(options); + this.arm = Constraint.create(options); //{!3} Add all bodies and constraints to the world. Composite.add(engine.world, this.anchor); Composite.add(engine.world, this.bob); @@ -817,7 +817,7 @@

Example 6.7: Spinning Windmill

length: 0, stiffness: 1, }; - this.constraint = Matter.Constraint.create(options); + this.constraint = Constraint.create(options); Composite.add(engine.world, this.constraint); } @@ -855,7 +855,7 @@

Mouse Constraints

Imagine that the moment you click the mouse over a shape, the mouse attaches to that body with a string. Now you can move the mouse around, and it will drag the body around with it until you release the mouse. This works in a similar fashion as a revolute joint in that you can set the length of that “string” to 0, effectively moving a shape with the mouse.

Before you can attach the mouse, however, you need to create a Matter.js Mouse object that listens for mouse interactions with the p5.js canvas:

// Aliases for Matter.js Mouse and MouseConstraint
-let { Mouse, MouseConstraint } = Matter;
+const { Mouse, MouseConstraint } = Matter;
 // Need a reference to the p5.js canvas to listen for the mouse
 let canvas = createCanvas(640, 240);
 // Create a Matter mouse attached to the native HTML5 canvas element.
diff --git a/content/examples/06_libraries/6_1_default_matter_js/sketch.js b/content/examples/06_libraries/6_1_default_matter_js/sketch.js
index bbed175a..6f93750b 100644
--- a/content/examples/06_libraries/6_1_default_matter_js/sketch.js
+++ b/content/examples/06_libraries/6_1_default_matter_js/sketch.js
@@ -11,7 +11,7 @@ function setup() {
   // Make the Engine
   let engine = Engine.create();
 
-  let render = Matter.Render.create({
+  let render = Render.create({
     canvas: canvas.elt,
     engine,
     options: { width: width, height: height },
diff --git a/content/examples/06_libraries/6_6_matter_js_pendulum/pendulum.js b/content/examples/06_libraries/6_6_matter_js_pendulum/pendulum.js
index 068f4fdc..157db166 100644
--- a/content/examples/06_libraries/6_6_matter_js_pendulum/pendulum.js
+++ b/content/examples/06_libraries/6_6_matter_js_pendulum/pendulum.js
@@ -14,7 +14,7 @@ class Pendulum {
       bodyB: this.bob,
       length: this.len,
     };
-    this.arm = Matter.Constraint.create(options);
+    this.arm = Constraint.create(options);
 
     Composite.add(engine.world, this.anchor);
     Composite.add(engine.world, this.bob);
diff --git a/content/examples/06_libraries/6_7_windmill/windmill.js b/content/examples/06_libraries/6_7_windmill/windmill.js
index 79881ef2..13be63b5 100644
--- a/content/examples/06_libraries/6_7_windmill/windmill.js
+++ b/content/examples/06_libraries/6_7_windmill/windmill.js
@@ -11,7 +11,7 @@ class Windmill {
       length: 0,
       stiffness: 1,
     };
-    this.constraint = Matter.Constraint.create(options);
+    this.constraint = Constraint.create(options);
     Composite.add(engine.world, this.constraint);
   }