Skip to content

Commit

Permalink
Merge pull request #931 from nature-of-code/notion-update-docs
Browse files Browse the repository at this point in the history
Fixing Matter references
  • Loading branch information
shiffman committed Apr 3, 2024
2 parents 6f6b967 + ead5a41 commit e9a441a
Show file tree
Hide file tree
Showing 4 changed files with 9 additions and 9 deletions.
12 changes: 6 additions & 6 deletions content/06_libraries.html
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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 },
});
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
}

Expand Down Expand Up @@ -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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion content/examples/06_libraries/6_7_windmill/windmill.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down

0 comments on commit e9a441a

Please sign in to comment.