From fb212c1d52ab0134250868912d7a490aa07e06b5 Mon Sep 17 00:00:00 2001 From: shiffman Date: Sat, 24 Feb 2024 21:08:05 +0000 Subject: [PATCH] Notion - Update docs --- content/06_libraries.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/06_libraries.html b/content/06_libraries.html index 1726fb2..7b16d64 100644 --- a/content/06_libraries.html +++ b/content/06_libraries.html @@ -291,9 +291,11 @@

Render

Once a body is added to the world, Matter.js will always know it’s there, check it for collisions, and update its position appropriately, according to any forces in the environment. It’ll do all that without you having to lift a finger! But how do you draw the body?

In the next section, I’ll show you how to query Matter.js for the position of the various bodies in order to render the world with p5.js. The way that works is fundamental to being able to control the look of your own animations. This is your time to shine: you can be the designer of your world, using your creativity and p5.js skills to visualize the bodies, while politely asking Matter.js to compute all the physics in the background.

That said, Matter.js does include a fairly simple and straightforward Render class, which is incredibly useful for quickly seeing and debugging the world you’ve designed. It provides ways to customize the debug drawing style, but I find the defaults perfectly adequate for quickly double-checking that I’ve configured a world correctly.

-

The first step is to call Matter.Render.create() (or Render.create(), assuming an alias). This method expects an object with the desired settings for the renderer, which I’ll call params:

-
// Store the canvas in a variable.
+
The first step is to call Matter.Render.create() (or Render.create(), assuming an alias). This method expects an object with the desired settings for the renderer, which I’ll call params.

+

+  
// Store the canvas in a variable.
 let canvas = createCanvas(640, 360);
+
 // Configure the renderer.
 let params = {
   canvas: canvas.elt,
@@ -302,6 +304,7 @@ 
Render

 };
 // Create the renderer.
 let render = Render.create(params);

+

 
Notice that I’m storing a reference to the p5.js canvas in the canvas variable. This is necessary because I need to tell the renderer to draw in a specific canvas. Matter.js doesn’t know about p5.js, so the canvas it’s assigned is a native HTML5 canvas, stored inside the elt property of a p5.js canvas object. The engine is the engine I previously created. The Matter.js default canvas dimensions are 800×600, so if I prefer a different size, I need to configure an options property with width and height.

 
Once I have a render object, I need to tell Matter.js to run it:

 
// Run the renderer!
@@ -635,15 +638,12 @@ 
Example 6.5: Multiple Shapes on
 
  show() {
     // The angle comes from the compound body.
     let angle = this.body.angle;
-
     //{!2} Get the position for each part.
     let position1 = this.part1.position;
     let position2 = this.part2.position;
-
     fill(200);
     stroke(0);
     strokeWeight(1);
-
     // Translate and rotate the rectangle (part1).
     push();
     translate(position1.x, position1.y);    
@@ -651,7 +651,6 @@ 
Example 6.5: Multiple Shapes on
     rectMode(CENTER);
     rect(0, 0, this.w, this.h);
     pop();
-
     // Translate and rotate the circle (part2).
     push();
     translate(position2.x, position2.y);    
@@ -662,6 +661,7 @@ 
Example 6.5: Multiple Shapes on
 
Before moving on, I want to stress that what you draw in your canvas window doesn’t magically experience perfect physics just by the mere act of creating Matter.js bodies. The chapter’s examples have worked because I’ve been carefully matching the way I’ve drawn each p5.js body with the way I’ve defined the geometry of each Matter.js body. If you accidentally draw a shape differently, you won’t get an error—not from p5.js or from Matter.js. However, your sketch will look odd, and the physics won’t work correctly because the world you’re seeing won’t be aligned with the world as Matter.js understands it.

 
To illustrate, let me return to Example 6.5. A lollipop is a compound body consisting of two parts, a rectangle (this.part1) and a circle (this.part2). I’ve been drawing each lollipop by getting the positions for the two parts separately: this.part1.position and this.part2.position. However, the overall compound body also has a position, this.body.position. It would be tempting to use that as the position for drawing the rectangle, and to figure out the circle’s position manually using an offset. After all, that’s how I conceived of the compound shape to begin with (look back at Figure 6.8):

 
  show() {
+    //{!1} Getting the body position rather than the parts. 
     let position = this.body.position;
     let angle = this.body.angle;
     push();