diff --git a/content/06_libraries.html b/content/06_libraries.html index 7b16d64..a53fab4 100644 --- a/content/06_libraries.html +++ b/content/06_libraries.html @@ -533,7 +533,6 @@ let boundary = Bodies.rectangle(x, y, w, h, options);
Two strategies can be used to make such complex forms. The generic Bodies.polygon()
method can create any regular polygon (pentagon, hexagon, and so on). Additionally, Bodies.trapezoid()
makes a quadrilateral with at least one pair of parallel sides:
// A regular hexagon (six-sided polygon) let hexagon = Bodies.polygon(x, y, 6, radius); - // A trapezoid let trapezoid = Bodies.trapezoid(x, y, width, height, slope);
A more general-purpose option is Bodies.fromVertices()
. It builds a shape from an array of vectors, treating them as a series of connected vertices. I’ll encapsulate this logic in a CustomShape
class.
part1
).
push();
translate(position1.x, position1.y);
@@ -704,7 +702,8 @@ let particleB = new Particle();
stiffness
: A value from 0 to 1 that represents the rigidity of the constraint, with 1 being fully rigid and 0 being completely soft.These settings get packaged up in an object literal:
-let options = { +length: this.len, }; this.arm = Matter.Constraint.create(options); - //{!3} Add all bodies and constraints to the world. Composite.add(engine.world, this.anchor); Composite.add(engine.world, this.bob); @@ -752,12 +749,9 @@ Composite.add(engine.world, constraint); show() { fill(127); stroke(0); - strokeWeight(2); - //{!2} Draw a line representing the pendulum arm. line(this.anchor.position.x, this.anchor.position.y, this.bob.position.x, this.bob.position.y); - //{!6} Draw the anchor. push(); translate(this.anchor.position.x, this.anchor.position.y); @@ -765,7 +759,6 @@ Composite.add(engine.world, constraint); circle(0, 0, this.r * 2); line(0, 0, this.r, 0); pop(); - //{!6} Draw the bob. push(); translate(this.bob.position.x, this.bob.position.y); @@ -823,7 +816,6 @@ Composite.add(engine.world, constraint); //{!2} The rotating body this.body = Bodies.rectangle(x, y, w, h); Composite.add(engine.world, this.body); - //{!8} The revolute constraint let options = { bodyA: this.body,+let options = { bodyA: particleA.body, bodyB: particleB.body, pointA: Vector.create(0, 0), @@ -712,6 +711,7 @@ let particleB = new Particle();length: 100, stiffness: 0.5 }; +Technically, the only required options are
bodyA
andbodyB
, the two bodies connected by the constraint. If you don’t specify any additional options, Matter.js will choose defaults for the other properties. For example, it will use(0, 0)
for each relative anchor point (the body’s center), set thelength
to the current distance between the bodies, and assign a defaultstiffness
of0.7
. Two other notable options I didn’t include aredamping
andangularStiffness
. Thedamping
option affects the constraint’s resistance to motion, with higher values causing the constraint to lose energy more quickly. TheangularStiffness
option controls the rigidity of the constraint’s angular motion, with higher values resulting in less angular flexibility between the bodies.Once the options are configured, the constraint can be created. As usual, this assumes another alias—
Constraint
is equal toMatter.Constraint
:let constraint = Constraint.create(options); @@ -729,12 +729,10 @@ Composite.add(engine.world, constraint);constructor(x, y, len) { this.r = 12; this.len = len; - //{!2} Create two bodies, one for the anchor and one for the bob. // The anchor is static. this.anchor = Bodies.circle(x, y, this.r, { isStatic: true }); this.bob = Bodies.circle(x + len, y, this.r, { restitution: 0.6 }); - //{!6} Create a constraint connecting the anchor and the bob. let options = { bodyA: this.anchor, @@ -742,7 +740,6 @@ Composite.add(engine.world, constraint);