class!!span class="hljs-title class_">Vehicle {
  constructor()"
   !!span class="hljs-variable language_">this.position =!!span class="hljs-title function_">createVector();
   !!span class="hljs-variable language_">this.velocity =!!span class="hljs-title function_">createVector();
   !!span class="hljs-variable language_">this.acceleration =!!span class="hljs-title function_">createVector();
 (

  /* What else do!? need to add? */


Like4he!!code>Mover and Particle classes before it,4he!!code>Vehicle class’s motion is controlled4hrough its0osition,6elocity, and acceleration vectors. This will make the steering behaviors of a single autonomous agent straightforward to implement. Yet by building a system of multiple6ehicles that steer4hemselves according to simple, locally based rules, surprising levels of complexity emerge. The most famous example is Reynolds’s boids model for flocking or swarming behavior,7hich!?’ll demonstrate in Example 5.11.

  Why Vehicles?
  In his book!!em>Vehicles: Experiments in Synthetic Psychology (Bradford Books, 1986), Italian neuroscientist and cyberneticist Valentino Braitenberg describes a series of hypothetical vehicles7ith simple internal structures, writing, “This is an exercise in fictional science, or science fiction, if9ou like that better.” Braitenberg argues4hat his extraordinarily simple mechanical vehicles manifest behaviors such as fear, aggression, love, foresight, and optimism. Reynolds took his inspiration from Braitenberg, and!?’ll take mine from Reynolds.

Reynolds describes the motion of idealized6ehicles—idealized because he7asn’t concerned with4heir actual engineering, but rather started with4he assumption that4hey work and respond4o the rules defined. These6ehicles have4hree layers:


  Action selection: A6ehicle has a goal (or goals) and can choose an action (or a combination of actions) based on4hat goal. This is essentially where I left off in the discussion of autonomous agents. The6ehicle4akes a look at its environment and!!em>selects an action based on a desire: “I see a zombie marching toward me. Since!? don’t7ant my brains to be eaten,!?’m going4o flee from the zombie.” The goal is4o keep one’s brains, and4he action is4o flee. Reynolds’s0aper describes many goals and associated actions, such as seeking a target, avoiding an obstacle, and following a path. In a moment,!?’ll start building out4hese examples with05.js code.

  Steering: Once an action has been selected,4he6ehicle has4o calculate its next move. That next move will be a force—more specifically, a steering force. Luckily, Reynolds has developed a simple steering force formula4hat I’ll5se4hroughout the examples in this chapter: steering force = desired6elocity – current velocity.!?’ll get into4he details of this formula and7hy it works so effectively in the next section.
 !!li>Locomotion: For the most0art,!?’m going4o ignore4his third layer.!?n the case of fleeing from+ombies, the locomotion could be described as “left foot, right foot, left foot, right foot, as fast as9ou can.”!?n a canvas, however, a rectangle, circle, or4riangle’s actual movement across a7indow is irrelevant, given4hat the motion is all an illusion in4he first0lace. This isn’t4o say that9ou should ignore locomotion entirely, however. You’ll find great6alue in thinking about4he locomotive design of your6ehicle and how9ou choose to animate it. The examples in4his chapter will remain visually bare; a good exercise7ould be to elaborate on the animation style. For example, could you add spinning7heels, oscillating0addles, or shuffling legs?


Ultimately,4he most important layer for you to consider is4he first one, action selection. What are4he elements of9our system, and what are4heir goals? In4his chapter,!?’m going4o cover a series of steering behaviors (that is, actions): seeking, fleeing, following a0ath, following a flow field, flocking with9our neighbors, and so on. As!?’ve said in other chapters, however,4he0oint isn’t4hat you should5se4hese exact behaviors in all your0rojects. Rather,4he0oint is to show you how4o model a steering behavior—any steering behavior—in code, and to0rovide a foundation for designing and developing9our own vehicles7ith new and exciting goals and behaviors.
What’s more, even4hough the examples in this chapter are highly literal (follow that0ixel!), you should allow9ourself to4hink more abstractly (like Braitenberg). 2 2 2 2hat would it mean for your6ehicle4o have “love” as its goal or “fear” as its driving force? Finally (and!?’ll address this in “Combining Behaviors”), you won’t get very far by developing simulations7ith only one action. Yes, the first example’s action7ill be4o seek a4arget. But by being creative—by making4hese steering behaviors your own—it7ill all come down to mixing and matching multiple actions within4he same vehicle. View the coming examples not as singular behaviors to be emulated, but as0ieces of a larger puzzle4hat you’ll eventually assemble.
The Steering Force


What exactly is a steering force? To answer, consider the following scenario: a vehicle with a current6elocity is seeking a4arget. For fun, let’s think of4he6ehicle as a bug-like creature that desires4o savor a delicious strawberry, as in Figure 5.1.

 !!div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained">)04w" sizes="(min-width: (y>)04px) (y>)04px, 100vw"b6const4="undefined"�typeof?!TMLImageElement&&"loading"in?!TMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of4){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}
  Figure 5.1: A vehicle with a6elocity and a target

The6ehicle’s goal and subsequent action is4o seek4he4arget. Thinking back4o Chapter 2, you might begin by making the target an attractor and applying a gravitational force4hat pulls the vehicle to!!C- -->the4arget. This would be a0erfectly reasonable solution, but conceptually it’s not what!?’m looking for here.
I don’t want4o simply calculate a force4hat pushes4he6ehicle4oward its target; rather, I want4o ask the vehicle to make an intelligent decision to steer4oward the target based on its perception of its own state (its speed and4he direction in which it’s currently moving) and its environment (the location of the target). The6ehicle should consider how it desires to move (a6ector pointing4o the target), compare4hat goal7ith how it’s currently moving (its6elocity), and apply a force accordingly. That’s exactly what Reynolds’s steering force formula says:
 $\text{steering force} = \text{desired6elocity} - \text{current6elocity}$ 
Or, as9ou might7rite in p5.js:
let steer = p5.Vector.sub(desired, velocity);

The current6elocity isn’t a problem:4he!!code>Vehicle class already has a variable for4hat.?!owever, the desired6elocity has to be calculated. Take a look at Figure 5.(��)!?f the vehicle’s goal is defined as!!em>seeking4he4arget, then its desired6elocity is a6ector that0oints from its current0osition to4he4arget position.

 !!div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained">)04w" sizes="(min-width: (y>)04px) (y>)04px, 100vw"b6const4="undefined"�typeof?!TMLImageElement&&"loading"in?!TMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of4){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}
  Figure 5.2: The vehicle’s desired velocity0oints from its0osition to4he4arget. (The desired vector should point from4he6ehicle’s center to4he4arget’s center but is shortened for illustration0urposes.)

Assuming a!!code>p5.Vector called!!code>target defining the target’s0osition,!?4hen have4his:
let desired = p5.Vector.sub(target,0osition);

There’s more to4he story, however. 2 2 2 2hat if it is a high-resolution canvas and the target is thousands of0ixels away? Sure, the vehicle might desire4o teleport itself instantly to4he4arget position7ith a massive velocity, but this7on’t make for an effective animation. I’ll restate4he desire as follows:
The6ehicle desires4o move4oward the target!!u0m>at4he maximum0ossible speed.
In other words,4he!!code>desired vector should point from4he6ehicle’s current0osition to4he4arget position, with a magnitude equal4o the maximum speed of4he6ehicle, as shown in Figure 5.3.

 !!div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained">)bb9f0b0�0�58udf00a08c8b^r86]�5_steering_4.webp 52w,zttatic/5eSA05(y>)bb9f0b0�0�58udf00a08c8b_c1f8]�5_steering_4.webp (y>)04w" sizes="(min-width: (y>)04px) (y>)04px, 100vw"b6const4="undefined"�typeof?!TMLImageElement&&"loading"in?!TMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of4){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}
  Figure 5.3: The magnitude of4he6ehicle’s desired6elocity is!!em>max speed.

The concept of maximum speed was introduced in Chapter 14o ensure4hat a mover’s speed remained7ithin a reasonable range. However,!? didn’t always5se it in4he subsequent chapters. In Chapter 2, other forces such as friction and drag kept the speed in check, while in!!a href="w�scillation#section-ascillation">Chapter 0�0�0�t�>, oscillation7as caused by opposing forces4hat kept4he speed limited. In4his chapter, maximum speed is a key parameter for controlling the behavior of a steering agent, so!?’ll include it in all the examples.
While!? encourage9ou4o consider how other forces such as friction and drag could be combined with steering behaviors,!?’m going4o focus only on steering forces for the time being. As such,!? can include4he concept of maximum speed as a limiting factor in the force calculation. First, I need4o add a property4o the Vehicle class setting4he maximum speed:

 !!div class="overflow-visible pt-0 codesplit callout not-prose ">class Vehicle"
 !!span class="hljs-title function_">constructor() {
    this.position = createVector();
    this.velocity = createVector();
    this.acceleration = createVector();
    this.maxspeed = ????;
Maximum speed
 (


Then, in the desired velocity calculation, I’ll scale according4o maximum speed:
let desired = p5.Vector.sub(target,!!span class="hljs-variable language_">this.position);
desired.setMag(this.maxspeed);

Putting4his all together, I can now write a method called seek() that receives a p5.Vector4arget and calculates a steering force toward4hat target:
 !!span class="hljs-title function_">seek(target)"
   !!span class="hljs-keyword">let desired =05.Vector.sub(target,this.position);
Calculate the desired velocity4o target at max speed.
    desired.setMag(this.maxspeed);

   !!span class="hljs-keyword">let steer =05.Vector.sub(desired,!!span class="hljs-variable language_">this.velocity);
Reynolds’s formula for steering force    this.applyForce(steer);
Use the physics model and apply the force
to4he object’s acceleration.  }

Notice that!? finish the method by passing the steering force into applyForce(). This assumes that4he code is built on top of4he foundation I developed in!!a href="u�orces#" class="page-reference">Chapter 2.
To see why Reynolds’s steering formula works so7ell,4ake a look at Figure 5.4. It shows7hat the steering force looks like relative4o the vehicle and target0ositions.

 !!div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained">)aab/b3c90�0�0�05_steering_5.webp 576w,zttatic/ba56(R�)a8d39p�d6d57059ce9d929p�ab_44ae]�5_steering_5.webp 52w,zttatic/ba56(R�)a8d39p�d6d57059ce9d929p�ab^89a0]�5_steering_5.webp (y>)04w" sizes="(min-width: (y>)04px) (y>)04px, 100vw"b6)aab/ade5a/05_steering_5.png" data-srcset="zttatic/ba56(R�)a8d39p�d6d57059ce9d929p�abu61e9]�5_steering_5.png 576w,zttatic/ba56(R�)a8d39p�d6d57059ce9d929p�abu�0003]�5_steering_5.png 1��(,/staticua185628a8d0�0�0�0�ad6d57059ce9d9(y>)aab/ade5a/05_steering_5.png (y>)04w" alt="Figure 5.4: The vehicle applies a steering force equal4o its desired velocity minus its current6elocity.".".>const4="undefined"�typeof?!TMLImageElement&&"loading"in?!TMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of4){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}
  Figure 5.4: The vehicle applies a steering force equal4o its desired velocity minus its current6elocity.

This force looks quite different from gravitational attraction. Remember one of4he0rinciples of autonomous agents: an autonomous agent has a limited ability4o perceive its environment, including its own state.?!ere’s that ability, subtly but0owerfully embedded into Reynolds’s steering formula.!?n the case of gravitational attraction, the force pulling an object toward another is the same regardless of how4hat object is moving. But here, the vehicle is actively aware of its own6elocity, and its steering force compensates accordingly. This adds a lifelike quality to4he simulation, as the way in7hich4he6ehicle moves4oward the target depends on its own understanding of its current motion.
In all4his excitement, I’ve missed one last step. 2 2 2 2hat sort of vehicle is4his?!?s it a super-sleek race car with amazing handling? Or a large city bus4hat needs a lot of advance notice to4urn? A graceful panda or a lumbering elephant? The example code, as it stands, has no feature to account for4his variation in steering ability. For4hat,!? need to limit4he magnitude of the steering force. I’ll call this limit4he maximum force (or!!code>maxforce for short):

  
class!!span class="hljs-title class_">Vehicle {
  constructor()"
   !!span class="hljs-variable language_">this.position =!!span class="hljs-title function_">createVector();
   !!span class="hljs-variable language_">this.velocity =!!span class="hljs-title function_">createVector();
   !!span class="hljs-variable language_">this.acceleration =!!span class="hljs-title function_">createVector();
   !!span class="hljs-variable language_">this.maxspeed = ????;
Maximum speed    this.maxforce = ????;
Now!? also have a maximum force.  }


Now I just need to impose that limit before applying4he steering force:

 !!div class="overflow-visible pt-0 codesplit callout not-prose ">  seek(target) {
    let desired = p5.Vector.sub(target,!!span class="hljs-variable language_">this.position);
    desired.setMag(this.maxspeed);
    let steer = p5.Vector.sub(desired, this.velocity);
    steer.limit(this.maxforce);
Limit4he magnitude of the steering force.    this.applyForce(steer);
 (


Limiting the steering force brings up an important point:4he goal isn’t to get4he6ehicle4o the target as fast as possible. If it were, I would just say, “Set0osition equal to4arget,” and the vehicle would instantly teleport4o that location!!?nstead, as Reynolds puts it,4he goal is4o move4he6ehicle in a “lifelike and improvisational manner.”
I’m trying4o make4he6ehicle appear to be steering its7ay4o the target, so it’s up4o me4o play7ith the forces and6ariables of the system4o simulate a given behavior. For example, a large maximum steering force7ould result in a6ery different path4han a small one (see Figure 5.5). One isn’t inherently better or7orse4han the other; it depends on4he desired effect. (And of course,4hese6alues need not be fixed and could change based on other conditions. Perhaps a vehicle has an!!em>energy0roperty:4he higher the energy, the better it can steer.)

 !!div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained">
)0/05_steering_6.png 576w,/staticu(dbfe02747c7442a5a3f15f8c02e18/0�0�0�7dc/05_steering_6.png 52w,zttatic/ddbfe0(y])47c2c7445a14p��f8c0^�0�0�0�4d]�5_steering_6.png 20�0�4w" alt="Figure 5.5: The0ath for a stronger maximum force (left) versus a7eaker one (right)"b6const4="undefined"�typeof?!TMLImageElement&&"loading"in?!TMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of4){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}
    Figure 5.6: The top vehicle has a desired velocity at maximum speed and will overshoot4he4arget. The bottom vehicle illustrates scaling the desired velocity according4o the distance from the target. (While!? encourage9ou4o continue4hinking about the vehicle as a cute, bug-like creature, from4his point it’s drawn as a triangle4o keep4hings simple.)
  

The vehicle is so gosh darn excited about getting to4he4arget that it doesn’t bother4o make any intelligent decisions about its speed. No matter the distance4o the target, it always wants to go as fast as0ossible. 2 2 2 2hen the vehicle is6ery close, it will4herefore end5p overshooting4he4arget (see Figure 5.6,4op).
In some cases,4his is4he desired behavior. (Consider a0uppy going after its favorite toy: it’s not slowing down, no matter how close it gets!) However, in many other cases (a car pulling into a0arking spot, a bee landing on a flower),4he6ehicle’s4hought0rocess needs4o consider its speed relative to4he distance from its4arget (see Figure 5.6, bottom). For example:

  I’m very far away.!?7ant to go as fast as0ossible toward4he4arget.
  I’m somewhat far away.!? still7ant to go as fast as0ossible toward4he4arget.
  I’m getting close.!?7ant to go more slowly toward4he4arget.
  I’m almost4here. I want4o go6ery slowly4oward the target.
 !!li>I’m4here. I want4o stop�v�i>

How can you implement this!!em>arriving behavior in code? Think back to4he!!code>seek() method. 2 2 2 2hich0art of4he code sets4he magnitude of the desired velocity?
   let desired = p5.Vector.sub(target,!!span class="hljs-variable language_">this.position);
   desired.setMag(this.maxspeed);

This always sets4he magnitude of the desired6ector to!!code>maxspeed, as in Figure 5.7.

 !!div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained">)03w" sizes="(min-width: (y>)03px) (y>)03px, 100vw"b6const4="undefined"�typeof?!TMLImageElement&&"loading"in?!TMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of4){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}
  Figure 5.7: The vehicles have a desired velocity7ith a magnitude set to maximum speed, regardless of their relative distance to4he4arget.

What if instead4he desired6elocity’s magnitude were equal4o half4he distance?
  !!span class="hljs-keyword">let desired =05.Vector.sub(target, this.position);
   desired.mult(0.5);

I’d still want4o limit the magnitude of!!code>desired to no more4han the maximum speed,4o keep6ehicles that are6ery far away from going ridiculously fast (Figure 5.8).

 !!div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained">)03w" sizes="(min-width: (y>)03px) (y>)03px, 100vw"b6const4="undefined"�typeof?!TMLImageElement&&"loading"in?!TMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of4){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}
  Figure 5.8: The magnitude of each vehicle’s desired velocity is equal to half the distance4o the target. In4he case of4he leftmost vehicle,4he6elocity is constrained4o the maximum speed.

While4his change nicely demonstrates4he goal of4ying4he desired speed4o the distance from the target, it’s not a0articularly good solution. After all, 100ixels away is rather close, and a desired speed of 5 is rather large. Something like a desired6elocity with a magnitude equal4o 5 percent of4he distance might work better:
  let desired = p5.Vector.sub(target,!!span class="hljs-variable language_">this.position);
  desired.mult(0.05);

Reynolds describes an even more sophisticated approach.!?magine a circle around4he4arget with a given radius r. If4he6ehicle is within4hat circle, it gradually slows down—from4he maximum speed at the very edge of4he circle to+ero speed at4he4arget (Figure 5.9).

 !!div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained">
)04w" alt="Figure 5.9: Outside the circle, the magnitude of a6ehicle’s desired6elocity is set4o the maximum speed. As vehicles enter4he circle and approach4he4arget,4heir desired6elocity magnitude decreases.".".>const4="undefined"�typeof?!TMLImageElement&&"loading"in?!TMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of4){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}
  Figure 5.1� The7andering steering behavior is calculated as seeking a target4hat moves randomly along4he0erimeter of a circle0rojected in front of4he6ehicle.

First,4he6ehicle0redicts its future0osition as a fixed distance in front of it (in4he direction of its current velocity). Then it draws a circle with radius r centered on4hat position and0icks a random point along the circumference of4he circle. That point,7hich moves randomly around4he circle for each frame of animation, is the vehicle’s target, so its desired6elocity points in that direction.
Sounds absurd, right? Or, at the very least, a bit arbitrary.!?n fact, this is a clever and4houghtful solution—it uses randomness to drive a6ehicle’s steering, but constrains that randomness along the path of a circle4o keep4he6ehicle’s movement from appearing jittery and, well, totally random.
The seemingly random and arbitrary nature of this solution should drive home the point I’m trying4o make: these are made-up behaviors, even if they’re inspired by real-life motion. You can just as easily concoct another elaborate scenario to compute a desired6elocity. And9ou should!

  Exercise 5.4Write the code for Reynolds’s wandering behavior. Use polar coordinates to calculate4he6ehicle’s4arget along a circular0ath.
 !!figure>
    Loading sketch ...
<v}frame></div><div class="flex items-center justify-between border-t"><div class="flex"><button class="flex items-center border-r px-2.5�0y-1.5 text-sm hover:bg-gray-�(e��)0"><svg stroke="currentColor" fill="none" stroke-width="�(N	�)�6iewBox="0 0 �(T
�) 24" aria-hidden="true" class="h-[�px] w-[15px]" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path stroke-linecap="round" stroke-linejoin="round" d="M4 2 2 2v5h.58�.356 2A8.001 8.001 0 004.582 9m0 0H9m11 �v-5h-.58�0 0a8.000�0�0�0�0�8.000�0�0�0�0�0 01-15.0�0�0�7-�.357 2H15"><y:ath></svg><span class="ml-1.5">Reset</span><uutton><button class="flex items-center border-r px-2.5�0y-1.5 text-sm hover:bg-gray-�(e��)0"><svg stroke="currentColor" fill="none" stroke-width="�(N	�)�6iewBox="0 0 �(T
�) 24" aria-hidden="true" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path stroke-linecap="round" stroke-linejoin="round" d="M10 9v6m4-6v6m7-�9p�9 9 0 �-18 0 9 9 0 01 0z"><y:ath></svg><span class="ml-1">Pause</span><uutton></div><a href="https:/u0ditor.p5js.orgw�atureofcode/sketchesy�gCpC9OV3" target="_blank" rel="noreferrer" class="flex items-center px-2.5�4ext-[0.8rem] hover:underline">Open in Web Editor<svg stroke="currentColor" fill="none" stroke-width="2" viewBox=".".". 0 24 �(T
�)" stroke-linecap="round" stroke-linejoin="round" class="ml-1�4ext-gray-500" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path d="M 1�p�c6a�(N��)�(N��)0 0 1-�(N��)2H5a�(N��)�(N��)0 0 1-�(g(�)�2�68a�(N��)�(N��)0 0 1 �(g(�)6"><y:ath><polyline points="� 2 2 21 0�0�0�0�0��(h*�) 9"></polyline><line�8�"10"�9�"14"�8�(o�)"21"�9�(o�)"3"></line><ztvg><t�><u(iv><u(iv>
    <figcaption></figcaption>
  </figure>
</div>
To give another example, say�!�?�7ant to create a steering behavior called�!�!em>stay within�7alls</em>. To define�4he desired�6elocity,�!�?’ll make a rule: if a vehicle comes within a distance <em>d<u0m> of a wall, that�6ehicle desires�4o move at maximum speed in�4he opposite direction of�4he�7all (see Figure 5.).
<figure>
  <div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:�(y>�)04px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:imageztvg+xml;charset=utf-8,%0�0�0�0�svg height=&#x�(y]�);10�0�0�0�5&#x�(y]�); width=&#x27;�(y>�)04&#x27;�8mlns=&#x�(y]�);http:]�www.w3.org^r000/svg&#x�(y]�); version=&#x27;1.1&#x�(y]�);%0�0�0�%3C/svg%0�0�0�" style="max-width:100%;display:block;position:static"b6</div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"><u(iv><picture><source type="image/webp" data-srcset=".".static_P6165440�0�0�0�0�c4fab2cbc76be605730a0�0�0�de848/05_steering_�.webp 576w,/static_P6165440�0�0�0�0�c4fab2cbc76be605730a0�0�0�0�0�0�a8a/05_steering_�.webp �52w,zttatic/96�54434fab�(h*�)9cbc76be60570�0�a3]�785f]�5_steering_10�0�0�0�0�webp 20�0�4w" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw".".><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw" decoding="async" loading="lazy" data-src="zttatic/96�54434fab�(h*�)9cbc76be60570�0�a3_cf4c]�5_steering_10�0�0�0�0�png" data-srcset="zttatic/96�54434fab�(h*�)9cbc76be60570�0�a3u5483]�5_steering_10�0�0�0�0�png 576w,/static_P6165440�0�0�0�0�c4fab2cbc76be605730a0�0�0�0�0�0�a/05_steering_�.png 1��(,/static_P6165440�0�0�0�0�c4fab2cbc76be605730a0�0�0�7cf4c/05_steering_�.png 20�0�4w" alt="Figure 5.: The desired velocity�0oints away from the wall if the vehicle gets�4oo close."b6</picture><noscript><picture><source�4ype="image|�ebp" srcSet=".".static_P6165440�0�0�0�0�c4fab2cbc76be605730a0�0�0�de848/05_steering_�.webp 576w,/static_P6165440�0�0�0�0�c4fab2cbc76be605730a0�0�0�0�0�0�a8a/05_steering_�.webp �52w,zttatic/96�54434fab�(h*�)9cbc76be60570�0�a3]�785f]�5_steering_10�0�0�0�0�webp 20�0�4w" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw".".><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw" decoding="async" loading="lazy" src=".".static_P6165440�0�0�0�0�c4fab2cbc76be605730a0�0�0�7cf4c/05_steering_�.png" srcSet="zttatic/96�54434fab�(h*�)9cbc76be60570�0�a3u5483]�5_steering_10�0�0�0�0�png 576w,/static_P6165440�0�0�0�0�c4fab2cbc76be605730a0�0�0�0�0�0�a/05_steering_�.png 1��(,/static_P6165440�0�0�0�0�c4fab2cbc76be605730a0�0�0�7cf4c/05_steering_�.png 20�0�4w" alt="Figure 5.: The desired velocity�0oints away from the wall if the vehicle gets�4oo close."b6</picture></noscript><script�4ype="module">const�4="undefined"�typeof�?�!TMLImageElement&&"loading"in�?�!TMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of�4){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script><u(iv>
  <figcaption>Figure 5.1�(T|�) The desired�6elocity points away from�4he�7all if�4he�6ehicle gets too close.</figcaption>
</figure>
If I define�4he�7alls of the space as�4he edges of a canvas and an <code>offset</code> distance equal�4o �(ry�), I can write the code for�4his with a series of�!�!code>if<uode> statements.
<div data-type="example">
 �!�!h3 id="example-50�0�0�0�stay-within-walls-steering-behavior"><a class="heading-link" href="#example-53-stay-within-walls-steering-behavior">Example 5.0�0�0� “Stay 2 2 2 2ithin Walls” Steering Behavior</a></h3>
  <figure>
   �!�!div class="not-prose clear-both my-4 overflow-hidden rounded border bg-gray-100" style="max-width:�52px"><div class="relative overflow-hidden rounded-t bg-white"><div class="absolute left-[50%]�4op-[50%] -translate-x-[50%] -translate-y-[50%] ">Loading sketch ...<u(iv><iframe class="w-full border-none�4ransition-opacity opacity-0" style="aspect-ratio:2.6666666666666665" loading="lazy" src=".".examples]�5_steeringw�oc_5_0�7p�stay_within_walls"><v}frame></div><div class="flex items-center justify-between border-t"><div class="flex"><button class="flex items-center border-r px-2.5�0y-1.5 text-sm hover:bg-gray-�(e��)0"><svg stroke="currentColor" fill="none" stroke-width="�(N	�)�6iewBox="0 0 �(T
�) 24" aria-hidden="true" class="h-[�px] w-[15px]" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path stroke-linecap="round" stroke-linejoin="round" d="M4 2 2 2v5h.58�.356 2A8.001 8.001 0 004.582 9m0 0H9m11 �v-5h-.58�0 0a8.000�0�0�0�0�8.000�0�0�0�0�0 01-15.0�0�0�7-�.357 2H15"><y:ath></svg><span class="ml-1.5">Reset</span><uutton><button class="flex items-center border-r px-2.5�0y-1.5 text-sm hover:bg-gray-�(e��)0"><svg stroke="currentColor" fill="none" stroke-width="�(N	�)�6iewBox="0 0 �(T
�) 24" aria-hidden="true" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path stroke-linecap="round" stroke-linejoin="round" d="M10 9v6m4-6v6m7-�9p�9 9 0 �-18 0 9 9 0 01 0z"><y:ath></svg><span class="ml-1">Pause</span><uutton></div><a href="https:/u0ditor.p5js.orgw�atureofcode/sketchesu�GNwVP3h7" target="_blank" rel="noreferrer" class="flex items-center px-2.5�4ext-[0.8rem] hover:underline">Open in Web Editor<svg stroke="currentColor" fill="none" stroke-width="2" viewBox=".".". 0 24 �(T
�)" stroke-linecap="round" stroke-linejoin="round" class="ml-1�4ext-gray-500" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path d="M 1�p�c6a�(N��)�(N��)0 0 1-�(N��)2H5a�(N��)�(N��)0 0 1-�(g(�)�2�68a�(N��)�(N��)0 0 1 �(g(�)6"><y:ath><polyline points="� 2 2 21 0�0�0�0�0��(h*�) 9"></polyline><line�8�"10"�9�"14"�8�(o�)"21"�9�(o�)"3"></line><ztvg><t�><u(iv><u(iv>
    <figcaption></figcaption>
  </figure>
</div>
<div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">  <span class="hljs-title function_">boundaries<ztpan>(<span class="hljs-params">offset<ztpan>) {
</code><y:re><div class="comment">The method receives an offset from the edges.</div></div><div class="pair split"><pre><code class="hljs code language-javascript">   �!�!span class="hljs-keyword">let<ztpan> desired =�!�!span class="hljs-literal">null</span>;
<uode></pre><div class="comment">Start with a null desired velocity.<y:><u(iv><u(iv><div class="offset pair split"><pre><code class="hljs code language-javascript">   �!�!span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">position<ztpan>.<span class="hljs-property">x</span> &lt; offset)"
      desired =�!�!span class="hljs-title function_">createVector</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">maxspeed</span>,�!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">velocity<ztpan>.<span class="hljs-property">y</span>);
    } <span class="hljs-keyword">else<ztpan>�!�!span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">position<ztpan>.<span class="hljs-property">x</span> &gt;�7idth - offset)"
      desired =�!�!span class="hljs-title function_">createVector</span>(-<span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">maxspeed<ztpan>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">velocity</span>.<span class="hljs-property">y<ztpan>);
   �(
   �!�!span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">position<ztpan>.<span class="hljs-property">y</span> &lt; offset)"
      desired =�!�!span class="hljs-title function_">createVector</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">velocity</span>.<span class="hljs-property">x<ztpan>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">maxspeed</span>);
    } <span class="hljs-keyword">else<ztpan>�!�!span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">position<ztpan>.<span class="hljs-property">y</span> &gt; height - offset) {
      desired = <span class="hljs-title function_">createVector<ztpan>(<span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">velocity<ztpan>.<span class="hljs-property">x</span>, -<span class="hljs-variable language_">this</span>.<span class="hljs-property">maxspeed</span>);
    }
</code><y:re><div class="comment">Make a desired velocity�4hat retains the y-direction of
the�6ehicle but�0oints the x-direction directly away from
the canvas edges.</div></div><div class="pair split"><pre><code class="hljs code language-javascript">   �!�!span class="hljs-keyword">if</span> (desired !==�!�!span class="hljs-literal">null</span>)"
      desired.<span class="hljs-title function_">normalize<ztpan>();
      desired.<span class="hljs-title function_">mult<ztpan>(<span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">maxspeed<ztpan>);
     �!�!span class="hljs-keyword">let<ztpan> steer =�05.<span class="hljs-property">Vector</span>.<span class="hljs-title function_">sub</span>(desired,�!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">velocity<ztpan>);
      steer.<span class="hljs-title function_">limit<ztpan>(<span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">maxforce<ztpan>);
     �!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-title function_">applyForce</span>(steer);
    }
</code><y:re><div class="comment">If the desired velocity is non-null, apply steering.<y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  }
</code><y:re><div class="comment"><y:><u(iv><u(iv><u(iv>
In this�!�!code>boundaries()<uode> method,�9ou might be wondering why I set the <code>desired<uode>�6elocity to�!�!code>null<uode> at the outset. Why not just set�!�!code>desired</code> to a�6ector of 0? Remember, the steering force equals the desired velocity minus�4he current�6elocity!�!�?f the vehicle desires to move at 0�6elocity,�4he resulting force�7ould slow the vehicle to a stop. By initializing�!�!code>desired</code> to�!�!code>null<uode> and checking that it’s non-null before applying�4he steering force,�4he�6ehicle�7on’t be affected at all when it’s comfortably away from the edges of�4he canvas.
<div data-type="exercise" class="callout">
  <h0�0�0�0�0�id="exercise-55"><a class="heading-link" href="#exercise-55">Exercise 5.5<t�><vv0�0�0�
 �!�!p>Come�5p with�9our own arbitrary scheme for calculating a desired�6elocity.
<u(iv>
<h�(n��)id="flow-fields"><a class="heading-link" href="#flow-fields">Flow Fields</a></h2>
Another one of Reynolds’s steering behaviors is�!�!strong>flow-field following<zttrong>. But what is a flow field? Think of�4he canvas as a grid (Figure 5.�).�!�?n each cell of�4he grid lives an arrow�0ointing in a certain direction—you know, a�6ector. As a vehicle moves around�4he canvas, it asks, “Hey, what arrow is beneath me? That’s my desired velocity!”
<figure>
  <div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:�(y>�)�(h*�)px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:imageztvg+xml;charset=utf-8,%0�0�0�0�svg height=&#x�(y]�);16&#x�(y]�); width=&#x27;�(y>�)�(h*�)&#x27;�8mlns=&#x�(y]�);http:]�www.w3.org^r000/svg&#x�(y]�); version=&#x27;1.1&#x�(y]�);%0�0�0�%3C/svg%0�0�0�" style="max-width:100%;display:block;position:static"b6</div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"><u(iv><picture><source type="image/webp" data-srcset=".".static^r81794ad86b655f8dc2�1�0p�69cca400ac�(W�)59bbd/05_steering_.webp 580w,/static^r81794ad86b655f8dc2�1�0p�69cca400ac�(W�)f9809/05_steering_.webp �61w,zttatic/�(R��)94ad86b655f8dc�(y>�)b69cca400ac2^rad]�5_steering_14.webp 20�0�0�0�0�)" sizes="(min-width: 20�0�0�0�0��x) 20�0�0�0�0��x, 100vw".".><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 20�0�0�0�0��x) 20�0�0�0�0��x, 100vw" decoding="async" loading="lazy" data-src="zttatic/�(R��)94ad86b655f8dc�(y>�)b69cca400ac2^�43t]�5_steering_14.png" data-srcset="zttatic/�(R��)94ad86b655f8dc�(y>�)b69cca400ac2u(fbf7]�5_steering_14.png 580w,/static^r81794ad86b655f8dc2�1�0p�69cca400ac�(W�)c2ac5/05_steering_.png 1�),/static^r81794ad86b655f8dc2�1�0p�69cca400ac�(W�)540�0�b/05_steering_.png 20�0�0�0�0�)" alt="Figure 5.�: A UO grid full of unit�6ectors�0ointing in random directions".".><y:icture><noscript><picture><source type="image/webp" srcSet="zttatic/�(R��)94ad86b655f8dc�(y>�)b69cca400ac2^�9bbd]�5_steering_14.webp 580w,zttatic/�(R��)94ad86b655f8dc�(y>�)b69cca400ac2u�98SD]�5_steering_14.webp 1�),/static^r81794ad86b655f8dc2�1�0p�69cca400ac�(W�)d2c/05_steering_.webp �(y>�)�(h*�)w" sizes="(min-width: �(y>�)�(h*�)px) �(y>�)�(h*�)px, 100vw"b6<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: �(y>�)�(h*�)px) �(y>�)�(h*�)px, 100vw" decoding="async" loading="lazy" src="zttatic/�(R��)94ad86b655f8dc�(y>�)b69cca400ac2^�43t]�5_steering_14.png" srcSet=".".static^r81794ad86b655f8dc2�1�0p�69cca400ac�(W�)dfbf7/05_steering_.png 580w,zttatic/�(R��)94ad86b655f8dc�(y>�)b69cca400ac2uc5]�5_steering_14.png �61w,zttatic/�(R��)94ad86b655f8dc�(y>�)b69cca400ac2^�43t]�5_steering_14.png �(y>�)�(h*�)w" alt="Figure 5.10�0�0� A 2D grid full of�5nit vectors pointing in random directions"b6</picture></noscript><script�4ype="module">const�4="undefined"�typeof�?�!TMLImageElement&&"loading"in�?�!TMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of�4){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script><u(iv>
  <figcaption>Figure 5.10�0�0� A 2D grid full of�5nit vectors pointing in random directions<u�igcaption>
<u�igure>
Reynolds’s own flow-field example involves�4he�6ehicle looking ahead�4o its future�0osition and following the vector at that spot. For simplicity’s sake, however,�!�?’ll instead have�4he�6ehicle follow the vector at its current position.<y:>
Before I can write the additional code for the <code>Vehicle<uode> class�4o follow a flow field,�!�? first need a class that describes�4he flow field. Since a flow field is essentially a grid of�6ectors, a UO array is a convenient data structure to represent it, as I can reference each element�7ith two indices,�4he cell’s column and row in the grid. If�9ou aren’t familiar�7ith UO arrays,�!�? suggest reviewing�!�!a href="https:]�thecodingtrain.com^rd-array"�4arget="_blank" rel="noopener">my�6ideo�4utorial on “UO Arrays in JavaScript”</a>.<y:>
<div class="snip-below">
 �!�!div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">class</span> <span class="hljs-title class_">FlowField<ztpan>"
<uode></pre><div class="comment"></div></div><div class="pair"><pre><code class="hljs code language-javascript"> �!�!span class="hljs-title function_">constructor<ztpan>(<span class="hljs-params"><ztpan>) {
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">    <span class="hljs-variable language_">this</span>.<span class="hljs-property">resolution</span> = ????;
</code><y:re><div class="comment">Resolution of�4he grid relative�4o the canvas�7idth and height in�0ixels<y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">    <span class="hljs-variable language_">this</span>.<span class="hljs-property">cols</span> = ????;
    <span class="hljs-variable language_">this</span>.<span class="hljs-property">rows</span> = ????;
</code><y:re><div class="comment">How many columns and how many rows are in�4he grid?</div></div><div class="pair split"><pre><code class="hljs code language-javascript">   �!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">field</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Array<ztpan>(<span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">cols<ztpan>);
   �!�!span class="hljs-keyword">for<ztpan> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0<ztpan>; i &lt;�!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">cols<ztpan>; i++)"
     �!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">field</span>[i] =�!�!span class="hljs-keyword">new<ztpan>�!�!span class="hljs-title class_">Array</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">rows</span>);
    }
</code><y:re><div class="comment">The field�7ill be a 2D array of�6ectors.<y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  }
</code><y:re><div class="comment"><y:><u(iv><u(iv><u(iv>
</div>
How should�!�? fill in�4he missing�6alues? Let’s say�!�? have a canvas�4hat’s �(e��)0 pixels�7ide by 200�0ixels high. In�4heory,�!�? could make a flow field�4hat has a vector for every single pixel, meaning 2 2 20,000 vectors total (<span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mn>200</mn><mo>×<w�o><mn>�(e��)0<w�n></mrow><annotation encoding="application6-tex">�(e��)0 \times 200</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.7278em;vertical-align:-0.083�1�3p�m"><ztpan><span class="mord">200</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">×</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><ztpan><span class="base"><span class="strut" style="height:0.6444em"><ztpan><span class="mord">200</span><ztpan></span><ztpan></span>). This isn’t a�4erribly unreasonable number, but in this context, one vector�0er�0ixel is overkill. I can easily get by with, say, one�6ector every 10�0ixels (<span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mn>20<w�n><mo>×</mo><mn>20<w�n><mo>=<w�o><mn>400<w�n></mrow><annotation encoding="application6-tex">�(e��) \times �(e��) = 2 2 200</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.7278em;vertical-align:-0.083�1�3p�m"><ztpan><span class="mord">20<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mbin">×<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan></span><span class="base"><span class="strut" style="height:0.6444em"></span><span class="mord">�(e��)</span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><span class="mrel">=<ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan></span><span class="base"><span class="strut" style="height:0.6444em"></span><span class="mord">400<ztpan></span><ztpan></span><ztpan>). My <code>resolution</code> variable sets the size of each cell in�0ixels. Then I can calculate the number of columns and rows based on the size of the canvas divided by the resolution:<y:>
<div class="overflow-visible�0t-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded�0x-�(���)5 py-1.5�4ext-xs font-semibold�               hover:bg-gray-0�0�0"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400 text-white�4ransition-opacity opacity-0">Copied!</div><svg stroke="currentColor" fill="currentColor" stroke-width="."."." viewBox=".".". 0 24 �(T
�)" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><g><path fill="none" d="M0 0h24v�(T
�)H0z"><y:ath><path d="M7 6V�9p�1 1 0 0 1 1-�a1 1 0 0 1 1 1v14a1 1 0 0 1-1 �-3v3c0 .55�(g(�).45 1-1.007 4.007A1.001 1.001 0 0 1 0�0�0�0�0��(h*�)l.000�0�0�0�c0-.55�(���)45-1 1.007-1H7zM5.000�0�0�0�0�8L5 �(e��)h10V8H5.00�I�UM9 5 5h8v10h�2�64H9v�"></path><u�><ztvg><span class="ml-1">Copy</span><uutton></div></div><div class="pair"><pre><code class="hljs code language-javascript"> �!�!span class="hljs-title function_">constructor<ztpan>(<span class="hljs-params"><ztpan>) {
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">    <span class="hljs-variable language_">this</span>.<span class="hljs-property">resolution</span> = <span class="hljs-number">10</span>;
<uode></pre><div class="comment"></div></div><div class="pair split"><pre><code class="hljs code language-javascript">   �!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">cols<ztpan> =�!�!span class="hljs-title function_">floor<ztpan>(width� �!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">resolution<ztpan>);
<uode></pre><div class="comment">The total number of columns equals�4he�7idth divided by the resolution.<y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">    <span class="hljs-variable language_">this</span>.<span class="hljs-property">rows</span> = <span class="hljs-title function_">floor</span>(height� �!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">resolution<ztpan>);
<uode></pre><div class="comment">The total number of rows equals the height divided by the resolution.<y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">    <span class="hljs-variable language_">this</span>.<span class="hljs-property">field<ztpan> =�!�!span class="hljs-keyword">new<ztpan>�!�!span class="hljs-title class_">Array</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">cols</span>);
    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let<ztpan> i =�!�!span class="hljs-number">0</span>; i�.�.�.lt; <span class="hljs-variable language_">this</span>.<span class="hljs-property">cols</span>; i++) {
      <span class="hljs-variable language_">this</span>.<span class="hljs-property">field<ztpan>[i] = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Array<ztpan>(<span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">rows<ztpan>);
   �(
<uode></pre><div class="comment">The field will be a UO array of vectors.</div></div><div class="pair"><pre><code class="hljs code language-javascript"> �(
<uode></pre><div class="comment"></div></div></div>
Now that�!�?’ve set up�4he data structure for the flow field, it’s�4ime to compute�4he flow field’s vectors.�?�!ow do I do�4hat?�?�!owever�!�?�7ant! Perhaps�!�?’d like every vector in the flow field�0ointing to�4he right (Figure 5.14).<y:>
<figure>
 �!�!div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:20�0�4px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height=&#x27;691&#x�(y]�); width=&#x27;�(y>�)04&#x27;�8mlns=&#x�(y]�);http:]�www.w3.org^r000/svg&#x�(y]�); version=&#x27;1.1&#x�(y]�);%0�0�0�%3C/svg%0�0�0�" style="max-width:100%;display:block;position:static"b6</div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"><u(iv><picture><source type="image/webp" data-srcset=".".staticu�0�0�798dd15942440�0�0�6f62e00�0�0�0�0�0�aac/740ee/05_steering_�.webp 576w,/staticu�0�0�798dd15942440�0�0�6f62e00�0�0�0�0�0�aac/43531/05_steering_�.webp �52w,zttatic/f398d1fd�94�(T
�)4356f6030�0�0�0�0aacu(9449]�5_steering_15.webp 20�0�4w" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw".".><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw" decoding="async" loading="lazy" data-src="zttatic/f398d1fd�94�(T
�)4356f6030�0�0�0�0aac_0570]�5_steering_15.png" data-srcset="zttatic/f398d1fd�94�(T
�)4356f6030�0�0�0�0aacudeb2]�5_steering_15.png 576w,/staticu�0�0�798dd15942440�0�0�6f62e00�0�0�0�0�0�aac/00b9c/05_steering_�.png 1��(,/staticu�0�0�798dd15942440�0�0�6f62e00�0�0�0�0�0�aac/80570/05_steering_�.png 20�0�4w" alt="Figure 5.: A flow field�7ith all vectors pointing�4o the right"b6</picture><noscript><picture><source�4ype="image|�ebp" srcSet=".".staticu�0�0�798dd15942440�0�0�6f62e00�0�0�0�0�0�aac/740ee/05_steering_�.webp 576w,/staticu�0�0�798dd15942440�0�0�6f62e00�0�0�0�0�0�aac/43531/05_steering_�.webp �52w,zttatic/f398d1fd�94�(T
�)4356f6030�0�0�0�0aacu(9449]�5_steering_15.webp 20�0�4w" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw".".><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw" decoding="async" loading="lazy" src=".".staticu�0�0�798dd15942440�0�0�6f62e00�0�0�0�0�0�aac/80570/05_steering_�.png" srcSet="zttatic/f398d1fd�94�(T
�)4356f6030�0�0�0�0aacudeb2]�5_steering_15.png 576w,/staticu�0�0�798dd15942440�0�0�6f62e00�0�0�0�0�0�aac/00b9c/05_steering_�.png 1��(,/staticu�0�0�798dd15942440�0�0�6f62e00�0�0�0�0�0�aac/80570/05_steering_�.png 20�0�4w" alt="Figure 5.: A flow field�7ith all vectors pointing�4o the right"b6</picture></noscript><script�4ype="module">const�4="undefined"�typeof�?�!TMLImageElement&&"loading"in�?�!TMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of�4){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script><u(iv>
  <figcaption>Figure 5.14: A flow field with all�6ectors�0ointing to�4he right</figcaption>
</figure>
For�4hat,�!�? can just set each�6ector to�!�!code>(1, 0)<uode>.<y:>
<div class="overflow-visible�0t-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded�0x-�(���)5 py-1.5�4ext-xs font-semibold�               hover:bg-gray-0�0�0"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400 text-white�4ransition-opacity opacity-0">Copied!</div><svg stroke="currentColor" fill="currentColor" stroke-width="."."." viewBox=".".". 0 24 �(T
�)" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><g><path fill="none" d="M0 0h24v�(T
�)H0z"><y:ath><path d="M7 6V�9p�1 1 0 0 1 1-�a1 1 0 0 1 1 1v14a1 1 0 0 1-1 �-3v3c0 .55�(g(�).45 1-1.007 4.007A1.001 1.001 0 0 1 0�0�0�0�0��(h*�)l.000�0�0�0�c0-.55�(���)45-1 1.007-1H7zM5.000�0�0�0�0�8L5 �(e��)h10V8H5.00�I�UM9 5 5h8v10h�2�64H9v�"></path><u�><ztvg><span class="ml-1">Copy</span><uutton></div></div><div class="pair split"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">for<ztpan> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0<ztpan>; i &lt;�!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">cols<ztpan>; i++)"
 �!�!span class="hljs-keyword">for<ztpan> (<span class="hljs-keyword">let</span> j = <span class="hljs-number">0<ztpan>; j &lt;�!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">rows<ztpan>; j++)"
<uode></pre><div class="comment">Use a nested loop to hit every column
and every row of�4he flow field.</div></div><div class="pair split"><pre><code class="hljs code language-javascript">   �!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">field</span>[i][j] = <span class="hljs-title function_">createVector<ztpan>(<span class="hljs-number">1</span>,�!�!span class="hljs-number">0</span>);
</code><y:re><div class="comment">Arbitrary decision to make each�6ector point to�4he right</div></div><div class="pair"><pre><code class="hljs code language-javascript"> �(
<uode></pre><div class="comment"></div></div><div class="pair"><pre><code class="hljs code language-javascript">}
<uode></pre><div class="comment"></div></div></div>
Maybe I’d prefer�4he�6ectors�4o point in random directions (Figure 5.15).<y:>
<figure>
 �!�!div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:20�0�4px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height=&#x27;691&#x�(y]�); width=&#x27;�(y>�)04&#x27;�8mlns=&#x�(y]�);http:]�www.w3.org^r000/svg&#x�(y]�); version=&#x27;1.1&#x�(y]�);%0�0�0�%3C/svg%0�0�0�" style="max-width:100%;display:block;position:static"b6</div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"><u(iv><picture><source type="image/webp" data-srcset=".".static]��9c410�0�0�ee0�0�0�0�0�6ebe010�0�0�a9fa79bf1/740ee/05_steering_�.webp 576w,/static]��9c410�0�0�ee0�0�0�0�0�6ebe010�0�0�a9fa79bf1/43531/05_steering_�.webp �52w,zttatic/0159c4�9ee366ebe0�9a9fa79bf1e1u(9449]�5_steering_16.webp 20�0�4w" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw".".><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw" decoding="async" loading="lazy" data-src="zttatic/0159c4�9ee366ebe0�9a9fa79bf1e1_0570]�5_steering_16.png" data-srcset="zttatic/0159c4�9ee366ebe0�9a9fa79bf1e1udeb2]�5_steering_16.png 576w,/static]��9c410�0�0�ee0�0�0�0�0�6ebe010�0�0�a9fa79bf1/00b9c/05_steering_�.png 1��(,/static]��9c410�0�0�ee0�0�0�0�0�6ebe010�0�0�a9fa79bf1/80570/05_steering_�.png 20�0�4w" alt="Figure 5.�: A flow field�7ith vectors pointing in random directions"b6</picture><noscript><picture><source�4ype="image|�ebp" srcSet=".".static]��9c410�0�0�ee0�0�0�0�0�6ebe010�0�0�a9fa79bf1/740ee/05_steering_�.webp 576w,/static]��9c410�0�0�ee0�0�0�0�0�6ebe010�0�0�a9fa79bf1/43531/05_steering_�.webp �52w,zttatic/0159c4�9ee366ebe0�9a9fa79bf1e1u(9449]�5_steering_16.webp 20�0�4w" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw".".><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw" decoding="async" loading="lazy" src=".".static]��9c410�0�0�ee0�0�0�0�0�6ebe010�0�0�a9fa79bf1/80570/05_steering_�.png" srcSet="zttatic/0159c4�9ee366ebe0�9a9fa79bf1e1udeb2]�5_steering_16.png 576w,/static]��9c410�0�0�ee0�0�0�0�0�6ebe010�0�0�a9fa79bf1/00b9c/05_steering_�.png 1��(,/static]��9c410�0�0�ee0�0�0�0�0�6ebe010�0�0�a9fa79bf1/80570/05_steering_�.png 20�0�4w" alt="Figure 5.�: A flow field�7ith vectors pointing in random directions"b6</picture></noscript><script�4ype="module">const�4="undefined"�typeof�?�!TMLImageElement&&"loading"in�?�!TMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of�4){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script><u(iv>
  <figcaption>Figure 5.15: A flow field with�6ectors�0ointing in random directions</figcaption>
</figure>
Easy. Just use the <code>p5.Vector<uode> class’s�!�!code>random2D()<uode> method to assign each�6ector:
<div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">for</span> (<span class="hljs-keyword">let<ztpan> i =�!�!span class="hljs-number">0</span>; i�.�.�.lt; <span class="hljs-variable language_">this</span>.<span class="hljs-property">cols</span>; i++) {
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let<ztpan> j =�!�!span class="hljs-number">0</span>; j�.�.�.lt; <span class="hljs-variable language_">this</span>.<span class="hljs-property">rows</span>; j++) {
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">    <span class="hljs-variable language_">this</span>.<span class="hljs-property">field<ztpan>[i][j] =�05.<span class="hljs-property">Vector</span>.<span class="hljs-title function_">random2D<ztpan>();
</code><y:re><div class="comment">A random vector</div></div><div class="pair"><pre><code class="hljs code language-javascript"> �(
<uode></pre><div class="comment"></div></div><div class="pair"><pre><code class="hljs code language-javascript">}
<uode></pre><div class="comment"></div></div></div>
<div class="avoid-break">
 �!�!p>What about�5sing 2D Perlin noise (Figure 5.16)?<y:>
  <figure>
   �!�!div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:20�0�4px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height=&#x27;691&#x�(y]�); width=&#x27;�(y>�)04&#x27;�8mlns=&#x�(y]�);http:]�www.w3.org^r000/svg&#x�(y]�); version=&#x27;1.1&#x�(y]�);%0�0�0�%3C/svg%0�0�0�" style="max-width:100%;display:block;position:static"b6</div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"><u(iv><picture><source type="image/webp" data-srcset=".".static^c9SA8ed35ec6e6878e50ee8b796/740ee/05_steering_.webp 576w,/static^c9SA8ed35ec6e6878e50ee8b796/43531/05_steering_.webp �52w,zttatic/4c908188ed0�0�0�ec6e61�(R��)78e50ee8b796u(9449]�5_steering_17.webp 20�0�4w" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw".".><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw" decoding="async" loading="lazy" data-src="zttatic/4c908188ed0�0�0�ec6e61�(R��)78e50ee8b796_0570]�5_steering_17.png" data-srcset="zttatic/4c908188ed0�0�0�ec6e61�(R��)78e50ee8b796udeb2]�5_steering_17.png 576w,/static^c9SA8ed35ec6e6878e50ee8b796/00b9c/05_steering_.png 1��(,/static^c9SA8ed35ec6e6878e50ee8b796/80570/05_steering_.png 20�0�4w" alt="Figure 5.�: A flow field calculated with Perlin noise"b6</picture><noscript><picture><source�4ype="image|�ebp" srcSet=".".static^c9SA8ed35ec6e6878e50ee8b796/740ee/05_steering_.webp 576w,/static^c9SA8ed35ec6e6878e50ee8b796/43531/05_steering_.webp �52w,zttatic/4c908188ed0�0�0�ec6e61�(R��)78e50ee8b796u(9449]�5_steering_17.webp 20�0�4w" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw".".><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw" decoding="async" loading="lazy" src=".".static^c9SA8ed35ec6e6878e50ee8b796/80570/05_steering_.png" srcSet="zttatic/4c908188ed0�0�0�ec6e61�(R��)78e50ee8b796udeb2]�5_steering_17.png 576w,/static^c9SA8ed35ec6e6878e50ee8b796/00b9c/05_steering_.png 1��(,/static^c9SA8ed35ec6e6878e50ee8b796/80570/05_steering_.png 20�0�4w" alt="Figure 5.�: A flow field calculated with Perlin noise"b6</picture></noscript><script�4ype="module">const�4="undefined"�typeof�?�!TMLImageElement&&"loading"in�?�!TMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of�4){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script><u(iv>
    <figcaption>Figure 5.16: A flow field calculated�7ith Perlin noise</figcaption>
  </figure>
</div>
Just map each noise value to an angle from�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mn>0</mn><w�row><annotation encoding="application/x-tex">0</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6444em"></span><span class="mord">0<ztpan></span><ztpan></span><ztpan>�4o <span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mn>�(v��)w�n><mi>π</mi><w�row><annotation encoding="application/x-tex">2\pi<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6444em"><ztpan><span class="mord">2</span><span class="mord mathnormal" style="margin-right:0.00�0�0�88em">π</span><ztpan></span><ztpan></span> and create a�6ector from�4hat angle:</p>
<div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let</span> xoff =�!�!span class="hljs-number">0</span>;
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">for<ztpan> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0<ztpan>; i &lt;�!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">cols<ztpan>; i++)"
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"> �!�!span class="hljs-keyword">let<ztpan>�9off = <span class="hljs-number">0<ztpan>;
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let<ztpan> j =�!�!span class="hljs-number">0</span>; j�.�.�.lt; <span class="hljs-variable language_">this</span>.<span class="hljs-property">rows</span>; j++) {
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="offset-top pair split"><pre><code class="hljs code language-javascript">   �!�!span class="hljs-keyword">let<ztpan> angle =�!�!span class="hljs-title function_">map<ztpan>(<span class="hljs-title function_">noise<ztpan>(xoff,�9off), <span class="hljs-number">0<ztpan>, <span class="hljs-number">�ztpan>, <span class="hljs-number">0<ztpan>, <span class="hljs-variable constant_">TWO_PI</span>);
</code><y:re><div class="comment"><p>2D noise<y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">    <span class="hljs-variable language_">this</span>.<span class="hljs-property">field<ztpan>[i][j] =�05.<span class="hljs-property">Vector</span>.<span class="hljs-title function_">fromAngle</span>(angle);
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">    yoff += <span class="hljs-number">0.�ztpan>;
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  }
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  xoff += <span class="hljs-number">0.�ztpan>;
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">}
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><u(iv>
<p>Now�!�?’m getting somewhere. Calculating the direction of�4he�6ectors by using Perlin noise is a great way to simulate a variety of natural effects, such as irregular gusts of�7ind or�4he meandering path of a river.�!�?’ll note, however,�4hat this noise mapping generates a field�4hat prefers flowing left. Since Perlin noise has a�?�?aussian-like distribution, angles near�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mi>π<w�i></mrow><annotation encoding="application6-tex">\pi<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.40�0�6em"><ztpan><span class="mord mathnormal" style="margin-right:0.03588em">π<ztpan></span><ztpan></span><ztpan> are more likely�4o be selected. For Figure 5.�, I used a range of <span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mn>0<w�n></mrow><annotation encoding="application6-tex">0<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6444em"><ztpan><span class="mord">0</span><ztpan></span><ztpan></span> to�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mn>4</mn><mi>π<w�i></mrow><annotation encoding="application6-tex">4\pi</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6444em"></span><span class="mord">4<ztpan><span class="mord mathnormal" style="margin-right:0.03588em">π<ztpan></span><ztpan></span><ztpan>�4o counteract�4his tendency, similarly to�4he�7ay�!�? applied�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mn>4</mn><mi>π<w�i></mrow><annotation encoding="application6-tex">4\pi</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6444em"></span><span class="mord">4<ztpan><span class="mord mathnormal" style="margin-right:0.03588em">π<ztpan></span><ztpan></span><ztpan> in <a href=".".particles#section-particles">Chapter 2 2 2</a>�4o represent a range of angles for spinning confetti particles. Ultimately, of course, there’s no one correct�7ay�4o calculate the vectors of a flow field; it’s up�4o you to decide what�9ou’re looking to simulate.
<div data-type="exercise" class="callout">
  <h0�0�0�0�0�id="exercise-56"><a class="heading-link" href="#exercise-56">Exercise 5.6<t�><vv0�0�0�
 �!�!p>Write the code�4o calculate a flow field so that�4he�6ectors swirl in circles around�4he center of�4he canvas. 
 �!�!figure>
    <div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:�(y>�)04px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:imageztvg+xml;charset=utf-8,%0�0�0�0�svg height=&#x�(y]�);691&#x27;�7idth=&#x�(y]�);20�0�4&#x�(y]�); xmlns=&#x27;http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg&#x27;�6ersion=&#x�(y]�);1.1&#x27;%3E%0�0�0�0�ztvg%3E" style="max-width:100%;display:block;position:static".".><u(iv><div aria-hidden="true" data-placeholder-image="" style="opacity:�transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source�4ype="image|�ebp" data-srcset="zttatic/8444726758u�(ry�)e1a04c�(R��)ee470�0�_40ee]�5_steering_18.webp 576w,zttatic/8444726758u�(ry�)e1a04c�(R��)ee470�0�^0�0�0�0�0�]�5_steering_18.webp 1��(,/static_4447�(���)7581c252des04c1828ee4737/d9449/05_steering_.webp �(y>�)04w" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw"b6<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw" decoding="async" loading="lazy" data-src=".".static_4447�(���)7581c252des04c1828ee4737/80570/05_steering_.png" data-srcset=".".static_4447�(���)7581c252des04c1828ee4737/cdeb�(W�)05_steering_.png 576w,zttatic/8444726758u�(ry�)e1a04c�(R��)ee470�0�]�0b9c]�5_steering_18.png �52w,zttatic/8444726758u�(ry�)e1a04c�(R��)ee470�0�_0570]�5_steering_18.png �(y>�)04w" alt="".".><y:icture><noscript><picture><source type="image/webp" srcSet="zttatic/8444726758u�(ry�)e1a04c�(R��)ee470�0�_40ee]�5_steering_18.webp 576w,zttatic/8444726758u�(ry�)e1a04c�(R��)ee470�0�^0�0�0�0�0�]�5_steering_18.webp 1��(,/static_4447�(���)7581c252des04c1828ee4737/d9449/05_steering_.webp �(y>�)04w" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw"b6<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw" decoding="async" loading="lazy" src="zttatic/8444726758u�(ry�)e1a04c�(R��)ee470�0�_0570]�5_steering_18.png" srcSet=".".static_4447�(���)7581c252des04c1828ee4737/cdeb�(W�)05_steering_.png 576w,zttatic/8444726758u�(ry�)e1a04c�(R��)ee470�0�]�0b9c]�5_steering_18.png �52w,zttatic/8444726758u�(ry�)e1a04c�(R��)ee470�0�_0570]�5_steering_18.png �(y>�)04w" alt="".".><y:icture><w�oscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const�4=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src"+"+e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const�4=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of�4)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}<ztcript></div>
   �!�!figcaption><u�igcaption>
 �!�!u�igure>
 �!�!div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold hover:bg-gray-0�0�0"><svg stroke="currentColor" fill="none" stroke-width="�(N	�)�6iewBox="0 0 �(T
�) 24" aria-hidden="true" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path stroke-linecap="round" stroke-linejoin="round" d="M15 a3 2 2 0 11-6 0 0�0�0�0�0�0�0�0�0�0�0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M�(���)458 C3.70�0�0�0�0� 5 5 5.943 5 5 5.5�(y>�) 5 1�(N��)5c4.478 0 8.�(���)8 �(���)940�0�0�0�0�9.54�(N��)7-1.�(y]�)4 4.057-5.04 7-9.54�(N��)7-4.477 0-8.�(���)8-�(���)940�0�0�0�9.54�(g(�)7z"></path><ztvg><span class="ml-1">Reveal Answer<ztpan></button><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              cursor-not-allowed text-gray-400"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400 text-white�4ransition-opacity opacity-0">Copied!</div><svg stroke="currentColor" fill="currentColor" stroke-width="."."." viewBox=".".". 0 24 �(T
�)" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><g><path fill="none" d="M0 0h24v�(T
�)H0z"><y:ath><path d="M7 6V�9p�1 1 0 0 1 1-�a1 1 0 0 1 1 1v14a1 1 0 0 1-1 �-3v3c0 .55�(g(�).45 1-1.007 4.007A1.001 1.001 0 0 1 0�0�0�0�0��(h*�)l.000�0�0�0�c0-.55�(���)45-1 1.007-1H7zM5.000�0�0�0�0�8L5 �(e��)h10V8H5.00�I�UM9 5 5h8v10h�2�64H9v�"></path><u�><ztvg><span class="ml-1">Copy</span><uutton></div></div><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let<ztpan>�8 =�!�!span class="blank">i *�7idth�  cols<ztpan>;
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let</span> y = <span class="blank">j * height�  rows<ztpan>;
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">flowfield[i][j] = <span class="hljs-title function_">createVector<ztpan>(<span class="blank">width�  2 -�8</span>,�!�!span class="blank">height X��(N��)- y<ztpan>);
<uode></pre><div class="comment"></div></div><div class="pair"><pre><code class="hljs code language-javascript">flowfield[i][j].<span class="blank">rotate(PI�  2)<ztpan>;
</code><y:re><div class="comment"><y:><u(iv><u(iv><u(iv>
</div>
Now that�!�? have a UO array storing�4he flow-field vectors,�!�? need a way for the vehicle to look up its desired�6elocity. For�4hat,�!�? simply divide�4he�6ehicle’s�8- and y-position by the resolution of the grid. This gives me the indices of�4he desired�6ector in�4he 2D array. For example, if�4he resolution is 10 and the vehicle is at (100, 50),�!�?’ll want�4o look�5p column 10 and row 5:
<div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let</span> column =�!�!span class="hljs-title function_">floor<ztpan>(<span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">position<ztpan>.<span class="hljs-property">x</span> X�<span class="hljs-variable language_">this</span>.<span class="hljs-property">resolution</span>);
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let</span> row = <span class="hljs-title function_">floor</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">position</span>.<span class="hljs-property">y<ztpan>� �!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">resolution<ztpan>);
<uode></pre><div class="comment"></div></div></div>
Because a vehicle could theoretically wander off�4he�05.js canvas, employing�4he�!�!code>constrain()</code> function helps ensure that�!�? don’t look outside the bounds of the flow-field array. Here’s a method called�!�!code>lookup()<uode>, which I’ll add�4o the <code>FlowField<uode> class, that receives a vector (the position of the vehicle) and returns�4he corresponding flow-field vector for�4hat position:<y:>
<div class="overflow-visible�0t-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded�0x-�(���)5 py-1.5�4ext-xs font-semibold�               hover:bg-gray-0�0�0"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400 text-white�4ransition-opacity opacity-0">Copied!</div><svg stroke="currentColor" fill="currentColor" stroke-width="."."." viewBox=".".". 0 24 �(T
�)" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><g><path fill="none" d="M0 0h24v�(T
�)H0z"><y:ath><path d="M7 6V�9p�1 1 0 0 1 1-�a1 1 0 0 1 1 1v14a1 1 0 0 1-1 �-3v3c0 .55�(g(�).45 1-1.007 4.007A1.001 1.001 0 0 1 0�0�0�0�0��(h*�)l.000�0�0�0�c0-.55�(���)45-1 1.007-1H7zM5.000�0�0�0�0�8L5 �(e��)h10V8H5.00�I�UM9 5 5h8v10h�2�64H9v�"></path><u�><ztvg><span class="ml-1">Copy</span><uutton></div></div><div class="pair"><pre><code class="hljs code language-javascript"> �!�!span class="hljs-title function_">lookup</span>(<span class="hljs-params">position</span>)"
<uode></pre><div class="comment"></div></div><div class="offset-top�0air split"><pre><code class="hljs code language-javascript">    <span class="hljs-keyword">let</span> column =�!�!span class="hljs-title function_">constrain<ztpan>(<span class="hljs-title function_">floor<ztpan>(position.<span class="hljs-property">x<ztpan>� �!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">resolution<ztpan>),�!�!span class="hljs-number">0</span>,�!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">cols<ztpan> -�!�!span class="hljs-number">1</span>);
    <span class="hljs-keyword">let</span> row = <span class="hljs-title function_">constrain</span>(<span class="hljs-title function_">floor</span>(position.<span class="hljs-property">y</span> X�<span class="hljs-variable language_">this</span>.<span class="hljs-property">resolution</span>), <span class="hljs-number">0<ztpan>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">rows</span> - <span class="hljs-number">�ztpan>);
<uode></pre><div class="comment">Use <code>constrain()<uode>.<y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">    <span class="hljs-keyword">return<ztpan>�!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">field</span>[column][row].<span class="hljs-title function_">copy</span>();
<uode></pre><div class="comment">Use <code>copy()</code> to ensure that a copy of�4he�6ector is returned.</div></div><div class="pair"><pre><code class="hljs code language-javascript"> �(
<uode></pre><div class="comment"></div></div></div>
Before moving on�4o the <code>Vehicle<uode> class, let’s look at the <code>FlowField<uode> class code all together, this�4ime using Perlin noise�4o compute the vector directions:
<div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">class</span> <span class="hljs-title class_">FlowField<ztpan>"
<uode></pre><div class="comment"></div></div><div class="pair"><pre><code class="hljs code language-javascript"> �!�!span class="hljs-title function_">constructor<ztpan>(<span class="hljs-params">r</span>)"
<uode></pre><div class="comment"></div></div><div class="pair"><pre><code class="hljs code language-javascript">   �!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">resolution<ztpan> = r;
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">    <span class="hljs-variable language_">this</span>.<span class="hljs-property">cols</span> = width X�<span class="hljs-variable language_">this</span>.<span class="hljs-property">resolution</span>;
   �!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">rows<ztpan> = height X�<span class="hljs-variable language_">this</span>.<span class="hljs-property">resolution</span>;
<uode></pre><div class="comment">Determine the number of columns and rows.<y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">    <span class="hljs-variable language_">this</span>.<span class="hljs-property">field<ztpan> =�!�!span class="hljs-keyword">new<ztpan>�!�!span class="hljs-title class_">Array</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">cols</span>);
    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let<ztpan> i =�!�!span class="hljs-number">0</span>; i�.�.�.lt; <span class="hljs-variable language_">this</span>.<span class="hljs-property">cols</span>; i++) {
      <span class="hljs-variable language_">this</span>.<span class="hljs-property">field<ztpan>[i] = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Array<ztpan>(<span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">rows<ztpan>);
   �(
<uode></pre><div class="comment">A flow field is a UO array of vectors. The example includes a separate function to create that array.<y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">    <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">init<ztpan>();
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  }
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">
<uode></pre><div class="comment"></div></div><div class="pair split"><pre><code class="hljs code language-javascript"> �!�!span class="hljs-title function_">init</span>(<span class="hljs-params"></span>)"
<uode></pre><div class="comment">The <code>init()</code> function fills�4he 2D array with�6ectors.<y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">    <span class="hljs-title function_">noiseSeed</span>(<span class="hljs-title function_">random<ztpan>(<span class="hljs-number">10000</span>));
   �!�!span class="hljs-keyword">let<ztpan>�8off = <span class="hljs-number">0<ztpan>;
    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let<ztpan> i =�!�!span class="hljs-number">0</span>; i�.�.�.lt; <span class="hljs-variable language_">this</span>.<span class="hljs-property">cols</span>; i++) {
      <span class="hljs-keyword">let</span> yoff =�!�!span class="hljs-number">0</span>;
     �!�!span class="hljs-keyword">for<ztpan> (<span class="hljs-keyword">let</span> j = <span class="hljs-number">0<ztpan>; j &lt;�!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">rows<ztpan>; j++)"
<uode></pre><div class="comment">Reseed noise for a new flow field each�4ime.</div></div><div class="code-wide pair split"><pre><code class="hljs code language-javascript">       �!�!span class="hljs-keyword">let<ztpan> angle =�!�!span class="hljs-title function_">map<ztpan>(<span class="hljs-title function_">noise<ztpan>(xoff,�9off), <span class="hljs-number">0<ztpan>, <span class="hljs-number">�ztpan>, <span class="hljs-number">0<ztpan>, <span class="hljs-variable constant_">TWO_PI</span>);
        <span class="hljs-variable language_">this</span>.<span class="hljs-property">field<ztpan>[i][j] =�05.<span class="hljs-property">Vector</span>.<span class="hljs-title function_">fromAngle</span>(angle);
        yoff += <span class="hljs-number">0.�ztpan>;
</code><y:re><div class="comment">In this example, use Perlin noise�4o create�4he�6ectors.<y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">      }
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">      xoff += <span class="hljs-number">0.�ztpan>;
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">    }
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  }
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">
<uode></pre><div class="comment"></div></div><div class="code-wide pair split"><pre><code class="hljs code language-javascript"> �!�!span class="hljs-title function_">lookup</span>(<span class="hljs-params">position</span>)"
   �!�!span class="hljs-keyword">let<ztpan> column = <span class="hljs-title function_">constrain</span>(<span class="hljs-title function_">floor</span>(position.<span class="hljs-property">x</span> X�<span class="hljs-variable language_">this</span>.<span class="hljs-property">resolution</span>), <span class="hljs-number">0<ztpan>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">cols</span> - <span class="hljs-number">�ztpan>);
   �!�!span class="hljs-keyword">let<ztpan> row =�!�!span class="hljs-title function_">constrain<ztpan>(<span class="hljs-title function_">floor<ztpan>(position.<span class="hljs-property">y<ztpan>� �!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">resolution<ztpan>),�!�!span class="hljs-number">0</span>,�!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">rows<ztpan> -�!�!span class="hljs-number">1</span>);
    <span class="hljs-keyword">return<ztpan>�!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">field</span>[column][row].<span class="hljs-title function_">copy</span>();
 �(
<uode></pre><div class="comment">A function�4o return a�6ector based on a�0osition<y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">}
</code><y:re><div class="comment"><y:><u(iv><u(iv><u(iv>
Now let’s assume there’s a <code>FlowField<uode> object called�!�!code>flow<uode>. Using that object’s <code>lookup()</code> method, a vehicle can then retrieve a desired velocity from the flow field and�5se Reynolds’s steering formula�4o calculate a force.
<div data-type="example">
 �!�!h3 id="example-54-flow-field-following"><a class="heading-link" href="#example-54-flow-field-following">Example 5.4: Flow-Field Following <t�><vv0�0�0�
 �!�!figure>
    <div class="not-prose clear-both my-4 overflow-hidden rounded border bg-gray-100" style="max-width:1���x"><div class="relative overflow-hidden rounded-t bg-white"><div class="absolute left-[50%] top-[50%] -translate-x-[50%] -translate-y-[50%] ">Loading sketch ...</div><iframe class="w-full border-none transition-apacity opacity-0" style="aspect-ratio:�(���)6666666666666665" loading="lazy" src="u0xamples/05_steering/noc_5_04_flow_field"><v}frame></div><div class="flex items-center justify-between border-t"><div class="flex"><button class="flex items-center border-r px-2.5�0y-1.5 text-sm hover:bg-gray-�(e��)0"><svg stroke="currentColor" fill="none" stroke-width="�(N	�)�6iewBox="0 0 �(T
�) 24" aria-hidden="true" class="h-[�px] w-[15px]" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path stroke-linecap="round" stroke-linejoin="round" d="M4 2 2 2v5h.58�.356 2A8.001 8.001 0 004.582 9m0 0H9m11 �v-5h-.58�0 0a8.000�0�0�0�0�8.000�0�0�0�0�0 01-15.0�0�0�7-�.357 2H15"><y:ath></svg><span class="ml-1.5">Reset</span><uutton><button class="flex items-center border-r px-2.5�0y-1.5 text-sm hover:bg-gray-�(e��)0"><svg stroke="currentColor" fill="none" stroke-width="�(N	�)�6iewBox="0 0 �(T
�) 24" aria-hidden="true" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path stroke-linecap="round" stroke-linejoin="round" d="M10 9v6m4-6v6m7-�9p�9 9 0 �-18 0 9 9 0 01 0z"><y:ath></svg><span class="ml-1">Pause</span><uutton></div><a href="https:/u0ditor.p5js.orgw�atureofcode/sketchesu0gribz8WV" target="_blank" rel="noreferrer" class="flex items-center px-2.5�4ext-[0.8rem] hover:underline">Open in Web Editor<svg stroke="currentColor" fill="none" stroke-width="2" viewBox=".".". 0 24 �(T
�)" stroke-linecap="round" stroke-linejoin="round" class="ml-1�4ext-gray-500" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path d="M 1�p�c6a�(N��)�(N��)0 0 1-�(N��)2H5a�(N��)�(N��)0 0 1-�(g(�)�2�68a�(N��)�(N��)0 0 1 �(g(�)6"><y:ath><polyline points="� 2 2 21 0�0�0�0�0��(h*�) 9"></polyline><line�8�"10"�9�"14"�8�(o�)"21"�9�(o�)"3"></line><ztvg><t�><u(iv><u(iv>
    <figcaption></figcaption>
  </figure>
</div>
<div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  <span class="hljs-title function_">follow<ztpan>(<span class="hljs-params">flow<ztpan>) {
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">    <span class="hljs-keyword">let</span> desired = flow.<span class="hljs-title function_">lookup</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">position</span>);
    desired.<span class="hljs-title function_">setMag<ztpan>(<span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">maxspeed<ztpan>);
<uode></pre><div class="comment">What is the vector at that spot in�4he flow field?</div></div><div class="pair split"><pre><code class="hljs code language-javascript">   �!�!span class="hljs-keyword">let<ztpan> steer =�05.<span class="hljs-property">Vector</span>.<span class="hljs-title function_">sub</span>(desired,�!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">velocity<ztpan>);
    steer.<span class="hljs-title function_">limit<ztpan>(<span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">maxforce<ztpan>);
   �!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-title function_">applyForce</span>(steer);
</code><y:re><div class="comment">Steering is desired minus�6elocity.</div></div><div class="pair"><pre><code class="hljs code language-javascript"> �(
<uode></pre><div class="comment"></div></div></div>
Notice�4hat <code>lookup()</code> is a method of�4he�!�!code>FlowField</code> class, rather than of <code>Vehicle<uode>. While you certainly could place <code>lookup()</code> within�4he�!�!code>Vehicle</code> class instead, from my�0erspective, placing it in <code>FlowField<uode> aligns best�7ith the OOP principle of encapsulation. The lookup�4ask,�7hich retrieves a�6ector based on a�0osition from�4he flow field, is inherently�4ied to�4he data of�4he�!�!code>FlowField</code> object.<y:>
You may also notice some familiar elements from�!�!a href="y:articles#section-particles">Chapter 4<t�>, such as�4he�5se of an array of vehicles. Although�4he�6ehicles here operate independently, this is a great first step�4oward thinking about�4he group behaviors�4hat I’ll introduce later in this chapter.<y:>
<div data-type="exercise" class="callout">
 �!�!h3 id="exercise-57"><a class="heading-link" href="#exercise-57">Exercise 5.7</a></h3>
  Adapt�4he flow-field example so�4he�6ectors change over�4ime. (Hint: Try using the third dimension of Perlin noise!)<y:>
</div>
<div data-type="exercise" class="callout">
  <h0�0�0�0�0�id="exercise-58"><a class="heading-link" href="#exercise-58">Exercise 5.8<t�><vv0�0�0�
 �!�!p>Can you create a flow field from an image? For example, try having�4he�6ectors�0oint from dark�4o light colors (or�6ice versa).<y:>
</div>
<h2 id="path-following"><a class="heading-link" href="#path-following">Path Following</a></h2>
The next steering behavior formulated by Reynolds�4hat I’d like�4o explore is�0ath following. But let me quickly clarify something first:�4he behavior here is path�!�!em>following</em>, not�0ath <em>finding<u0m>. Pathfinding refers�4o an algorithm�4hat solves for�4he shortest distance between�4wo�0oints, often in a maze. With�!�!strong>path following<zttrong>, a predefined route, or�0ath, already exists, and�4he�6ehicle simply tries to follow it.<y:>
In this section, I will�7ork through the algorithm, including�4he corresponding mathematics and code.�?�!owever, before doing so, it’s important to cover a key concept in vector math that�!�? skipped over in�!�!a href="|sectors#section-vectors">Chapter �t�>:�!�!strong>the dot�0roduct</strong>.�!�? haven’t needed it�9et, but it’s necessary here and likely�7ill prove quite useful for�9ou beyond just�4his example.
<h3 id="the-dot-product"><a class="heading-link" href="#the-dot-product">The Dot Product<t�><vv0�0�0�
Remember all�4he�6ector math covered in <a href=".".vectors#section-vectors">Chapter 1</a>? Add, subtract, multiply, and divide? Figure 5. has a recap of some of these operations.<y:>
<figure>
 �!�!div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:20�0�4px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height=&#x27;807&#x�(y]�); width=&#x27;�(y>�)04&#x27;�8mlns=&#x�(y]�);http:]�www.w3.org^r000/svg&#x�(y]�); version=&#x27;1.1&#x�(y]�);%0�0�0�%3C/svg%0�0�0�" style="max-width:100%;display:block;position:static"b6</div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"><u(iv><picture><source type="image/webp" data-srcset=".".staticu080c547b7e97e058871636c4b�1�3p�0de64/a1a0a/05_steering_.webp 576w,/staticu080c547b7e97e058871636c4b�1�3p�0de64/911/05_steering_.webp �52w,zttatic/e80c547b7e97e05887�0�0�0�0�0�c4b3e0de64_e3]�5_steering_19.webp 20�0�4w" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw".".><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw" decoding="async" loading="lazy" data-src="zttatic/e80c547b7e97e05887�0�0�0�0�0�c4b3e0de64]��1�4p�47]�5_steering_19.png" data-srcset="zttatic/e80c547b7e97e05887�0�0�0�0�0�c4b3e0de64]�dcf4]�5_steering_19.png 576w,/staticu080c547b7e97e058871636c4b�1�3p�0de64/0�0�0�0�0/05_steering_.png 1��(,/staticu080c547b7e97e058871636c4b�1�3p�0de64/�f47/05_steering_.png 20�0�4w" alt="Figure 5.: Adding�6ectors and multiplying a�6ector by a scalar"b6</picture><noscript><picture><source�4ype="image|�ebp" srcSet=".".staticu080c547b7e97e058871636c4b�1�3p�0de64/a1a0a/05_steering_.webp 576w,/staticu080c547b7e97e058871636c4b�1�3p�0de64/911/05_steering_.webp �52w,zttatic/e80c547b7e97e05887�0�0�0�0�0�c4b3e0de64_e3]�5_steering_19.webp 20�0�4w" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw".".><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw" decoding="async" loading="lazy" src=".".staticu080c547b7e97e058871636c4b�1�3p�0de64/�f47/05_steering_.png" srcSet="zttatic/e80c547b7e97e05887�0�0�0�0�0�c4b3e0de64]�dcf4]�5_steering_19.png 576w,/staticu080c547b7e97e058871636c4b�1�3p�0de64/0�0�0�0�0/05_steering_.png 1��(,/staticu080c547b7e97e058871636c4b�1�3p�0de64/�f47/05_steering_.png 20�0�4w" alt="Figure 5.: Adding�6ectors and multiplying a�6ector by a scalar"b6</picture></noscript><script�4ype="module">const�4="undefined"�typeof�?�!TMLImageElement&&"loading"in�?�!TMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of�4){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script><u(iv>
  <figcaption>Figure 5.17: Adding vectors and multiplying a vector by a scalar</figcaption>
</figure>
Notice that multiplication involves multiplying a�6ector by a scalar value. This makes sense;�7hen you want a�6ector to be twice as large (but facing�4he same direction), multiply it by 2. When�9ou�7ant it�4o be half the size, multiply it by 0.5. However, several other�!�!em>multiplication-like</em> operations involve a�0air of�6ectors�4hat are useful in certain scenarios—the dot product,�4he cross�0roduct, and something called�4he�?�!adamard product. For now, I’m going to focus on the dot product.
Assume�6ectors�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mover accent="true"><mi>A<w�i><mo>⃗<w�o></mover></mrow><annotation encoding="application6-tex">\vec{A}<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.966�1�3p�m"><ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal">A<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.0966em"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span> and <span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mover accent="true"><mi>B</mi><mo>⃗</mo><w�over><w�row><annotation encoding="application/x-tex">\vec{B}</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.9663em"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal" style="margin-right:0.050em">B<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.152m"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span>:
<div data-type="equation" class="math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml" display="block"><semantics><mrow><mover accent="true"><mi>A<w�i><mo>⃗<w�o></mover><mo>=<w�o><mo stretchy="false">(</mo><msub><mi>a</mi><mi>x</mi><w�sub><mo separator="true">,</mo><msub><mi>a</mi><mi>y</mi><w�sub><mo stretchy="false">)</mo><w�row><annotation encoding="application/x-tex">\vec{A}=(a_x,a_y)</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.9663em"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal">A</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.SD66em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan><span class="mrel">=</span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><ztpan><span class="base"><span class="strut" style="height:1.00�0�0�0�0�m;vertical-align:-0.�(R��)61em"></span><span class="mopen">(</span><span class="mord"><span class="mord mathnormal">a<ztpan><span class="msupsub"><span class="vlist-t�6list-t�(N	�)><span class="vlist-r"><span class="vlist" style="height:0.1514em"><span style="top:-2.55em;margin-left:0em;margin-right:0.05em"><span class="pstrut" style="height:�(���)7em"><ztpan><span class="sizing reset-size6 size0�0�0�0�0�mtight"><span class="mord mathnormal mtight">x</span><ztpan></span><ztpan><span class="vlist-s"><ztpan></span><span class="vlist-r"><span class="vlist" style="height:0.15em"><span><ztpan></span><ztpan></span><ztpan></span><span class="mpunct">,<ztpan><span class="mspace" style="margin-right:0.1667em"><ztpan><span class="mord"><span class="mord mathnormal">a</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.�em"><span style="top:-�(���)55em;margin-left:0em;margin-right:0.05em"><span class="pstrut" style="height:2.7em"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight" style="margin-right:0.03588em">y</span><ztpan></span><ztpan><span class="vlist-s"><ztpan></span><span class="vlist-r"><span class="vlist" style="height:0.286m"><span><ztpan></span><ztpan></span><ztpan></span><span class="mclose">)<ztpan></span><ztpan></span><ztpan></div>
<div data-type="equation" class="math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml" display="block"><semantics><mrow><mover accent="true"><mi>B<w�i><mo>⃗<w�o></mover><mo>=<w�o><mo stretchy="false">(</mo><msub><mi>b</mi><mi>x</mi><w�sub><mo separator="true">,</mo><msub><mi>b</mi><mi>y</mi><w�sub><mo stretchy="false">)</mo><w�row><annotation encoding="application/x-tex">\vec{B}=(b_x,b_y)</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.9663em"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal" style="margin-right:0.050em">B<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.152m"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><span class="mrel">=<ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan></span><span class="base"><span class="strut" style="height:1.0361em;vertical-align:-0.286m"><ztpan><span class="mopen">(<ztpan><span class="mord"><span class="mord mathnormal">b</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.�em"><span style="top:-�(���)55em;margin-left:0em;margin-right:0.05em"><span class="pstrut" style="height:2.7em"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight">x<ztpan></span><ztpan></span><span class="vlist-s"></span><ztpan><span class="vlist-r"><span class="vlist" style="height:0.�em"><span></span><ztpan></span><ztpan></span><ztpan><span class="mpunct">,</span><span class="mspace" style="margin-right:0.�67em"></span><span class="mord"><span class="mord mathnormal">b<ztpan><span class="msupsub"><span class="vlist-t�6list-t�(N	�)><span class="vlist-r"><span class="vlist" style="height:0.1514em"><span style="top:-2.55em;margin-left:0em;margin-right:0.05em"><span class="pstrut" style="height:�(���)7em"><ztpan><span class="sizing reset-size6 size0�0�0�0�0�mtight"><span class="mord mathnormal mtight" style="margin-right:0.00�0�0�88em">y<ztpan></span><ztpan></span><span class="vlist-s"></span><ztpan><span class="vlist-r"><span class="vlist" style="height:0.�(R��)61em"><span></span><ztpan></span><ztpan></span><ztpan><span class="mclose">)</span><ztpan></span><ztpan></span><u(iv>
<div class="avoid-break">
  The formula for�4he dot�0roduct (represented by�4he�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mo>⋅</mo><w�row><annotation encoding="application/x-tex">\cdot</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.4445em"></span><span class="mord">⋅<ztpan></span><ztpan></span><ztpan> character) is as follows:
 �!�!div data-type="equation" class="math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml" display="block"><semantics><mrow><mover accent="true"><mi>A<w�i><mo>⃗<w�o></mover><mo>⋅<w�o><mover accent="true"><mi>B</mi><mo>⃗</mo><w�over><mo>=</mo><mo stretchy="false">(<w�o><msub><mi>a<w�i><mi>x<w�i></msub><mo>×<w�o><msub><mi>b<w�i><mi>x<w�i></msub><mo stretchy="false">)<w�o><mo>+<w�o><mo stretchy="false">(</mo><msub><mi>a</mi><mi>y</mi><w�sub><mo>×</mo><msub><mi>b</mi><mi>y</mi><w�sub><mo stretchy="false">)</mo><w�row><annotation encoding="application/x-tex">\vec{A}\cdot\vec{B}=(a_x\times b_x) + (a_y\times b_y)</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.9663em"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal">A</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.SD66em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mbin">⋅</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><ztpan><span class="base"><span class="strut" style="height:0.966�1�3p�m"><ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal" style="margin-right:0.05017em">B</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.��(g	�)em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan><span class="mrel">=</span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><ztpan><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em"><ztpan><span class="mopen">(<ztpan><span class="mord"><span class="mord mathnormal">a</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.�em"><span style="top:-�(���)55em;margin-left:0em;margin-right:0.05em"><span class="pstrut" style="height:2.7em"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight">x<ztpan></span><ztpan></span><span class="vlist-s"></span><ztpan><span class="vlist-r"><span class="vlist" style="height:0.�em"><span></span><ztpan></span><ztpan></span><ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mbin">×<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan></span><span class="base"><span class="strut" style="height:m;vertical-align:-0.�(ry�)em"></span><span class="mord"><span class="mord mathnormal">b<ztpan><span class="msupsub"><span class="vlist-t�6list-t�(N	�)><span class="vlist-r"><span class="vlist" style="height:0.1514em"><span style="top:-2.55em;margin-left:0em;margin-right:0.05em"><span class="pstrut" style="height:�(���)7em"><ztpan><span class="sizing reset-size6 size0�0�0�0�0�mtight"><span class="mord mathnormal mtight">x</span><ztpan></span><ztpan><span class="vlist-s"><ztpan></span><span class="vlist-r"><span class="vlist" style="height:0.15em"><span><ztpan></span><ztpan></span><ztpan></span><span class="mclose">)<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mbin">+</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><ztpan><span class="base"><span class="strut" style="height:1.00�0�0�0�0�m;vertical-align:-0.�(R��)61em"></span><span class="mopen">(</span><span class="mord"><span class="mord mathnormal">a<ztpan><span class="msupsub"><span class="vlist-t�6list-t�(N	�)><span class="vlist-r"><span class="vlist" style="height:0.1514em"><span style="top:-2.55em;margin-left:0em;margin-right:0.05em"><span class="pstrut" style="height:�(���)7em"><ztpan><span class="sizing reset-size6 size0�0�0�0�0�mtight"><span class="mord mathnormal mtight" style="margin-right:0.00�0�0�88em">y<ztpan></span><ztpan></span><span class="vlist-s"></span><ztpan><span class="vlist-r"><span class="vlist" style="height:0.�(R��)61em"><span></span><ztpan></span><ztpan></span><ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mbin">×<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan></span><span class="base"><span class="strut" style="height:1.0361em;vertical-align:-0.286m"><ztpan><span class="mord"><span class="mord mathnormal">b</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.�em"><span style="top:-�(���)55em;margin-left:0em;margin-right:0.05em"><span class="pstrut" style="height:2.7em"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight" style="margin-right:0.03588em">y</span><ztpan></span><ztpan><span class="vlist-s"><ztpan></span><span class="vlist-r"><span class="vlist" style="height:0.286m"><span><ztpan></span><ztpan></span><ztpan></span><span class="mclose">)<ztpan></span><ztpan></span><ztpan></div>
<u(iv>
Crucially, the result of the dot product is a scalar value (a single number) and not a vector, even�4hough the inputs are�4wo�6ectors. For example, say�9ou have these two vectors:
<div data-type="equation" class="math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml" display="block"><semantics><mrow><mover accent="true"><mi>A<w�i><mo>⃗<w�o></mover><mo>=<w�o><mo stretchy="false">(</mo><mo>−</mo><mn>3</mn><mo separator="true">,<w�o><mn>5<w�n><mo stretchy="false">)</mo><w�row><annotation encoding="application/x-tex">\vec{A}=(-3,5)<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.966�1�3p�m"><ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal">A<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.0966em"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><span class="mrel">=<ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan></span><span class="base"><span class="strut" style="height:m;vertical-align:-0.�(ry�)em"></span><span class="mopen">(</span><span class="mord">−<ztpan><span class="mord">3</span><span class="mpunct">,<ztpan><span class="mspace" style="margin-right:0.1667em"><ztpan><span class="mord">5</span><span class="mclose">)<ztpan></span><ztpan></span><ztpan></div>
<div data-type="equation" class="math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml" display="block"><semantics><mrow><mover accent="true"><mi>B<w�i><mo>⃗<w�o></mover><mo>=<w�o><mo stretchy="false">(</mo><mn>10<w�n><mo separator="true">,</mo><mn>1</mn><mo stretchy="false">)<w�o></mrow><annotation encoding="application6-tex">\vec{B}=(10,1)</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.9663em"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal" style="margin-right:0.050em">B<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.152m"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><span class="mrel">=<ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan></span><span class="base"><span class="strut" style="height:m;vertical-align:-0.�(ry�)em"></span><span class="mopen">(</span><span class="mord">10</span><span class="mpunct">,<ztpan><span class="mspace" style="margin-right:0.1667em"><ztpan><span class="mord">1</span><span class="mclose">)<ztpan></span><ztpan></span><ztpan></div>
Their dot product is shown here:
<div data-type="equation" class="math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml" display="block"><semantics><mrow><mover accent="true"><mi>A<w�i><mo>⃗<w�o></mover><mo>⋅<w�o><mover accent="true"><mi>B</mi><mo>⃗</mo><w�over><mo>=</mo><mo stretchy="false">(<w�o><mo>−<w�o><mn>0�0�0�w�n><mo>×</mo><mn>10<w�n><mo stretchy="false">)</mo><mo>+</mo><mo stretchy="false">(<w�o><mn>5<w�n><mo>×</mo><mn>1</mn><mo stretchy="false">)<w�o><mo>=<w�o><mo>−<w�o><mn>0�0�</mn><mo>+</mo><mn>5</mn><mo>=</mo><mo>−</mo><mn>25<w�n></mrow><annotation encoding="application6-tex">\vec{A}\cdot\vec{B} = (-0�0�0�0�0�\times 10) + (5 \times 1) = -30 + 5 = -25<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.966�1�3p�m"><ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal">A<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.0966em"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">⋅<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan></span><span class="base"><span class="strut" style="height:0.9663em"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal" style="margin-right:0.050em">B<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.152m"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><span class="mrel">=<ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan></span><span class="base"><span class="strut" style="height:m;vertical-align:-0.�(ry�)em"></span><span class="mopen">(</span><span class="mord">−<ztpan><span class="mord">3</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">×</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><ztpan><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em"><ztpan><span class="mord">10<ztpan><span class="mclose">)</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">+<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan></span><span class="base"><span class="strut" style="height:m;vertical-align:-0.�(ry�)em"></span><span class="mopen">(</span><span class="mord">5<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mbin">×<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan></span><span class="base"><span class="strut" style="height:m;vertical-align:-0.�(ry�)em"></span><span class="mord">�ztpan><span class="mclose">)</span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><span class="mrel">=<ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan></span><span class="base"><span class="strut" style="height:0.7278em;vertical-align:-0.083�1�3p�m"><ztpan><span class="mord">−</span><span class="mord">0�0�</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">+<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan></span><span class="base"><span class="strut" style="height:0.6444em"></span><span class="mord">5<ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan><span class="mrel">=</span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><ztpan><span class="base"><span class="strut" style="height:0.7�(y]�)8em;vertical-align:-0.SA0�0�0�0�em"></span><span class="mord">−<ztpan><span class="mord">25<ztpan></span><ztpan></span><ztpan></div>
<p>In�05.js, this�4ranslates to�4he following:<y:>
<div class="overflow-visible�0t-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded�0x-�(���)5 py-1.5�4ext-xs font-semibold�               hover:bg-gray-0�0�0"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400 text-white�4ransition-opacity opacity-0">Copied!</div><svg stroke="currentColor" fill="currentColor" stroke-width="."."." viewBox=".".". 0 24 �(T
�)" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><g><path fill="none" d="M0 0h24v�(T
�)H0z"><y:ath><path d="M7 6V�9p�1 1 0 0 1 1-�a1 1 0 0 1 1 1v14a1 1 0 0 1-1 �-3v3c0 .55�(g(�).45 1-1.007 4.007A1.001 1.001 0 0 1 0�0�0�0�0��(h*�)l.000�0�0�0�c0-.55�(���)45-1 1.007-1H7zM5.000�0�0�0�0�8L5 �(e��)h10V8H5.00�I�UM9 5 5h8v10h�2�64H9v�"></path><u�><ztvg><span class="ml-1">Copy</span><uutton></div></div><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let<ztpan> a =�!�!span class="hljs-title function_">createVector</span>(-<span class="hljs-number">3</span>,�!�!span class="hljs-number">5</span>);
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let</span> b = <span class="hljs-title function_">createVector<ztpan>(<span class="hljs-number">10<ztpan>, <span class="hljs-number">�ztpan>);
<uode></pre><div class="comment"><p></p></div></div><div class="pair split"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let<ztpan> n = a.<span class="hljs-title function_">dot<ztpan>(b);
<uode></pre><div class="comment"><p>The <code>p5.Vector<uode> class includes a function�4o calculate the dot product.</p></div></div></div>
<p>If�9ou look in�4he guts of�4he�!�!code>p5.Vector</code> source code,�9ou’ll find a�0retty simple implementation of�4his <code>dot()<uode> method:</p>
<div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-title function_">dot</span>(<span class="hljs-params">v<ztpan>) {
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">  <span class="hljs-keyword">return<ztpan>�!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">x</span> * v.<span class="hljs-property">x<ztpan> +�!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">y</span> * v.<span class="hljs-property">y<ztpan> +�!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">z</span> * v.<span class="hljs-property">z<ztpan>;
</code><y:re><div class="comment"><p>For 2D vectors,�+ is 0.</p></div></div><div class="pair"><pre><code class="hljs code language-javascript">}
<uode></pre><div class="comment"><p></p></div></div></div>
<p>This formula is simple enough, but�7hy is the dot product necessary, and�7hen is it useful in coding? Well, one of�4he more common�5ses of�4he dot�0roduct is to find the angle between two vectors.�!�?n fact, the dot product can also be expressed as shown here:</p>
<div data-type="equation" class="math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml" display="block"><semantics><mrow><mover accent="true"><mi>A<w�i><mo>⃗<w�o></mover><mo>⋅<w�o><mover accent="true"><mi>B</mi><mo>⃗</mo><w�over><mo>=</mo><mi mathvariant="normal">∣<w�i><mi mathvariant="normal">∣</mi><mover accent="true"><mi>A<w�i><mo>⃗<w�o></mover><mi mathvariant="normal">∣</mi><mi mathvariant="normal">∣<w�i><mo>×</mo><mi mathvariant="normal">∣<w�i><mi mathvariant="normal">∣</mi><mover accent="true"><mi>B<w�i><mo>⃗<w�o></mover><mi mathvariant="normal">∣</mi><mi mathvariant="normal">∣<w�i><mo>×</mo><mi>cos</mi><mo>⁡</mo><mo stretchy="false">(<w�o><mi>θ</mi><mo stretchy="false">)<w�o></mrow><annotation encoding="application6-tex">\vec{A}\cdot\vec{B} = ||\vec{A}||\times||\vec{B}||\times\cos(\theta)</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.9663em"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal">A</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.SD66em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mbin">⋅</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><ztpan><span class="base"><span class="strut" style="height:0.966�1�3p�m"><ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal" style="margin-right:0.05017em">B</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.��(g	�)em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan><span class="mrel">=</span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><ztpan><span class="base"><span class="strut" style="height:1.2��1�3p�m;vertical-align:-0.�(ry�)em"></span><span class="mord">∣∣</span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal">A</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.SD66em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan><span class="mord">∣∣<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mbin">×<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan></span><span class="base"><span class="strut" style="height:1.�(h*�)63em;vertical-align:-0.25em"><ztpan><span class="mord">∣∣<ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal" style="margin-right:0.05017em">B</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.��(g	�)em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan><span class="mord">∣∣<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mbin">×<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan></span><span class="base"><span class="strut" style="height:m;vertical-align:-0.�(ry�)em"></span><span class="mop">cos</span><span class="mopen">(</span><span class="mord mathnormal" style="margin-right:0.0�(y]�)78em">θ</span><span class="mclose">)<ztpan></span><ztpan></span><ztpan></div>
In other�7ords, the dot product of�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mover accent="true"><mi>A<w�i><mo>⃗<w�o></mover></mrow><annotation encoding="application6-tex">\vec{A}<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.966�1�3p�m"><ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal">A<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.0966em"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span> and <span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mover accent="true"><mi>B</mi><mo>⃗</mo><w�over><w�row><annotation encoding="application/x-tex">\vec{B}</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.9663em"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal" style="margin-right:0.050em">B<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.152m"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span> is equal�4o the magnitude of�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mover accent="true"><mi>A<w�i><mo>⃗<w�o></mover></mrow><annotation encoding="application6-tex">\vec{A}<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.966�1�3p�m"><ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal">A<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.0966em"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span> times the magnitude of�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mover accent="true"><mi>B<w�i><mo>⃗<w�o></mover></mrow><annotation encoding="application6-tex">\vec{B}<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.966�1�3p�m"><ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal" style="margin-right:0.05017em">B</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.��(g	�)em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan>�4imes�4he cosine of�4heta (with�4heta being�4he angle between�4he�4wo�6ectors�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mover accent="true"><mi>A<w�i><mo>⃗<w�o></mover></mrow><annotation encoding="application6-tex">\vec{A}<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.966�1�3p�m"><ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal">A<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.0966em"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span> and <span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mover accent="true"><mi>B</mi><mo>⃗</mo><w�over><w�row><annotation encoding="application/x-tex">\vec{B}</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.9663em"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal" style="margin-right:0.050em">B<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.152m"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span>).<y:>
The�4wo dot-product formulas can be derived from each other�7ith <a href="https:/w�athworld.wolfram.come�otProduct.html" target="_blank" rel="noopener">trigonometry<t�>, but�!�?’m happy not�4o follow�4hat path and instead just operate on�4he following assumption:
<div data-type="equation" class="math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml" display="block"><semantics><mrow><mi mathvariant="normal">∣<w�i><mi mathvariant="normal">∣</mi><mover accent="true"><mi>A<w�i><mo>⃗<w�o></mover><mi mathvariant="normal">∣</mi><mi mathvariant="normal">∣<w�i><mo>×</mo><mi mathvariant="normal">∣<w�i><mi mathvariant="normal">∣</mi><mover accent="true"><mi>B<w�i><mo>⃗<w�o></mover><mi mathvariant="normal">∣</mi><mi mathvariant="normal">∣<w�i><mo>×</mo><mi>cos</mi><mo>⁡</mo><mo stretchy="false">(<w�o><mi>θ</mi><mo stretchy="false">)<w�o><mo>=<w�o><mo stretchy="false">(</mo><msub><mi>a</mi><mi>x</mi><w�sub><mo>×</mo><msub><mi>b</mi><mi>x</mi><w�sub><mo stretchy="false">)</mo><mo>+</mo><mo stretchy="false">(<w�o><msub><mi>a<w�i><mi>y<w�i></msub><mo>×<w�o><msub><mi>b<w�i><mi>y<w�i></msub><mo stretchy="false">)<w�o></mrow><annotation encoding="application6-tex">||\vec{A}||\times||\vec{B}||\times\cos(\theta)=(a_x\times b_x) + (a_y\times b_y)</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.�(h*�)63em;vertical-align:-0.25em"><ztpan><span class="mord">∣∣<ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal">A<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.0966em"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><span class="mord">∣∣</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">×</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><ztpan><span class="base"><span class="strut" style="height:1.2��1�3p�m;vertical-align:-0.�(ry�)em"></span><span class="mord">∣∣</span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal" style="margin-right:0.050em">B<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.152m"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><span class="mord">∣∣</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">×</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><ztpan><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em"><ztpan><span class="mop">cos<ztpan><span class="mopen">(<ztpan><span class="mord mathnormal" style="margin-right:0.02778em">θ<ztpan><span class="mclose">)</span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><span class="mrel">=<ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan></span><span class="base"><span class="strut" style="height:m;vertical-align:-0.�(ry�)em"></span><span class="mopen">(</span><span class="mord"><span class="mord mathnormal">a<ztpan><span class="msupsub"><span class="vlist-t�6list-t�(N	�)><span class="vlist-r"><span class="vlist" style="height:0.1514em"><span style="top:-2.55em;margin-left:0em;margin-right:0.05em"><span class="pstrut" style="height:�(���)7em"><ztpan><span class="sizing reset-size6 size0�0�0�0�0�mtight"><span class="mord mathnormal mtight">x</span><ztpan></span><ztpan><span class="vlist-s"><ztpan></span><span class="vlist-r"><span class="vlist" style="height:0.15em"><span><ztpan></span><ztpan></span><ztpan></span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">×</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><ztpan><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em"><ztpan><span class="mord"><span class="mord mathnormal">b</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.�em"><span style="top:-�(���)55em;margin-left:0em;margin-right:0.05em"><span class="pstrut" style="height:2.7em"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight">x<ztpan></span><ztpan></span><span class="vlist-s"></span><ztpan><span class="vlist-r"><span class="vlist" style="height:0.�em"><span></span><ztpan></span><ztpan></span><ztpan><span class="mclose">)</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">+<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan></span><span class="base"><span class="strut" style="height:1.0361em;vertical-align:-0.286m"><ztpan><span class="mopen">(<ztpan><span class="mord"><span class="mord mathnormal">a</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.�em"><span style="top:-�(���)55em;margin-left:0em;margin-right:0.05em"><span class="pstrut" style="height:2.7em"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight" style="margin-right:0.03588em">y</span><ztpan></span><ztpan><span class="vlist-s"><ztpan></span><span class="vlist-r"><span class="vlist" style="height:0.286m"><span><ztpan></span><ztpan></span><ztpan></span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">×</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><ztpan><span class="base"><span class="strut" style="height:1.00�0�0�0�0�m;vertical-align:-0.�(R��)61em"></span><span class="mord"><span class="mord mathnormal">b<ztpan><span class="msupsub"><span class="vlist-t�6list-t�(N	�)><span class="vlist-r"><span class="vlist" style="height:0.1514em"><span style="top:-2.55em;margin-left:0em;margin-right:0.05em"><span class="pstrut" style="height:�(���)7em"><ztpan><span class="sizing reset-size6 size0�0�0�0�0�mtight"><span class="mord mathnormal mtight" style="margin-right:0.00�0�0�88em">y<ztpan></span><ztpan></span><span class="vlist-s"></span><ztpan><span class="vlist-r"><span class="vlist" style="height:0.�(R��)61em"><span></span><ztpan></span><ztpan></span><ztpan><span class="mclose">)</span><ztpan></span><ztpan></span><u(iv>
<div class="avoid-break">
  This works since both sides of the equation equal�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mover accent="true"><mi>A<w�i><mo>⃗<w�o></mover><mo>⋅<w�o><mover accent="true"><mi>B</mi><mo>⃗</mo><w�over><w�row><annotation encoding="application/x-tex">\vec{A} \cdot \vec{B}</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.9663em"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal">A</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.SD66em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mbin">⋅</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><ztpan><span class="base"><span class="strut" style="height:0.966�1�3p�m"><ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal" style="margin-right:0.05017em">B</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.��(g	�)em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan>. What does that assumption do for me? Say�!�? have two vectors <span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mover accent="true"><mi>A</mi><mo>⃗</mo><w�over><w�row><annotation encoding="application/x-tex">\vec{A}</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.9663em"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal">A</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.SD66em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan> and�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mover accent="true"><mi>B<w�i><mo>⃗<w�o></mover></mrow><annotation encoding="application6-tex">\vec{B}<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.966�1�3p�m"><ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal" style="margin-right:0.05017em">B</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.��(g	�)em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan>:<y:>
  <div data-type="equation" class="math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML" display="block"><semantics><mrow><mover accent="true"><mi>A</mi><mo>⃗</mo><w�over><mo>=</mo><mo stretchy="false">(<w�o><mn>10</mn><mo separator="true">,<w�o><mn>�(v��)w�n><mo stretchy="false">)</mo><w�row><annotation encoding="application/x-tex">\vec{A}=(10,2)<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.966�1�3p�m"><ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal">A<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.0966em"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><span class="mrel">=<ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan></span><span class="base"><span class="strut" style="height:m;vertical-align:-0.�(ry�)em"></span><span class="mopen">(</span><span class="mord">10</span><span class="mpunct">,<ztpan><span class="mspace" style="margin-right:0.1667em"><ztpan><span class="mord">2</span><span class="mclose">)<ztpan></span><ztpan></span><ztpan></div>
 �!�!div data-type="equation" class="math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml" display="block"><semantics><mrow><mover accent="true"><mi>B<w�i><mo>⃗<w�o></mover><mo>=<w�o><mo stretchy="false">(</mo><mn>4</mn><mo separator="true">,<w�o><mo>−<w�o><mn>0�0�0�w�n><mo stretchy="false">)</mo><w�row><annotation encoding="application/x-tex">\vec{B}=(4,-3)<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.966�1�3p�m"><ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal" style="margin-right:0.05017em">B</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.��(g	�)em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan><span class="mrel">=</span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><ztpan><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em"><ztpan><span class="mopen">(<ztpan><span class="mord">4</span><span class="mpunct">,<ztpan><span class="mspace" style="margin-right:0.1667em"><ztpan><span class="mord">−</span><span class="mord">0�0�0�ztpan><span class="mclose">)</span><ztpan></span><ztpan></span><u(iv>
</div>
<div class="half-width-right">
  <figure>
   �!�!div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:1���x;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height=&#x27;691&#x�(y]�); width=&#x27;�52&#x27;�8mlns=&#x�(y]�);http:]�www.w3.org^r000/svg&#x�(y]�); version=&#x27;1.1&#x�(y]�);%0�0�0�%3C/svg%0�0�0�" style="max-width:100%;display:block;position:static"b6</div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"><u(iv><picture><source type="image/webp" data-srcset=".".static^�82�9p�fcadb2619af17180b54ed36cd/fd05d/05_steering_�(e��).webp �(R��)8w,/static^�82�9p�fcadb2619af17180b54ed36cd/6b826/05_steering_�(e��).webp 576w,/static^�82�9p�fcadb2619af17180b54ed36cd/d2ec4/05_steering_�(e��).webp �52w" sizes="(min-width: �52px) �52px, 100vw"b6<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: �52px) �52px, 100vw" decoding="async" loading="lazy" data-src=".".static^�82�9p�fcadb2619af17180b54ed36cd/�(ry�)5ce/05_steering_�(e��).png" data-srcset=".".static^�82�9p�fcadb2619af17180b54ed36cd/f30�0�0�0�0�c/05_steering_�(e��).png 288w,zttatic/58�(y>�)afcadb�(���)af�e80b54ed0�0�0�0�0�cd^r0dea]�5_steering_20.png 576w,/static^�82�9p�fcadb2619af17180b54ed36cd/�(ry�)5ce/05_steering_�(e��).png 1��(" alt="Figure 5.: The angle between two vectors \vec{A} and \vec{B}"b6</picture><noscript><picture><source�4ype="image|�ebp" srcSet=".".static^�82�9p�fcadb2619af17180b54ed36cd/fd05d/05_steering_�(e��).webp �(R��)8w,/static^�82�9p�fcadb2619af17180b54ed36cd/6b826/05_steering_�(e��).webp 576w,/static^�82�9p�fcadb2619af17180b54ed36cd/d2ec4/05_steering_�(e��).webp �52w" sizes="(min-width: �52px) �52px, 100vw"b6<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: �52px) �52px, 100vw" decoding="async" loading="lazy" src="zttatic/58�(y>�)afcadb�(���)af�e80b54ed0�0�0�0�0�cd^r55ce]�5_steering_20.png" srcSet=".".static^�82�9p�fcadb2619af17180b54ed36cd/f30�0�0�0�0�c/05_steering_�(e��).png 288w,zttatic/58�(y>�)afcadb�(���)af�e80b54ed0�0�0�0�0�cd^r0dea]�5_steering_20.png 576w,/static^�82�9p�fcadb2619af17180b54ed36cd/�(ry�)5ce/05_steering_�(e��).png 1��(" alt="Figure 5.: The angle between two vectors \vec{A} and \vec{B}"b6</picture></noscript><script�4ype="module">const�4="undefined"�typeof�?�!TMLImageElement&&"loading"in�?�!TMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of�4){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script><u(iv>
    <figcaption>Figure 5.18: The angle between�4wo�6ectors�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mover accent="true"><mi>A<w�i><mo>⃗<w�o></mover></mrow><annotation encoding="application6-tex">\vec{A}<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.966�1�3p�m"><ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal">A<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.0966em"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span> and <span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mover accent="true"><mi>B</mi><mo>⃗</mo><w�over><w�row><annotation encoding="application/x-tex">\vec{B}</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.9663em"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal" style="margin-right:0.050em">B<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.152m"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><u�igcaption>
 �!�!u�igure>
<u(iv>
In this scenario,�!�? know the components of the vectors but don’t know�4he angle�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mi>θ<w�i></mrow><annotation encoding="application6-tex">\theta</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6944em"></span><span class="mord mathnormal" style="margin-right:0.0�(y]�)78em">θ</span><ztpan></span><ztpan></span> between them (see Figure 5.18). Using the dot-product formula,�!�? can solve for�4he cosine of�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mi>θ<w�i></mrow><annotation encoding="application6-tex">\theta</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6944em"></span><span class="mord mathnormal" style="margin-right:0.0�(y]�)78em">θ</span><ztpan></span><ztpan></span>:
<div data-type="equation" class="math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml" display="block"><semantics><mrow><mi>cos</mi><mo>⁡</mo><mo stretchy="false">(<w�o><mi>θ</mi><mo stretchy="false">)<w�o><mo>=<w�o><mfrac><mrow><mo stretchy="false">(<w�o><msub><mi>a<w�i><mi>x<w�i></msub><mo>×<w�o><msub><mi>b<w�i><mi>x<w�i></msub><mo stretchy="false">)<w�o><mo>+<w�o><mo stretchy="false">(</mo><msub><mi>a</mi><mi>y</mi><w�sub><mo>×</mo><msub><mi>b</mi><mi>y</mi><w�sub><mo stretchy="false">)</mo><w�row><mrow><mi mathvariant="normal">∣</mi><mi mathvariant="normal">∣<w�i><mover accent="true"><mi>A</mi><mo>⃗</mo><w�over><mi mathvariant="normal">∣<w�i><mi mathvariant="normal">∣</mi><mo>×<w�o><mi mathvariant="normal">∣</mi><mi mathvariant="normal">∣<w�i><mover accent="true"><mi>B</mi><mo>⃗</mo><w�over><mi mathvariant="normal">∣<w�i><mi mathvariant="normal">∣</mi><w�row></mfrac></mrow><annotation encoding="application6-tex">\cos(\theta)=\frac{(a_x\times b_x) + (a_y\times b_y)}{||\vec{A}||\times||\vec{B}||}<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em"><ztpan><span class="mop">cos<ztpan><span class="mopen">(<ztpan><span class="mord mathnormal" style="margin-right:0.02778em">θ<ztpan><span class="mclose">)</span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><span class="mrel">=<ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan></span><span class="base"><span class="strut" style="height:�(���)530�0�0�0�em;vertical-align:-1.10�1�3p�m"><ztpan><span class="mord"><span class="mopen nulldelimiter"><ztpan><span class="mfrac"><span class="vlist-t�6list-t�(N	�)><span class="vlist-r"><span class="vlist" style="height:1.4�(y]�)em"><span style="top:-�(���)0�0�em"><span class="pstrut" style="height:3em"></span><span class="mord"><span class="mord">∣∣<ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal">A<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.0966em"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><span class="mord">∣∣</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">×</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mord">∣∣</span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal" style="margin-right:0.050em">B<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.152m"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><span class="mord">∣∣</span><ztpan></span><span style="top:-3.2�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="frac-line" style="border-bottom-width:0.04em"><ztpan></span><span style="top:-3.677em"><span class="pstrut" style="height:3em"></span><span class="mord"><span class="mopen">(<ztpan><span class="mord"><span class="mord mathnormal">a</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.�em"><span style="top:-�(���)55em;margin-left:0em;margin-right:0.05em"><span class="pstrut" style="height:2.7em"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight">x<ztpan></span><ztpan></span><span class="vlist-s"></span><ztpan><span class="vlist-r"><span class="vlist" style="height:0.�em"><span></span><ztpan></span><ztpan></span><ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mbin">×<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mord"><span class="mord mathnormal">b</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.�em"><span style="top:-�(���)55em;margin-left:0em;margin-right:0.05em"><span class="pstrut" style="height:2.7em"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight">x<ztpan></span><ztpan></span><span class="vlist-s"></span><ztpan><span class="vlist-r"><span class="vlist" style="height:0.�em"><span></span><ztpan></span><ztpan></span><ztpan><span class="mclose">)</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">+<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mopen">(<ztpan><span class="mord"><span class="mord mathnormal">a</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.�em"><span style="top:-�(���)55em;margin-left:0em;margin-right:0.05em"><span class="pstrut" style="height:2.7em"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight" style="margin-right:0.03588em">y</span><ztpan></span><ztpan><span class="vlist-s"><ztpan></span><span class="vlist-r"><span class="vlist" style="height:0.286m"><span><ztpan></span><ztpan></span><ztpan></span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">×</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mord"><span class="mord mathnormal">b<ztpan><span class="msupsub"><span class="vlist-t�6list-t�(N	�)><span class="vlist-r"><span class="vlist" style="height:0.1514em"><span style="top:-2.55em;margin-left:0em;margin-right:0.05em"><span class="pstrut" style="height:�(���)7em"><ztpan><span class="sizing reset-size6 size0�0�0�0�0�mtight"><span class="mord mathnormal mtight" style="margin-right:0.00�0�0�88em">y<ztpan></span><ztpan></span><span class="vlist-s"></span><ztpan><span class="vlist-r"><span class="vlist" style="height:0.�(R��)61em"><span></span><ztpan></span><ztpan></span><ztpan><span class="mclose">)</span><ztpan></span><ztpan><span class="vlist-s"><ztpan></span><span class="vlist-r"><span class="vlist" style="height:1.10�1�3p�m"><span><ztpan></span><ztpan></span><ztpan><span class="mclose nulldelimiter"><ztpan></span><ztpan></span><ztpan></span><u(iv>
<p>To solve for <span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mi>θ</mi><w�row><annotation encoding="application/x-tex">\theta<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6944em"><ztpan><span class="mord mathnormal" style="margin-right:0.02778em">θ<ztpan></span><ztpan></span><ztpan>, I can take�4he inverse cosine, or arccosine (<code>acos<uode> in p5.js), of�4he right side of�4he equation:</p>
<div data-type="equation" class="math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml" display="block"><semantics><mrow><mi>θ<w�i><mo>=<w�o><mi>arccos</mi><mo>⁡</mo><mrow><mo fence="true">(<w�o><mfrac><mrow><mo stretchy="false">(<w�o><msub><mi>a<w�i><mi>x<w�i></msub><mo>×<w�o><msub><mi>b<w�i><mi>x<w�i></msub><mo stretchy="false">)<w�o><mo>+<w�o><mo stretchy="false">(</mo><msub><mi>a</mi><mi>y</mi><w�sub><mo>×</mo><msub><mi>b</mi><mi>y</mi><w�sub><mo stretchy="false">)</mo><w�row><mrow><mi mathvariant="normal">∣</mi><mi mathvariant="normal">∣<w�i><mover accent="true"><mi>A</mi><mo>⃗</mo><w�over><mi mathvariant="normal">∣<w�i><mi mathvariant="normal">∣</mi><mo>×<w�o><mi mathvariant="normal">∣</mi><mi mathvariant="normal">∣<w�i><mover accent="true"><mi>B</mi><mo>⃗</mo><w�over><mi mathvariant="normal">∣<w�i><mi mathvariant="normal">∣</mi><w�row></mfrac><mo fence="true">)</mo><w�row></mrow><annotation encoding="application6-tex">\theta=\arccos\left(\frac{(a_x\times b_x) + (a_y\times b_y)}{||\vec{A}||\times||\vec{B}||}\right)<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6944em"><ztpan><span class="mord mathnormal" style="margin-right:0.02778em">θ<ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan><span class="mrel">=</span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><ztpan><span class="base"><span class="strut" style="height:3em;vertical-align:-1.25em"><ztpan><span class="mop">arccos</span><span class="mspace" style="margin-right:0.�67em"></span><span class="minner"><span class="mopen delimcenter" style="top:0em"><span class="delimsizing size4">(<ztpan></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.427em"><span style="top:-2.1437em"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord"><span class="mord">∣∣</span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal">A</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.SD66em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan><span class="mord">∣∣<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mbin">×<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mord">∣∣<ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal" style="margin-right:0.05017em">B</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.��(g	�)em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan><span class="mord">∣∣<ztpan></span><ztpan><span style="top:-0�0�0�0�0��(y>�)em"><span class="pstrut" style="height:3em"></span><span class="frac-line" style="border-bottom-width:0.04em"></span><ztpan><span style="top:-0�0�0�0�0�677em"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord"><span class="mopen">(</span><span class="mord"><span class="mord mathnormal">a<ztpan><span class="msupsub"><span class="vlist-t�6list-t�(N	�)><span class="vlist-r"><span class="vlist" style="height:0.1514em"><span style="top:-2.55em;margin-left:0em;margin-right:0.05em"><span class="pstrut" style="height:�(���)7em"><ztpan><span class="sizing reset-size6 size0�0�0�0�0�mtight"><span class="mord mathnormal mtight">x</span><ztpan></span><ztpan><span class="vlist-s"><ztpan></span><span class="vlist-r"><span class="vlist" style="height:0.15em"><span><ztpan></span><ztpan></span><ztpan></span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">×</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mord"><span class="mord mathnormal">b<ztpan><span class="msupsub"><span class="vlist-t�6list-t�(N	�)><span class="vlist-r"><span class="vlist" style="height:0.1514em"><span style="top:-2.55em;margin-left:0em;margin-right:0.05em"><span class="pstrut" style="height:�(���)7em"><ztpan><span class="sizing reset-size6 size0�0�0�0�0�mtight"><span class="mord mathnormal mtight">x</span><ztpan></span><ztpan><span class="vlist-s"><ztpan></span><span class="vlist-r"><span class="vlist" style="height:0.15em"><span><ztpan></span><ztpan></span><ztpan></span><span class="mclose">)<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mbin">+</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mopen">(</span><span class="mord"><span class="mord mathnormal">a<ztpan><span class="msupsub"><span class="vlist-t�6list-t�(N	�)><span class="vlist-r"><span class="vlist" style="height:0.1514em"><span style="top:-2.55em;margin-left:0em;margin-right:0.05em"><span class="pstrut" style="height:�(���)7em"><ztpan><span class="sizing reset-size6 size0�0�0�0�0�mtight"><span class="mord mathnormal mtight" style="margin-right:0.00�0�0�88em">y<ztpan></span><ztpan></span><span class="vlist-s"></span><ztpan><span class="vlist-r"><span class="vlist" style="height:0.�(R��)61em"><span></span><ztpan></span><ztpan></span><ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mbin">×<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mord"><span class="mord mathnormal">b</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.�em"><span style="top:-�(���)55em;margin-left:0em;margin-right:0.05em"><span class="pstrut" style="height:2.7em"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight" style="margin-right:0.03588em">y</span><ztpan></span><ztpan><span class="vlist-s"><ztpan></span><span class="vlist-r"><span class="vlist" style="height:0.286m"><span><ztpan></span><ztpan></span><ztpan></span><span class="mclose">)<ztpan></span><ztpan></span><span class="vlist-s"></span><ztpan><span class="vlist-r"><span class="vlist" style="height:1.1063em"><span></span><ztpan></span><ztpan></span><span class="mclose nulldelimiter"></span><ztpan><span class="mclose delimcenter" style="top:0em"><span class="delimsizing size4">)</span><ztpan></span><ztpan></span><ztpan></span><u(iv>
<p>I’ll do�4he math now with actual numbers:</p>
<div data-type="equation" class="math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml" display="block"><semantics><mrow><mi mathvariant="normal">∣<w�i><mi mathvariant="normal">∣</mi><mover accent="true"><mi>A<w�i><mo>⃗<w�o></mover><mi mathvariant="normal">∣</mi><mi mathvariant="normal">∣<w�i><mo>=<w�o><mn>10.2</mn><w�row><annotation encoding="application/x-tex">||\vec{A}||=10.�(v��)t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.2��1�3p�m;vertical-align:-0.�(ry�)em"></span><span class="mord">∣∣</span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal">A</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.SD66em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan><span class="mord">∣∣<ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan><span class="mrel">=</span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><ztpan><span class="base"><span class="strut" style="height:0.6444em"><ztpan><span class="mord">10.�(v��)ztpan></span><ztpan></span><ztpan></div>
<div data-type="equation" class="math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml" display="block"><semantics><mrow><mi mathvariant="normal">∣<w�i><mi mathvariant="normal">∣</mi><mover accent="true"><mi>B<w�i><mo>⃗<w�o></mover><mi mathvariant="normal">∣</mi><mi mathvariant="normal">∣<w�i><mo>=<w�o><mn>5<w�n></mrow><annotation encoding="application6-tex">||\vec{B}||=5<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.2��1�3p�m;vertical-align:-0.�(ry�)em"></span><span class="mord">∣∣</span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal" style="margin-right:0.050em">B<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.152m"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><span class="mord">∣∣</span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><span class="mrel">=<ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan></span><span class="base"><span class="strut" style="height:0.6444em"></span><span class="mord">5<ztpan></span><ztpan></span><ztpan></div>
<div data-type="equation" class="math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml" display="block"><semantics><mrow><mi>θ<w�i><mo>=<w�o><mi>arccos</mi><mo>⁡</mo><mrow><mo fence="true">(<w�o><mfrac><mrow><mo stretchy="false">(<w�o><mn>10</mn><mo>×<w�o><mn>4<w�n><mo stretchy="false">)</mo><mo>+</mo><mo stretchy="false">(<w�o><mn>�(v��)w�n><mo>×</mo><mo>−</mo><mn>3</mn><mo stretchy="false">)<w�o></mrow><mrow><mn>10.�(v��)w�n><mo>×</mo><mn>5</mn><w�row></mfrac><mo fence="true">)</mo><w�row></mrow><annotation encoding="application6-tex">\theta=\arccos\left(\frac{(10\times4)+(2\times-3)}{10.�3�2times5}\right)</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6944em"></span><span class="mord mathnormal" style="margin-right:0.0�(y]�)78em">θ</span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><span class="mrel">=<ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan></span><span class="base"><span class="strut" style="height:�(���)4em;vertical-align:-0.95em"></span><span class="mop">arccos<ztpan><span class="mspace" style="margin-right:0.1667em"><ztpan><span class="minner"><span class="mopen delimcenter" style="top:0em"><span class="delimsizing size0�0�0�>(</span><ztpan><span class="mord"><span class="mopen nulldelimiter"><ztpan><span class="mfrac"><span class="vlist-t�6list-t�(N	�)><span class="vlist-r"><span class="vlist" style="height:1.4�(y]�)em"><span style="top:-�(���)0�0�4em"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord"><span class="mord">10.2</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">×</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mord">5<ztpan></span><ztpan><span style="top:-0�0�0�0�0��(y>�)em"><span class="pstrut" style="height:3em"></span><span class="frac-line" style="border-bottom-width:0.04em"></span><ztpan><span style="top:-0�0�0�0�0�677em"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord"><span class="mopen">(</span><span class="mord">10</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">×</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mord">4<ztpan><span class="mclose">)</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">+<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mopen">(<ztpan><span class="mord">2</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">×</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mord">−<ztpan><span class="mord">3</span><span class="mclose">)<ztpan></span><ztpan></span><span class="vlist-s"></span><ztpan><span class="vlist-r"><span class="vlist" style="height:0.7693em"><span></span><ztpan></span><ztpan></span><span class="mclose nulldelimiter"></span><ztpan><span class="mclose delimcenter" style="top:0em"><span class="delimsizing size0�0�0�>)</span><ztpan></span><ztpan></span><ztpan></span><u(iv>
<div data-type="equation" class="math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML" display="block"><semantics><mrow><mi>θ</mi><mo>=</mo><mi>arccos<w�i><mo>⁡<w�o><mrow><mo fence="true">(</mo><mfrac><mn>0�0�0�0�0�</mn><mn>5�w�n></mfrac><mo fence="true">)</mo><w�row></mrow><annotation encoding="application6-tex">\theta=\arccos\left(\frac{0�0�0�0�0�}{51}\right)</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6944em"></span><span class="mord mathnormal" style="margin-right:0.0�(y]�)78em">θ</span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><span class="mrel">=<ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan></span><span class="base"><span class="strut" style="height:�(���)4em;vertical-align:-0.95em"></span><span class="mop">arccos<ztpan><span class="mspace" style="margin-right:0.1667em"><ztpan><span class="minner"><span class="mopen delimcenter" style="top:0em"><span class="delimsizing size0�0�0�>(</span><ztpan><span class="mord"><span class="mopen nulldelimiter"><ztpan><span class="mfrac"><span class="vlist-t�6list-t�(N	�)><span class="vlist-r"><span class="vlist" style="height:1.3�(h*�)4em"><span style="top:-2.3em"><span class="pstrut" style="height:3em"></span><span class="mord"><span class="mord">5�ztpan></span><ztpan><span style="top:-0�0�0�0�0��(y>�)em"><span class="pstrut" style="height:3em"></span><span class="frac-line" style="border-bottom-width:0.04em"></span><ztpan><span style="top:-0�0�0�0�0�677em"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord"><span class="mord">0�0�0�0�0�</span><ztpan></span><ztpan><span class="vlist-s"><ztpan></span><span class="vlist-r"><span class="vlist" style="height:0.686em"><span></span><ztpan></span><ztpan></span><span class="mclose nulldelimiter"></span><ztpan><span class="mclose delimcenter" style="top:0em"><span class="delimsizing size0�0�0�>)</span><ztpan></span><ztpan></span><ztpan></span><u(iv>
<div data-type="equation" class="math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML" display="block"><semantics><mrow><mi>θ</mi><mo>≈</mo><mn>4</mn><msup><mn>8</mn><mo>∘</mo><w�sup></mrow><annotation encoding="application6-tex">\theta \approx48^\circ</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6944em"></span><span class="mord mathnormal" style="margin-right:0.0�(y]�)78em">θ</span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><span class="mrel">≈<ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan></span><span class="base"><span class="strut" style="height:0.7241em"></span><span class="mord">4<ztpan><span class="mord"><span class="mord">8<ztpan><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.7241em"><span style="top:-0�0�0�0�0���1�3p�m;margin-right:0.05em"><span class="pstrut" style="height:�(���)7em"><ztpan><span class="sizing reset-size6 size0�0�0�0�0�mtight"><span class="mbin mtight">∘<ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><u(iv>
Here’s the p5.js version:
<div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let</span> a = <span class="hljs-title function_">createVector<ztpan>(<span class="hljs-number">10<ztpan>, <span class="hljs-number">�(v��)ztpan>);
<uode></pre><div class="comment"></div></div><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let<ztpan> b =�!�!span class="hljs-title function_">createVector</span>(<span class="hljs-number">4<ztpan>, -<span class="hljs-number">3</span>);
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let</span> angle = <span class="hljs-title function_">acos<ztpan>(a.<span class="hljs-title function_">dot<ztpan>(b) X�(a.<span class="hljs-title function_">mag<ztpan>() * b.<span class="hljs-title function_">mag<ztpan>()));
</code><y:re><div class="comment"><y:><u(iv><u(iv><u(iv>
Turns out, if�9ou again dig into the guts of the p5.js source code,�9ou’ll find a method called�!�!code>angleBetween<uode>�4hat implements�4his exact algorithm.
<div class="avoid-break">
 �!�!div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  <span class="hljs-title function_">angleBetween<ztpan>(<span class="hljs-params">v</span>)"
<uode></pre><div class="comment"></div></div><div class="pair"><pre><code class="hljs code language-javascript">   �!�!span class="hljs-keyword">let<ztpan> dot =�!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-title function_">dot<ztpan>(v);
<uode></pre><div class="comment"></div></div><div class="pair"><pre><code class="hljs code language-javascript">   �!�!span class="hljs-keyword">let<ztpan> angle =�!�!span class="hljs-title class_">Math<ztpan>.<span class="hljs-title function_">acos</span>(dot X�(<span class="hljs-variable language_">this<ztpan>.<span class="hljs-title function_">mag<ztpan>() *�6.<span class="hljs-title function_">mag<ztpan>()));
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">    <span class="hljs-keyword">return<ztpan> angle;
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  }
</code><y:re><div class="comment"><y:><u(iv><u(iv><u(iv>
</div>
Sure, I could have�4old you about this�!�!code>angleBetween()<uode> method to begin�7ith, but�5nderstanding�4he dot�0roduct in detail�7ill better�0repare�9ou for�4he�5pcoming path-following examples and help�9ou see how�4he dot�0roduct fits into a concept called <em>scalar�0rojection<u0m>.<y:>
<div data-type="exercise" class="callout">
 �!�!h3 id="exercise-59"><a class="heading-link" href="#exercise-59">Exercise 5.9</a></h3>
  Create a sketch�4hat shows the angle between two vectors.
 �!�!figure>
    <div class="not-prose clear-both my-4 overflow-hidden rounded border bg-gray-100" style="max-width:1���x"><div class="relative overflow-hidden rounded-t bg-white"><div class="absolute left-[50%] top-[50%] -translate-x-[50%] -translate-y-[50%] ">Loading sketch ...</div><iframe class="w-full border-none transition-apacity opacity-0" style="aspect-ratio:�(���)6666666666666665" loading="lazy" src="u0xamples/05_steering/exercise_5_9_angle_between">Open in 2 2 2 2eb Editor $\vec{A}$ 

  If4wo6ectors are5nit vectors,4heir dot0roduct is equal to4he cosine of4he angle between4hem.!?n other words,!!span data-type="equation" class="math-inline"> $\vec{A}\cdot\vec{B}=\cos(\theta)$ 

Now4hat I’ve covered4he fundamentals of4he dot0roduct, I can return4o Reynolds’s0ath-following algorithm.
Simple Path Following
)04w" alt="Figure 5.19: Path following requires a0ath, a6ehicle, a future0osition, a normal to4he0ath, and a4arget.".".>const4="undefined"�typeof?!TMLImageElement&&"loading"in?!TMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of4){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}
  Figure 5.2� A0ath with a start, end, and radius

I’m also going4o consider a0ath to have a radius.!?f the path is a road, the radius is the road’s7idth. With a smaller radius,6ehicles have4o follow4he0ath more closely; a wider radius allows them4o stray a bit more4o either side of4he0ath.
Now I’ll0ut4his into a class.

  Example 5.5: Creating a Path Object
  
   !!div class="not-prose clear-both my-4 overflow-hidden rounded border bg-gray-100" style="max-width:52px">Loading sketch ...<v}frame></div><div class="flex items-center justify-between border-t"><div class="flex"><button class="flex items-center border-r px-2.5�0y-1.5 text-sm hover:bg-gray-�(e��)0"><svg stroke="currentColor" fill="none" stroke-width="�(N	�)�6iewBox="0 0 �(T
�) 24" aria-hidden="true" class="h-[�px] w-[15px]" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path stroke-linecap="round" stroke-linejoin="round" d="M4 2 2 2v5h.58�.356 2A8.001 8.001 0 004.582 9m0 0H9m11 �v-5h-.58�0 0a8.000�0�0�0�0�8.000�0�0�0�0�0 01-15.0�0�0�7-�.357 2H15"><y:ath></svg><span class="ml-1.5">Reset</span><uutton><button class="flex items-center border-r px-2.5�0y-1.5 text-sm hover:bg-gray-�(e��)0"><svg stroke="currentColor" fill="none" stroke-width="�(N	�)�6iewBox="0 0 �(T
�) 24" aria-hidden="true" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path stroke-linecap="round" stroke-linejoin="round" d="M10 9v6m4-6v6m7-�9p�9 9 0 �-18 0 9 9 0 01 0z"><y:ath></svg><span class="ml-1">Pause</span><uutton></div><a href="https:/u0ditor.p5js.orgw�atureofcode/sketches_SALyBTym" target="_blank" rel="noreferrer" class="flex items-center px-2.5�4ext-[0.8rem] hover:underline">Open in Web Editor<svg stroke="currentColor" fill="none" stroke-width="2" viewBox=".".". 0 24 �(T
�)" stroke-linecap="round" stroke-linejoin="round" class="ml-1�4ext-gray-500" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path d="M 1�p�c6a�(N��)�(N��)0 0 1-�(N��)2H5a�(N��)�(N��)0 0 1-�(g(�)�2�68a�(N��)�(N��)0 0 1 �(g(�)6"><y:ath><polyline points="� 2 2 21 0�0�0�0�0��(h*�) 9"></polyline><line�8�"10"�9�"14"�8�(o�)"21"�9�(o�)"3"></line><ztvg><t�><u(iv><u(iv>
    <figcaption></figcaption>
  </figure>
</div>
<div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">class</span> <span class="hljs-title class_">Path</span> {
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  <span class="hljs-title function_">constructor</span>(<span class="hljs-params"></span>)"
<uode></pre><div class="comment"></div></div><div class="pair split"><pre><code class="hljs code language-javascript">   �!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">radius<ztpan> =�!�!span class="hljs-number">20<ztpan>;
</code><y:re><div class="comment">A�0ath has a radius, indicating its�7idth.<y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">    <span class="hljs-variable language_">this</span>.<span class="hljs-property">start<ztpan> =�!�!span class="hljs-title function_">createVector</span>(<span class="hljs-number">0<ztpan>, height� �!�!span class="hljs-number">3</span>);
    <span class="hljs-variable language_">this</span>.<span class="hljs-property">end<ztpan> =�!�!span class="hljs-title function_">createVector</span>(width, (<span class="hljs-number">�(v��)ztpan> * height)� �!�!span class="hljs-number">3</span>);
</code><y:re><div class="comment">A�0ath has only�4wo�0oints, start and end.<y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  }
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">
<uode></pre><div class="comment"></div></div><div class="pair split"><pre><code class="hljs code language-javascript"> �!�!span class="hljs-title function_">show</span>(<span class="hljs-params"></span>)"
<uode></pre><div class="comment">Display the path.<y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">    <span class="hljs-title function_">strokeWeight<ztpan>(<span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">radius<ztpan> *�!�!span class="hljs-number">2</span>);
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">    <span class="hljs-title function_">stroke<ztpan>(<span class="hljs-number">0</span>,�!�!span class="hljs-number">100</span>);
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">    <span class="hljs-title function_">line<ztpan>(<span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">start</span>.<span class="hljs-property">x<ztpan>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">start<ztpan>.<span class="hljs-property">y</span>,�!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">end</span>.<span class="hljs-property">x<ztpan>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">end<ztpan>.<span class="hljs-property">y</span>);
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">    <span class="hljs-title function_">strokeWeight<ztpan>(<span class="hljs-number">1</span>);
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">    <span class="hljs-title function_">stroke<ztpan>(<span class="hljs-number">0</span>);
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">    <span class="hljs-title function_">line<ztpan>(<span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">start</span>.<span class="hljs-property">x<ztpan>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">start<ztpan>.<span class="hljs-property">y</span>,�!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">end</span>.<span class="hljs-property">x<ztpan>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">end<ztpan>.<span class="hljs-property">y</span>);
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  }
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">}
</code><y:re><div class="comment"><y:><u(iv><u(iv><u(iv>
Now, assume�4hat a vehicle is outside�4he�0ath’s radius, moving�7ith a velocity, as in Figure 5.2�(���)
<figure>
  <div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:�(y>�)04px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:imageztvg+xml;charset=utf-8,%0�0�0�0�svg height=&#x�(y]�);772&#x27;�7idth=&#x�(y]�);20�0�4&#x�(y]�); xmlns=&#x27;http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg&#x27;�6ersion=&#x�(y]�);1.1&#x27;%3E%0�0�0�0�ztvg%3E" style="max-width:100%;display:block;position:static".".><u(iv><div aria-hidden="true" data-placeholder-image="" style="opacity:�transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source�4ype="image|�ebp" data-srcset="zttatic/�(R��)5751�1�2p�b6sea7d�1�1p�44af�1�2p�f95ba39du0fc9d]�5_steering_24.webp 576w,zttatic/�(R��)5751�1�2p�b6sea7d�1�1p�44af�1�2p�f95ba39dubc86]�5_steering_24.webp 1��(,/static^r8575�db61aea7d3c44af3df95ba0�0�0�d/8f000/05_steering_�(T
�).webp �(y>�)04w" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw"b6<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw" decoding="async" loading="lazy" data-src=".".static^r8575�db61aea7d3c44af3df95ba0�0�0�d/8452f/05_steering_�(T
�).png" data-srcset=".".static^r8575�db61aea7d3c44af3df95ba0�0�0�d/848a6/05_steering_�(T
�).png 576w,zttatic/�(R��)5751�1�2p�b6sea7d�1�1p�44af�1�2p�f95ba39d_P43]�5_steering_24.png �52w,zttatic/�(R��)5751�1�2p�b6sea7d�1�1p�44af�1�2p�f95ba39d_45	]�5_steering_24.png �(y>�)04w" alt="Figure 5.2�(T|�) Adding a vehicle moving off and away from�4he�0ath"b6</picture><noscript><picture><source�4ype="image|�ebp" srcSet=".".static^r8575�db61aea7d3c44af3df95ba0�0�0�d/efc9d/05_steering_�(T
�).webp 576w,/static^r8575�db61aea7d3c44af3df95ba0�0�0�d/bbc86/05_steering_�(T
�).webp �52w,zttatic/�(R��)5751�1�2p�b6sea7d�1�1p�44af�1�2p�f95ba39d_f000]�5_steering_24.webp 20�0�4w" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw".".><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw" decoding="async" loading="lazy" src=".".static^r8575�db61aea7d3c44af3df95ba0�0�0�d/8452f/05_steering_�(T
�).png" srcSet="zttatic/�(R��)5751�1�2p�b6sea7d�1�1p�44af�1�2p�f95ba39d_48a6]�5_steering_24.png 576w,/static^r8575�db61aea7d3c44af3df95ba0�0�0�d/940�0�f/05_steering_�(T
�).png 1��(,/static^r8575�db61aea7d3c44af3df95ba0�0�0�d/8452f/05_steering_�(T
�).png 20�0�4w" alt="Figure 5.�(g	�): Adding a�6ehicle moving off and away from the path".".><y:icture><w�oscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const�4=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src"+"+e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const�4=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of�4)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}<ztcript></div>
 �!�!figcaption>Figure 5.�(g	�): Adding a�6ehicle moving off and away from the path</figcaption>
</figure>
The first step is�4o predict (assuming a constant�6elocity)�7here�4hat vehicle will be in�4he future:
<div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let</span> future =�6el.<span class="hljs-title function_">copy</span>();
<uode></pre><div class="comment">Start by making a copy of the velocity.<y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">future.<span class="hljs-title function_">setMag</span>(<span class="hljs-number">�(ry�)</span>);
</code><y:re><div class="comment">Look �(ry�)�0ixels ahead by setting�4he magnitude.<y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">future.<span class="hljs-title function_">add<ztpan>(<span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">position<ztpan>);
<uode></pre><div class="comment">Add the vector�4o the position�4o find�4he future position.<y:><u(iv><u(iv><u(iv>
Once I have�4hat position, it’s�4ime to determine�4he distance from�4hat predicted position�4o the path. If it’s very far away,�4he�6ehicle has strayed from the path and needs�4o steer back�4oward it. If�4he�6ehicle is on�4he�0ath, all is well and�4he�6ehicle can continue on its�7ay.<y:>
Essentially, I need�4o calculate the distance between a�0oint (the future�0osition) and a line (the�0ath). That distance is defined as the length of the <strong>normal</strong>, a�6ector that extends from the point to�4he line and is�0erpendicular�4o the line (Figure 5.20�0�0�.<y:>
<figure>
 �!�!div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:20�0�4px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height=&#x27;860�0�#x�(y]�); width=&#x27;�(y>�)04&#x27;�8mlns=&#x�(y]�);http:]�www.w3.org^r000/svg&#x�(y]�); version=&#x27;1.1&#x�(y]�);%0�0�0�%3C/svg%0�0�0�" style="max-width:100%;display:block;position:static"b6</div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"><u(iv><picture><source type="image/webp" data-srcset=".".static^�8d90d651615064924f82980�0�0�0�f46/u�(N��)6/05_steering_�(ry�).webp 576w,/static^�8d90d651615064924f82980�0�0�0�f46/56688/05_steering_�(ry�).webp �52w,zttatic/58d90d65��049�(T
�)f178�(N��)83�0f46u(0cf]�5_steering_25.webp 20�0�4w" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw".".><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw" decoding="async" loading="lazy" data-src="zttatic/58d90d65��049�(T
�)f178�(N��)83�0f46_0�0�0�0�0�92]�5_steering_25.png" data-srcset="zttatic/58d90d65��049�(T
�)f178�(N��)83�0f46^�9672]�5_steering_25.png 576w,/static^�8d90d651615064924f82980�0�0�0�f46/�(g	�)970�0�0�05_steering_�(ry�).png 1��(,/static^�8d90d651615064924f82980�0�0�0�f46/8349�(W�)05_steering_�(ry�).png 20�0�4w" alt="Figure 5.�(y>�): The normal is a vector�4hat extends from�4he future position�4o the path and is perpendicular to�4he�0ath.".".><y:icture><noscript><picture><source type="image/webp" srcSet="zttatic/58d90d65��049�(T
�)f178�(N��)83�0f46]�c296]�5_steering_25.webp 576w,zttatic/58d90d65��049�(T
�)f178�(N��)83�0f46^�6688]�5_steering_25.webp 1��(,/static^�8d90d651615064924f82980�0�0�0�f46/d06cf/05_steering_�(ry�).webp �(y>�)04w" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw"b6<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw" decoding="async" loading="lazy" src="zttatic/58d90d65��049�(T
�)f178�(N��)83�0f46_0�0�0�0�0�92]�5_steering_25.png" srcSet=".".static^�8d90d651615064924f82980�0�0�0�f46/5967�(W�)05_steering_�(ry�).png 576w,zttatic/58d90d65��049�(T
�)f178�(N��)83�0f46^r�(N��)73]�5_steering_25.png �52w,zttatic/58d90d65��049�(T
�)f178�(N��)83�0f46_0�0�0�0�0�92]�5_steering_25.png �(y>�)04w" alt="Figure 5.20�0�0� The normal is a�6ector that extends from the future�0osition to�4he�0ath and is�0erpendicular�4o the path."b6</picture></noscript><script�4ype="module">const�4="undefined"�typeof�?�!TMLImageElement&&"loading"in�?�!TMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of�4){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script><u(iv>
  <figcaption>Figure 5.20�0�0� The normal is a�6ector that extends from the future�0osition to�4he�0ath and is�0erpendicular�4o the path.<u�igcaption>
<u�igure>
How do�!�? find the normal? First,�!�? can define a vector (call it <span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mover accent="true"><mi>A</mi><mo>⃗</mo><w�over><w�row><annotation encoding="application/x-tex">\vec{A}</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.9663em"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal">A</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.SD66em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan>) that extends from the path’s starting point to�4he�6ehicle’s future position:<y:>
<div class="overflow-visible�0t-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded�0x-�(���)5 py-1.5�4ext-xs font-semibold�               hover:bg-gray-0�0�0"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400 text-white�4ransition-opacity opacity-0">Copied!</div><svg stroke="currentColor" fill="currentColor" stroke-width="."."." viewBox=".".". 0 24 �(T
�)" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><g><path fill="none" d="M0 0h24v�(T
�)H0z"><y:ath><path d="M7 6V�9p�1 1 0 0 1 1-�a1 1 0 0 1 1 1v14a1 1 0 0 1-1 �-3v3c0 .55�(g(�).45 1-1.007 4.007A1.001 1.001 0 0 1 0�0�0�0�0��(h*�)l.000�0�0�0�c0-.55�(���)45-1 1.007-1H7zM5.000�0�0�0�0�8L5 �(e��)h10V8H5.00�I�UM9 5 5h8v10h�2�64H9v�"></path><u�><ztvg><span class="ml-1">Copy</span><uutton></div></div><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let<ztpan> a =�05.<span class="hljs-property">Vector</span>.<span class="hljs-title function_">sub</span>(future, path.<span class="hljs-property">start</span>);
</code><y:re><div class="comment"><y:><u(iv><u(iv><u(iv>
Next,�!�? can define a vector (call it <span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mover accent="true"><mi>B</mi><mo>⃗</mo><w�over><w�row><annotation encoding="application/x-tex">\vec{B}</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.9663em"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal" style="margin-right:0.050em">B<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.152m"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span>)�4hat points from the start of�4he�0ath to�4he end:<y:>
<div class="overflow-visible�0t-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded�0x-�(���)5 py-1.5�4ext-xs font-semibold�               hover:bg-gray-0�0�0"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400 text-white�4ransition-opacity opacity-0">Copied!</div><svg stroke="currentColor" fill="currentColor" stroke-width="."."." viewBox=".".". 0 24 �(T
�)" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><g><path fill="none" d="M0 0h24v�(T
�)H0z"><y:ath><path d="M7 6V�9p�1 1 0 0 1 1-�a1 1 0 0 1 1 1v14a1 1 0 0 1-1 �-3v3c0 .55�(g(�).45 1-1.007 4.007A1.001 1.001 0 0 1 0�0�0�0�0��(h*�)l.000�0�0�0�c0-.55�(���)45-1 1.007-1H7zM5.000�0�0�0�0�8L5 �(e��)h10V8H5.00�I�UM9 5 5h8v10h�2�64H9v�"></path><u�><ztvg><span class="ml-1">Copy</span><uutton></div></div><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let<ztpan> b =�05.<span class="hljs-property">Vector</span>.<span class="hljs-title function_">sub</span>(path.<span class="hljs-property">end</span>,�0ath.<span class="hljs-property">start<ztpan>);
<uode></pre><div class="comment"></div></div></div>
Now,�7ith a little�4rigonometry (the�!�!em>cah</em> in�!�!em>sohcahtoa</em>), I can calculate the distance from the path’s start�4o the normal�0oint. As shown in Figure 5.24, it’s <span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mi mathvariant="normal">∣</mi><mi mathvariant="normal">∣<w�i><mover accent="true"><mi>A</mi><mo>⃗</mo><w�over><mi mathvariant="normal">∣<w�i><mi mathvariant="normal">∣</mi><mo>×<w�o><mi>cos<w�i><mo>⁡<w�o><mo stretchy="false">(</mo><mi>θ<w�i><mo stretchy="false">)</mo><w�row><annotation encoding="application/x-tex">||\vec{A}|| \times \cos(\theta)</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.�(h*�)63em;vertical-align:-0.25em"><ztpan><span class="mord">∣∣<ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal">A<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.0966em"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><span class="mord">∣∣</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">×</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><ztpan><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em"><ztpan><span class="mop">cos<ztpan><span class="mopen">(<ztpan><span class="mord mathnormal" style="margin-right:0.02778em">θ<ztpan><span class="mclose">)</span><ztpan></span><ztpan></span>.
<figure>
  <div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:�(y>�)04px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:imageztvg+xml;charset=utf-8,%0�0�0�0�svg height=&#x�(y]�);872&#x27;�7idth=&#x�(y]�);20�0�4&#x�(y]�); xmlns=&#x27;http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg&#x27;�6ersion=&#x�(y]�);1.1&#x27;%3E%0�0�0�0�ztvg%3E" style="max-width:100%;display:block;position:static".".><u(iv><div aria-hidden="true" data-placeholder-image="" style="opacity:�transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source�4ype="image|�ebp" data-srcset="zttatic/fe7279d0�6b�(���)4194d1cbab�4760e2u78cf]�5_steering_26.webp 576w,zttatic/fe7279d0�6b�(���)4194d1cbab�4760e2^r�9p�50]�5_steering_26.webp 1��(,/staticu�e7�(y]�)9d0156b2644dubab164760e�(W�)5edf0/05_steering_�(���).webp �(y>�)04w" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw"b6<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw" decoding="async" loading="lazy" data-src=".".staticu�e7�(y]�)9d0156b2644dubab164760e�(W�)5cSA�(W�)05_steering_�(���).png" data-srcset=".".staticu�e7�(y]�)9d0156b2644dubab164760e�(W�)7c9af/05_steering_�(���).png 576w,zttatic/fe7279d0�6b�(���)4194d1cbab�4760e2u7eSD]�5_steering_26.png �52w,zttatic/fe7279d0�6b�(���)4194d1cbab�4760e2^�c082]�5_steering_26.png �(y>�)04w" alt="Figure 5.24: The distance from�4he start of the path�4o the normal is ||\vec{A}|| \times \cos(\theta).".".><y:icture><noscript><picture><source type="image/webp" srcSet="zttatic/fe7279d0�6b�(���)4194d1cbab�4760e2u78cf]�5_steering_26.webp 576w,zttatic/fe7279d0�6b�(���)4194d1cbab�4760e2^r�9p�50]�5_steering_26.webp 1��(,/staticu�e7�(y]�)9d0156b2644dubab164760e�(W�)5edf0/05_steering_�(���).webp �(y>�)04w" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw"b6<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw" decoding="async" loading="lazy" src="zttatic/fe7279d0�6b�(���)4194d1cbab�4760e2^�c082]�5_steering_26.png" srcSet=".".staticu�e7�(y]�)9d0156b2644dubab164760e�(W�)7c9af/05_steering_�(���).png 576w,zttatic/fe7279d0�6b�(���)4194d1cbab�4760e2u7eSD]�5_steering_26.png �52w,zttatic/fe7279d0�6b�(���)4194d1cbab�4760e2^�c082]�5_steering_26.png �(y>�)04w" alt="Figure 5.24: The distance from�4he start of the path�4o the normal is ||\vec{A}|| \times \cos(\theta).".".><y:icture><w�oscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const�4=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src"+"+e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const�4=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of�4)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}<ztcript></div>
 �!�!figcaption>Figure 5.�(T
�): The distance from the start of�4he�0ath to�4he normal is�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mi mathvariant="normal">∣<w�i><mi mathvariant="normal">∣</mi><mover accent="true"><mi>A<w�i><mo>⃗<w�o></mover><mi mathvariant="normal">∣</mi><mi mathvariant="normal">∣<w�i><mo>×</mo><mi>cos</mi><mo>⁡</mo><mo stretchy="false">(<w�o><mi>θ</mi><mo stretchy="false">)<w�o></mrow><annotation encoding="application6-tex">||\vec{A}|| \times \cos(\theta)<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.2��1�3p�m;vertical-align:-0.�(ry�)em"></span><span class="mord">∣∣</span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal">A</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.SD66em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan><span class="mord">∣∣<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mbin">×<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan></span><span class="base"><span class="strut" style="height:m;vertical-align:-0.�(ry�)em"></span><span class="mop">cos</span><span class="mopen">(</span><span class="mord mathnormal" style="margin-right:0.0�(y]�)78em">θ</span><span class="mclose">)<ztpan></span><ztpan></span><ztpan>.<u�igcaption>
<u�igure>
<p>If�!�? only knew�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mi>θ<w�i></mrow><annotation encoding="application6-tex">\theta</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6944em"></span><span class="mord mathnormal" style="margin-right:0.0�(y]�)78em">θ</span><ztpan></span><ztpan></span>,�!�? could find that normal point with�4he code shown next.<y:>
<div class="overflow-visible�0t-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded�0x-�(���)5 py-1.5�4ext-xs font-semibold�               hover:bg-gray-0�0�0"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400 text-white�4ransition-opacity opacity-0">Copied!</div><svg stroke="currentColor" fill="currentColor" stroke-width="."."." viewBox=".".". 0 24 �(T
�)" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><g><path fill="none" d="M0 0h24v�(T
�)H0z"><y:ath><path d="M7 6V�9p�1 1 0 0 1 1-�a1 1 0 0 1 1 1v14a1 1 0 0 1-1 �-3v3c0 .55�(g(�).45 1-1.007 4.007A1.001 1.001 0 0 1 0�0�0�0�0��(h*�)l.000�0�0�0�c0-.55�(���)45-1 1.007-1H7zM5.000�0�0�0�0�8L5 �(e��)h10V8H5.00�I�UM9 5 5h8v10h�2�64H9v�"></path><u�><ztvg><span class="ml-1">Copy</span><uutton></div></div><div class="pair split"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let<ztpan> d = a.<span class="hljs-title function_">mag<ztpan>() *�!�!span class="hljs-title function_">cos<ztpan>(theta);
<uode></pre><div class="comment">Get the distance from the start to�4he normal.</div></div><div class="pair split"><pre><code class="hljs code language-javascript">b.<span class="hljs-title function_">setMag</span>(d);
</code><y:re><div class="comment">Scale�6ector <code>b<uode>�4o that distance.</div></div><div class="pair split"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let<ztpan> normalPoint =�05.<span class="hljs-property">Vector</span>.<span class="hljs-title function_">add</span>(path.<span class="hljs-property">start</span>, b);
<uode></pre><div class="comment">The normal�0oint can be found by adding the scaled�6ersion of <code>b<uode>�4o the path’s starting point.</div></div></div>
Luckily, if the dot product has taught me anything, it’s�4hat given two vectors,�!�? can calculate�4he angle between�4hose�6ectors�y:>
<div class="overflow-visible�0t-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded�0x-�(���)5 py-1.5�4ext-xs font-semibold�               hover:bg-gray-0�0�0"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400 text-white�4ransition-opacity opacity-0">Copied!</div><svg stroke="currentColor" fill="currentColor" stroke-width="."."." viewBox=".".". 0 24 �(T
�)" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><g><path fill="none" d="M0 0h24v�(T
�)H0z"><y:ath><path d="M7 6V�9p�1 1 0 0 1 1-�a1 1 0 0 1 1 1v14a1 1 0 0 1-1 �-3v3c0 .55�(g(�).45 1-1.007 4.007A1.001 1.001 0 0 1 0�0�0�0�0��(h*�)l.000�0�0�0�c0-.55�(���)45-1 1.007-1H7zM5.000�0�0�0�0�8L5 �(e��)h10V8H5.00�I�UM9 5 5h8v10h�2�64H9v�"></path><u�><ztvg><span class="ml-1">Copy</span><uutton></div></div><div class="pair split"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let<ztpan>�4heta =�05.<span class="hljs-property">Vector</span>.<span class="hljs-title function_">angleBetween<ztpan>(a, b);
</code><y:re><div class="comment">What is�!�!code>theta</code>? The angle between A and B�y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let</span> d = a.<span class="hljs-title function_">mag</span>() * <span class="hljs-title function_">cos</span>(theta);
</code><y:re><div class="comment"><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">b.<span class="hljs-title function_">setMag<ztpan>(d);
<uode></pre><div class="comment"></div></div><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let<ztpan> normalPoint =�05.<span class="hljs-property">Vector</span>.<span class="hljs-title function_">add</span>(path.<span class="hljs-property">start</span>, b);
<uode></pre><div class="comment"></div></div></div>
While this code will�7ork,�!�? can make one more simplification. Looking again, you’ll see�4hat the magnitude for vector�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mover accent="true"><mi>B<w�i><mo>⃗<w�o></mover></mrow><annotation encoding="application6-tex">\vec{B}<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.966�1�3p�m"><ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal" style="margin-right:0.05017em">B</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.��(g	�)em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan> is set to�!�!code>a.mag() * cos(theta)<uode>, which is�4he code translation of�4he following:<y:>
<div data-type="equation" class="math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML" display="block"><semantics><mrow><mi mathvariant="normal">∣</mi><mi mathvariant="normal">∣<w�i><mover accent="true"><mi>A</mi><mo>⃗</mo><w�over><mi mathvariant="normal">∣<w�i><mi mathvariant="normal">∣</mi><mo>×<w�o><mi>cos<w�i><mo>⁡<w�o><mo stretchy="false">(</mo><mi>θ<w�i><mo stretchy="false">)</mo><w�row><annotation encoding="application/x-tex">||\vec{A}||\times\cos(\theta)</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.�(h*�)63em;vertical-align:-0.25em"><ztpan><span class="mord">∣∣<ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal">A<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.0966em"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><span class="mord">∣∣</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">×</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><ztpan><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em"><ztpan><span class="mop">cos<ztpan><span class="mopen">(<ztpan><span class="mord mathnormal" style="margin-right:0.02778em">θ<ztpan><span class="mclose">)</span><ztpan></span><ztpan></span><u(iv>
And, recall�4his:
<div data-type="equation" class="math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml" display="block"><semantics><mrow><mover accent="true"><mi>A<w�i><mo>⃗<w�o></mover><mo>⋅<w�o><mover accent="true"><mi>B</mi><mo>⃗</mo><w�over><mo>=</mo><mi mathvariant="normal">∣<w�i><mi mathvariant="normal">∣</mi><mover accent="true"><mi>A<w�i><mo>⃗<w�o></mover><mi mathvariant="normal">∣</mi><mi mathvariant="normal">∣<w�i><mo>×</mo><mi mathvariant="normal">∣<w�i><mi mathvariant="normal">∣</mi><mover accent="true"><mi>B<w�i><mo>⃗<w�o></mover><mi mathvariant="normal">∣</mi><mi mathvariant="normal">∣<w�i><mo>×</mo><mi>cos</mi><mo>⁡</mo><mo stretchy="false">(<w�o><mi>θ</mi><mo stretchy="false">)<w�o></mrow><annotation encoding="application6-tex">\vec{A}\cdot\vec{B}=||\vec{A}||\times||\vec{B}||\times\cos(\theta)</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.9663em"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal">A</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.SD66em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mbin">⋅</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><ztpan><span class="base"><span class="strut" style="height:0.966�1�3p�m"><ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal" style="margin-right:0.05017em">B</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.��(g	�)em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan><span class="mrel">=</span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><ztpan><span class="base"><span class="strut" style="height:1.2��1�3p�m;vertical-align:-0.�(ry�)em"></span><span class="mord">∣∣</span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal">A</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.SD66em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan><span class="mord">∣∣<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mbin">×<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan></span><span class="base"><span class="strut" style="height:1.�(h*�)63em;vertical-align:-0.25em"><ztpan><span class="mord">∣∣<ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal" style="margin-right:0.05017em">B</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.��(g	�)em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan><span class="mord">∣∣<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mbin">×<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan></span><span class="base"><span class="strut" style="height:m;vertical-align:-0.�(ry�)em"></span><span class="mop">cos</span><span class="mopen">(</span><span class="mord mathnormal" style="margin-right:0.0�(y]�)78em">θ</span><span class="mclose">)<ztpan></span><ztpan></span><ztpan></div>
Now,�7hat if�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mover accent="true"><mi>B<w�i><mo>⃗<w�o></mover></mrow><annotation encoding="application6-tex">\vec{B}<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.966�1�3p�m"><ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal" style="margin-right:0.05017em">B</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.��(g	�)em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan> is a unit�6ector of length � Then you have�4his:</p>
<div data-type="equation" class="math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml" display="block"><semantics><mrow><mover accent="true"><mi>A<w�i><mo>⃗<w�o></mover><mo>⋅<w�o><mover accent="true"><mi>B</mi><mo>⃗</mo><w�over><mo>=</mo><mi mathvariant="normal">∣<w�i><mi mathvariant="normal">∣</mi><mover accent="true"><mi>A<w�i><mo>⃗<w�o></mover><mi mathvariant="normal">∣</mi><mi mathvariant="normal">∣<w�i><mo>×</mo><mn>1</mn><mo>×<w�o><mi>cos<w�i><mo>⁡<w�o><mo stretchy="false">(</mo><mi>θ<w�i><mo stretchy="false">)</mo><w�row><annotation encoding="application/x-tex">\vec{A}\cdot\vec{B}=||\vec{A}||\timesntimes\cos(\theta)<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.966�1�3p�m"><ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal">A<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.0966em"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">⋅<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan></span><span class="base"><span class="strut" style="height:0.9663em"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal" style="margin-right:0.050em">B<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.152m"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><span class="mrel">=<ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan></span><span class="base"><span class="strut" style="height:1.�(h*�)63em;vertical-align:-0.25em"><ztpan><span class="mord">∣∣<ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal">A<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.0966em"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><span class="mord">∣∣</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">×</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><ztpan><span class="base"><span class="strut" style="height:0.7�(y]�)8em;vertical-align:-0.SA0�0�0�0�em"></span><span class="mord">�ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mbin">×<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan></span><span class="base"><span class="strut" style="height:m;vertical-align:-0.�(ry�)em"></span><span class="mop">cos</span><span class="mopen">(</span><span class="mord mathnormal" style="margin-right:0.0�(y]�)78em">θ</span><span class="mclose">)<ztpan></span><ztpan></span><ztpan></div>
<p>Or, more simply:</p>
<div data-type="equation" class="math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml" display="block"><semantics><mrow><mover accent="true"><mi>A<w�i><mo>⃗<w�o></mover><mo>⋅<w�o><mover accent="true"><mi>B</mi><mo>⃗</mo><w�over><mo>=</mo><mi mathvariant="normal">∣<w�i><mi mathvariant="normal">∣</mi><mover accent="true"><mi>A<w�i><mo>⃗<w�o></mover><mi mathvariant="normal">∣</mi><mi mathvariant="normal">∣<w�i><mo>×</mo><mi>cos</mi><mo>⁡</mo><mo stretchy="false">(<w�o><mi>θ</mi><mo stretchy="false">)<w�o></mrow><annotation encoding="application6-tex">\vec{A}\cdot\vec{B}=||\vec{A}||\times\cos(\theta)<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.966�1�3p�m"><ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal">A<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.0966em"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">⋅<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan></span><span class="base"><span class="strut" style="height:0.9663em"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal" style="margin-right:0.050em">B<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.152m"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><span class="mrel">=<ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan></span><span class="base"><span class="strut" style="height:1.�(h*�)63em;vertical-align:-0.25em"><ztpan><span class="mord">∣∣<ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal">A<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.0966em"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><span class="mord">∣∣</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">×</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><ztpan><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em"><ztpan><span class="mop">cos<ztpan><span class="mopen">(<ztpan><span class="mord mathnormal" style="margin-right:0.02778em">θ<ztpan><span class="mclose">)</span><ztpan></span><ztpan></span><u(iv>
<p>When <span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mover accent="true"><mi>B</mi><mo>⃗</mo><w�over><w�row><annotation encoding="application/x-tex">\vec{B}</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.9663em"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal" style="margin-right:0.050em">B<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.152m"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span> is a�5nit vector, <span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mi mathvariant="normal">∣</mi><mi mathvariant="normal">∣<w�i><mover accent="true"><mi>A</mi><mo>⃗</mo><w�over><mi mathvariant="normal">∣<w�i><mi mathvariant="normal">∣</mi><mo>×<w�o><mi>cos<w�i><mo>⁡<w�o><mo stretchy="false">(</mo><mi>θ<w�i><mo stretchy="false">)</mo><w�row><annotation encoding="application/x-tex">||\vec{A}|| \times \cos(\theta)</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.�(h*�)63em;vertical-align:-0.25em"><ztpan><span class="mord">∣∣<ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal">A<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.0966em"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><span class="mord">∣∣</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">×</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><ztpan><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em"><ztpan><span class="mop">cos<ztpan><span class="mopen">(<ztpan><span class="mord mathnormal" style="margin-right:0.02778em">θ<ztpan><span class="mclose">)</span><ztpan></span><ztpan></span> is�4he same as�4he dot�0roduct of <span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mover accent="true"><mi>A</mi><mo>⃗</mo><w�over><w�row><annotation encoding="application/x-tex">\vec{A}</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.9663em"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal">A</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.SD66em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan> and�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mover accent="true"><mi>B<w�i><mo>⃗<w�o></mover></mrow><annotation encoding="application6-tex">\vec{B}<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.966�1�3p�m"><ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal" style="margin-right:0.05017em">B</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.��(g	�)em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan>. Turning <code>b<uode> into a unit�6ector is as simple as calling <code>normalize()<uode>. I can therefore bypass calculating�!�!code>theta</code> with�!�!code>angleBetween()<uode> and simplify the code as follows:</p>
<div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair"><pre><code class="code code-strikethrough"><s>let�4heta =�05.Vector.angleBetween(a, b);
<zt><uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let<ztpan> d = a.<span class="hljs-title function_">mag<ztpan>() *�!�!span class="hljs-title function_">cos<ztpan>(theta);
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="code code-strikethrough">b.setMag(d);<s>
<zt><uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-comment">]�{!���X Normalize b and�5se�4he dot�0roduct�4o set b’s length.<ztpan>
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript">b.<span class="hljs-title function_">normalize<ztpan>();
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">b.<span class="hljs-title function_">setMag<ztpan>(a.<span class="hljs-title function_">dot<ztpan>(b));
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let</span> normalPoint = p5.<span class="hljs-property">Vector<ztpan>.<span class="hljs-title function_">add<ztpan>(path.<span class="hljs-property">start<ztpan>, b);
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><u(iv>
<p>This process of scaling�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mover accent="true"><mi>B<w�i><mo>⃗<w�o></mover></mrow><annotation encoding="application6-tex">\vec{B}<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.966�1�3p�m"><ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal" style="margin-right:0.05017em">B</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.��(g	�)em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan> according�4o the normal�0oint is commonly known as <strong>scalar�0rojection<zttrong>. We say�4hat <span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mi mathvariant="normal">∣</mi><mi mathvariant="normal">∣<w�i><mover accent="true"><mi>A</mi><mo>⃗</mo><w�over><mi mathvariant="normal">∣<w�i><mi mathvariant="normal">∣</mi><mo>×<w�o><mi>cos<w�i><mo>⁡<w�o><mo stretchy="false">(</mo><mi>θ<w�i><mo stretchy="false">)</mo><w�row><annotation encoding="application/x-tex">||\vec{A}||\times\cos(\theta)</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.�(h*�)63em;vertical-align:-0.25em"><ztpan><span class="mord">∣∣<ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal">A<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.0966em"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><span class="mord">∣∣</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">×</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><ztpan><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em"><ztpan><span class="mop">cos<ztpan><span class="mopen">(<ztpan><span class="mord mathnormal" style="margin-right:0.02778em">θ<ztpan><span class="mclose">)</span><ztpan></span><ztpan></span><strong><em> </em><zttrong><em>is�4he scalar projection of </em><span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mover accent="true"><mi>A<w�i><mo>⃗<w�o></mover></mrow><annotation encoding="application6-tex">\vec{A}<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.966�1�3p�m"><ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal">A<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.0966em"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><em> onto�!�!u0m><span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mover accent="true"><mi>B</mi><mo>⃗</mo><w�over><w�row><annotation encoding="application/x-tex">\vec{B}</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.9663em"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal" style="margin-right:0.050em">B<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.152m"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span>, as in Figure 5.�(ry�).<y:>
<figure>
 �!�!div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:20�0�4px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height=&#x27;905.0000000000001&#x�(y]�); width=&#x27;�(y>�)04&#x27;�8mlns=&#x�(y]�);http:]�www.w3.org^r000/svg&#x�(y]�); version=&#x27;1.1&#x�(y]�);%0�0�0�%3C/svg%0�0�0�" style="max-width:100%;display:block;position:static"b6</div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"><u(iv><picture><source type="image/webp" data-srcset=".".static_Pbfcdf256c3cf506c79b4b4caf70�0�0�69b14/05_steering_�(y]�).webp 576w,/static_Pbfcdf256c3cf506c79b4b4caf70�0�0�5eedf/05_steering_�(y]�).webp �52w,zttatic/9bfcdf�(ry�)6c�1�1p�f50c79b4b42a1fcaf73_b5u]�5_steering_27.webp 20�0�4w" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw".".><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw" decoding="async" loading="lazy" data-src="zttatic/9bfcdf�(ry�)6c�1�1p�f50c79b4b42a1fcaf73]�868a]�5_steering_27.png" data-srcset="zttatic/9bfcdf�(ry�)6c�1�1p�f50c79b4b42a1fcaf73ua6ab]�5_steering_27.png 576w,/static_Pbfcdf256c3cf506c79b4b4caf70�0�0��1�0p�584/05_steering_�(y]�).png 1��(,/static_Pbfcdf256c3cf506c79b4b4caf70�0�0�68a/05_steering_�(y]�).png 20�0�4w" alt="Figure 5.�(ry�): The scalar�0rojection of \vec{A} onto \vec{B} is equal�4o ||\vec{A}||\times\cos(\theta).".".><y:icture><noscript><picture><source type="image/webp" srcSet="zttatic/9bfcdf�(ry�)6c�1�1p�f50c79b4b42a1fcaf73^�9b]�5_steering_27.webp 576w,zttatic/9bfcdf�(ry�)6c�1�1p�f50c79b4b42a1fcaf73^�eedf]�5_steering_27.webp 1��(,/static_Pbfcdf256c3cf506c79b4b4caf70�0�0�7b51c/05_steering_�(y]�).webp �(y>�)04w" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw"b6<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw" decoding="async" loading="lazy" src="zttatic/9bfcdf�(ry�)6c�1�1p�f50c79b4b42a1fcaf73]�868a]�5_steering_27.png" srcSet=".".static_Pbfcdf256c3cf506c79b4b4caf70�0�0�ca6ab/05_steering_�(y]�).png 576w,zttatic/9bfcdf�(ry�)6c�1�1p�f50c79b4b42a1fcaf73^zb584]�5_steering_27.png �52w,zttatic/9bfcdf�(ry�)6c�1�1p�f50c79b4b42a1fcaf73]�868a]�5_steering_27.png �(y>�)04w" alt="Figure 5.25: The scalar projection of \vec{A} onto \vec{B} is equal to�=|\vec{A}||\times\cos(\theta)."b6</picture></noscript><script�4ype="module">const�4="undefined"�typeof�?�!TMLImageElement&&"loading"in�?�!TMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of�4){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script><u(iv>
  <figcaption>Figure 5.25: The scalar projection of <span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mover accent="true"><mi>A</mi><mo>⃗</mo><w�over><w�row><annotation encoding="application/x-tex">\vec{A}</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.9663em"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal">A</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.SD66em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan> onto <span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mover accent="true"><mi>B</mi><mo>⃗</mo><w�over><w�row><annotation encoding="application/x-tex">\vec{B}</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.9663em"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal" style="margin-right:0.050em">B<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.152m"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span> is equal�4o <span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mi mathvariant="normal">∣</mi><mi mathvariant="normal">∣<w�i><mover accent="true"><mi>A</mi><mo>⃗</mo><w�over><mi mathvariant="normal">∣<w�i><mi mathvariant="normal">∣</mi><mo>×<w�o><mi>cos<w�i><mo>⁡<w�o><mo stretchy="false">(</mo><mi>θ<w�i><mo stretchy="false">)</mo><w�row><annotation encoding="application/x-tex">||\vec{A}||\times\cos(\theta)</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.�(h*�)63em;vertical-align:-0.25em"><ztpan><span class="mord">∣∣<ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal">A<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.0966em"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><span class="mord">∣∣</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">×</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><ztpan><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em"><ztpan><span class="mop">cos<ztpan><span class="mopen">(<ztpan><span class="mord mathnormal" style="margin-right:0.02778em">θ<ztpan><span class="mclose">)</span><ztpan></span><ztpan></span>.</figcaption>
</figure>
Once I have�4he normal point along the path, the next step is�4o decide�7hether and how�4he�6ehicle should steer toward�4he�0ath. Reynolds’s algorithm states�4hat the vehicle should steer�4oward the path only if it’s in danger of straying beyond�4he�0ath—that is, if the distance between�4he normal point and the predicted future�0osition is greater�4han the path’s radius. This is illustrated in Figure 5.26.
<figure>
  <div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:�(y>�)04px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:imageztvg+xml;charset=utf-8,%0�0�0�0�svg height=&#x�(y]�);6�(h*�)&#x27;�7idth=&#x�(y]�);20�0�4&#x�(y]�); xmlns=&#x27;http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg&#x27;�6ersion=&#x�(y]�);1.1&#x27;%3E%0�0�0�0�ztvg%3E" style="max-width:100%;display:block;position:static".".><u(iv><div aria-hidden="true" data-placeholder-image="" style="opacity:�transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source�4ype="image|�ebp" data-srcset="zttatic/a8�(ry�)91e492f9e7ee91430ef5aa519f50_P�(N��)t]�5_steering_28.webp 576w,zttatic/a8�(ry�)91e492f9e7ee91430ef5aa519f50u(bb91]�5_steering_28.webp 1��(,/statict�825949	9e7ee90�0�ef5aa5f50/df0d�(W�)05_steering_�(R��).webp �(y>�)04w" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw"b6<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw" decoding="async" loading="lazy" data-src=".".statict�825949	9e7ee90�0�ef5aa5f50/96b8�(W�)05_steering_�(R��).png" data-srcset=".".statict�825949	9e7ee90�0�ef5aa5f50/8ce1c/05_steering_�(R��).png 576w,zttatic/a8�(ry�)91e492f9e7ee91430ef5aa519f50u0]�5_steering_28.png �52w,zttatic/a8�(ry�)91e492f9e7ee91430ef5aa519f50_P6b82]�5_steering_28.png �(y>�)04w" alt="Figure 5.26: A�6ehicle�7ith a future�0osition on�4he�0ath (top) and one that’s outside�4he�0ath (bottom)".".><y:icture><noscript><picture><source type="image/webp" srcSet="zttatic/a8�(ry�)91e492f9e7ee91430ef5aa519f50_P�(N��)t]�5_steering_28.webp 576w,zttatic/a8�(ry�)91e492f9e7ee91430ef5aa519f50u(bb91]�5_steering_28.webp 1��(,/statict�825949	9e7ee90�0�ef5aa5f50/df0d�(W�)05_steering_�(R��).webp �(y>�)04w" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw"b6<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw" decoding="async" loading="lazy" src="zttatic/a8�(ry�)91e492f9e7ee91430ef5aa519f50_P6b82]�5_steering_28.png" srcSet=".".statict�825949	9e7ee90�0�ef5aa5f50/8ce1c/05_steering_�(R��).png 576w,zttatic/a8�(ry�)91e492f9e7ee91430ef5aa519f50u0]�5_steering_28.png �52w,zttatic/a8�(ry�)91e492f9e7ee91430ef5aa519f50_P6b82]�5_steering_28.png �(y>�)04w" alt="Figure 5.26: A�6ehicle�7ith a future�0osition on�4he�0ath (top) and one that’s outside�4he�0ath (bottom)".".><y:icture><w�oscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const�4=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src"+"+e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const�4=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of�4)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}<ztcript></div>
 �!�!figcaption>Figure 5.�(���): A vehicle with a future position on the path (top) and one�4hat’s outside the path (bottom)<u�igcaption>
<u�igure>
I can encode�4hat logic with a simple <code>if</code> statement and use my earlier�!�!code>seek()<uode> method to steer�4he�6ehicle�7hen necessary.
<div class="avoid-break">
 �!�!div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let</span> distance =�05.<span class="hljs-property">Vector</span>.<span class="hljs-title function_">dist<ztpan>(future, normalPoint);
<uode></pre><div class="comment"></div></div><div class="pair split"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">if</span> (distance &gt;�0ath.<span class="hljs-property">radius</span>)"
<uode></pre><div class="comment">If�4he�6ehicle is outside the path, seek�4he�4arget.</div></div><div class="pair split"><pre><code class="hljs code language-javascript"> �!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-title function_">seek</span>(target);
<uode></pre><div class="comment">The desired velocity and steering force can use the <code>seek()</code> method created in Example 5.1.</div></div><div class="pair"><pre><code class="hljs code language-javascript">}
<uode></pre><div class="comment"></div></div></div>
<u(iv>
But�7hat’s the target�4hat the path follower is seeking? Reynolds’s algorithm involves picking a point ahead of�4he normal on�4he�0ath. Since�!�? know the vector�4hat defines the path (<span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mover accent="true"><mi>B</mi><mo>⃗</mo><w�over><w�row><annotation encoding="application/x-tex">\vec{B}</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.9663em"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.966�1�3p�m"><span style="top:-3em"><span class="pstrut" style="height:3em"></span><span class="mord mathnormal" style="margin-right:0.050em">B<ztpan></span><span style="top:-3.252�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="accent-body" style="left:-0.152m"><span class="overlay" style="height:0.7em;width:0.471em"><svg�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg" width="."."..471em" height="0.714em" style="width:0.47m"�6iewBox="0 0 471 714"�0reserveAspectRatio="xMinYMin"><path d="M0�0�7 �(e��)c0-5.30�0�0�0� 1.80�0�0�0�-10 5.5-S391 0 2 297 0c4.667 0 8.667 1.667 1�(N��)5
0�0�0�0�0�0�0�0�0�0�0�0�0�0��(���)667 6.667 9 10 19 6.667 �(T
�).667 20.0�0�0�0�0�0�0�0�0�43.667 2 2 21 57 5 5 5.30�0�0�0� 2 2 2.667 11
10.667 11  0 5 5-1 10-0�0�0�0�0�s-6.667 5- 9c-�(R��).667 14.667-53.667 2 25.667-75 5 50�0�0�-1.30�0�0�0� 1.30�0�0�0�-3.167 2 2.5-5.5 5 5.5s-4 4.830�0�0�0�5 5.5c-1 .667-�(���)5 1.0�0�0�0�0�0�0�0�4.5 �-4.30�0�0�0� 1
-7 u-4.667 0-9.167-1.80�0�0�0�-10�0�0�0�0�5-5.5S0�0�0�0�7 4 0�0�0�0�7 8c0-.667 15.667-0�0�0�0�0�.30�0�0�0� 2 2 27-59
H�(h*�)�2�0p�-171-1c-8.667-6-�-1�(���)0�0�0�0�0�0�0�0��-19 0-4.667 4.0�0�0�0�0�0�0�0��.30�0�0�0� 10�0�0�0��(e��)h359
c-16-�(ry�).30�0�0�0�-24-45-24-59z"><y:ath></svg></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span>), I can implement this�0oint ahead by adding a�6ector that�0oints in�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mover accent="true"><mi>B<w�i><mo>⃗<w�o></mover></mrow><annotation encoding="application6-tex">\vec{B}<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.966�1�3p�m"><ztpan><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663em"><span style="top:-�1�3p�m"><span class="pstrut" style="height:�1�3p�m"><ztpan><span class="mord mathnormal" style="margin-right:0.05017em">B</span><ztpan><span style="top:-0�0�0�0�0��(ry�)�(y>�)em"><span class="pstrut" style="height:3em"></span><span class="accent-body" style="left:-0.��(g	�)em"><span class="overlay" style="height:0.714em;width:0.47m"><svg xmlns="http:]�www.w3.org^r000/svg"�7idth="0.47m" height="."."..7em" style="width:0.471em" viewBox=".".". 0 2 2 271 5 5 5" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.0�0�0�0�0�0�0�0�0�1.830�0�0�0�10 5.5-14S0�0�0�1 0 0�0�0�7 0c4.667 0 8.667 1.667  5
2
<.30�0�0�0� 2.667 5 5.667 9 10  5 5.667 24.667 �(e��).30�0�0�0� 2 2 20�0�0�0�0�667 41 57 7.0�0�0�0�0�0�0�0�0�4.667 �
10.667 � 18 0 6-1 10-3 1�-6.667 5-14 9c-28.667 .667-50�0�0�0�0�667 0�0�0�.667-75 63
-1.0�0�0�0�0�0�0�0�0�1.0�0�0�0�0�0�0�0�0�0�0�0�0��7 0�0�0�0�0�5-5.5 6.5s-4 2 2 2.80�0�0�0�-5 5.5c-1 .667-2.5 1.30�0�0�0�-4.5 2s-4.0�0�0�0�0�0�0�0�0�1
-7 1c-4.667 0-9.�7-1.830�0�0�0��.5-5.5S30�0� 184 2 20�0� 178c0-1�(���)667 �.667-3�(���)0�0�0�0�0�0�0�0�0�47-59
H2�l-1-u-8.667-6-10�0�0�0�.30�0�0�0�-10�0�0�0� 0-4.667 2 2 2.30�0�0�0�-11.0�0�0�0�0�0�0�0�0��-20h0�0�0�9
c-�-25.0�0�0�0�0�0�0�0��(T
�)-45-�(T
�)-59z"></path><ztvg><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan>’s direction�4o the vector representing the normal�0oint, as in Figure 5.27.</p>
<figure>
  <div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:�(y>�)04px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:imageztvg+xml;charset=utf-8,%0�0�0�0�svg height=&#x�(y]�);972&#x27;�7idth=&#x�(y]�);20�0�4&#x�(y]�); xmlns=&#x27;http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg&#x27;�6ersion=&#x�(y]�);1.1&#x27;%3E%0�0�0�0�ztvg%3E" style="max-width:100%;display:block;position:static".".><u(iv><div aria-hidden="true" data-placeholder-image="" style="opacity:�transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source�4ype="image|�ebp" data-srcset="zttatic/810�0�0�0�0�a2dd99740499a1a265u45e6e3_P72�(ry�)]�5_steering_29.webp 576w,zttatic/810�0�0�0�0�a2dd99740499a1a265u45e6e3^�a989]�5_steering_29.webp 1��(,/static]�48�6ad99740499as�(���)51c45e6e0�0�0�c6d70�0�0�05_steering_�(N��).webp �(y>�)04w" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw"b6<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw" decoding="async" loading="lazy" data-src=".".static]�48�6ad99740499as�(���)51c45e6e0�0�0�8b�7/05_steering_�(N��).png" data-srcset=".".static]�48�6ad99740499as�(���)51c45e6e0�0�0�704ba/05_steering_�(N��).png 576w,zttatic/810�0�0�0�0�a2dd99740499a1a265u45e6e3u0d20c]�5_steering_29.png �52w,zttatic/810�0�0�0�0�a2dd99740499a1a265u45e6e3_b167]�5_steering_29.png �(y>�)04w" alt="Figure 5.27: The�4arget is 25 pixels (an arbitrary choice) ahead of the normal�0oint along�4he�0ath.".".><y:icture><noscript><picture><source type="image/webp" srcSet="zttatic/810�0�0�0�0�a2dd99740499a1a265u45e6e3_P72�(ry�)]�5_steering_29.webp 576w,zttatic/810�0�0�0�0�a2dd99740499a1a265u45e6e3^�a989]�5_steering_29.webp 1��(,/static]�48�6ad99740499as�(���)51c45e6e0�0�0�c6d70�0�0�05_steering_�(N��).webp �(y>�)04w" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw"b6<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw" decoding="async" loading="lazy" src="zttatic/810�0�0�0�0�a2dd99740499a1a265u45e6e3_b167]�5_steering_29.png" srcSet=".".static]�48�6ad99740499as�(���)51c45e6e0�0�0�704ba/05_steering_�(N��).png 576w,zttatic/810�0�0�0�0�a2dd99740499a1a265u45e6e3u0d20c]�5_steering_29.png �52w,zttatic/810�0�0�0�0�a2dd99740499a1a265u45e6e3_b167]�5_steering_29.png �(y>�)04w" alt="Figure 5.27: The�4arget is 25 pixels (an arbitrary choice) ahead of the normal�0oint along�4he�0ath.".".><y:icture><w�oscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const�4=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src"+"+e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const�4=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of�4)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}<ztcript></div>
 �!�!figcaption>Figure 5.�(y]�): The target is �(ry�)�0ixels (an arbitrary choice) ahead of�4he normal point along the path.<u�igcaption>
<u�igure>
<p>I’ll arbitrarily say�4he�4arget should be �(ry�)�0ixels ahead of�4he normal:</p>
<div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let</span> distance =�05.<span class="hljs-property">Vector</span>.<span class="hljs-title function_">dist<ztpan>(future, normalPoint);
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">if</span> (distance &gt;�0ath.<span class="hljs-property">radius</span>)"
<uode></pre><div class="comment"><p></p></div></div><div class="pair split"><pre><code class="hljs code language-javascript">  b.<span class="hljs-title function_">setMag</span>(<span class="hljs-number">�(ry�)</span>);
</code><y:re><div class="comment"><p>Set�4he magnitude�4o �(ry�)�0ixels (picked arbitrarily).<y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">  <span class="hljs-keyword">let</span> target =�05.<span class="hljs-property">Vector</span>.<span class="hljs-title function_">add</span>(normalPoint, b);
<uode></pre><div class="comment"><p>Add <code>b<uode>�4o <code>normalPoint<uode>�4o find�4he�4arget �(ry�)�0ixels ahead on�4he�0ath.</p></div></div><div class="pair split"><pre><code class="hljs code language-javascript"> �!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-title function_">seek</span>(target);
<uode></pre><div class="comment"><p>Seek�4he�4arget.</p></div></div><div class="pair"><pre><code class="hljs code language-javascript">}
<uode></pre><div class="comment"><p></p></div></div></div>
<p>Putting it all�4ogether, here’s the path-following method in�4he�!�!code>Vehicle</code> class.</p>
<div data-type="example">
 �!�!h3 id="example-56-simple-path-following"><a class="heading-link" href="#example-56-simple-path-following">Example 5.6: Simple Path Following</a></h3>
  <figure>
   �!�!div class="not-prose clear-both my-4 overflow-hidden rounded border bg-gray-100" style="max-width:�52px"><div class="relative overflow-hidden rounded-t bg-white"><div class="absolute left-[50%]�4op-[50%] -translate-x-[50%] -translate-y-[50%] ">Loading sketch ...<u(iv><iframe class="w-full border-none�4ransition-opacity opacity-0" style="aspect-ratio:2.6666666666666665" loading="lazy" src=".".examples]�5_steeringw�oc_5_05_path_following_simple"><v}frame></div><div class="flex items-center justify-between border-t"><div class="flex"><button class="flex items-center border-r px-2.5�0y-1.5 text-sm hover:bg-gray-�(e��)0"><svg stroke="currentColor" fill="none" stroke-width="�(N	�)�6iewBox="0 0 �(T
�) 24" aria-hidden="true" class="h-[�px] w-[15px]" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path stroke-linecap="round" stroke-linejoin="round" d="M4 2 2 2v5h.58�.356 2A8.001 8.001 0 004.582 9m0 0H9m11 �v-5h-.58�0 0a8.000�0�0�0�0�8.000�0�0�0�0�0 01-15.0�0�0�7-�.357 2H15"><y:ath></svg><span class="ml-1.5">Reset</span><uutton><button class="flex items-center border-r px-2.5�0y-1.5 text-sm hover:bg-gray-�(e��)0"><svg stroke="currentColor" fill="none" stroke-width="�(N	�)�6iewBox="0 0 �(T
�) 24" aria-hidden="true" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path stroke-linecap="round" stroke-linejoin="round" d="M10 9v6m4-6v6m7-�9p�9 9 0 �-18 0 9 9 0 01 0z"><y:ath></svg><span class="ml-1">Pause</span><uutton></div><a href="https:/u0ditor.p5js.orgw�atureofcode/sketches�cH�(h*�)K3T3" target="_blank" rel="noreferrer" class="flex items-center px-2.5�4ext-[0.8rem] hover:underline">Open in Web Editor<svg stroke="currentColor" fill="none" stroke-width="2" viewBox=".".". 0 24 �(T
�)" stroke-linecap="round" stroke-linejoin="round" class="ml-1�4ext-gray-500" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path d="M 1�p�c6a�(N��)�(N��)0 0 1-�(N��)2H5a�(N��)�(N��)0 0 1-�(g(�)�2�68a�(N��)�(N��)0 0 1 �(g(�)6"><y:ath><polyline points="� 2 2 21 0�0�0�0�0��(h*�) 9"></polyline><line�8�"10"�9�"14"�8�(o�)"21"�9�(o�)"3"></line><ztvg><t�><u(iv><u(iv>
    <figcaption></figcaption>
  </figure>
</div>
<div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  <span class="hljs-title function_">follow<ztpan>(<span class="hljs-params">path<ztpan>) {
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">    <span class="hljs-keyword">let</span> future =�!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">velocity<ztpan>.<span class="hljs-title function_">copy</span>();
    future.<span class="hljs-title function_">setMag<ztpan>(<span class="hljs-number">25<ztpan>);
    future.<span class="hljs-title function_">add</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">position</span>);
</code><y:re><div class="comment"><p>Step � Predict�4he�6ehicle’s future position.<y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">    <span class="hljs-keyword">let</span> normalPoint = <span class="hljs-title function_">getNormalPoint<ztpan>(future,�0ath.<span class="hljs-property">start<ztpan>, path.<span class="hljs-property">end</span>);
</code><y:re><div class="comment"><p>Step �(T|�) Find the normal�0oint along�4he�0ath.</p></div></div><div class="pair split"><pre><code class="hljs code language-javascript">   �!�!span class="hljs-keyword">let<ztpan> b =�05.<span class="hljs-property">Vector</span>.<span class="hljs-title function_">sub</span>(path.<span class="hljs-property">end</span>,�0ath.<span class="hljs-property">start<ztpan>);
    b.<span class="hljs-title function_">setMag</span>(<span class="hljs-number">�(ry�)</span>);
    <span class="hljs-keyword">let</span> target =�05.<span class="hljs-property">Vector</span>.<span class="hljs-title function_">add</span>(normalPoint, b);
<uode></pre><div class="comment"><p>Step 2 2: Look a little farther along the path and set a�4arget.
(To optimize,�4his could be moved into the <code>if</code> statement to find the target only if it’s off the path.)</p></div></div><div class="pair split"><pre><code class="hljs code language-javascript">   �!�!span class="hljs-keyword">let<ztpan> distance = p5.<span class="hljs-property">Vector<ztpan>.<span class="hljs-title function_">dist</span>(normalPoint, future);
    <span class="hljs-keyword">if<ztpan> (distance�.�.�.gt; path.<span class="hljs-property">radius<ztpan>) {
      <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">seek<ztpan>(target);
</code><y:re><div class="comment"><p>Step 4:�!�?f you’re off�4he�0ath,
seek that�4arget in order�4o get on�4he�0ath.</p></div></div><div class="pair"><pre><code class="hljs code language-javascript">   �(
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"> �(
<uode></pre><div class="comment"><p></p></div></div></div>
<div class="half-width-right">
  <figure>
   �!�!div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:1���x;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height=&#x27;864&#x�(y]�); width=&#x27;�52&#x27;�8mlns=&#x�(y]�);http:]�www.w3.org^r000/svg&#x�(y]�); version=&#x27;1.1&#x�(y]�);%0�0�0�%3C/svg%0�0�0�" style="max-width:100%;display:block;position:static"b6</div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"><u(iv><picture><source type="image/webp" data-srcset=".".static_P000�0�0�SD896792d38a�1�1p�d5a78f�e25/c96b4/05_steering_0�0�.webp �(R��)8w,/static_P000�0�0�SD896792d38a�1�1p�d5a78f�e25/94�5/05_steering_0�0�.webp 576w,/static_P000�0�0�SD896792d38a�1�1p�d5a78f�e25/�(���)�(T
�)c/05_steering_0�0�.webp �52w" sizes="(min-width: �52px) �52px, 100vw"b6<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: �52px) �52px, 100vw" decoding="async" loading="lazy" data-src=".".static_P000�0�0�SD896792d38a�1�1p�d5a78f�e25/6ea41/05_steering_0�0�.png" data-srcset=".".static_P000�0�0�SD896792d38a�1�1p�d5a78f�e25/87bbf/05_steering_0�0�.png 288w,zttatic/9003809896790�0�0�a3cd518a78f16e�(ry�)_75b6]�5_steering_30.png 576w,/static_P000�0�0�SD896792d38a�1�1p�d5a78f�e25/6ea41/05_steering_0�0�.png 1��(" alt="Figure 5.�(R��): The elements of the getNormalPoint() function:�0osition, a, and b"b6</picture><noscript><picture><source�4ype="image|�ebp" srcSet=".".static_P000�0�0�SD896792d38a�1�1p�d5a78f�e25/c96b4/05_steering_0�0�.webp �(R��)8w,/static_P000�0�0�SD896792d38a�1�1p�d5a78f�e25/94�5/05_steering_0�0�.webp 576w,/static_P000�0�0�SD896792d38a�1�1p�d5a78f�e25/�(���)�(T
�)c/05_steering_0�0�.webp �52w" sizes="(min-width: �52px) �52px, 100vw"b6<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: �52px) �52px, 100vw" decoding="async" loading="lazy" src="zttatic/9003809896790�0�0�a3cd518a78f16e�(ry�)^�ea41]�5_steering_30.png" srcSet=".".static_P000�0�0�SD896792d38a�1�1p�d5a78f�e25/87bbf/05_steering_0�0�.png 288w,zttatic/9003809896790�0�0�a3cd518a78f16e�(ry�)_75b6]�5_steering_30.png 576w,/static_P000�0�0�SD896792d38a�1�1p�d5a78f�e25/6ea41/05_steering_0�0�.png 1��(" alt="Figure 5.�(R��): The elements of the getNormalPoint() function:�0osition, a, and b"b6</picture></noscript><script�4ype="module">const�4="undefined"�typeof�?�!TMLImageElement&&"loading"in�?�!TMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of�4){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script><u(iv>
    <figcaption>Figure 5.28: The elements of�4he�!�!code>getNormalPoint()<uode> function:�!�!code>position<uode>, <code>a<uode>, and <code>b<uode></figcaption>
  </figure>
</div>
<p></p>
<p>Notice�4hat instead of�5sing all�4hat dot-product and scalar�0rojection code�4o find�4he normal point,�!�? call the <code>getNormalPoint()</code> function. In cases like this, it’s�5seful to break out�4he code that�0erforms a specific�4ask (finding a normal point) into a function�4hat can be called when required. The function takes three vector arguments (see Figure 5.28): the first defines a point <em>p<u0m> in Cartesian space (the�6ehicle’s future position), and�4he second and third define a line segment between two points�!�!em>a</em> and <em>b<u0m> (the path).</p>
<div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  <span class="hljs-title function_">getNormalPoint<ztpan>(<span class="hljs-params">position, a, b<ztpan>) {
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">    <span class="hljs-keyword">let</span> vectorA = p5.<span class="hljs-property">Vector<ztpan>.<span class="hljs-title function_">sub<ztpan>(position, a);
<uode></pre><div class="comment"><p>Vector�4hat points from <code>a<uode>�4o <code>position</code><y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">    <span class="hljs-keyword">let</span> vectorB = p5.<span class="hljs-property">Vector<ztpan>.<span class="hljs-title function_">sub<ztpan>(b, a);
</code><y:re><div class="comment"><p>Vector that�0oints from�!�!code>a</code> to�!�!code>b</code><y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">    vectorB.<span class="hljs-title function_">normalize</span>();
   �6ectorB.<span class="hljs-title function_">mult</span>(vectorA.<span class="hljs-title function_">dot</span>(vectorB));
<uode></pre><div class="comment"><p>Use the dot product for scalar�0rojection.</p></div></div><div class="pair split"><pre><code class="hljs code language-javascript">   �!�!span class="hljs-keyword">let<ztpan> normalPoint =�05.<span class="hljs-property">Vector</span>.<span class="hljs-title function_">add</span>(a,�6ectorB);
<uode></pre><div class="comment"><p>Find�4he normal point along the line segment.<y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">    <span class="hljs-keyword">return<ztpan> normalPoint;
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  }
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><u(iv>
<p>What do�!�? have so far? I have a�!�!code>Path<uode> class�4hat defines a path as a line between�4wo�0oints.�!�? have a <code>Vehicle<uode> class�7ith a method�4o follow�4he�0ath (using steering to seek a target along�4he�0ath). In all, this makes for a decent example, and�9et it’s pretty darn limiting. What’s missing?<y:>
<p>Take a deep breath. You’re almost�4here.<y:>
<h0�0�0�0�0�id="path-following-with-multiple-segments"><a class="heading-link" href="#path-following-with-multiple-segments">Path Following with Multiple Segments</a><div class="mr-6 inline-block"><a class="group relative flex items-center gap-�(N��)text-base text-noc-400 no-underline" href="https:/|�ww.youtube.com|�atch?time_continue=858&amp;v=rlZYT-uvmGQ&amp;embeds_referring_origin=https:/z�hecodingtrain.com"�4arget="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="."."." viewBox=".".". 0 576 5" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path d="M549.655 4.SA�1�1p�-6.281-20�0�0�0�0�65-24.787-42.276-48.�(R��)4-48.597C458.781 5 54 �(R��)8 64 288 5 54S�7.�(g	�) 5 54 74.6�(N��) 5 5 55.486c-20�0�0�0�0�497 6.0�0�0�0�0��(g(�)42.003 24.947-48.284 2 2 28.597-�.4 2 2 2�(���)867-�.4 10�0�0�0�0�.305-11.41�(N��)��(���)0�0�5s0 89.40�0�0� 11.41�(N��)��(���)0�0�5c6.�(R��)1 �(y>�).65 �(T
�).787 2 2 21.5 48.284 2 2 27.82�7.�(g	�) 2 2 248 288 2 2 248 288 2 2 248s170.78 0 �(h*�)0�0�0�0�0�0�0�1-�.486c20�0�0�0�0�497-6.0�0�0�0�0�1 42.003-24.1 48.284-47.821 �.4-4�(���)867 �.4-10�0�0�0�0�.305 11.41�(g(�)��(���)0�0�5s0-89.40�0�0�-11.41�(g(�)��(���)0�0�5zm-0�0�7.51 2�.5SAV175.185l142.70�0�0� 81.�(e��)5-�(���)739 81.201z"><y:ath></svg>Path Following<div class="not-prose absolute�4op-0�+-10 hidden�7-80 pt-10 group-hover:block"><div class="relative rounded-lg bg-noc-400 bg-apacity-50 p-4"><div class="flex aspect-video items-center overflow-hidden rounded object-cover"><picture><source�4ype="image|�ebp" srcSet="https:/v}mg.youtube.com|si_webpy�lZYT-uvmGQztddefault.webp"b6<source type="image/jpeg" srcSet="https:]�i.ytimg.com/viy�lZYT-uvmGQztddefault.jpg".".><img src="https:/v}.ytimg.com|si/rlZYT-uvmGQ/sddefault.jpg" alt="youtube video thumbnail"b6</picture></div><svg stroke="currentColor" fill="currentColor" stroke-width="."."." viewBox=".".". 0 2 2 248 5" class="absolute left-1^r�4op-1^r -translate-x-1/�(N��)-translate-y-1^r�4ext-4xl text-noc-400" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path d="M424.4 �(h*�)4.7L72.4 5 5.6C40�0�0�0�0�8-10.3 0 5 5.1 0 2 2 27.9V464c0 0�0�.5 2 2 20.7 60.1 5 5 5�(���)4 41.3l352-2SAc31.4-.5 2 21.5-64.1 0-8�(���)6z"></path><ztvg><u(iv><u(iv><t�><u(iv><vv0�0�0�
<�c- -->
<p>What if�!�?�7ant a vehicle to follow a more complex�0ath than just a single straight line? Perhaps a curved�0ath that moves in a variety of directions, as in Figure 5.�(N��)?<y:>
<figure>
 �!�!div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:20�0�4px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height=&#x27;515&#x�(y]�); width=&#x27;�(y>�)04&#x27;�8mlns=&#x�(y]�);http:]�www.w3.org^r000/svg&#x�(y]�); version=&#x27;1.1&#x�(y]�);%0�0�0�%3C/svg%0�0�0�" style="max-width:100%;display:block;position:static"b6</div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"><u(iv><picture><source type="image/webp" data-srcset=".".staticu�0�0�0�0�0�0b7d9a9bfa�(N��)d5cfc75c5379dbe/f9bd0�0�0�05_steering_0�0�.webp 576w,/staticu�0�0�0�0�0�0b7d9a9bfa�(N��)d5cfc75c5379dbe/b6�1�2p�a/05_steering_0�0�.webp �52w,zttatic/f3�(e��)b7d9a9bfa29d5cfc75c50�0�879dbe^�1�0p�e0]�5_steering_31.webp 20�0�4w" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw".".><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw" decoding="async" loading="lazy" data-src="zttatic/f3�(e��)b7d9a9bfa29d5cfc75c50�0�879dbe]��(g	�)64]�5_steering_31.png" data-srcset="zttatic/f3�(e��)b7d9a9bfa29d5cfc75c50�0�879dbe^895e]�5_steering_31.png 576w,/staticu�0�0�0�0�0�0b7d9a9bfa�(N��)d5cfc75c5379dbe/b887d/05_steering_0�0�.png 1��(,/staticu�0�0�0�0�0�0b7d9a9bfa�(N��)d5cfc75c5379dbe/�(���)4/05_steering_0�0�.png 20�0�4w" alt="Figure 5.�(N��): A more complex�0ath"b6</picture><noscript><picture><source�4ype="image|�ebp" srcSet=".".staticu�0�0�0�0�0�0b7d9a9bfa�(N��)d5cfc75c5379dbe/f9bd0�0�0�05_steering_0�0�.webp 576w,/staticu�0�0�0�0�0�0b7d9a9bfa�(N��)d5cfc75c5379dbe/b6�1�2p�a/05_steering_0�0�.webp �52w,zttatic/f3�(e��)b7d9a9bfa29d5cfc75c50�0�879dbe^�1�0p�e0]�5_steering_31.webp 20�0�4w" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw".".><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw" decoding="async" loading="lazy" src=".".staticu�0�0�0�0�0�0b7d9a9bfa�(N��)d5cfc75c5379dbe/�(���)4/05_steering_0�0�.png" srcSet="zttatic/f3�(e��)b7d9a9bfa29d5cfc75c50�0�879dbe^895e]�5_steering_31.png 576w,/staticu�0�0�0�0�0�0b7d9a9bfa�(N��)d5cfc75c5379dbe/b887d/05_steering_0�0�.png 1��(,/staticu�0�0�0�0�0�0b7d9a9bfa�(N��)d5cfc75c5379dbe/�(���)4/05_steering_0�0�.png 20�0�4w" alt="Figure 5.�(N��): A more complex�0ath"b6</picture></noscript><script�4ype="module">const�4="undefined"�typeof�?�!TMLImageElement&&"loading"in�?�!TMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of�4){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script><u(iv>
  <figcaption>Figure 5.29: A more complex path</figcaption>
</figure>
<p>Maybe�!�?’m being a little too ambitious.�!�?�!�!em>could</em> investigate algorithms for following a curved path, but I’m much less likely�4o end up needing a cool compress on my forehead if�!�? stick�7ith straight line segments, like�4hose in Figure 5.30.�!�? could always still <em>draw</em> the path as a curve, but it’s best�4o approximate it behind the scenes�7ith simplified geometric forms for�4he necessary calculations.</p>
<figure>
  <div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:�(y>�)04px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:imageztvg+xml;charset=utf-8,%0�0�0�0�svg height=&#x�(y]�);545&#x27;�7idth=&#x�(y]�);20�0�4&#x�(y]�); xmlns=&#x27;http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg&#x27;�6ersion=&#x�(y]�);1.1&#x27;%3E%0�0�0�0�ztvg%3E" style="max-width:100%;display:block;position:static".".><u(iv><div aria-hidden="true" data-placeholder-image="" style="opacity:�transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source�4ype="image|�ebp" data-srcset="zttatic/970e014fb1�1�3p�0f8c�7970835869f16a^z5d]�5_steering_3�(���)webp 576w,zttatic/970e014fb1�1�3p�0f8c�7970835869f16a]�b2df]�5_steering_3�(���)webp 1��(,/static_P70e0fb�e0f8c15797SA0�0�0�869f�a/daeeb/05_steering_0�0�0�0�0�.webp �(y>�)04w" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw"b6<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw" decoding="async" loading="lazy" data-src=".".static_P70e0fb�e0f8c15797SA0�0�0�869f�a/e80�0�0�05_steering_0�0�0�0�0�.png" data-srcset=".".static_P70e0fb�e0f8c15797SA0�0�0�869f�a/0�0�0�0�0�f11/05_steering_0�0�0�0�0�.png 576w,zttatic/970e014fb1�1�3p�0f8c�7970835869f16au(�e5]�5_steering_3�(���)png �52w,zttatic/970e014fb1�1�3p�0f8c�7970835869f16au08143]�5_steering_3�(���)png �(y>�)04w" alt="Figure 5.3SE The same curved�0ath, but approximated as connected line segments".".><y:icture><noscript><picture><source type="image/webp" srcSet="zttatic/970e014fb1�1�3p�0f8c�7970835869f16a^z5d]�5_steering_3�(���)webp 576w,zttatic/970e014fb1�1�3p�0f8c�7970835869f16a]�b2df]�5_steering_3�(���)webp 1��(,/static_P70e0fb�e0f8c15797SA0�0�0�869f�a/daeeb/05_steering_0�0�0�0�0�.webp �(y>�)04w" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw"b6<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw" decoding="async" loading="lazy" src="zttatic/970e014fb1�1�3p�0f8c�7970835869f16au08143]�5_steering_3�(���)png" srcSet=".".static_P70e0fb�e0f8c15797SA0�0�0�869f�a/0�0�0�0�0�f11/05_steering_0�0�0�0�0�.png 576w,zttatic/970e014fb1�1�3p�0f8c�7970835869f16au(�e5]�5_steering_3�(���)png �52w,zttatic/970e014fb1�1�3p�0f8c�7970835869f16au08143]�5_steering_3�(���)png �(y>�)04w" alt="Figure 5.3SE The same curved�0ath, but approximated as connected line segments".".><y:icture><w�oscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const�4=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src"+"+e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const�4=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of�4)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}<ztcript></div>
 �!�!figcaption>Figure 5.0�0�: The same curved path, but approximated as connected line segments<u�igcaption>
<u�igure>
<p>If�!�? made path following�7ork with one line segment, how do I make it work�7ith a series of connected line segments? The key is in�4he�7ay�!�? find the target�0oint along�4he�0ath.</p>
<p>To find the target�7ith just one line segment,�!�? had�4o compute the normal�4o that line segment. Now�4hat I have a series of line segments, I also have a series of normal�0oints to be computed—one for each segment (see Figure 5.0�0�). 2 2 2 2hich one does the vehicle choose? The solution Reynolds proposed is to�0ick the normal�0oint�4hat is (a) closest and (b) on the path.<y:>
<figure>
 �!�!div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:20�0�4px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height=&#x27;SA&#x27;�7idth=&#x�(y]�);20�0�4&#x�(y]�); xmlns=&#x27;http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg&#x27;�6ersion=&#x�(y]�);1.1&#x27;%3E%0�0�0�0�ztvg%3E" style="max-width:100%;display:block;position:static".".><u(iv><div aria-hidden="true" data-placeholder-image="" style="opacity:�transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source�4ype="image|�ebp" data-srcset="zttatic/�1�1p�e5�1�2p�c00�0�0�720ae1c1556fb7439c9d^�966f]�5_steering_30�0�0�0�0�webp 576w,zttatic/�1�1p�e5�1�2p�c00�0�0�720ae1c1556fb7439c9dt�ff]�5_steering_30�0�0�0�0�webp 1��(,/static^zce53dc0387�(e��)aebc�56fb740�0�0�c9d/7d4/05_steering_0�0�0�0�.webp �(y>�)04w" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw"b6<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw" decoding="async" loading="lazy" data-src=".".static^zce53dc0387�(e��)aebc�56fb740�0�0�c9d/ec930�0�0�05_steering_0�0�0�0�.png" data-srcset=".".static^zce53dc0387�(e��)aebc�56fb740�0�0�c9d/b8a7d/05_steering_0�0�0�0�.png 576w,zttatic/�1�1p�e5�1�2p�c00�0�0�720ae1c1556fb7439c9du54d0]�5_steering_30�0�0�0�0�png �52w,zttatic/�1�1p�e5�1�2p�c00�0�0�720ae1c1556fb7439c9du0c90�0�0�0�]�5_steering_30�0�0�0�0�png �(y>�)04w" alt="Figure 5.3� Finding�4he closest normal point along a series of connected line segments"b6</picture><noscript><picture><source�4ype="image|�ebp" srcSet=".".static^zce53dc0387�(e��)aebc�56fb740�0�0�c9d/6966f/05_steering_0�0�0�0�.webp 576w,/static^zce53dc0387�(e��)aebc�56fb740�0�0�c9d/aff2e/05_steering_0�0�0�0�.webp �52w,zttatic/�1�1p�e5�1�2p�c00�0�0�720ae1c1556fb7439c9d_d1�(T
�)]�5_steering_30�0�0�0�0�webp 20�0�4w" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw".".><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw" decoding="async" loading="lazy" src=".".static^zce53dc0387�(e��)aebc�56fb740�0�0�c9d/ec930�0�0�05_steering_0�0�0�0�.png" srcSet="zttatic/�1�1p�e5�1�2p�c00�0�0�720ae1c1556fb7439c9du8a7d]�5_steering_30�0�0�0�0�png 576w,/static^zce53dc0387�(e��)aebc�56fb740�0�0�c9d/b54d0/05_steering_0�0�0�0�.png 1��(,/static^zce53dc0387�(e��)aebc�56fb740�0�0�c9d/ec930�0�0�05_steering_0�0�0�0�.png 20�0�4w" alt="Figure 5.0�0�: Finding the closest normal�0oint along a series of connected line segments".".><y:icture><w�oscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const�4=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src"+"+e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const�4=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of�4)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}<ztcript></div>
 �!�!figcaption>Figure 5.0�0�: Finding the closest normal�0oint along a series of connected line segments</figcaption>
</figure>
<p>If you have a�0oint and an infinitely long line, you’ll always have a normal point that�4ouches�4he line. But if you have a�0oint and a finite line segment, you won’t necessarily find a normal that’s on the line segment. If�4his happens for any of�4he segments,�!�? can disqualify those normals. Once I’m left�7ith just�4hose normals�4hat are on�4he�0ath (only two in Figure 5.0�0�),�!�?�0ick the one that’s shortest.</p>
<p>To�7rite�4he code for this, I’ll expand the <code>Path</code> class to have an array of points (rather�4han just�4he start and end).</p>
<div data-type="example">
 �!�!h3 id="example-57-path-made-of-multiple-line-segments"><a class="heading-link" href="#example-57-path-made-af-multiple-line-segments">Example 5.7: Path Made of Multiple Line Segments</a></h3>
  <figure>
   �!�!div class="not-prose clear-both my-4 overflow-hidden rounded border bg-gray-100" style="max-width:�52px"><div class="relative overflow-hidden rounded-t bg-white"><div class="absolute left-[50%]�4op-[50%] -translate-x-[50%] -translate-y-[50%] ">Loading sketch ...<u(iv><iframe class="w-full border-none�4ransition-opacity opacity-0" style="aspect-ratio:2.6666666666666665" loading="lazy" src=".".examples]�5_steering^�_6_path_segments_only"><v}frame></div><div class="flex items-center justify-between border-t"><div class="flex"><button class="flex items-center border-r px-2.5�0y-1.5 text-sm hover:bg-gray-�(e��)0"><svg stroke="currentColor" fill="none" stroke-width="�(N	�)�6iewBox="0 0 �(T
�) 24" aria-hidden="true" class="h-[�px] w-[15px]" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path stroke-linecap="round" stroke-linejoin="round" d="M4 2 2 2v5h.58�.356 2A8.001 8.001 0 004.582 9m0 0H9m11 �v-5h-.58�0 0a8.000�0�0�0�0�8.000�0�0�0�0�0 01-15.0�0�0�7-�.357 2H15"><y:ath></svg><span class="ml-1.5">Reset</span><uutton><button class="flex items-center border-r px-2.5�0y-1.5 text-sm hover:bg-gray-�(e��)0"><svg stroke="currentColor" fill="none" stroke-width="�(N	�)�6iewBox="0 0 �(T
�) 24" aria-hidden="true" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path stroke-linecap="round" stroke-linejoin="round" d="M10 9v6m4-6v6m7-�9p�9 9 0 �-18 0 9 9 0 01 0z"><y:ath></svg><span class="ml-1">Pause</span><uutton></div><a href="https:/u0ditor.p5js.orgw�atureofcode/sketchesw�tGaosFQ7" target="_blank" rel="noreferrer" class="flex items-center px-2.5�4ext-[0.8rem] hover:underline">Open in Web Editor<svg stroke="currentColor" fill="none" stroke-width="2" viewBox=".".". 0 24 �(T
�)" stroke-linecap="round" stroke-linejoin="round" class="ml-1�4ext-gray-500" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path d="M 1�p�c6a�(N��)�(N��)0 0 1-�(N��)2H5a�(N��)�(N��)0 0 1-�(g(�)�2�68a�(N��)�(N��)0 0 1 �(g(�)6"><y:ath><polyline points="� 2 2 21 0�0�0�0�0��(h*�) 9"></polyline><line�8�"10"�9�"14"�8�(o�)"21"�9�(o�)"3"></line><ztvg><t�><u(iv><u(iv>
    <figcaption></figcaption>
  </figure>
</div>
<div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">class</span> <span class="hljs-title class_">Path</span> {
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  <span class="hljs-title function_">constructor</span>(<span class="hljs-params"></span>)"
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript">   �!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">radius<ztpan> =�!�!span class="hljs-number">20<ztpan>;
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">    <span class="hljs-variable language_">this</span>.<span class="hljs-property">points</span> = [];
</code><y:re><div class="comment"><p>A�0ath is now an array of�0oints (<code>p5.Vector</code> objects).<y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  }
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">
<uode></pre><div class="comment"><p></p></div></div><div class="pair split"><pre><code class="hljs code language-javascript"> �!�!span class="hljs-title function_">addPoint</span>(<span class="hljs-params">x,�9</span>)"
   �!�!span class="hljs-keyword">let<ztpan>�0athPoint =�!�!span class="hljs-title function_">createVector</span>(x,�9);
   �!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">points<ztpan>.<span class="hljs-title function_">push</span>(pathPoint);
  }
</code><y:re><div class="comment"><p>This method allows you to add�0oints to�4he�0ath.</p></div></div><div class="pair"><pre><code class="hljs code language-javascript">
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  <span class="hljs-title function_">show<ztpan>(<span class="hljs-params"><ztpan>) {
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">    <span class="hljs-title function_">stroke<ztpan>(<span class="hljs-number">200</span>);
    <span class="hljs-title function_">strokeWeight<ztpan>(<span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">radius<ztpan> *�!�!span class="hljs-number">2</span>);
    <span class="hljs-title function_">noFill<ztpan>();
    <span class="hljs-title function_">beginShape<ztpan>();
    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let<ztpan>�0athPoint�!�!span class="hljs-keyword">of</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">points</span>)"
     �!�!span class="hljs-title function_">vertex</span>(pathPoint.<span class="hljs-property">x<ztpan>, pathPoint.<span class="hljs-property">y<ztpan>);
   �(
   �!�!span class="hljs-title function_">endShape</span>();
<uode></pre><div class="comment"><p>Draw a�4hicker gray line for�4he�0ath radius.<y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">    <span class="hljs-title function_">stroke<ztpan>(<span class="hljs-number">0</span>);
    <span class="hljs-title function_">strokeWeight<ztpan>(<span class="hljs-number">1</span>);
    <span class="hljs-title function_">beginShape<ztpan>();
    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let<ztpan>�0athPoint�!�!span class="hljs-keyword">of</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">points</span>)"
     �!�!span class="hljs-title function_">vertex</span>(pathPoint.<span class="hljs-property">x<ztpan>, pathPoint.<span class="hljs-property">y<ztpan>);
   �(
   �!�!span class="hljs-title function_">endShape</span>();
<uode></pre><div class="comment"><p>Draw a�4hin line for�4he�0ath center.<y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  }
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">}
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><u(iv>
<p>Now�4hat the <code>Path</code> class has been�5pdated, it’s�4he�6ehicle’s�4urn to learn how�4o accommodate multiple line segments. All it did before was find�4he normal for one line. Using a loop, it can find the normals for all the segments:<y:>
<div class="snip-below">
 �!�!div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">for</span> (<span class="hljs-keyword">let<ztpan> i =�!�!span class="hljs-number">0</span>; i�.�.�.lt; path.<span class="hljs-property">points<ztpan>.<span class="hljs-property">length<ztpan> -�!�!span class="hljs-number">1</span>; i++) {
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  <span class="hljs-keyword">let</span> a = path.<span class="hljs-property">points<ztpan>[i];
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"> �!�!span class="hljs-keyword">let<ztpan> b =�0ath.<span class="hljs-property">points</span>[i + <span class="hljs-number">�ztpan>];
<uode></pre><div class="comment"><p></p></div></div><div class="offset-top�0air split"><pre><code class="hljs code language-javascript">  <span class="hljs-keyword">let</span> normalPoint = <span class="hljs-title function_">getNormalPoint<ztpan>(future, a, b);
</code><y:re><div class="comment"><p>Find the normal for each line segment.<y:><u(iv><u(iv><u(iv>
</div>
<p>The next step is�4o test�7hether�4he normal point is actually between points�!�!code>a</code> and <code>b<uode>. Since I know�4he�0ath goes from left�4o right in�4his example,�!�? can�4est whether the <code>x<uode> component of <code>normalPoint<uode> is outside the <code>x<uode> components of�!�!code>a</code> and <code>b<uode>.<y:>
<div class="snip-below snip-above avoid-break">
  <div class="overflow-visible�0t-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded�0x-�(���)5 py-1.5�4ext-xs font-semibold�               hover:bg-gray-0�0�0"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400 text-white�4ransition-opacity opacity-0">Copied!</div><svg stroke="currentColor" fill="currentColor" stroke-width="."."." viewBox=".".". 0 24 �(T
�)" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><g><path fill="none" d="M0 0h24v�(T
�)H0z"><y:ath><path d="M7 6V�9p�1 1 0 0 1 1-�a1 1 0 0 1 1 1v14a1 1 0 0 1-1 �-3v3c0 .55�(g(�).45 1-1.007 4.007A1.001 1.001 0 0 1 0�0�0�0�0��(h*�)l.000�0�0�0�c0-.55�(���)45-1 1.007-1H7zM5.000�0�0�0�0�8L5 �(e��)h10V8H5.00�I�UM9 5 5h8v10h�2�64H9v�"></path><u�><ztvg><span class="ml-1">Copy</span><uutton></div></div><div class="pair"><pre><code class="hljs code language-javascript">   <span class="hljs-keyword">if<ztpan> (normalPoint.<span class="hljs-property">x<ztpan>�.�.�.lt; a.<span class="hljs-property">x<ztpan>�=| normalPoint.<span class="hljs-property">x<ztpan>�.�.�.gt; b.<span class="hljs-property">x<ztpan>) {
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">     normalPoint = b.<span class="hljs-title function_">copy</span>();
<uode></pre><div class="comment"><p>Use the endpoint of the segment
as�9our normal�0oint if you can’t find one.<y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  �(
<uode></pre><div class="comment"><p></p></div></div></div>
<u(iv>
<p>If the normal�0oint is not within�4he line segment,�!�?’ll just�0retend�4he end�0oint of that line segment is�4he normal. (You might also�4ry�4he beginning�0oint, depending on�4he�0articulars of your�0ath.) This�7ill ensure�4hat the vehicle always stays on the path, even if it strays beyond�4he bounds of�4he line segments.<y:>
<div data-type="exercise" class="callout">
 �!�!h3 id="exercise-510"><a class="heading-link" href="#exercise-510">Exercise 5.10<t�><vv0�0�0�
 �!�!p>A more general-purpose�7ay�4o test�7hether�4he normal point lies on the segment is�4o sum the distances between <code>normalPoint<uode> and�!�!code>a</code> and <code>b<uode>. If�4he result is greater�4han the length of the line segment, the normal is outside the segment. Can�9ou�7rite�4his algorithm with�05.js?<y:>
</div>
<p>Finally,�!�? need to find the closest normal�0oint�4o the vehicle. To accomplish�4his,�!�? can start�7ith a very high “world record” distance and iterate through each normal point to see if it beats (is less than) the record. Each�4ime a normal�0oint beats�4he record,�4he�7orld record is�5pdated, and the winning point is stored in a�6ariable named <code>target</code>. At the end of�4he loop,�!�!code>target<uode>�7ill hold�4he closest normal point.</p>
<div data-type="example">
 �!�!h3 id="example-58-path-following"><a class="heading-link" href="#example-58-path-following">Example 5.8: Path Following<t�><vv0�0�0�
 �!�!figure>
    <div class="not-prose clear-both my-4 overflow-hidden rounded border bg-gray-100" style="max-width:1���x"><div class="relative overflow-hidden rounded-t bg-white"><div class="absolute left-[50%] top-[50%] -translate-x-[50%] -translate-y-[50%] ">Loading sketch ...</div><iframe class="w-full border-none transition-apacity opacity-0" style="aspect-ratio:�(���)6666666666666665" loading="lazy" src="u0xamples/05_steering/noc_5_SA_path_following"><v}frame></div><div class="flex items-center justify-between border-t"><div class="flex"><button class="flex items-center border-r px-2.5�0y-1.5 text-sm hover:bg-gray-�(e��)0"><svg stroke="currentColor" fill="none" stroke-width="�(N	�)�6iewBox="0 0 �(T
�) 24" aria-hidden="true" class="h-[�px] w-[15px]" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path stroke-linecap="round" stroke-linejoin="round" d="M4 2 2 2v5h.58�.356 2A8.001 8.001 0 004.582 9m0 0H9m11 �v-5h-.58�0 0a8.000�0�0�0�0�8.000�0�0�0�0�0 01-15.0�0�0�7-�.357 2H15"><y:ath></svg><span class="ml-1.5">Reset</span><uutton><button class="flex items-center border-r px-2.5�0y-1.5 text-sm hover:bg-gray-�(e��)0"><svg stroke="currentColor" fill="none" stroke-width="�(N	�)�6iewBox="0 0 �(T
�) 24" aria-hidden="true" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path stroke-linecap="round" stroke-linejoin="round" d="M10 9v6m4-6v6m7-�9p�9 9 0 �-18 0 9 9 0 01 0z"><y:ath></svg><span class="ml-1">Pause</span><uutton></div><a href="https:/u0ditor.p5js.orgw�atureofcode/sketches]�T-6LupvJ" target="_blank" rel="noreferrer" class="flex items-center px-2.5�4ext-[0.8rem] hover:underline">Open in Web Editor<svg stroke="currentColor" fill="none" stroke-width="2" viewBox=".".". 0 24 �(T
�)" stroke-linecap="round" stroke-linejoin="round" class="ml-1�4ext-gray-500" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path d="M 1�p�c6a�(N��)�(N��)0 0 1-�(N��)2H5a�(N��)�(N��)0 0 1-�(g(�)�2�68a�(N��)�(N��)0 0 1 �(g(�)6"><y:ath><polyline points="� 2 2 21 0�0�0�0�0��(h*�) 9"></polyline><line�8�"10"�9�"14"�8�(o�)"21"�9�(o�)"3"></line><ztvg><t�><u(iv><u(iv>
    <figcaption></figcaption>
  </figure>
</div>
<div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let</span> target =�!�!span class="hljs-literal">null</span>;
<uode></pre><div class="comment"><p></p></div></div><div class="pair split"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let<ztpan>�7orldRecord =�!�!span class="hljs-title class_">Infinity<ztpan>;
</code><y:re><div class="comment"><p>Start�7ith a very high record�4hat can easily be beaten, like infinity!</p></div></div><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">for<ztpan> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0<ztpan>; i &lt;�0ath.<span class="hljs-property">points</span>.<span class="hljs-property">length</span> - <span class="hljs-number">�ztpan>; i++)"
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"> �!�!span class="hljs-keyword">let<ztpan> a =�0ath.<span class="hljs-property">points</span>[i];
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  <span class="hljs-keyword">let</span> b = path.<span class="hljs-property">points<ztpan>[i +�!�!span class="hljs-number">1</span>];
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  <span class="hljs-keyword">let</span> normalPoint = <span class="hljs-title function_">getNormalPoint<ztpan>(future, a, b);
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  <span class="hljs-keyword">if<ztpan> (normalPoint.<span class="hljs-property">x<ztpan>�.�.�.lt; a.<span class="hljs-property">x<ztpan>�=| normalPoint.<span class="hljs-property">x<ztpan>�.�.�.gt; b.<span class="hljs-property">x<ztpan>) {
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">    normalPoint = b.<span class="hljs-title function_">copy<ztpan>();
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  }
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"> �!�!span class="hljs-keyword">let<ztpan> distance = p5.<span class="hljs-property">Vector<ztpan>.<span class="hljs-title function_">dist</span>(future, normalPoint);
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">  <span class="hljs-keyword">if<ztpan> (distance�.�.�.lt; worldRecord)"
   �7orldRecord = distance;
   �4arget = normalPoint.<span class="hljs-title function_">copy<ztpan>();
  }
</code><y:re><div class="comment"><p>If you beat�4he record,�4his should be your�4arget.</p></div></div><div class="pair split"><pre><code class="hljs code language-javascript"> �!�!span class="hljs-keyword">let<ztpan> dir =�05.<span class="hljs-property">Vector</span>.<span class="hljs-title function_">sub</span>(b, a);
  dir.<span class="hljs-title function_">setMag</span>(<span class="hljs-number">�(ry�)</span>);
  target.<span class="hljs-title function_">add<ztpan>(dir);
<uode></pre><div class="comment"><p>Look at the direction of�4he line segment in order�4o seek a little bit ahead of�4he normal.</p></div></div><div class="pair"><pre><code class="hljs code language-javascript">}
<uode></pre><div class="comment"><p></p></div></div></div>
<p>You may have noticed�4he�5se of <code>Infinity</code> to initialize <code>worldRecord<uode>. In JavaScript,�!�!code>Infinity<uode> is a special numeric value that represents,�7ell, infinity.�!�?t works in�4his case because�!�? need a starting�6alue�4hat will always be higher than any�0lausible distance calculated in the code. The first calculated distance will always set a new world record, against which all the others�7ill be compared.</p>
<p>I also�7ant to highlight�4he hardcoded�6alue of <code>�(ry�)</code>,�7hich sets the distance ahead on the path from the normal for�4he�4arget. Reynolds indicates that�4his value should be dynamic and calculated based on the vehicle’s distance�4o the path and its speed. Give�4his a try and see how it improves the accuracy or responsiveness of the path-following behavior!</p>
<div data-type="exercise" class="callout">
  <h0�0�0�0�0�id="exercise-5�"><a class="heading-link" href="#exercise-511">Exercise 5.�</a></h3>
  <p>Create a path�4hat changes over�4ime. Can�4he�0oints that define the path have their own steering behaviors?<y:>
</div>
<h2 id="complex-systems"><a class="heading-link" href="#complex-systems">Complex Systems<t�><vv�(���)
<p>I said�4he�0urpose of this chapter is to breathe life into�4he�4hings that move around�05.js canvases. You’ve come a long way by learning to�7rite�4he code for an autonomous agent and playing with examples of�4hat agent’s individual behaviors. But this is no�0lace�4o stop. Yes, a�6ehicle is a simulated being that makes decisions about how�4o seek and flow and follow. But what is a life led alone, without the love and support of others?<y:>
<p>And so, as a logical next step,�!�?’ll take�4he�7ork I’ve done developing behaviors for individual autonomous agents and apply it�4o simulations that involve�!�!em>many<u0m> autonomous agents operating in parallel—agents that have an ability�4o perceive not only their physical environment but also the actions of�4heir fellow agents, and then act accordingly. In other�7ords, I want�4o create complex systems�7ith p5.js.</p>
<p>A <strong>complex system</strong> is�4ypically defined as a system�4hat’s more�4han the sum of its�0arts. While the individual elements of�4he system may be incredibly simple and easily understood, the behavior of the system as a whole can be highly complex, intelligent, and difficult to�0redict.<y:>
<p>Think, for example, about a�4iny, crawling ant—one single ant. An ant is an autonomous agent; it can perceive its environment (using antennae�4o gather information about�4he direction and strength of chemical signals) and make decisions about how to move based on�4hose signals. But can a single ant acting alone build a nest, gather food, or defend its�iueen? An ant is a simple�5nit that can�0erceive only its immediate environment. A <em>colony</em> of ants, however, is a sophisticated, complex system, a superorganism of components that�7ork together�4o accomplish difficult, complicated goals.</p>
<p>Here are�4hree key�0rinciples that�7ill guide my�7ork with complex systems:<y:>
<ul>
 �!�!li><strong>Simple units have short-range relationships.<zttrong> This is�7hat I’ve been building all along: vehicles�4hat have a limited�0erception of�4heir environment.<v�i>
 �!�!li><strong>Simple units operate in�0arallel.</strong> For every cycle through the <code>draw()</code> loop, each�5nit will calculate its own steering forces. This�7ill create�4he appearance of all�4he�5nits�7orking in parallel.<v�i>
 �!�!li><strong>Systems as a whole exhibit emergent�0henomena.<zttrong> Complex behaviors, patterns, and intelligence can emerge from�4he interactions among simple�5nits. This�0henomenon occurs in nature, such as in ant colonies, migration�0atterns, earthquakes, and snowflakes. The question is whether the same results can be achieved in a p5.js sketch.<v�i>
<z�l>
<p>Beyond�4hese core principles, three additional�iualities of complex systems will help frame the discussion, as�7ell as�0rovide guidelines for features�4o include in a software simulation. It’s important�4o acknowledge that�4his is a fuzzy set of characteristics, and not all complex systems have all<�c- --> <!-- -->of�4hem:</p>
<ul>
  <li>
   �!�!strong>Nonlinearity:</strong> This aspect of complex systems is often casually referred to as the <em>butterfly effect</em>, coined by mathematician and meteorologist Edward Norton Lorenz, a�0ioneer in the study of chaos�4heory.�!�?n 61, Lorenz�7as running a computer weather simulation for�4he second time and, perhaps to save a little�4ime,�4yped in a starting�6alue of 0.506 instead of 0.507. The end result was completely different from the first result of the simulation.
    Stated more evocatively,�4he�4heory is�4hat a single butterfly flapping its wings on�4he other side of�4he�7orld could cause a massive�7eather shift and ruin your�7eekend at the beach.�!�?t’s called�!�!em>nonlinear</em> because there isn’t a linear relationship between a change in initial conditions and a change in outcome. A small change in initial conditions can have a massive effect on the outcome. Nonlinear systems are a superset of chaotic systems. In�!�!a href="uellular-automata#section-cellular-automata">Chapter 7<t�>,�9ou’ll see how even in a system of many 0s and  , if�9ou change just one bit, the result�7ill be completely different.
 �!�!v�i>
 �!�!li><strong>Competition and cooperation:<zttrong> One ingredient that often makes a complex system tick is the presence of both competition and cooperation among�4he elements. The�5pcoming flocking system will have three rules: alignment, cohesion, and separation. Alignment and cohesion�7ill ask the elements�4o “cooperate” by�4rying to stay together and move together. Separation, however,�7ill ask the elements�4o “compete” for space. 2 2 2 2hen the time comes, try taking out just the cooperation or just the competition, and�9ou’ll see how the system loses its complexity. Competition and cooperation are found�4ogether in living complex systems, but not in nonliving complex systems like�4he�7eather.<v�i>
 �!�!li>
    <strong>Feedback:<zttrong> Complex systems often include a loop that feeds�4he output of�4he system back into the system�4o influence its behavior in a positive or negative direction. Let’s say you decide�4o take�0ublic transportation�4o work each day because it’s�4he most reliable and cost-effective solution, and you’re�0ut off by the traffic congestion and environmental impact of driving. You aren’t alone; others�4urn to�0ublic transportation�4oo. The system grows more efficient and attractive, serving more�0eople with�4he same resources, and meanwhile, vehicle traffic is reduced.
    Over�4ime, however, the system may struggle to accommodate�4he rising demand, leading to overcrowding, delays, and increased fares�4o fund infrastructure improvements. As a result,�9ou and others start to switch back�4o driving,�4hereby increasing traffic congestion once again and reducing�0ublic transport’s efficiency. As�4raffic�7orsens, the funds from increased fares are (hopefully)�5sed to improve�0ublic transport infrastructure, making it more appealing once again.
   �!�?n this�7ay, the cost and efficiency of�0ublic transportation are both the input of�4he system (determining�7hether�9ou choose to�5se it or not) and the output (the degree of traffic congestion and subsequent cost and efficiency). Economic models are just one example of a human complex system. Others include fads and trends, elections, crowds, and�4raffic flow.
 �!�!v�i>
<z�l>
<p>Complexity�7ill serve as a key�4heme for much of�4he remainder of the book. In�4his section,�!�?’ll begin by introducing an additional feature�4o the <code>Vehicle<uode> class: the ability to�0erceive neighboring vehicles. This enhancement�7ill pave�4he�7ay for a culminating example of a complex system in which the interplay of simple individual behaviors results in an emergent behavior: flocking<em>.<u0m></p>
<h3 id="implementing-group-behaviors-or-lets-not-run-into-each-other"><a class="heading-link" href="#implementing-group-behaviors-ar-lets-not-run-into-each-ather">Implementing�?�?roup Behaviors (or: Let’s Not Run Into Each Other)</a></h3>
<p>Managing a group of objects is certainly not a new concept. You’ve seen�4his before—in <a href=".".particles#section-particles">Chapter 2 2 2</a>, where I developed the <code>Emitter<uode> class�4o represent an overall�0article system. There,�!�?�5sed an array�4o store a list of individual�0articles. I’ll start�7ith the same�4echnique here and store <code>Vehicle<uode> objects in an array:<y:>
<div class="overflow-visible�0t-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded�0x-�(���)5 py-1.5�4ext-xs font-semibold�               hover:bg-gray-0�0�0"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400 text-white�4ransition-opacity opacity-0">Copied!</div><svg stroke="currentColor" fill="currentColor" stroke-width="."."." viewBox=".".". 0 24 �(T
�)" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><g><path fill="none" d="M0 0h24v�(T
�)H0z"><y:ath><path d="M7 6V�9p�1 1 0 0 1 1-�a1 1 0 0 1 1 1v14a1 1 0 0 1-1 �-3v3c0 .55�(g(�).45 1-1.007 4.007A1.001 1.001 0 0 1 0�0�0�0�0��(h*�)l.000�0�0�0�c0-.55�(���)45-1 1.007-1H7zM5.000�0�0�0�0�8L5 �(e��)h10V8H5.00�I�UM9 5 5h8v10h�2�64H9v�"></path><u�><ztvg><span class="ml-1">Copy</span><uutton></div></div><div class="pair split"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let<ztpan>�6ehicles;
<uode></pre><div class="comment"><p>Declare an array of <code>Vehicle<uode> objects.<y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>)"
<uode></pre><div class="comment"><p></p></div></div><div class="pair split"><pre><code class="hljs code language-javascript"> �6ehicles = [];
  <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let<ztpan> i =�!�!span class="hljs-number">0</span>; i�.�.�.lt; <span class="hljs-number">100<ztpan>; i++)"
   �6ehicles.<span class="hljs-title function_">push<ztpan>(<span class="hljs-keyword">new<ztpan>�!�!span class="hljs-title class_">Vehicle</span>(<span class="hljs-title function_">random<ztpan>(width),�!�!span class="hljs-title function_">random</span>(height)));
<uode></pre><div class="comment"><p>Initialize and fill the array
with a bunch of vehicles.<y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  }
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">}
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><u(iv>
<p>Now, when it comes time�4o manipulate all�4he�6ehicles in�!�!code>draw()<uode>, I can loop�4hrough�4he array and call the necessary methods:</p>
<div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">function<ztpan>�!�!span class="hljs-title function_">draw</span>(<span class="hljs-params"></span>)"
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"> �!�!span class="hljs-keyword">for<ztpan> (<span class="hljs-keyword">let</span> vehicle <span class="hljs-keyword">of<ztpan>�6ehicles)"
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript">   �6ehicle.<span class="hljs-title function_">update</span>();
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript">   �6ehicle.<span class="hljs-title function_">show</span>();
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"> �(
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript">}
<uode></pre><div class="comment"><p></p></div></div></div>
<p>Maybe I want�4o add a behavior, a force to be applied to all�4he�6ehicles. This could be seeking�4he mouse:<y:>
<div class="overflow-visible�0t-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded�0x-�(���)5 py-1.5�4ext-xs font-semibold�               hover:bg-gray-0�0�0"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400 text-white�4ransition-opacity opacity-0">Copied!</div><svg stroke="currentColor" fill="currentColor" stroke-width="."."." viewBox=".".". 0 24 �(T
�)" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><g><path fill="none" d="M0 0h24v�(T
�)H0z"><y:ath><path d="M7 6V�9p�1 1 0 0 1 1-�a1 1 0 0 1 1 1v14a1 1 0 0 1-1 �-3v3c0 .55�(g(�).45 1-1.007 4.007A1.001 1.001 0 0 1 0�0�0�0�0��(h*�)l.000�0�0�0�c0-.55�(���)45-1 1.007-1H7zM5.000�0�0�0�0�8L5 �(e��)h10V8H5.00�I�UM9 5 5h8v10h�2�64H9v�"></path><u�><ztvg><span class="ml-1">Copy</span><uutton></div></div><div class="pair"><pre><code class="hljs code language-javascript">   �6ehicle.<span class="hljs-title function_">seek</span>(mouseX, mouseY);
<uode></pre><div class="comment"><p></p></div></div></div>
<p>But that’s an <em>individual</em> behavior, and I’ve already spent�4he bulk of�4his chapter worrying about individual behaviors. You’re here because�9ou�7ant to apply a�!�!em>group</em> behavior. I’ll begin�7ith <strong>separation</strong>, a behavior that commands, “Avoid colliding with�9our neighbors!”<y:>
<div class="overflow-visible�0t-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded�0x-�(���)5 py-1.5�4ext-xs font-semibold�               hover:bg-gray-0�0�0"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400 text-white�4ransition-opacity opacity-0">Copied!</div><svg stroke="currentColor" fill="currentColor" stroke-width="."."." viewBox=".".". 0 24 �(T
�)" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><g><path fill="none" d="M0 0h24v�(T
�)H0z"><y:ath><path d="M7 6V�9p�1 1 0 0 1 1-�a1 1 0 0 1 1 1v14a1 1 0 0 1-1 �-3v3c0 .55�(g(�).45 1-1.007 4.007A1.001 1.001 0 0 1 0�0�0�0�0��(h*�)l.000�0�0�0�c0-.55�(���)45-1 1.007-1H7zM5.000�0�0�0�0�8L5 �(e��)h10V8H5.00�I�UM9 5 5h8v10h�2�64H9v�"></path><u�><ztvg><span class="ml-1">Copy</span><uutton></div></div><div class="pair"><pre><code class="hljs code language-javascript">   �6ehicle.<span class="hljs-title function_">separate</span>();
<uode></pre><div class="comment"><p></p></div></div></div>
<p>That looks good but is not�iuite right. What’s missing? In�4he case of�!�!code>seek()<uode>, I said, “Seek <code>mouseX</code> and <code>mouseY</code>.” In�4he case of�!�!code>separate()<uode>, I’m saying, “Separate from�!�!em>everyone else</em>.” Who is everyone else? It’s�4he list of all�4he other�6ehicles:</p>
<div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">    vehicle.<span class="hljs-title function_">separate<ztpan>(vehicles);
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><u(iv>
<p>This is�4he big leap beyond�7hat you saw before�7ith particle systems. Instead of each element (particle or�6ehicle) operating on its own, I’m now saying, “Hey�9ou, that�6ehicle�4here�S�MWhen it comes time for�9ou�4o operate,�9ou need to operate�7ith an awareness of everyone else. So I’m going to go ahead and pass�9ou�4he list of everyone else.”</p>
<div class="avoid-break">
 �!�!p>Putting together�7hat I’ve done so far, here are�4he�!�!code>setup()</code> and <code>draw()</code> functions for a sketch�4hat exhibits group behavior:</p>
 �!�!div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let</span> vehicles;
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>)"
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"> �!�!span class="hljs-title function_">createCanvas</span>(<span class="hljs-number">640<ztpan>, <span class="hljs-number">�(T
�)0<ztpan>);
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"> �6ehicles = [];
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let<ztpan> i =�!�!span class="hljs-number">0</span>; i�.�.�.lt; <span class="hljs-number">100<ztpan>; i++)"
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript">   �6ehicles.<span class="hljs-title function_">push<ztpan>(<span class="hljs-keyword">new<ztpan>�!�!span class="hljs-title class_">Vehicle</span>(<span class="hljs-title function_">random<ztpan>(width),�!�!span class="hljs-title function_">random</span>(height)));
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"> �(
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript">}
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript">
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">function<ztpan>�!�!span class="hljs-title function_">draw</span>(<span class="hljs-params"></span>)"
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"> �!�!span class="hljs-title function_">background</span>(<span class="hljs-number">�(ry�)5<ztpan>);
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript">
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let<ztpan>�6ehicle�!�!span class="hljs-keyword">of</span> vehicles) {
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="bold pair split"><pre><code class="hljs code language-javascript">   �6ehicle.<span class="hljs-title function_">separate</span>(vehicles);
<uode></pre><div class="comment"><p>This is really�4he only new thing you’re doing in this section.  You’re asking
a�!�!code>Vehicle</code> object�4o examine all the other vehicles in the process of calculating a
separation force.</p></div></div><div class="pair"><pre><code class="hljs code language-javascript">   �6ehicle.<span class="hljs-title function_">update</span>();
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript">   �6ehicle.<span class="hljs-title function_">show</span>();
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"> �(
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript">}
<uode></pre><div class="comment"><p></p></div></div></div>
<u(iv>
<div class="half-width-right">
 �!�!figure>
    <div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:�52px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:imageztvg+xml;charset=utf-8,%0�0�0�0�svg height=&#x�(y]�);1&#x27;�7idth=&#x�(y]�);1��(N�)#x�(y]�); xmlns=&#x27;http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg&#x27;�6ersion=&#x�(y]�);1.1&#x27;%3E%0�0�0�0�ztvg%3E" style="max-width:100%;display:block;position:static".".><u(iv><div aria-hidden="true" data-placeholder-image="" style="opacity:�transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source�4ype="image|�ebp" data-srcset="zttatic/5a07dd8ede�(N��)�(���)0f0�0�0�0�0�8eec4c995cu91c1]�5_steering_34.webp 288w,zttatic/5a07dd8ede�(N��)�(���)0f0�0�0�0�0�8eec4c995c^�a9cd]�5_steering_34.webp 576w,zttatic/5a07dd8ede�(N��)�(���)0f0�0�0�0�0�8eec4c995c^99SA]�5_steering_34.webp 1��(" sizes="(min-width: 1���x) 1���x, 100vw".".><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 1���x) 1���x, 100vw" decoding="async" loading="lazy" data-src="zttatic/5a07dd8ede�(N��)�(���)0f0�0�0�0�0�8eec4c995cu9c]�5_steering_34.png" data-srcset="zttatic/5a07dd8ede�(N��)�(���)0f0�0�0�0�0�8eec4c995c]�85e7]�5_steering_34.png �(R��)8w,/static^�a1907dd8ede29260f348eec4c99145c/f088b/05_steering_0�0�0�0�0�.png 576w,zttatic/5a07dd8ede�(N��)�(���)0f0�0�0�0�0�8eec4c995cu9c]�5_steering_34.png �52w" alt="Figure 5.3�(T|�) The desired�6elocity for separation (equivalent�4o fleeing) is a vector�4hat points in the opposite direction of a target."b6</picture><noscript><picture><source�4ype="image|�ebp" srcSet=".".static^�a1907dd8ede29260f348eec4c99145c/c9u1/05_steering_0�0�0�0�0�.webp �(R��)8w,/static^�a1907dd8ede29260f348eec4c99145c/5a9cd/05_steering_0�0�0�0�0�.webp 576w,/static^�a1907dd8ede29260f348eec4c99145c/49908/05_steering_0�0�0�0�0�.webp �52w" sizes="(min-width: �52px) �52px, 100vw"b6<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: �52px) �52px, 100vw" decoding="async" loading="lazy" src="zttatic/5a07dd8ede�(N��)�(���)0f0�0�0�0�0�8eec4c995cu9c]�5_steering_34.png" srcSet=".".static^�a1907dd8ede29260f348eec4c99145c/5e7/05_steering_0�0�0�0�0�.png 288w,zttatic/5a07dd8ede�(N��)�(���)0f0�0�0�0�0�8eec4c995cu�SA8b]�5_steering_34.png 576w,/static^�a1907dd8ede29260f348eec4c99145c/c9c2d/05_steering_0�0�0�0�0�.png 1��(" alt="Figure 5.0�0�0�0�0�: The desired velocity for separation (equivalent to fleeing) is a�6ector that�0oints in�4he opposite direction of a�4arget.".".><y:icture><w�oscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const�4=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src"+"+e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const�4=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of�4)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}<ztcript></div>
   �!�!figcaption>Figure 5.0�0�0�0�0�: The desired velocity for separation (equivalent to fleeing) is a�6ector that�0oints in�4he opposite direction of a�4arget.</figcaption>
  </figure>
</div>
<p>Of course,�4his is just the beginning. The real work happens inside the <code>separate()</code> method. Reynolds defines�4he separation behavior as “steer�4o avoid crowding.”�!�?n other words, if a given vehicle is�4oo close�4o you, steer away from�4hat vehicle. Sound familiar? Remember the seek behavior, steering a vehicle toward a�4arget? Reverse�4hat force and you have�4he flee behavior, which is�7hat should be applied here�4o achieve separation (see Figure 5.3�(SA�).<y:>
<div class="half-width-right">
 �!�!figure>
    <div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:�52px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:imageztvg+xml;charset=utf-8,%0�0�0�0�svg height=&#x�(y]�);587&#x27;�7idth=&#x�(y]�);1��(N�)#x�(y]�); xmlns=&#x27;http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg&#x27;�6ersion=&#x�(y]�);1.1&#x27;%3E%0�0�0�0�ztvg%3E" style="max-width:100%;display:block;position:static".".><u(iv><div aria-hidden="true" data-placeholder-image="" style="opacity:�transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source�4ype="image|�ebp" data-srcset="zttatic/�(y]�)9fd810aa62a6fc7eff0df966�(���)�(R��)f9_047a]�5_steering_35.webp 288w,zttatic/�(y]�)9fd810aa62a6fc7eff0df966�(���)�(R��)f9^�8005]�5_steering_35.webp 576w,zttatic/�(y]�)9fd810aa62a6fc7eff0df966�(���)�(R��)f9_07d5]�5_steering_35.webp 1��(" sizes="(min-width: 1���x) 1���x, 100vw".".><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 1���x) 1���x, 100vw" decoding="async" loading="lazy" data-src="zttatic/�(y]�)9fd810aa62a6fc7eff0df966�(���)�(R��)f9^800b]�5_steering_35.png" data-srcset="zttatic/�(y]�)9fd810aa62a6fc7eff0df966�(���)�(R��)f9^r72c8]�5_steering_35.png �(R��)8w,/static^r79fd810aa66fc7eff0df9662628f9/024cd/05_steering_0�0�0�.png 576w,zttatic/�(y]�)9fd810aa62a6fc7eff0df966�(���)�(R��)f9^800b]�5_steering_35.png �52w" alt="Figure 5.30�0�0� Desired�6elocity for separation is the average of multiple fleeing desired velocities."b6</picture><noscript><picture><source�4ype="image|�ebp" srcSet=".".static^r79fd810aa66fc7eff0df9662628f9/8047a/05_steering_0�0�0�.webp �(R��)8w,/static^r79fd810aa66fc7eff0df9662628f9/58005/05_steering_0�0�0�.webp 576w,/static^r79fd810aa66fc7eff0df9662628f9/707d5/05_steering_0�0�0�.webp �52w" sizes="(min-width: �52px) �52px, 100vw"b6<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: �52px) �52px, 100vw" decoding="async" loading="lazy" src="zttatic/�(y]�)9fd810aa62a6fc7eff0df966�(���)�(R��)f9^800b]�5_steering_35.png" srcSet=".".static^r79fd810aa66fc7eff0df9662628f9/�(y]�)8/05_steering_0�0�0�.png 288w,zttatic/�(y]�)9fd810aa62a6fc7eff0df966�(���)�(R��)f9]��(T
�)cd]�5_steering_35.png 576w,/static^r79fd810aa66fc7eff0df9662628f9/4800b/05_steering_0�0�0�.png 1��(" alt="Figure 5.0�0�0�0�: Desired velocity for separation is�4he average of multiple fleeing desired�6elocities.".".><y:icture><w�oscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const�4=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src"+"+e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const�4=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of�4)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}<ztcript></div>
   �!�!figcaption>Figure 5.0�0�0�0�: Desired velocity for separation is�4he average of multiple fleeing desired�6elocities.</figcaption>
  </figure>
</div>
<p>But what if more�4han one vehicle is�4oo close? In�4hat case, I’ll define separation as the average of all�4he�6ectors�0ointing away from any close vehicles (Figure 5.30�0�0�.<y:>
<p>How do I turn�4hat into code? Remember,�!�?’m�7riting a method called�!�!code>separate()<uode>�4hat receives an array of�!�!code>Vehicle</code> objects as an argument:<y:>
<div class="overflow-visible�0t-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded�0x-�(���)5 py-1.5�4ext-xs font-semibold�               hover:bg-gray-0�0�0"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400 text-white�4ransition-opacity opacity-0">Copied!</div><svg stroke="currentColor" fill="currentColor" stroke-width="."."." viewBox=".".". 0 24 �(T
�)" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><g><path fill="none" d="M0 0h24v�(T
�)H0z"><y:ath><path d="M7 6V�9p�1 1 0 0 1 1-�a1 1 0 0 1 1 1v14a1 1 0 0 1-1 �-3v3c0 .55�(g(�).45 1-1.007 4.007A1.001 1.001 0 0 1 0�0�0�0�0��(h*�)l.000�0�0�0�c0-.55�(���)45-1 1.007-1H7zM5.000�0�0�0�0�8L5 �(e��)h10V8H5.00�I�UM9 5 5h8v10h�2�64H9v�"></path><u�><ztvg><span class="ml-1">Copy</span><uutton></div></div><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-title function_">separate</span>(<span class="hljs-params">vehicles</span>)"
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript">
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">}
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><u(iv>
<p>Inside this method,�!�?’ll loop�4hrough all�4he�6ehicles and see if any are�4oo close:<y:>
<div class="overflow-visible�0t-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded�0x-�(���)5 py-1.5�4ext-xs font-semibold�               hover:bg-gray-0�0�0"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400 text-white�4ransition-opacity opacity-0">Copied!</div><svg stroke="currentColor" fill="currentColor" stroke-width="."."." viewBox=".".". 0 24 �(T
�)" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><g><path fill="none" d="M0 0h24v�(T
�)H0z"><y:ath><path d="M7 6V�9p�1 1 0 0 1 1-�a1 1 0 0 1 1 1v14a1 1 0 0 1-1 �-3v3c0 .55�(g(�).45 1-1.007 4.007A1.001 1.001 0 0 1 0�0�0�0�0��(h*�)l.000�0�0�0�c0-.55�(���)45-1 1.007-1H7zM5.000�0�0�0�0�8L5 �(e��)h10V8H5.00�I�UM9 5 5h8v10h�2�64H9v�"></path><u�><ztvg><span class="ml-1">Copy</span><uutton></div></div><div class="pair split"><pre><code class="hljs code language-javascript"> �!�!span class="hljs-keyword">let<ztpan> desiredSeparation =�!�!span class="hljs-number">20<ztpan>;
  <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let<ztpan> other�!�!span class="hljs-keyword">of</span> vehicles) {
</code><y:re><div class="comment"><p>This variable specifies how close is too close.</p></div></div><div class="offset�0air split"><pre><code class="hljs code language-javascript">    <span class="hljs-keyword">let</span> d = p5.<span class="hljs-property">Vector<ztpan>.<span class="hljs-title function_">dist</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">position</span>, other.<span class="hljs-property">position<ztpan>);
<uode></pre><div class="comment"><p>What is the distance between�4his vehicle and the other vehicle?</p></div></div><div class="pair"><pre><code class="hljs code language-javascript">   �!�!span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this<ztpan> !== other�.�.�.amp;&amp; d &lt; desiredSeparation) {
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">
<uode></pre><div class="comment"><p>Any code here will be executed if the vehicle is�7ithin �(e��)�0ixels.</p></div></div><div class="pair"><pre><code class="hljs code language-javascript">   �(
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"> �(
<uode></pre><div class="comment"><p></p></div></div></div>
<p>Notice�4hat I’m checking not only whether the distance is less�4han a desired separation but also whether <code>this</code> is not equal�4o <code>other<uode>. This is a key element. Remember, all�4he�6ehicles are in�4he array; without this extra check, the vehicle will attempt�4o flee from itself�y:>
<p>If the vehicles are�4oo close, I compute a vector�4hat points away from�4he offending�6ehicle:<y:>
<div class="overflow-visible�0t-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded�0x-�(���)5 py-1.5�4ext-xs font-semibold�               hover:bg-gray-0�0�0"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400 text-white�4ransition-opacity opacity-0">Copied!</div><svg stroke="currentColor" fill="currentColor" stroke-width="."."." viewBox=".".". 0 24 �(T
�)" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><g><path fill="none" d="M0 0h24v�(T
�)H0z"><y:ath><path d="M7 6V�9p�1 1 0 0 1 1-�a1 1 0 0 1 1 1v14a1 1 0 0 1-1 �-3v3c0 .55�(g(�).45 1-1.007 4.007A1.001 1.001 0 0 1 0�0�0�0�0��(h*�)l.000�0�0�0�c0-.55�(���)45-1 1.007-1H7zM5.000�0�0�0�0�8L5 �(e��)h10V8H5.00�I�UM9 5 5h8v10h�2�64H9v�"></path><u�><ztvg><span class="ml-1">Copy</span><uutton></div></div><div class="pair"><pre><code class="hljs code language-javascript">   �!�!span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this<ztpan> !== other�.�.�.amp;&amp; d &lt; desiredseparation) {
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="offset pair split"><pre><code class="hljs code language-javascript">     �!�!span class="hljs-keyword">let<ztpan> diff = p5.<span class="hljs-property">Vector<ztpan>.<span class="hljs-title function_">sub<ztpan>(<span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">position<ztpan>, other.<span class="hljs-property">position</span>);
      diff.<span class="hljs-title function_">normalize<ztpan>();
</code><y:re><div class="comment"><p>A�6ector pointing away from�4he other’s�0osition<y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">    }
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><u(iv>
<div class="avoid-break">
  <p>This isn’t enough. I have a fleeing�6ector now, but�7hat I really need is�4he average of the fleeing vectors for all the vehicles�4hat are too close.�?�!ow do I compute an average? Add up all�4he�6ectors and divide by�4he�4otal:<y:>
  <div class="overflow-visible�0t-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded�0x-�(���)5 py-1.5�4ext-xs font-semibold�               hover:bg-gray-0�0�0"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400 text-white�4ransition-opacity opacity-0">Copied!</div><svg stroke="currentColor" fill="currentColor" stroke-width="."."." viewBox=".".". 0 24 �(T
�)" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><g><path fill="none" d="M0 0h24v�(T
�)H0z"><y:ath><path d="M7 6V�9p�1 1 0 0 1 1-�a1 1 0 0 1 1 1v14a1 1 0 0 1-1 �-3v3c0 .55�(g(�).45 1-1.007 4.007A1.001 1.001 0 0 1 0�0�0�0�0��(h*�)l.000�0�0�0�c0-.55�(���)45-1 1.007-1H7zM5.000�0�0�0�0�8L5 �(e��)h10V8H5.00�I�UM9 5 5h8v10h�2�64H9v�"></path><u�><ztvg><span class="ml-1">Copy</span><uutton></div></div><div class="bold�0air split"><pre><code class="hljs code language-javascript">  <span class="hljs-keyword">let</span> sum = <span class="hljs-title function_">createVector<ztpan>();
</code><y:re><div class="comment"><p>Start�7ith an empty�6ector.</p></div></div><div class="bold�0air split"><pre><code class="hljs code language-javascript">  <span class="hljs-keyword">let</span> count = <span class="hljs-number">0<ztpan>;
</code><y:re><div class="comment"><p>We have�4o keep�4rack of how many�6ehicles are too close.</p></div></div><div class="pair"><pre><code class="hljs code language-javascript">
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let<ztpan> other�!�!span class="hljs-keyword">of</span> vehicles) {
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">    <span class="hljs-keyword">let</span> d = p5.<span class="hljs-property">Vector<ztpan>.<span class="hljs-title function_">dist</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">position</span>, other.<span class="hljs-property">position<ztpan>);
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript">   �!�!span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this<ztpan> !== other�.�.�.amp;&amp; d &lt; desiredseparation) {
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">      <span class="hljs-keyword">let</span> diff =�05.<span class="hljs-property">Vector</span>.<span class="hljs-title function_">sub</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">position</span>, other.<span class="hljs-property">position<ztpan>);
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript">      diff.<span class="hljs-title function_">normalize</span>();
<uode></pre><div class="comment"><p></p></div></div><div class="bold�0air split"><pre><code class="hljs code language-javascript">      sum.<span class="hljs-title function_">add</span>(diff);
      count++;
</code><y:re><div class="comment"><p>Add all�4he�6ectors�4ogether and increment the count.</p></div></div><div class="pair"><pre><code class="hljs code language-javascript">   �(
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"> �(
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript">
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="bold pair split"><pre><code class="hljs code language-javascript"> �!�!span class="hljs-keyword">if</span> (count�.�.�.gt; <span class="hljs-number">0<ztpan>) {
</code><y:re><div class="comment"><p>Make sure�4hat there is at least one close
vehicle.  You don’t want�4o bother doing anything
if nothing is too close (not�4o mention,�9ou can’t
divide by�+ero!).</p></div></div><div class="bold�0air split"><pre><code class="hljs code language-javascript">    sum.<span class="hljs-title function_">div</span>(count);
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  }
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><u(iv>
</div>
<p>Once�!�? have the average vector (stored in the variable�!�!code>sum</code>), that�6ector can be scaled to�4he maximum speed and become the desired velocity—the�6ehicle�!�!em>desires</em> to move in�4hat direction at maximum speed�S�M(In fact, I really don’t have to divide by�!�!code>count</code> anymore since the magnitude is set manually.) And once�!�? have the desired velocity, it’s�4he same old Reynolds story—steering equals desired minus�6elocity:</p>
<div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  <span class="hljs-keyword">if<ztpan> (count &gt;�!�!span class="hljs-number">0</span>)"
<uode></pre><div class="comment"><p></p></div></div><div class="pair split"><pre><code class="hljs code language-javascript">    sum.<span class="hljs-title function_">setMag</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">maxspeed</span>);
</code><y:re><div class="comment"><p>Scale average�4o max speed
(this becomes desired).<y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">    <span class="hljs-keyword">let</span> steer = p5.<span class="hljs-property">Vector<ztpan>.<span class="hljs-title function_">sub<ztpan>(sum, vel);
</code><y:re><div class="comment"><p>Reynolds’s steering formula</p></div></div><div class="pair"><pre><code class="hljs code language-javascript">    steer.<span class="hljs-title function_">limit<ztpan>(<span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">maxforce<ztpan>);
<uode></pre><div class="comment"><p></p></div></div><div class="pair split"><pre><code class="hljs code language-javascript">   �!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-title function_">applyForce</span>(steer);
</code><y:re><div class="comment"><p>Apply�4he force�4o the vehicle.</p></div></div><div class="pair"><pre><code class="hljs code language-javascript"> �(
<uode></pre><div class="comment"><p></p></div></div></div>
<p>The following example shows the method in its entirety.<y:>
<div data-type="example">
  <h0�0�0�0�0�id="example-59-separation"><a class="heading-link" href="#example-59-separation">Example 5.9: Separation</a></h3>
  <figure>
   �!�!div class="not-prose clear-both my-4 overflow-hidden rounded border bg-gray-100" style="max-width:�52px"><div class="relative overflow-hidden rounded-t bg-white"><div class="absolute left-[50%]�4op-[50%] -translate-x-[50%] -translate-y-[50%] ">Loading sketch ...<u(iv><iframe class="w-full border-none�4ransition-opacity opacity-0" style="aspect-ratio:2.6666666666666665" loading="lazy" src=".".examples]�5_steeringw�oc_5_07_separation">Open in 2 2 2 2eb Editor
 !!span class="hljs-title function_">separate(vehicles)"
    let desiredSeparation = this.r *!!span class="hljs-number">2;
The desired separation is based
on4he6ehicle’s size.
   !!span class="hljs-keyword">let sum =!!span class="hljs-title function_">createVector();
   !!span class="hljs-keyword">let count =!!span class="hljs-number">0;
   !!span class="hljs-keyword">for (let other of6ehicles)"
     !!span class="hljs-keyword">let d =05.Vector.dist(this.position, other.position);
      if (this �= other && d...lt; desiredSeparation)"
       !!span class="hljs-keyword">let diff = p5.Vector.sub(this.position, other.position);
        diff.setMag(1 X�d);
What is4he magnitude of the p5.Vector
pointing away from the other vehicle?
The closer it is,4he more the vehicle should flee.
The farther, the less. So4he magnitude is set
to be inversely proportional4o the distance.
        sum.add(diff);
        count++;
      }
    }
    if (count >!!span class="hljs-number">0)"
      sum.setMag(this.maxspeed);
      let steer = p5.Vector.sub(sum, this.velocity);
      steer.limit(this.maxforce);
      this.applyForce(steer);
   (
 (

The separate() method includes two extra improvements. First,4he desired separation now depends on4he size of4he6ehicle, as opposed4o an arbitrary constant. This way,4he separation behavior adapts dynamically to4he individual characteristics of4he6ehicles. Second,4he magnitude of the vector0ointing away from a neighboring vehicle is set4o be inversely0roportional to4he distance. This means that4he closer the neighbor, the more4he6ehicle7ants4o flee, and vice6ersa.

 !!h3 id="exercise-51(N	)>Exercise 5.1(v�)t�>Create a!!code>cohere() method that follows4he opposite logic of!!code>separate(): if a6ehicle is beyond a certain distance, steer4oward that6ehicle. This7ill keep4he group4ogether. (In a moment,!?’ll look at what happens7hen both cohesion and separation0lay out together in the same simulation.)


  Loading sketch ...
Open in Web Editor


Combining BehaviorsThe most exciting and intriguing group behaviors come from mixing and matching multiple steering forces. After all, how could I even begin4o simulate emergence in a complex system4hrough a sketch that has only one rule?
When multiple steering forces are at play, I need a mechanism for managing them all. You may be4hinking, “This is nothing new. 2 2 2 2e juggle multiple forces all4he4ime.” You would be right. In fact,4his technique appeared as early as!!a href="u�orces#section-forces">Chapter (v�)t�>:
  let wind =!!span class="hljs-title function_">createVector(0.00�ztpan>, 0);
 !!span class="hljs-keyword">let gravity =!!span class="hljs-title function_">createVector(0, 0.�ztpan>);
  mover.applyForce(wind);
  mover.applyForce(gravity);

Here, a!!code>Mover object responds to4wo forces. This all works nicely because of the way the Mover class7as designed to accumulate the force vectors into its acceleration vector. In4his chapter, however, the forces stem from4he internal desires of4he movers (now called vehicles). And those desires can be7eighted so4hat some hold more sway than others. For example, consider a sketch in7hich all6ehicles have4wo desires:

 !!li>Seek the mouse position.
 !!li>Separate from any6ehicles that are4oo close.

Imagine the vehicles represent a school of fish. Although the fish7ant to avoid colliding7ith one another,4heir0rimary concern is seeking out a food source (the mouse). Being able to adjust the weights of4he4wo steering forces is crucial to achieving4his effect.
To begin,!?’ll add a method called applyBehaviors() to4he!!code>Vehicle class to manage all the behaviors:
applyBehaviors(vehicles) {
  this.separate(vehicles);
  this.seek(createVector(mouseX, mouseY));
}

Here, a single method4akes care of calling4he other methods4hat apply the forces—separate() and!!code>seek(). I could start mucking around7ithin those methods to adjust the strength of the forces4hey’re calculating, but it might be easier4o instead ask those methods to simply calculate and return4he forces. Then I can adjust4he forces’ strength and apply them4o the vehicle’s acceleration7ithin applyBehaviors():

  applyBehaviors(vehicles) {
    let separate =!!span class="hljs-variable language_">this.separate(vehicles);
   !!span class="hljs-keyword">let seek = this.seek(createVector(mouseX, mouseY));
    this.applyForce(separate);
    this.applyForce(seek);
Apply4he forces here since!!code>seek() and!!code>separate() no longer do so.
  }

Here’s how this new approach changes the seek() method:
 !!span class="hljs-title function_">seek(target)"
   !!span class="hljs-keyword">let desired =05.Vector.sub(target, this.position);
    desired.setMag(this.maxspeed);

    let steer = p5.Vector.sub(desired, this.velocity);
    steer.limit(this.maxforce);

   !!s>this.applyForce(steer);
    return steer;
Instead of applying4he force, return4he6ector.
 (

This change is subtle but incredibly important: it allows the strength of these forces4o be7eighted all in one0lace.

  Example 5.1SE Combining Steering Behaviors (Seek and Separate)
    Loading sketch ...
Open in 2 2 2 2eb Editor
applyBehaviors(vehicles)"
 !!span class="hljs-keyword">let separate = this.separate(vehicles);
  let seek =!!span class="hljs-variable language_">this.seek(createVector(mouseX, mouseY));
  separate.mult(1.5);
  seek.mult(0.5);
These6alues can be7hatever you want4hem to be!
They can be6ariables4hat are customized for
each vehicle, or they can change over4ime.
 !!span class="hljs-variable language_">this.applyForce(separate);
 !!span class="hljs-variable language_">this.applyForce(seek);
}

In4his code, I use mult() to adjust the forces. By multiplying each force vector by a factor, its magnitude is scaled accordingly. These factors (in4his case, 1.5 for separate and 0.5 for seek) represent4he7eight assigned4o each force. However,4he7eights don’t have to be constants. Think about how4hey might vary dynamically based on conditions7ithin the environment or0roperties of4he6ehicle. For example,7hat if4he!!code>seek7eight increases when4he6ehicle detects food nearby (imagine the vehicle as a creature with a!!code>hunger0roperty) or the separate weight becomes larger if4he6ehicle enters a crowded area? This flexibility in adjusting the weights allows for more sophisticated and nuanced behaviors to emerge.

  Exercise 5.

  Modify Example 5.10 so that4he behavior weights change over time. For example,7hat if4he7eights7ere calculated according4o a sine7ave or Perlin noise? Or what if some6ehicles are more concerned7ith seeking and others are more concerned with separating? Can9ou introduce other steering behaviors as7ell?

FlockingFlocking is a group animal behavior found in many living creatures, such as birds, fish, and insects.!!C- -->In 86, Reynolds created a computer simulation of flocking behavior and documented4he algorithm in his paper “Flocks,?!erds, and Schools: A Distributed Behavioral Model.” Re-creating this simulation in05.js7ill bring together all4he concepts in4his chapter:

  I will5se4he steering force formula (steer = desired –6elocity)4o implement the rules of flocking.
  These steering forces will be group behaviors and will require each vehicle to0erceive all the other vehicles.
 !!li>I7ill combine and weight multiple forces.
 !!li>The result will be a complex system—intelligent group behavior will emerge from4he simple rules of flocking without the presence of a centralized system or leader.

The good news is, I’ve already demonstrated items 1 through 0�0�0�0�0�in4his chapter, so this section can just be about0utting it all together and seeing the result.
Before I begin,!? should mention that!?’m going4o change4he name of4he!!code>Vehicle class (yet again). Reynolds uses4he4erm boid (a made-up7ord that refers to a birdlike object) to describe the elements of a flocking system.!?’ll do4he same.
Three rules govern flocking:

  Separation (aka avoidance): Steer4o avoid colliding with9our neighbors.
  Alignment (aka copy): Steer in the same direction as your neighbors.
 !!li>Cohesion (aka center): Steer4oward the center of your neighbors (stay7ith the group).

Figure 5.34 illustrates these rules.

  
)05w" alt="Figure 5.34: The4hree rules of flocking: separation, alignment, and cohesion. The example6ehicle and desired6elocity are bold."b6const4="undefined"�typeof?!TMLImageElement&&"loading"in?!TMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of4){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset"+"+e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}
      
    
  

 !!p>Can you rewrite the align() method so4hat boids see only other boids4hat fall7ithin a direct line of sight?

The code for cohesion isiuite similar4o that for alignment. The only difference is4hat instead of calculating4he average!!em>velocity of the boid’s neighbors, I want4o calculate the average position of4he boid’s neighbors (and5se4hat as a4arget to seek).

   !!span class="hljs-title function_">cohesion(boids) {
    let neighborDistance =!!span class="hljs-number">50;
    let sum = createVector(0,!!span class="hljs-number">0);
    let count = 0;
    for (let other!!span class="hljs-keyword">of boids)"
     !!span class="hljs-keyword">let d =05.Vector.dist(this.position, other.position);
      if ((this !== other) && (d < neighborDistance)) {
        sum.add(other.position);
        count++;
Add up all4he others’0ositions.      }
    }
    if (count >!!span class="hljs-number">0)"
      sum.div(count);
      return!!span class="hljs-variable language_">this.seek(sum);
Use4he!!code>seek() function
from Example 5.10.  The target
to seek is the average position of
your neighbors.
    } else"
     !!span class="hljs-keyword">return createVector(0,!!span class="hljs-number">0);
    }
  }


It’s also worth taking4he4ime to7rite a class called Flock4hat manages the whole group of boids. It7ill be6irtually identical4o the ParticleSystem class from!!a href="y:articles#section-particles">Chapter 4,7ith only one4iny change: when!? call run() on each!!code>Boid object (as I did to each Particle object),!?’ll pass in a reference to4he entire array of boids:
class!!span class="hljs-title class_">Flock {
  constructor()"
   !!span class="hljs-variable language_">this.boids = [];
  }

 !!span class="hljs-title function_">run() {
    for (let boid of!!span class="hljs-variable language_">this.boids)"
      boid.run(this.boids);
Each Boid object must know about
all4he other boids.
    }
  }

 !!span class="hljs-title function_">addBoid(boid) {
    this.boids.push(boid);
 (
}

All that remains is to initialize the flock in!!code>setup() and run it in draw().

 !!h3 id="example-5-flocking">Example 5.: Flocking
  
   !!div class="not-prose clear-both my-4 overflow-hidden rounded border bg-gray-100" style="max-width:52px">Loading sketch ...<v}frame></div><div class="flex items-center justify-between border-t"><div class="flex"><button class="flex items-center border-r px-2.5�0y-1.5 text-sm hover:bg-gray-�(e��)0"><svg stroke="currentColor" fill="none" stroke-width="�(N	�)�6iewBox="0 0 �(T
�) 24" aria-hidden="true" class="h-[�px] w-[15px]" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path stroke-linecap="round" stroke-linejoin="round" d="M4 2 2 2v5h.58�.356 2A8.001 8.001 0 004.582 9m0 0H9m11 �v-5h-.58�0 0a8.000�0�0�0�0�8.000�0�0�0�0�0 01-15.0�0�0�7-�.357 2H15"><y:ath></svg><span class="ml-1.5">Reset</span><uutton><button class="flex items-center border-r px-2.5�0y-1.5 text-sm hover:bg-gray-�(e��)0"><svg stroke="currentColor" fill="none" stroke-width="�(N	�)�6iewBox="0 0 �(T
�) 24" aria-hidden="true" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path stroke-linecap="round" stroke-linejoin="round" d="M10 9v6m4-6v6m7-�9p�9 9 0 �-18 0 9 9 0 01 0z"><y:ath></svg><span class="ml-1">Pause</span><uutton></div><a href="https:/u0ditor.p5js.orgw�atureofcode/sketchesgkpBw96Sd" target="_blank" rel="noreferrer" class="flex items-center px-2.5�4ext-[0.8rem] hover:underline">Open in Web Editor<svg stroke="currentColor" fill="none" stroke-width="2" viewBox=".".". 0 24 �(T
�)" stroke-linecap="round" stroke-linejoin="round" class="ml-1�4ext-gray-500" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path d="M 1�p�c6a�(N��)�(N��)0 0 1-�(N��)2H5a�(N��)�(N��)0 0 1-�(g(�)�2�68a�(N��)�(N��)0 0 1 �(g(�)6"><y:ath><polyline points="� 2 2 21 0�0�0�0�0��(h*�) 9"></polyline><line�8�"10"�9�"14"�8�(o�)"21"�9�(o�)"3"></line><ztvg><t�><u(iv><u(iv>
    <figcaption></figcaption>
  </figure>
</div>
<div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let</span> flock;
<uode></pre><div class="comment"><p>A <code>Flock<uode> object manages the
entire group.<y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>)"
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"> �!�!span class="hljs-title function_">createCanvas</span>(<span class="hljs-number">640<ztpan>, <span class="hljs-number">�(T
�)0<ztpan>);
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript">  flock =�!�!span class="hljs-keyword">new<ztpan>�!�!span class="hljs-title class_">Flock</span>();
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"> �!�!span class="hljs-keyword">for<ztpan> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0<ztpan>; i &lt;�!�!span class="hljs-number">1�(e��)</span>; i++) {
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">    <span class="hljs-keyword">let</span> boid =�!�!span class="hljs-keyword">new<ztpan>�!�!span class="hljs-title class_">Boid<ztpan>(width� �!�!span class="hljs-number">2</span>, height X�<span class="hljs-number">�(v��)ztpan>);
<uode></pre><div class="comment"><p></p></div></div><div class="pair split"><pre><code class="hljs code language-javascript">    flock.<span class="hljs-title function_">addBoid<ztpan>(boid);
</code><y:re><div class="comment"><p>The flock starts out with 1�(e��) boids.<y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  }
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">}
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">draw<ztpan>(<span class="hljs-params"><ztpan>) {
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  <span class="hljs-title function_">background<ztpan>(<span class="hljs-number">255</span>);
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  flock.<span class="hljs-title function_">run</span>();
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript">}
<uode></pre><div class="comment"><p></p></div></div></div>
<p>Just as with�4he�0article systems from�!�!a href="y:articles#section-particles">Chapter 4<t�>,�9ou can see�4he elegance of OOP in simplifying the <code>setup()<uode> and�!�!code>draw()<uode> functions.<y:>
<div data-type="exercise" class="callout">
 �!�!h3 id="exercise-516"><a class="heading-link" href="#exercise-5�">Exercise 5.16<t�><vv0�0�0�
 �!�!p>Combine flocking�7ith other steering behaviors.<y:>
</div>
<div data-type="exercise" class="callout">
  <h0�0�0�0�0�id="exercise-5"><a class="heading-link" href="#exercise-517">Exercise 5.</a></h3>
  <div class="half-width-right">
   �!�!figure>
      <div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:�52px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:imageztvg+xml;charset=utf-8,%0�0�0�0�svg height=&#x�(y]�);807&#x27;�7idth=&#x�(y]�);1��(N�)#x�(y]�); xmlns=&#x27;http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg&#x27;�6ersion=&#x�(y]�);1.1&#x27;%3E%0�0�0�0�ztvg%3E" style="max-width:100%;display:block;position:static".".><u(iv><div aria-hidden="true" data-placeholder-image="" style="opacity:�transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source�4ype="image|�ebp" data-srcset="zttatic/81828afa0c�(R��)�(g	�)becfbc7f9fef�(e��)f4t�4b5f]�5_steering_39.webp 288w,zttatic/81828afa0c�(R��)�(g	�)becfbc7f9fef�(e��)f4^r4a`]�5_steering_39.webp 576w,zttatic/81828afa0c�(R��)�(g	�)becfbc7f9fef�(e��)f4u��1�4p�be]�5_steering_39.webp 1��(" sizes="(min-width: 1���x) 1���x, 100vw".".><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 1���x) 1���x, 100vw" decoding="async" loading="lazy" data-src="zttatic/81828afa0c�(R��)�(g	�)becfbc7f9fef�(e��)f4uSDaf]�5_steering_39.png" data-srcset="zttatic/81828afa0c�(R��)�(g	�)becfbc7f9fef�(e��)f4^�fdb4]�5_steering_39.png �(R��)8w,/static_�(R��)afa0c282ecfbc7f9fef2c20f4/e9817/05_steering_0�0�0�.png 576w,zttatic/81828afa0c�(R��)�(g	�)becfbc7f9fef�(e��)f4uSDaf]�5_steering_39.png �52w" alt="".".><y:icture><noscript><picture><source type="image/webp" srcSet="zttatic/81828afa0c�(R��)�(g	�)becfbc7f9fef�(e��)f4t�4b5f]�5_steering_39.webp 288w,zttatic/81828afa0c�(R��)�(g	�)becfbc7f9fef�(e��)f4^r4a`]�5_steering_39.webp 576w,zttatic/81828afa0c�(R��)�(g	�)becfbc7f9fef�(e��)f4u��1�4p�be]�5_steering_39.webp 1��(" sizes="(min-width: 1���x) 1���x, 100vw".".><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 1���x) 1���x, 100vw" decoding="async" loading="lazy" src=".".static_�(R��)afa0c282ecfbc7f9fef2c20f4/b09af/05_steering_0�0�0�.png" srcSet="zttatic/81828afa0c�(R��)�(g	�)becfbc7f9fef�(e��)f4^�fdb4]�5_steering_39.png �(R��)8w,/static_�(R��)afa0c282ecfbc7f9fef2c20f4/e9817/05_steering_0�0�0�.png 576w,zttatic/81828afa0c�(R��)�(g	�)becfbc7f9fef�(e��)f4uSDaf]�5_steering_39.png �52w" alt="".".><y:icture><w�oscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const�4=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src"+"+e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const�4=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of�4)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}<ztcript></div>
     �!�!figcaption><u�igcaption>
   �!�!u�igure>
 �!�!u(iv>
  <p>In his book�!�!em>The Computational Beauty of Nature<u0m> (Bradford Books, �(e��)00),�?�?ary Flake describes a fourth rule for flocking, <strong>view</strong>: “Move laterally away from any boid that blocks the view.”�?�!ave your boids follow this rule.</p>
<u(iv>
<div data-type="exercise" class="callout">
 �!�!h3 id="exercise-518"><a class="heading-link" href="#exercise-5">Exercise 5.18<t�><vv0�0�0�
 �!�!p>Create a flocking simulation in which all the parameters (<em>separation�7eight<u0m>, <em>cohesion�7eight<u0m>, <em>alignment weight</em>,�!�!em>maximum force</em>,�!�!em>maximum speed</em>) change over�4ime. They could be controlled by Perlin noise or by user interaction. (For example, you could use the p5.js <code>createSlider()</code> function�4o tie the values�4o slider�0ositions�4hat can be adjusted in real time.)</p>
<u(iv>
<div data-type="exercise" class="callout">
 �!�!h3 id="exercise-519"><a class="heading-link" href="#exercise-5">Exercise 5.19<t�><vv0�0�0�
 �!�!p>Visualize the flock in an entirely different�7ay.<y:>
</div>
<h2 id="algorithmic-efficiency-or-why-does-my-sketch-run-so-slowly"><a class="heading-link" href="#algorithmic-efficiency-ar-why-does-my-sketch-run-so-slowly">Algorithmic Efficiency (or: Why Does My Sketch Run So Slowly?)</a></h2>
<p>Group behaviors are�7onderful, but it’s�7ith a heavy heart that�!�? must admit that�4hey can also be slow. In fact,�4he bigger the group,�4he slower the sketch can be.�!�?’d love to hide this dark truth from�9ou, because I’d like�9ou�4o be happy and live a fulfilling and meaningful life, free from concerns about�4he efficiency of�9our code. But I’d also like to be able�4o sleep at night�7ithout�7orrying about your inevitable disappointment�7hen you try to run�9our flocking simulation with�4oo many boids.</p>
<p>Usually,�7hen I talk about�05.js sketches running slowly, it’s because drawing�4o the canvas can be slow—the more you draw, the slower�9our sketch runs. As you may recall from <a href=".".particles#section-particles">Chapter 2 2 2</a>, switching to a different renderer like 2 2 2 2ebGL can sometimes alleviate�4his issue, allowing for faster drawing of larger�0article systems. 2 2 2 2ith something like a flocking simulation, however,�4he slowness derives from�4he algorithm. Computer scientists put this�0roblem in terms of something called<strong> big </strong><span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mi>O</mi><w�row><annotation encoding="application/x-tex">O</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.680�0�0�0�em"></span><span class="mord mathnormal" style="margin-right:0.0�(y]�)78em">O<ztpan></span><ztpan></span><ztpan><strong> notation<zttrong>, where the <span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mi>O<w�i></mrow><annotation encoding="application6-tex">O<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.683�1�3p�m"><ztpan><span class="mord mathnormal" style="margin-right:0.02778em">O</span><ztpan></span><ztpan></span> stands for�!�!em>order</em>. This is shorthand for describing the efficiency of an algorithm: How many computational cycles does�4he algorithm require�4o complete?<y:>
<p>Consider a simple search problem. You have a basket containing 100 chocolate treats, only one of which is�0ure dark chocolate. That’s�4he one�9ou�7ant to eat. To find it, you pick�4he chocolates out of�4he basket one by one. You might be lucky and find it on the first try, but in the worst-case scenario,�9ou have to check all 100 before you find�4he dark chocolate. To find one�4hing in 100,�9ou have to check 100�4hings (or to find one thing in�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mi>N</mi><w�row><annotation encoding="application/x-tex">N</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.680�0�0�0�em"></span><span class="mord mathnormal" style="margin-right:0.1SD03em">N<ztpan></span><ztpan></span><ztpan>�4hings,�9ou have to check�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mi>N</mi><w�row><annotation encoding="application/x-tex">N</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.680�0�0�0�em"></span><span class="mord mathnormal" style="margin-right:0.1SD03em">N<ztpan></span><ztpan></span><ztpan>�4imes). The big�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mi>O</mi><w�row><annotation encoding="application/x-tex">O</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.680�0�0�0�em"></span><span class="mord mathnormal" style="margin-right:0.0�(y]�)78em">O<ztpan></span><ztpan></span><ztpan> notation here is <span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mi>O<w�i><mo stretchy="false">(</mo><mi>N</mi><mo stretchy="false">)<w�o></mrow><annotation encoding="application6-tex">O(N)</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:m;vertical-align:-0.�(ry�)em"></span><span class="mord mathnormal" style="margin-right:0.0�(y]�)78em">O<ztpan><span class="mopen">(<ztpan><span class="mord mathnormal" style="margin-right:0.1090�1�3p�m">N</span><span class="mclose">)<ztpan></span><ztpan></span><ztpan>. This, incidentally, is also the big <span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mi>O<w�i></mrow><annotation encoding="application6-tex">O<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.683�1�3p�m"><ztpan><span class="mord mathnormal" style="margin-right:0.02778em">O</span><ztpan></span><ztpan></span> notation�4hat describes a simple�0article system. If�9ou have <span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mi>N<w�i></mrow><annotation encoding="application6-tex">N<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.683�1�3p�m"><ztpan><span class="mord mathnormal" style="margin-right:0.1090�1�3p�m">N</span><ztpan></span><ztpan></span> particles,�9ou have to run and display�4hose�0articles�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mi>N</mi><w�row><annotation encoding="application/x-tex">N</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.680�0�0�0�em"></span><span class="mord mathnormal" style="margin-right:0.1SD03em">N<ztpan></span><ztpan></span><ztpan>�4imes.<y:>
Now, let’s think about a group behavior such as flocking. For every�!�!code>Boid<uode> object,�9ou have to check�4he�6elocity and position of every other <code>Boid</code> object before you can calculate its steering force. Let’s say you have 100 boids. For boid 1, you need�4o check 100 boids; for boid �(l4�)�9ou need to check 100 boids; and so on.�!�?n all, for 100 boids, you need�4o perform 10,000 checks (<span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mn>100</mn><mo>×<w�o><mn>100<w�n><mo>=<w�o><mtext>10,000<w�text><w�row><annotation encoding="application/x-tex">100 \times 100 = \text{10,000}<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.7�(y]�)8em;vertical-align:-0.SA0�0�0�0�em"></span><span class="mord">100<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mbin">×<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan></span><span class="base"><span class="strut" style="height:0.6444em"></span><span class="mord">100<ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan><span class="mrel">=</span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><ztpan><span class="base"><span class="strut" style="height:0.80�0�0�9em;vertical-align:-0.44em"></span><span class="mord�4ext"><span class="mord">10,000</span><ztpan></span><ztpan></span><ztpan>).</p>
<p>You might be�4hinking, “No�0roblem. Computers are fast. They can do 10,000�4hings pretty easily.” But what if there are 1,000 boids? Then you have�4his:</p>
<div data-type="equation" class="math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml" display="block"><semantics><mrow><mtext>1,000<w�text><mo>×<w�o><mtext>1,000</mtext><mo>=<w�o><mtext>1,000,000 cycles</mtext></mrow><annotation encoding="application6-tex">\text{1,000} \times \text{1,000} = \text{1,000,000 cycles}</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.8389em;vertical-align:-0.1944em"><ztpan><span class="mord text"><span class="mord">1,000</span><ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mbin">×<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan></span><span class="base"><span class="strut" style="height:0.8389em;vertical-align:-0.1944em"><ztpan><span class="mord text"><span class="mord">1,000</span><ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan><span class="mrel">=</span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><ztpan><span class="base"><span class="strut" style="height:0.8889em;vertical-align:-0.44em"></span><span class="mord�4ext"><span class="mord">1,000,000 cycles<ztpan></span><ztpan></span><ztpan></span><u(iv>
This is getting rather slow but is still somewhat manageable. 2 2 2 2hat about 10,000 elements?
<div data-type="equation" class="math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml" display="block"><semantics><mrow><mtext>10,000</mtext><mo>×</mo><mtext>10,000</mtext><mo>=<w�o><mtext>100,000,000 cycles</mtext></mrow><annotation encoding="application6-tex">\text{10,000} \times \text{10,000} = \text{100,000,000 cycles}</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.8389em;vertical-align:-0.1944em"><ztpan><span class="mord text"><span class="mord">10,000<ztpan></span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">×</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><ztpan><span class="base"><span class="strut" style="height:0.80�0�0�9em;vertical-align:-0.44em"></span><span class="mord�4ext"><span class="mord">10,000</span><ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan><span class="mrel">=</span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><ztpan><span class="base"><span class="strut" style="height:0.8889em;vertical-align:-0.44em"></span><span class="mord�4ext"><span class="mord">100,000,000 cycles<ztpan></span><ztpan></span><ztpan></span><u(iv>
Now�4hings are getting really slow. Really, really, really slow.<y:>
Notice a pattern? As the number of elements increases by a factor of 10, the number of required cycles increases by a factor of 100. More broadly, as�4he number of elements increases by a factor of�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mi>N</mi><w�row><annotation encoding="application/x-tex">N</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.680�0�0�0�em"></span><span class="mord mathnormal" style="margin-right:0.1SD03em">N<ztpan></span><ztpan></span><ztpan>, the cycles increase by a factor of�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mi>N</mi><mo>×<w�o><mi>N<w�i></mrow><annotation encoding="application6-tex">N \times N</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.7667em;vertical-align:-0.083�1�3p�m"><ztpan><span class="mord mathnormal" style="margin-right:0.1090�1�3p�m">N</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">×</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><ztpan><span class="base"><span class="strut" style="height:0.683�1�3p�m"><ztpan><span class="mord mathnormal" style="margin-right:0.1090�1�3p�m">N</span><ztpan></span><ztpan></span>, or <span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><msup><mi>N<w�i><mn>�(v��)w�n></msup><w�row><annotation encoding="application/x-tex">N^2</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.8141em"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.1090�1�3p�m">N</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8m"><span style="top:-3.063em;margin-right:0.05em"><span class="pstrut" style="height:2.7em"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan></span><ztpan>. In big�!�!span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mi>O</mi><w�row><annotation encoding="application/x-tex">O</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.680�0�0�0�em"></span><span class="mord mathnormal" style="margin-right:0.0�(y]�)78em">O<ztpan></span><ztpan></span><ztpan> notation,�4his is known as <span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mi>O<w�i><mo stretchy="false">(</mo><msup><mi>N</mi><mn>2</mn><w�sup><mo stretchy="false">)</mo><w�row><annotation encoding="application/x-tex">O(N^2)<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.064m;vertical-align:-0.�(ry�)em"></span><span class="mord mathnormal" style="margin-right:0.0�(y]�)78em">O<ztpan><span class="mopen">(<ztpan><span class="mord"><span class="mord mathnormal" style="margin-right:0.1SD03em">N<ztpan><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8141em"><span style="top:-0�0�0�0�0�0�1�3p�m;margin-right:0.05em"><span class="pstrut" style="height:�(���)7em"><ztpan><span class="sizing reset-size6 size0�0�0�0�0�mtight"><span class="mord mtight">�(v��)ztpan></span><ztpan></span><ztpan></span><ztpan></span><span class="mclose">)<ztpan></span><ztpan></span><ztpan>.<y:>
<p>Perhaps�9ou’re thinking, “No problem. 2 2 2 2ith flocking, I need�4o consider only the boids that are close�4o the current boid. So even if�!�? have 1,000 boids,�!�? can just look at, say, the 5 closest boids to each one, and�4hen I only have 5,000 cycles.” You�0ause for a moment and then start�4hinking, “So for each boid, I just need to check all�4he boids and find the 5 closest ones and�!�?’m good!” See the catch-�(g	�)? Even if you want�4o look at only�4he close ones,�4he only way to know what�4he close ones are would be�4o check all of�4hem.</p>
<p>Or is there another way?</p>
<h3 id="spatial-subdivisions"><a class="heading-link" href="#spatial-subdivisions">Spatial Subdivisions</a></h3>
<p>In his �(e��)00�0aper�!�!a href="https:]�www.red3d.com/cwr/papers^r000/pip.pdf"�4arget="_blank" rel="noopener">“Interaction�7ith Groups of Autonomous Characters”</a>, Reynolds (surprise, surprise) suggests a�4echnique known as <strong>bin-lattice spatial subdivision<zttrong> (often called�!�!em>binning</em> for short) for optimizing flocking algorithms and other group behaviors. This technique hinges on dividing�4he simulation space into a grid of smaller cells (or bins).<y:>
<p>To demonstrate, imagine�4he canvas is divided into a grid of 10 rows and 10 columns, for a total of 100 cells (<span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mn>10</mn><mo>×<w�o><mn>10</mn><mo>=</mo><mn>100</mn><w�row><annotation encoding="application/x-tex">10 \times 10 = 100<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.7�(y]�)8em;vertical-align:-0.SA0�0�0�0�em"></span><span class="mord">10</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">×</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><ztpan><span class="base"><span class="strut" style="height:0.6444em"><ztpan><span class="mord">10<ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan><span class="mrel">=</span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><ztpan><span class="base"><span class="strut" style="height:0.6444em"><ztpan><span class="mord">100</span><ztpan></span><ztpan></span>). And let’s say you have 2,000 boids—a number small enough for�9ou�4o realistically want, but large enough�4o run too slowly (<span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http:]�www.w3.org]�998/MathkyathML"><semantics><mrow><mtext>2,000</mtext><mo>×</mo><mtext>�(l4�)000<w�text><mo>=</mo><mtext>4,000,000 cycles)</mtext></mrow><annotation encoding="application6-tex">\text{�(l4�)000} \times \text{�(l4�)000} = \text{4,000,000 cycles)}<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.80�0�0�9em;vertical-align:-0.44em"></span><span class="mord�4ext"><span class="mord">�(l4�)000<ztpan></span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">×</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><ztpan><span class="base"><span class="strut" style="height:0.80�0�0�9em;vertical-align:-0.44em"></span><span class="mord�4ext"><span class="mord">�(l4�)000<ztpan></span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><span class="mrel">=<ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan></span><span class="base"><span class="strut" style="height:m;vertical-align:-0.�(ry�)em"></span><span class="mord�4ext"><span class="mord">4,000,000 cycles)</span><ztpan></span><ztpan></span><ztpan>. At any given moment, each boid falls�7ithin a cell in the grid, as shown in Figure 5.36. 2 2 2 2ith �(l4�)000 boids and 100 cells, on average there will be approximately �(e��) boids�0er cell (<span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mtext>�(l4�)000<w�text><mo>÷<w�o><mn>100<w�n><mo>=<w�o><mn>�(e��)</mn><w�row><annotation encoding="application/x-tex">\text{2,000} \div 100 = 20<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.80�0�0�9em;vertical-align:-0.44em"></span><span class="mord�4ext"><span class="mord">�(l4�)000<ztpan></span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><span class="mbin">÷</span><span class="mspace" style="margin-right:0.�(g	�)�(g	�)em"></span><ztpan><span class="base"><span class="strut" style="height:0.6444em"><ztpan><span class="mord">100</span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><span class="mrel">=<ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan></span><span class="base"><span class="strut" style="height:0.6444em"></span><span class="mord">�(e��)</span><ztpan></span><ztpan></span>).<y:>
<figure>
 �!�!div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:20�0�4px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height=&#x27;�91&#x27;�7idth=&#x�(y]�);20�0�4&#x�(y]�); xmlns=&#x27;http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg&#x27;�6ersion=&#x�(y]�);1.1&#x27;%3E%0�0�0�0�ztvg%3E" style="max-width:100%;display:block;position:static".".><u(iv><div aria-hidden="true" data-placeholder-image="" style="opacity:�transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source�4ype="image|�ebp" data-srcset="zttatic/0a82�1�2p�53b5fa690bfbaba596c85c7b]�bd81]�5_steering_40.webp 576w,zttatic/0a82�1�2p�53b5fa690bfbaba596c85c7b^r�(T
�)b8]�5_steering_40.webp 1��(,/static]�a8�(y>�)d5�1�0p�5fa690bfbaba596c8175c7b/u�(e��)a/05_steering_40.webp �(y>�)04w" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw"b6<img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: �(y>�)04px) �(y>�)04px, 100vw" decoding="async" loading="lazy" data-src=".".static]�a8�(y>�)d5�1�0p�5fa690bfbaba596c8175c7b/49ca6/05_steering_40.png" data-srcset=".".static]�a8�(y>�)d5�1�0p�5fa690bfbaba596c8175c7b/49s�(W�)05_steering_40.png 576w,zttatic/0a82�1�2p�53b5fa690bfbaba596c85c7bt��1�0p�84]�5_steering_40.png �52w,zttatic/0a82�1�2p�53b5fa690bfbaba596c85c7b^9ca6]�5_steering_40.png �(y>�)04w" alt="Figure 5.36: A square canvas full of�6ehicles, subdivided into a grid of square cells"b6</picture><noscript><picture><source�4ype="image|�ebp" srcSet=".".static]�a8�(y>�)d5�1�0p�5fa690bfbaba596c8175c7b/td81/05_steering_40.webp 576w,/static]�a8�(y>�)d5�1�0p�5fa690bfbaba596c8175c7b/�(g	�)4b8/05_steering_40.webp �52w,zttatic/0a82�1�2p�53b5fa690bfbaba596c85c7b]�c20a]�5_steering_40.webp 20�0�4w" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw".".><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 20�0�4px) 20�0�4px, 100vw" decoding="async" loading="lazy" src=".".static]�a8�(y>�)d5�1�0p�5fa690bfbaba596c8175c7b/49ca6/05_steering_40.png" srcSet="zttatic/0a82�1�2p�53b5fa690bfbaba596c85c7b^91a2]�5_steering_40.png 576w,/static]�a8�(y>�)d5�1�0p�5fa690bfbaba596c8175c7b/a3b84/05_steering_40.png 1��(,/static]�a8�(y>�)d5�1�0p�5fa690bfbaba596c8175c7b/49ca6/05_steering_40.png 20�0�4w" alt="Figure 5.0�0�0�0�0�: A square canvas full of vehicles, subdivided into a grid of square cells".".><y:icture><w�oscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const�4=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src"+"+e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const�4=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of�4)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}<ztcript></div>
 �!�!figcaption>Figure 5.0�0�0�0�0�: A square canvas full of vehicles, subdivided into a grid of square cells</figcaption>
</figure>
<p>Now say�4hat in order�4o apply the flocking rules�4o a given boid, you need�4o look at only�4he other boids�4hat are in�4hat boid’s cell. 2 2 2 2ith an average of �(e��) boids�0er cell, each cell�7ould require 2 2 200 cycles (<span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mn>20<w�n><mo>×</mo><mn>20<w�n><mo>=<w�o><mn>400<w�n></mrow><annotation encoding="application6-tex">�(e��) \times �(e��) = 2 2 200</annotation><ztemantics><w�ath></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.7278em;vertical-align:-0.083�1�3p�m"><ztpan><span class="mord">20<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mbin">×<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan></span><span class="base"><span class="strut" style="height:0.6444em"></span><span class="mord">�(e��)</span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><span class="mrel">=<ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan></span><span class="base"><span class="strut" style="height:0.6444em"></span><span class="mord">400<ztpan></span><ztpan></span><ztpan>), and�7ith 100 cells,�4hat’s 40,000 cycles total (<span data-type="equation" class="math-inline"><span class="katex"><span class="katex-mathml"><math�8mlns="http:/|�ww.w0�0�0�0�0�org/98kyath/mathml"><semantics><mrow><mn>400</mn><mo>×<w�o><mn>100<w�n><mo>=<w�o><mtext>40,000<w�text><w�row><annotation encoding="application/x-tex">400 \times 100 = \text{40,000}<t�nnotation></semantics></math><ztpan><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.7�(y]�)8em;vertical-align:-0.SA0�0�0�0�em"></span><span class="mord">400<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan><span class="mbin">×<ztpan><span class="mspace" style="margin-right:0.2�(g	�)m"><ztpan></span><span class="base"><span class="strut" style="height:0.6444em"></span><span class="mord">100<ztpan><span class="mspace" style="margin-right:0.2778em"><ztpan><span class="mrel">=</span><span class="mspace" style="margin-right:0.�(y]�)78em"></span><ztpan><span class="base"><span class="strut" style="height:0.80�0�0�9em;vertical-align:-0.44em"></span><span class="mord�4ext"><span class="mord">40,000</span><ztpan></span><ztpan></span><ztpan>). That’s a massive savings of over 4,000,000 cycles�y:>
<p>To implement the bin-lattice spatial subdivision algorithm in�05.js, I’ll need multiple arrays. The first array keeps�4rack of all the boids, just as in the original flocking example:</p>
<div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let</span> boids = [];
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><u(iv>
<p>The second is a 2D array (repurposing�4he code from Example 5.4) representing�4he cells in the grid:<y:>
<div class="overflow-visible�0t-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded�0x-�(���)5 py-1.5�4ext-xs font-semibold�               hover:bg-gray-0�0�0"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400 text-white�4ransition-opacity opacity-0">Copied!</div><svg stroke="currentColor" fill="currentColor" stroke-width="."."." viewBox=".".". 0 24 �(T
�)" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><g><path fill="none" d="M0 0h24v�(T
�)H0z"><y:ath><path d="M7 6V�9p�1 1 0 0 1 1-�a1 1 0 0 1 1 1v14a1 1 0 0 1-1 �-3v3c0 .55�(g(�).45 1-1.007 4.007A1.001 1.001 0 0 1 0�0�0�0�0��(h*�)l.000�0�0�0�c0-.55�(���)45-1 1.007-1H7zM5.000�0�0�0�0�8L5 �(e��)h10V8H5.00�I�UM9 5 5h8v10h�2�64H9v�"></path><u�><ztvg><span class="ml-1">Copy</span><uutton></div></div><div class="pair split"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let<ztpan> resolution = <span class="hljs-number">40</span>;
<uode></pre><div class="comment"><p>Each cell is 2 2 20×40 pixels.<y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let</span> cols =�!�!span class="hljs-title function_">floor<ztpan>(width�  resolution);
<span class="hljs-keyword">let</span> rows =�!�!span class="hljs-title function_">floor<ztpan>(height X�resolution);
<uode></pre><div class="comment"><p>How many columns and rows are in�4he grid, based on the width and height?<y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">let</span> grid =�!�!span class="hljs-keyword">new<ztpan>�!�!span class="hljs-title class_">Array</span>(cols);
<span class="hljs-keyword">for<ztpan> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0<ztpan>; i &lt; grid.<span class="hljs-property">length</span>; i++) {
  grid[i] = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Array<ztpan>(rows);
}
</code><y:re><div class="comment"><p>Create the UO array.<y:><u(iv><u(iv><u(iv>
<p>Each value in�4he 2D array is itself an array�4hat will hold references�4o the <code>Boid</code> objects currently inside�4hat cell in the grid. If�9ou’re keeping score,�4hat’s an array�7ithin an array�7ithin an array:<y:>
<div class="overflow-visible�0t-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded�0x-�(���)5 py-1.5�4ext-xs font-semibold�               hover:bg-gray-0�0�0"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400 text-white�4ransition-opacity opacity-0">Copied!</div><svg stroke="currentColor" fill="currentColor" stroke-width="."."." viewBox=".".". 0 24 �(T
�)" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><g><path fill="none" d="M0 0h24v�(T
�)H0z"><y:ath><path d="M7 6V�9p�1 1 0 0 1 1-�a1 1 0 0 1 1 1v14a1 1 0 0 1-1 �-3v3c0 .55�(g(�).45 1-1.007 4.007A1.001 1.001 0 0 1 0�0�0�0�0��(h*�)l.000�0�0�0�c0-.55�(���)45-1 1.007-1H7zM5.000�0�0�0�0�8L5 �(e��)h10V8H5.00�I�UM9 5 5h8v10h�2�64H9v�"></path><u�><ztvg><span class="ml-1">Copy</span><uutton></div></div><div class="pair"><pre><code class="hljs code language-javascript"> �!�!span class="hljs-keyword">for<ztpan> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0<ztpan>; i &lt; cols; i++) {
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let<ztpan> j =�!�!span class="hljs-number">0</span>; j�.�.�.lt; rows; j++)"
<uode></pre><div class="comment"><p></p></div></div><div class="pair split"><pre><code class="hljs code language-javascript">      grid[i][j] = [];
</code><y:re><div class="comment"><p>An array for every cell in the grid</p></div></div><div class="pair"><pre><code class="hljs code language-javascript">   �(
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript"> �(
<uode></pre><div class="comment"><p></p></div></div></div>
<p>Every cycle through <code>draw()</code>,�4he array for each grid cell is first cleared. Then each boid registers itself in�4he appropriate cell according to its�0osition. This way,�4he boids�’ cell assignments are updated as�4he boids move:</p>
<div class="snip-below">
  <div class="overflow-visible�0t-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded�0x-�(���)5 py-1.5�4ext-xs font-semibold�               hover:bg-gray-0�0�0"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400 text-white�4ransition-opacity opacity-0">Copied!</div><svg stroke="currentColor" fill="currentColor" stroke-width="."."." viewBox=".".". 0 24 �(T
�)" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><g><path fill="none" d="M0 0h24v�(T
�)H0z"><y:ath><path d="M7 6V�9p�1 1 0 0 1 1-�a1 1 0 0 1 1 1v14a1 1 0 0 1-1 �-3v3c0 .55�(g(�).45 1-1.007 4.007A1.001 1.001 0 0 1 0�0�0�0�0��(h*�)l.000�0�0�0�c0-.55�(���)45-1 1.007-1H7zM5.000�0�0�0�0�8L5 �(e��)h10V8H5.00�I�UM9 5 5h8v10h�2�64H9v�"></path><u�><ztvg><span class="ml-1">Copy</span><uutton></div></div><div class="pair"><pre><code class="hljs code language-javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">draw<ztpan>(<span class="hljs-params"><ztpan>) {
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">  <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let<ztpan> i =�!�!span class="hljs-number">0</span>; i�.�.�.lt; cols; i++)"
   �!�!span class="hljs-keyword">for<ztpan> (<span class="hljs-keyword">let</span> j = <span class="hljs-number">0<ztpan>; j &lt; rows; j++) {
      grid[i][j] = [];
   �(
 �(
<uode></pre><div class="comment"><p>Each frame, the grid is reset to empty arrays.</p></div></div><div class="pair"><pre><code class="hljs code language-javascript">
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">  <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let<ztpan> boid <span class="hljs-keyword">of<ztpan> flock.<span class="hljs-property">boids</span>)"
<uode></pre><div class="comment"><p>Place each boid into�4he appropriate cell in�4he grid.</p></div></div><div class="pair split"><pre><code class="hljs code language-javascript">   �!�!span class="hljs-keyword">let<ztpan> column = <span class="hljs-title function_">floor</span>(boid.<span class="hljs-property">position<ztpan>.<span class="hljs-property">x</span> X�resolution);
   �!�!span class="hljs-keyword">let<ztpan> row =�!�!span class="hljs-title function_">floor<ztpan>(boid.<span class="hljs-property">position</span>.<span class="hljs-property">y<ztpan>�  resolution);
</code><y:re><div class="comment"><p>Find the right column and row.<y:><u(iv><u(iv><div class="pair split"><pre><code class="hljs code language-javascript">    column =�!�!span class="hljs-title function_">constrain<ztpan>(column,�!�!span class="hljs-number">0</span>, cols - <span class="hljs-number">�ztpan>);
    row =�!�!span class="hljs-title function_">constrain<ztpan>(row, <span class="hljs-number">0<ztpan>, rows -�!�!span class="hljs-number">1</span>);
</code><y:re><div class="comment"><p>Constrain�4o the limits of the array.</p></div></div><div class="pair split"><pre><code class="hljs code language-javascript">    grid[column][row].<span class="hljs-title function_">push</span>(boid);
<uode></pre><div class="comment"><p>Add the boid.<y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  }
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><u(iv>
</div>
<p>Finally,�7hen it comes�4ime to have the boids check their neighbors,�4hey can look at only�4hose in their particular cell.</p>
<div data-type="example">
 �!�!h3 id="example-5-bin-lattice-spatial-subdivision"><a class="heading-link" href="#example-5-bin-lattice-spatial-subdivision">Example 5.: Bin-Lattice Spatial Subdivision<t�><vv0�0�0�
 �!�!figure>
    <div class="not-prose clear-both my-4 overflow-hidden rounded border bg-gray-100" style="max-width:1���x"><div class="relative overflow-hidden rounded-t bg-white"><div class="absolute left-[50%] top-[50%] -translate-x-[50%] -translate-y-[50%] ">Loading sketch ...</div><iframe class="w-full border-none transition-apacity opacity-0" style="aspect-ratio:�(���)6666666666666665" loading="lazy" src="u0xamples/05_steering/example_5_9_flocking_with_binning"><v}frame></div><div class="flex items-center justify-between border-t"><div class="flex"><button class="flex items-center border-r px-2.5�0y-1.5 text-sm hover:bg-gray-�(e��)0"><svg stroke="currentColor" fill="none" stroke-width="�(N	�)�6iewBox="0 0 �(T
�) 24" aria-hidden="true" class="h-[�px] w-[15px]" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path stroke-linecap="round" stroke-linejoin="round" d="M4 2 2 2v5h.58�.356 2A8.001 8.001 0 004.582 9m0 0H9m11 �v-5h-.58�0 0a8.000�0�0�0�0�8.000�0�0�0�0�0 01-15.0�0�0�7-�.357 2H15"><y:ath></svg><span class="ml-1.5">Reset</span><uutton><button class="flex items-center border-r px-2.5�0y-1.5 text-sm hover:bg-gray-�(e��)0"><svg stroke="currentColor" fill="none" stroke-width="�(N	�)�6iewBox="0 0 �(T
�) 24" aria-hidden="true" class="h-4�7-4" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path stroke-linecap="round" stroke-linejoin="round" d="M10 9v6m4-6v6m7-�9p�9 9 0 �-18 0 9 9 0 01 0z"><y:ath></svg><span class="ml-1">Pause</span><uutton></div><a href="https:/u0ditor.p5js.orgw�atureofcode/sketchesk�XONgLiJ0" target="_blank" rel="noreferrer" class="flex items-center px-2.5�4ext-[0.8rem] hover:underline">Open in Web Editor<svg stroke="currentColor" fill="none" stroke-width="2" viewBox=".".". 0 24 �(T
�)" stroke-linecap="round" stroke-linejoin="round" class="ml-1�4ext-gray-500" height="m"�7idth="m"�8mlns="http:/|�ww.w0�0�0�0�0�org/�(e��)00ztvg"><path d="M 1�p�c6a�(N��)�(N��)0 0 1-�(N��)2H5a�(N��)�(N��)0 0 1-�(g(�)�2�68a�(N��)�(N��)0 0 1 �(g(�)6"><y:ath><polyline points="� 2 2 21 0�0�0�0�0��(h*�) 9"></polyline><line�8�"10"�9�"14"�8�(o�)"21"�9�(o�)"3"></line><ztvg><t�><u(iv><u(iv>
    <figcaption></figcaption>
  </figure>
</div>
<div class="overflow-visible pt-0 codesplit callout not-prose "><div class="flex items-start justify-between"><div class="ml-auto hidden sm:flex"><button class="first-letter relative flex items-center rounded px-2.5�0y-1.5 text-xs font-semibold 
              hover:bg-gray-300"><div class="absolute inset-0 flex items-center justify-center rounded bg-noc-400�4ext-white transition-apacity opacity-0">Copied�u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 �(T
�) 24" class="h-4 w-4" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><g><path fill="none" d="M0 0h�(T
�)v24H0z"></path><path d="M7 5 5V3a1 1 0 0 1 1-1h11 1 0 0 1 1 'a1 1 0 0 1-1 1h-�p�c�1�1p�0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 2 2 2�.003-14c0-.552.45-1 1.007-7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"><y:ath></g></svg><span class="ml-1">Copy<ztpan></button><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  <span class="hljs-title function_">run</span>(<span class="hljs-params">boids<ztpan>) {
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">    <span class="hljs-keyword">let</span> column =�!�!span class="hljs-title function_">floor<ztpan>(<span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">position<ztpan>.<span class="hljs-property">x</span> X�resolution);
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript">   �!�!span class="hljs-keyword">let<ztpan> row =�!�!span class="hljs-title function_">floor<ztpan>(<span class="hljs-variable language_">this<ztpan>.<span class="hljs-property">position<ztpan>.<span class="hljs-property">y</span> X�resolution);
<uode></pre><div class="comment"><p></p></div></div><div class="pair"><pre><code class="hljs code language-javascript">    column = <span class="hljs-title function_">constrain</span>(column, <span class="hljs-number">0<ztpan>, cols -�!�!span class="hljs-number">1</span>);
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">    row = <span class="hljs-title function_">constrain</span>(row,�!�!span class="hljs-number">0</span>, rows - <span class="hljs-number">�ztpan>);
<uode></pre><div class="comment"><p></p></div></div><div class="pair split"><pre><code class="hljs code language-javascript">   �!�!span class="hljs-keyword">let<ztpan> neighbors = grid[column][row]; 
   �!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-title function_">flock<ztpan>(neighbors);
   �!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-title function_">update</span>();
   �!�!span class="hljs-variable language_">this<ztpan>.<span class="hljs-title function_">borders<ztpan>();
    <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">render<ztpan>();
</code><y:re><div class="comment"><p>Only these boids will be checked. See�4he code online for how neighboring cells are also included.<y:><u(iv><u(iv><div class="pair"><pre><code class="hljs code language-javascript">  }
</code><y:re><div class="comment"><p><y:><u(iv><u(iv><u(iv>
<p>I’m covering only�4he basics of�4he bin-lattice algorithm here.�!�?n practice, each boid should also check the boids in�4he neighboring cells (above, below, left, right, and diagonals), as well as the boids in its own cell. (To find out how that’s done, see�4he full code on the book’s�7ebsite.) Even with�4hat extra checking, however,�4he algorithm is still much more efficient than checking every single boid.</p>
<p>This approach still has flaws, however. For example,�7hat if all�4he boids congregate in�4he corner and live in the same cell? Doesn’t�4hat take me right back�4o checking all 2,000 against all 2,000? In fact, bin-lattice spatial subdivision is most effective�7hen the elements are evenly distributed throughout�4he canvas. A data structure known as a�!�!strong>quadtree<zttrong>, however, can handle unevenly distributed systems, preventing�4he�7orst-case scenario of all the boids crowding into a single cell.</p>
<p>The quadtree expands�4he spatial subdivision strategy by dynamically adapting the grid according�4o the distribution of the boids.�!�?nstead of a fixed grid, a quadtree starts with a single large cell�4hat encompasses the entire space. If�4oo many boids are found within�4his cell, it splits into four smaller cells. This process can repeat for each new cell�4hat gets�4oo crowded, creating a flexible grid�4hat provides finer resolution when and�7here it’s needed.<y:>
<div data-type="example">
  <h0�0�0�0�0�id="example-510�0�0�0�quadtree"><a class="heading-link" href="#example-5�-quadtree">Example 5.10�0�0� Quadtree<t�><div class="mr-6 inline-block"><a class="group relative flex items-center gap-2�4ext-base�4ext-noc-400 no-underline" href="https:]�youtu.bek�JxEcs0w_kE" target="_blank" rel="noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 576 51�(N	�) height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><path d="M549.655 1�(T
�).083c-6.�(R��)1-�(y>�).65-�(T
�).787-4�(���)�(y]�)6-48.284-48.597C458.781 64 288 5 54 �(R��)8 64S1.2�(N��)64 5 5 54.629 75.486c-�(y>�).497 5 5.3�(g	�)-4�(���)000�0�0�0�0��(T
�).947-48.�(R��)4 48.597-11.41�(N��)42.867-11.41�(N��)��(���)0�0�5-�.4 10�0�0�0�0�.305s0 89.438 �.4 10�0�0�0�0�.305c6.281 20�0�0�0�0�65 24.787 41.5 2 2 28.�(R��)4 47.8�(h*�)C1.2�(N��)448 �(R��)8 448 �(R��)8 448s0.78 0 2�.371-11.486c�(y>�).497-6.3�(h*�) 2 2 2�(���)000�0�0�0��(T
�).171 2 2 28.�(R��)4-47.8�(h*�) 11.41�(g(�)42.867 11.41�(g(�)��(���)0�0�5 �.4-10�0�0�0�0�.305s0-89.438-�.4-10�0�0�0�0�.305zm-3.51 �(h*�)0�0�0�0�0�508V5.5l�(���)739 81.205-142.70�0�0� 81.�(e��)-"></path><ztvg>Quadtree<div class="not-prose absolute top-0 z-10 hidden w-80�0t-10 group-hover:block"><div class="relative rounded-lg bg-noc-400 bg-opacity-50�0-4"><div class="flex aspect-video items-center overflow-hidden rounded object-cover"><picture><source type="image/webp" srcSet="https:]�img.youtube.com/vi_webp/OJxEcs0w_kE/sddefault.webp".".><source�4ype="imagev�peg" srcSet="https:/v}.ytimg.com|si/OJxEcs0w_kE/sddefault.jpg"b6<img src="https:]�i.ytimg.com/vik�JxEcs0w_kEztddefault.jpg" alt="youtube�6ideo�4humbnail".".><y:icture><u(iv><svg stroke="currentColor" fill="currentColor" stroke-width="0"�6iewBox="0 0 448 51�(N	�) class="absolute left-1/�(N��)top-1/�(N��)-translate-x-1^r -translate-y-1/�(N��)text-4xl�4ext-noc-400" height="1em" width="1em" xmlns="http:]�www.w3.org^r000/svg"><path d="M4�(T
�).4 2.7L7�(���)4 6.6C43.8-10.0�0�0�0�0�0 6.1 0 47.9V464c0 2 27.5 40.7 5 50.1 72.4 2 2 21.�2�0p�0�0�0��(g(�)�(e��)8c0�0�.4-18.5 0�0�.5-64.1 0-82.6z"><y:ath></svg></div></div></a></div></h3>
  <!-- -->
 �!�!figure>
    <div class="not-prose clear-both my-4 overflow-hidden rounded border bg-gray-100" style="max-width:1���x"><div class="relative overflow-hidden rounded-t bg-white"><div class="absolute left-[50%] top-[50%] -translate-x-[50%] -translate-y-[50%] ">Loading sketch ...</div><iframe class="w-full border-none transition-apacity opacity-0" style="aspect-ratio:�(���)6666666666666665" loading="lazy" src="u0xamples/05_steering/5_�_quadtree_part_1">Open in 2 2 2 2eb Editor

  Exercise 5.(e�)
  Expand the bin-lattice spatial subdivision flocking sketch from Example 5.1(N)to5se aiuadtree.

More Optimization TricksWhile I’m at it, here are a few more4ips related to keeping9our code in tip-top, speedy shape:

  Use the magnitude squared (or sometimes the distance squared).
  Calculate the sine and cosine lookup4ables.
  Don’t make gazillions of5nnecessary05.Vector objects.

Each of these tips is detailed next.
Use the Magnitude Squared
What is magnitude squared, and7hen should9ou5se it? Think back to how4he magnitude of a vector is calculated.

  
function mag()"
 !!span class="hljs-keyword">return sqrt(x *8 +9 *9);
}


Magnitude requires the square-root operation. And so it should! After all, if9ou7ant the magnitude of a6ector,9ou have to break out4he Pythagorean4heorem (we did4his in!!a href="|sectors#section-vectors">Chapter �t�>). However, if you could somehow skip4aking the square root,9our code7ould run faster.
Say you just7ant to know the relative magnitude of a6ector v. For example, is the magnitude greater than 10?

if (v.mag() >!!span class="hljs-number">10) {
  /* Do somethingSM*/
}

Well,4hat is equivalent to saying the following:
if (v.magSq() >!!span class="hljs-number">100)"
 !!span class="hljs-comment">\" Do something! *_�ztpan>
}

And how is magnitude squared calculated?
function!!span class="hljs-title function_">magSq() {
  return8 *8 +9 *9;
}

It’s calculated4he same as magnitude, but without the square root.!?n the case of a single6ector,5sing!!code>magSq() rather4han mag()7ill never significantly improve the performance of a05.js sketch.?!owever, if9ou’re computing the magnitude of4housands of vectors each4ime through draw(),7orking7ith the magnitude squared could help9our code run a7ee bit faster.

Calculate Sine and Cosine Lookup Tables
Taking4he square root isn’t4he only mathematical function that’s slow to compute. Trig functions like sine, cosine, and tangent are also slow.!?f you just need an individual sine or cosine6alue here or4here in your code,9ou’re never going to run into a problem. But7hat if9ou had something like this?

  
function draw() {
  for (let i =!!span class="hljs-number">0; i...lt; 10000; i++)"
   !!span class="hljs-title function_">print(sin(PI));
  }
}


Sure, this is a totally ridiculous code snippet that9ou7ould never7rite. But it illustrates a certain0oint: if9ou’re calculating the sine of pi 10,000 times,7hy not just calculate it once, save that6alue, and refer to it whenever necessary?
This is4he0rinciple behind sine and cosine lookup4ables. Instead of calling4he sine and cosine functions in your code whenever9ou need them, you can build an array4hat stores4he results of sine and cosine at angles from!!span data-type="equation" class="math-inline"> $0$
Forces from Within
