From ead5a412f283627e98351bb9989d1acc469463a2 Mon Sep 17 00:00:00 2001 From: shiffman <shiffman@users.noreply.github.com> 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 b5ae1da8..63411ce8 100644 --- a/content/06_libraries.html +++ b/content/06_libraries.html @@ -268,7 +268,7 @@ <h3 id="bodies">Bodies</h3> restitution: 0.8, density: 0.002 }; -let box = Matter.Bodies.rectangle(x, y, w, h, options);</pre> +let box = Bodies.rectangle(x, y, w, h, options);</pre> <p>Each key in the object literal (for example, <code>friction</code>) serves as a unique identifier, and its value (<code>0.5</code>) 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 <code>options</code> argument is useful for configuring the body, other initial conditions, such as linear or angular velocity, can be set via static methods of the <code>Matter.Body</code> class:</p> <pre class="codesplit" data-code-language="javascript">// Set an arbitrary initial linear and angular velocity. const v = Vector.create(2, 0); @@ -328,7 +328,7 @@ <h3 id="example-61-matterjs-default-render-and-runner">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 @@ <h3 id="step-1-add-matterjs-to-the-p5js-sketch">Step 1: Add Matter.js to the p5. <p>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 <em>index.html.</em>)</p> <p>First, I need to add aliases for the necessary Matter.js classes and create an <code>Engine</code> object in <code>setup()</code>:</p> <pre class="codesplit" data-code-language="javascript">//{!3} Aliases for <code>Engine</code>, <code>Bodies</code>, and <code>Composite</code> -let { Engine, Bodies, Composite } = Matter; +const { Engine, Bodies, Composite } = Matter; //{!1} The engine is now a global variable! let engine; @@ -733,7 +733,7 @@ <h3 id="example-66-matterjs-pendulum">Example 6.6: Matter.js Pendulum</h3> 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 @@ <h3 id="example-67-spinning-windmill">Example 6.7: Spinning Windmill</h3> 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 @@ <h3 id="mouse-constraints">Mouse Constraints</h3> <p>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.</p> <p>Before you can attach the mouse, however, you need to create a Matter.js <code>Mouse</code> object that listens for mouse interactions with the p5.js canvas:</p> <pre class="codesplit" data-code-language="javascript">// Aliases for Matter.js <code>Mouse</code> and <code>MouseConstraint</code> -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 <code>Matter</code> mouse attached to the native HTML5 <code>canvas</code> 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); }