Day 7
<p dir="auto">This my seventh post on the 100 days of learning challenge I set myself.You can read more about this years goals <a href="https://steemit.com/personal/@harps116/starting-2018" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">here.
<p dir="auto">As expected my schedule is only getting busier, however I have been squeezing in some learning on my lunch breaks. I learnt a little more about vectors and vector math this week so I'm sharing my notes.
<p dir="auto"><a href="https://steemit.com/javascript/@harps116/day-6-vectors" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Last post I looked at add a vectors together to vectors, let's remind ourselves how that works:
<p dir="auto"><img src="https://images.hive.blog/768x0/https://steemitimages.com/DQmZf3wEmjEX7DFHkENTgyE5EEYahJUsXS1Vre4vTbSiiKo/add_vectors.png" alt="add_vectors.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/DQmZf3wEmjEX7DFHkENTgyE5EEYahJUsXS1Vre4vTbSiiKo/add_vectors.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/DQmZf3wEmjEX7DFHkENTgyE5EEYahJUsXS1Vre4vTbSiiKo/add_vectors.png 2x" />
<p dir="auto">In the above diagram we are adding A to B to get R. We are putting these vectors A and B end to end to get R. This new line R is the result of adding the two.
<p dir="auto">This maps to the idea of location and velocity, let's draw out our bouncing ball example:
<p dir="auto"><img src="https://images.hive.blog/768x0/https://steemitimages.com/DQmceb6jjnrFyrBbXNum3QjKNBFp7s2CNixJAcM6TG8AzuZ/adding_vectors.png" alt="adding_vectors.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/DQmceb6jjnrFyrBbXNum3QjKNBFp7s2CNixJAcM6TG8AzuZ/adding_vectors.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/DQmceb6jjnrFyrBbXNum3QjKNBFp7s2CNixJAcM6TG8AzuZ/adding_vectors.png 2x" />
<p dir="auto">Here is the example in code:
<p dir="auto"><img src="https://images.hive.blog/768x0/https://steemitimages.com/DQmPVWBpKdHYRCDasuBQUSFxUibxQuvTMgucuUYbZ7sYVgG/bounce_ball_vectors.png" alt="bounce_ball_vectors.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/DQmPVWBpKdHYRCDasuBQUSFxUibxQuvTMgucuUYbZ7sYVgG/bounce_ball_vectors.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/DQmPVWBpKdHYRCDasuBQUSFxUibxQuvTMgucuUYbZ7sYVgG/bounce_ball_vectors.png 2x" />
<p dir="auto">See the Pen <a href="https://codepen.io/harps116/pen/qpgPLg/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Simple Bouncing Ball Vector by Adam Harpur (<a href="https://codepen.io/harps116" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">@harps116) on <a href="https://codepen.io" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">CodePen.
<p dir="auto">We add the location to velocity to get the new location. The formula in psuedo-code:
<pre><code>newLocation.x = location.x + velocity.x
newLocation.y = location.y + velocity.y
<p dir="auto">Now that we have have a handle on adding let's look at subtraction. There isn't that much difference. All we are doing is replacing the add with subtract but it does require a little extra thinking. Lets first write the pseudo code and then draw it out.
<pre><code>W.x = V.x - U.x
W.y = V.y - U.y
<p dir="auto">We'll be able to give these letters more meaning after we draw it out:
<p dir="auto"><img src="https://images.hive.blog/768x0/https://steemitimages.com/DQmVx8FdP3rb47Dvw7Wow6BbT6MMzvicfmZDj21aQ8iJiD4/sub_vectors.png" alt="sub_vectors.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/DQmVx8FdP3rb47Dvw7Wow6BbT6MMzvicfmZDj21aQ8iJiD4/sub_vectors.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/DQmVx8FdP3rb47Dvw7Wow6BbT6MMzvicfmZDj21aQ8iJiD4/sub_vectors.png 2x" />
<p dir="auto">To subtract the vectors we lay the vectors end to end but when subtracting we inverse the direction of one keeping the magnitude ( size ). The vector between the two is the result. In this case we have found the Velocity between the two points.
<p dir="auto">now in we can label those letters:
<pre><code>velocity.x = mouseV.x - centerV.x
velocity.y = mouseV.y - centerV.y
<p dir="auto">Here's an example using code:
<p dir="auto"><img src="https://images.hive.blog/768x0/https://steemitimages.com/DQmarJcn1xKfrF2UFMEnYuFTVC4h1t14y6o6ztvf5nqr16X/vector_sub.png" alt="vector_sub.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/DQmarJcn1xKfrF2UFMEnYuFTVC4h1t14y6o6ztvf5nqr16X/vector_sub.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/DQmarJcn1xKfrF2UFMEnYuFTVC4h1t14y6o6ztvf5nqr16X/vector_sub.png 2x" />
<p dir="auto">See the Pen <a href="https://codepen.io/harps116/pen/WdVyMg/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Vector Subtraction P5 by Adam Harpur (<a href="https://codepen.io/harps116" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">@harps116) on <a href="https://codepen.io" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">CodePen.
<p dir="auto">It is best to follow the link to see the full functionality, hover your mouse around the screen and the line will follow.
<p dir="auto">That's all I managed this week.
<p dir="auto">Thanks for reading!
<p dir="auto">Check out Daniel Shiffman's great series on the <a href="http://natureofcode.com/book/introduction/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Nature of Code, this 100 days of learning is a great excuse for me to finally work through the lessons and take some notes as I go.