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.

@@ -643,7 +642,6 @@ let part2 = Bodies.circle(x + offset, y, r); let position2 = this.part2.position; fill(200); stroke(0); - strokeWeight(1); // Translate and rotate the rectangle (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 = {
    +
    +
    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 and bodyB, 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 the length to the current distance between the bodies, and assign a default stiffness of 0.7. Two other notable options I didn’t include are damping and angularStiffness. The damping option affects the constraint’s resistance to motion, with higher values causing the constraint to lose energy more quickly. The angularStiffness 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 to Matter.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); 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,