From ead5a412f283627e98351bb9989d1acc469463a2 Mon Sep 17 00:00:00 2001 From: shiffman Date: Wed, 3 Apr 2024 00:18:10 +0000 Subject: [PATCH] Notion - Update docs --- content/06_libraries.html | 12 ++++++------ .../06_libraries/6_1_default_matter_js/sketch.js | 2 +- .../06_libraries/6_6_matter_js_pendulum/pendulum.js | 2 +- .../examples/06_libraries/6_7_windmill/windmill.js | 2 +- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/content/06_libraries.html b/content/06_libraries.html index b5ae1da..63411ce 100644 --- a/content/06_libraries.html +++ b/content/06_libraries.html @@ -268,7 +268,7 @@ let options = { 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 @@ function setup() {
   // 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 @@ function draw() {
 
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 @@ Composite.add(engine.world, constraint);

       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 @@ Composite.add(engine.world, constraint);
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 @@ body.position.y = mouseY;

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 bbed175..6f93750 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 068f4fd..157db16 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 79881ef..13be63b 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);
   }