Pages for NOC 5.6 and 5.7 (CodingTrain#3371)

* adding page for noc 5.6

* couple fixes

* adding page for noc 5.7

* updating video ID

* updating description

* Update 5.7-path-following.md

Co-authored-by: Daniel Shiffman <[email protected]>

_learning/nature-of-code/5.6-dot-product.md

@@ -0,0 +1,60 @@
+---
+title: Vector Dot Product (Scalar Projection)
+video_number: 5.6
+date: 2021-09-27
+video_id: DHPfoqiE4yQ
+repository: nature-of-code/5.6-dot-product
+can_contribute: true
+
+variations:
+  - name: "Angle Between"
+    folder: "angle-between"
+    lang: "p5js"
+    web_editor: ORP5Yx7JX
+  - name: "Scalar Projection"
+    folder: "scalar-projection"
+    lang: "p5js"
+    web_editor: c4jmHLFQI
+
+links:
+  - title: "Nature of Code Path Following Example"
+    url: https://editor.p5js.org/natureofcode/sketches/SkMI894DX
+  - title: "Steering Behaviors For Autonomous Characters"
+    author: Craig Reynolds
+    url: http://www.red3d.com/cwr/steer/
+  - title: "Scalar Projection (Wikipedia)"
+    url: https://en.wikipedia.org/wiki/Scalar_projection
+  - title: "Vector Projection (Wikipedia)"
+    url: https://en.wikipedia.org/wiki/Vector_projection
+
+videos:
+  - title: "3D Rendering with Rotation and Projection - Coding Challenge 112"
+    author: "The Coding Train"
+    url: /CodingChallenges/112-3d-rendering
+  - title: "Unit Vector (Normalize) - Nature of Code 1.5"
+    author: "The Coding Train"
+    url: /learning/nature-of-code/1.5-unit-vector
+  - title: "Dot products and duality"
+    author: "3Blue1Brown"
+    video_id: LyGKycYT2v0
+
+topics:
+  - title: "Welcome! What are we looking at today?"
+    time: "0:00"
+  - title: "Explain! What is scalar projection?"
+    time: "1:01"
+  - title: "Explain! How do we use dot product to find the scalar projection?"
+    time: "3:04"
+  - title: "Code! Let's create a scalarProjection() function."
+    time: "6:13"
+  - title: "Code! Modifying the function to be vectorProjection()."
+    time: "8:01"
+  - title: "Explain! How is this useful for path following?"
+    time: "9:42"
+  - title: "Code! Let's see if it works for finding a point on a path?"
+    time: "11:39"
+  - title: "Thanks for watching! See you in the next video about path following."
+    time: "13:04"
+---
+
+This video covers the dot product and scalar projection with p5.js and vectors, concepts that I'll need for finding the distance between a point and a line which will lead to the path following steering behavior in the next video!

_learning/nature-of-code/5.7-path-following.md

@@ -0,0 +1,54 @@
+---
+title: Path Following
+video_number: 5.7
+date: 2021-09-24
+video_id: rlZYT-uvmGQ
+repository: nature-of-code/5.7-path-following
+can_contribute: true
+
+variations:
+  - name: "Path Following"
+    folder: "path-following"
+    lang: "p5js"
+    web_editor: dqM054vBV
+  - name: "Complex Path"
+    folder: "complex-path"
+    lang: "p5js"
+    web_editor: 2FFzvxwVt
+
+links:
+  - title: "Steering Behaviors For Autonomous Characters"
+    author: Craig Reynolds
+    url: http://www.red3d.com/cwr/steer/
+
+videos:
+  - title: "Scalar Projection - Nature of Code 5.6"
+    author: "The Coding Train"
+    url: /learning/nature-of-code/5.6-dot-product
+
+topics:
+  - title: "Follow along, I look at path finding!"
+    time: "0:00"
+  - title: "Code! Let's create a Path class."
+    time: "0:23"
+  - title: "Code! Now we need a follow force."
+    time: "1:18"
+  - title: "Explain! What are the steps to path following?"
+    time: "1:51"
+  - title: "Code! Step one: predict future position."
+    time: "5:08"
+  - title: "Code! Modify vectorProjection() to findProjection()."
+    time: "5:40"
+  - title: "Code! Use findProjection() and the rest of the steps."
+    time: "8:12"
+  - title: "Code! Refining the example."
+    time: "10:30"
+  - title: "Ideas? What could you create?"
+    time: "11:49"
+  - title: "Amendment! I forgot to talk about direction!"
+    time: "13:28"
+  - title: "No idea what's next but hope to see you there!"
+    time: "14:43"
+---
+
+Continuing the quest to implement all of Craig Reynolds' steering behaviors in JavaScript with p5.js, in this video I tackle path following!

learning/nature-of-code/5.6-dot-product/angle-between/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>
+  <meta charset="utf-8" />
+
+</head>
+
+<body>
+  <script src="sketch.js"></script>
+</body>
+
+</html>

learning/nature-of-code/5.6-dot-product/angle-between/sketch.js

@@ -0,0 +1,61 @@
+// Scalar Projection (Angle Between)
+// The Nature of Code
+// The Coding Train / Daniel Shiffman
+// https://youtu.be/DHPfoqiE4yQ
+// https://thecodingtrain.com/learning/nature-of-code/5.6-dot-product.html
+
+// Angle Between: https://editor.p5js.org/codingtrain/sketches/ORP5Yx7JX
+// Scalar Projection: https://editor.p5js.org/codingtrain/sketches/c4jmHLFQI
+
+function setup() {
+  createCanvas(windowWidth, windowHeight);
+}
+
+function draw() {
+  background(255);
+
+  // A "vector" (really a point) to store the mouse position and screen center position
+  const mouseLoc = createVector(mouseX, mouseY);
+  const centerLoc = createVector(width / 2, height / 2);
+
+  // Aha, a vector to store the displacement between the mouse and center
+  const v = p5.Vector.sub(mouseLoc, centerLoc);
+  v.normalize();
+  v.mult(75);
+
+  const xaxis = createVector(75, 0);
+  // Render the vector
+  drawVector(v, createVector(100, height / 2), 1.0);
+  drawVector(xaxis, createVector(100, height / 2), 1.0);
+
+  const theta = v.angleBetween(xaxis);
+
+  fill(0);
+  textSize(32);
+  textFont("courier");
+  textAlign(LEFT, CENTER);
+  text(
+    `${int(degrees(theta))} degrees\n${nf(theta, 1, 3)} radians`,
+    200,
+    height / 2
+  );
+}
+
+// Renders a vector object 'v' as an arrow and a position 'loc'
+function drawVector(v, pos, scayl) {
+  push();
+  const arrowsize = 6;
+  // Translate to position to render vector
+  translate(pos.x, pos.y);
+  stroke(0);
+  strokeWeight(2);
+  // Call vector heading function to get direction (pointing up is a heading of 0)
+  rotate(v.heading());
+  // Calculate length of vector & scale it to be bigger or smaller if necessary
+  const len = v.mag() * scayl;
+  // Draw three lines to make an arrow
+  line(0, 0, len, 0);
+  line(len, 0, len - arrowsize, +arrowsize / 2);
+  line(len, 0, len - arrowsize, -arrowsize / 2);
+  pop();
+}

learning/nature-of-code/5.6-dot-product/scalar-projection/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>
+  <meta charset="utf-8" />
+
+</head>
+
+<body>
+  <script src="sketch.js"></script>
+</body>
+
+</html>

learning/nature-of-code/5.6-dot-product/scalar-projection/sketch.js

@@ -0,0 +1,57 @@
+// Scalar Projection (Scalar Projection)
+// The Nature of Code
+// The Coding Train / Daniel Shiffman
+// https://youtu.be/DHPfoqiE4yQ
+// https://thecodingtrain.com/learning/nature-of-code/5.6-dot-product.html
+
+// Angle Between: https://editor.p5js.org/codingtrain/sketches/ORP5Yx7JX
+// Scalar Projection: https://editor.p5js.org/codingtrain/sketches/c4jmHLFQI
+
+let path;
+
+function setup() {
+  createCanvas(400, 400);
+  path = createVector(200, 60);
+}
+
+function vectorProjection(a, b) {
+  let bCopy = b.copy().normalize();
+  let sp = a.dot(bCopy);
+  bCopy.mult(sp);
+  return bCopy;
+}
+
+function draw() {
+  background(0);
+  strokeWeight(4);
+  stroke(255);
+  let pos = createVector(100, 200);
+
+  let mouse = createVector(mouseX, mouseY);
+  let a = p5.Vector.sub(mouse, pos);
+
+  // line(pos.x, pos.y, pos.x + a.x, pos.y + a.y);
+  line(pos.x, pos.y, pos.x + path.x, pos.y + path.y);
+
+  let v = vectorProjection(a, path);
+
+  strokeWeight(8);
+  stroke(0, 0, 255);
+  //line(pos.x, pos.y, pos.x + v.x, pos.y + v.y);
+
+  strokeWeight(1);
+  stroke(255);
+  // line(pos.x + a.x, pos.y + a.y, v.x + pos.x, v.y + pos.y);
+
+  fill(0, 255, 0);
+  noStroke();
+  circle(pos.x + a.x, pos.y + a.y, 16);
+
+  fill(255, 0, 0);
+  noStroke();
+  circle(v.x + pos.x, v.y + pos.y, 16);
+
+  fill(0, 255, 0);
+  noStroke();
+  // circle(pos.x, pos.y, 16);
+}

learning/nature-of-code/5.7-path-following/complex-path/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>
+  <meta charset="utf-8" />
+
+</head>
+
+<body>
+  <script src="path.js"></script>
+  <script src="vehicle.js"></script>
+  <script src="sketch.js"></script>
+</body>
+
+</html>

learning/nature-of-code/5.7-path-following/complex-path/path.js

@@ -0,0 +1,48 @@
+// Path Following (Complex Path)
+// The Nature of Code
+// The Coding Train / Daniel Shiffman
+// https://youtu.be/LrnR6dc2IfM
+// https://thecodingtrain.com/learning/nature-of-code/5.7-path-following.html
+
+// Path Following: https://editor.p5js.org/codingtrain/sketches/dqM054vBV
+// Complex Path: https://editor.p5js.org/codingtrain/sketches/2FFzvxwVt
+
+class Path {
+  constructor() {
+    // Arbitrary radius of 20
+    // A path has a radius, i.e how far is it ok for the boid to wander off
+    this.radius = 20;
+    // A Path is an arraylist of points (PVector objects)
+    this.points = [];
+  }
+
+  // Add a point to the path
+  addPoint(x, y) {
+    let point = createVector(x, y);
+    this.points.push(point);
+  }
+
+  // Draw the path
+  display() {
+    strokeJoin(ROUND);
+
+    // Draw thick line for radius
+    stroke(175);
+    strokeWeight(this.radius * 2);
+    noFill();
+    beginShape();
+    for (let v of this.points) {
+      vertex(v.x, v.y);
+    }
+    endShape(CLOSE);
+    // Draw thin line for center of path
+    stroke(0);
+    strokeWeight(1);
+    noFill();
+    beginShape();
+    for (let v of this.points) {
+      vertex(v.x, v.y);
+    }
+    endShape(CLOSE);
+  }
+}