From a4641f40c9199623c59305d606d228b058e2fe75 Mon Sep 17 00:00:00 2001 From: jasongao97 Date: Mon, 23 Jan 2023 20:49:43 +0000 Subject: [PATCH] Notion - Update docs --- content/01_vectors.html | 37 ++++++++++++++++--------------------- 1 file changed, 16 insertions(+), 21 deletions(-) diff --git a/content/01_vectors.html b/content/01_vectors.html index c907276..d4036a7 100644 --- a/content/01_vectors.html +++ b/content/01_vectors.html @@ -227,7 +227,7 @@ position = position + velocity;(3 + 2) + 1 = 3 + (2 + 1)

Now that I've covered how add() is written inside of p5.Vector, I can return to the bouncing ball example with its position + velocity algorithm and implement vector addition:

-
//{!1 .line-through}Add the current velocity to the position.
+
//{!1 .line-through} Add the current velocity to the position.
 position = position + velocity;
 position.add(velocity);

 
And here I am, ready to rewrite the bouncing ball example using vectors.

@@ -409,7 +409,6 @@ function draw() {
   mouse.mult(0.5);
   translate(width/2, height/2);
   line(0, 0, mouse.x, mouse.y);
-
 }
Figure 1.9 @@ -432,7 +431,7 @@ u.div(2);(\vec{u} + \vec{v}) * n = (\vec{u} * n) + (\vec{v} * n)

1.5 Vector Magnitude

 -
+
Figure 1.10: The length or “magnitude” of a vector \vec{v} is often written as: \lVert\vec{v}\rVert
Figure 1.10: The length or “magnitude” of a vector \vec{v} is often written as: \lVert\vec{v}\rVert
@@ -474,7 +473,6 @@ function draw() { translate(width/2, height/2); line(0, 0, mouse.x, mouse.y); - }

1.6 Normalizing Vectors

@@ -497,10 +495,10 @@ function draw() { }

Of course, there’s one small issue. What if the magnitude of the vector is 0? You can’t divide by 0! Some quick error checking will fix that right up:

normalize() {
- let m = this.mag();
- if (m > 0) {
-   this.div(m);
- }
+  let m = this.mag();
+  if (m > 0) {
+    this.div(m);
+  }
 }

Example 1.6: Normalizing a vector

@@ -581,7 +579,7 @@ function draw() { this.position.y = height; } } -

Now that the Mover class is finished, I can move onto setup()> and draw(). First, declare a Mover object:

+

Now that the Mover class is finished, I can move onto setup() and draw(). First, declare a Mover object:

let mover;

Then create and initialize the mover in setup():

mover = new Mover();
@@ -664,16 +662,15 @@ position.add(velocity); constructor(){ this.position = createVector(); this.velocity = createVector(); - //{.bold} A new vector for acceleration + //{!1 .bold} A new vector for acceleration this.acceleration = createVector(); - } - + }

And incorporate acceleration into the update() function:

-
 update() {
+
  update() {
     //{!2 .bold} Our motion algorithm is now two lines of code!
     this.velocity.add(this.acceleration);
     this.position.add(this.velocity);
- }

+}

I’re almost done. The only missing piece is initialization in the constructor.

  constructor() {

Let’s start the Mover object in the middle of the window…

@@ -862,8 +859,8 @@ dir.mult(anything);
  • Assign that vector to acceleration.

    • I have a confession to make. This is such a common operation (normalization then scaling) that p5.Vector includes a method to do just that—set the magnitude of a vector to a value. That function is setMag().

    -
            let anything = ?????
-        dir.setMag(anything);
    +
    let anything = ?????
+dir.setMag(anything);

    In this last example, to emphasize the math, I'm going to write the code with both steps separate, but this is likely the last time I‘ll do that and you‘ll see setMag() in examples going forward.

    Example 1.10: Accelerating towards the mouse

    @@ -872,7 +869,7 @@ dir.mult(anything);
    -
     update() {
+
      update() {
 
     let mouse = createVector(mouseX, mouseY);
     // Step 1: Compute direction
@@ -937,14 +934,12 @@ function draw() {
   }
 
   update() {
-
     //{.comment-header} Algorithm for calculating acceleration:
 
     //{!2} Find the vector pointing towards the mouse.
     let mouse = createVector(mouseX, mouseY);
     let dir = p5.Vector.sub(mouse, this.position);
 
-
     // Normalize.
     dir.normalize();
     // Scale.
@@ -956,7 +951,7 @@ function draw() {
     this.velocity.add(this.acceleration);
     this.velocity.limit(this.topspeed);
     this.position.add(this.velocity);
-    }
+  }
 
   // Display the Mover
   display() {
@@ -975,7 +970,7 @@ function draw() {
 
     if (this.position.y > height) {
       this.position.y = 0;
-    }  else if (this.position.y < 0) {
+    } else if (this.position.y < 0) {
       this.position.y = height;
     }
   }