Skip to content

Instantly share code, notes, and snippets.

@lilgreenland

lilgreenland/index.html

Last active July 14, 2016 02:49
Show Gist options
  • Save lilgreenland/b410f33f8306989b277f60b339964b27 to your computer and use it in GitHub Desktop.
Save lilgreenland/b410f33f8306989b277f60b339964b27 to your computer and use it in GitHub Desktop.
Download ZIP
notes: motion 3 - 2-D, 3-D motion
Raw
index.html
<!--
LaTex equations are form the mathjax library
http://docs.mathjax.org/en/latest/#
put LaTex between $$ $$ example: $$v = \lambda f$$
use this to generate LaTex
http://www.hostmath.com/
-->
<body onload="vectorDiagram()">
<div id='bodybox'>
<h1> Scalors</h1>
<p>A scalor is a variable that only has a magnitude.</p>
<p><b>Examples:</b></p>
<table style="width:100%;text-align:left">
<tr>
<th>Variable</th>
<th>Magnitude</th>
</tr>
<tr>
<td>time</td>
<td>10s</td>
</tr>
<tr>
<td>air pressure</td>
<td>101.3kPa</td>
</tr>
<tr>
<td>temperature</td>
<td>21<sup>o</sup>C</td>
</tr>
<tr>
<td>price</td>
<td>$50</td>
</tr>
<tr>
<td>speed</td>
<td>10m/s (speed + direction is called velocity)</td>
</tr>
</table>
<h1> Vectors</h1>
<p>A vector is a variable that has a magnitude and direction. Temperature is just a scalar. You can't say it is 50<sup>o</sup> north. Velocity is a vector. You could say the velocity is 50m/s north.</p>
<p><b>Examples:</b></p>
<table style="width:100%;text-align:left">
<tr>
<th>Variable</th>
<th>Magnitude</th>
<th>Direction</th>
</tr>
<tr>
<td>distance</td>
<td>10m</td>
<td>West</td>
</tr>
<tr>
<td>velocity</td>
<td>20m/s</td>
<td>20 degrees above the x-axis</td>
</tr>
<tr>
<td>acceleration</td>
<td>9.8 m/s<sup>2</sup></td>
<td>down</td>
</tr>
<tr>
<td>distance</td>
<td>10m</td>
<td>up</td>
</tr>
<tr>
<td>velocity</td>
<td>3m/s</td>
<td>10 degrees above the horizon</td>
</tr>
</table>
<br>
<br>
<h1>Vector Components</h1>
<p>If we think of a vector like the hypotenuse of a right triangle, then we can use SOH-CAH-TOA to find the lengths of the x and y components of the triangle.</p>
$$ cos \theta = \frac{adjacent}{hypotenuse} $$ $$ (hypotenuse)cos \theta = adjacent$$
<p>For a velocity vector the hypotenuse is v. The adjacent and opposite sides of the triangle are the x and y part of v. $$ (v)cos \theta = v_{x}$$ $$ (v)sin \theta = v_{y}$$
<p>In the simulation below position the mouse to around magnitude 250 and angle 10<sup>o</sup>. What are the x and y components of the vector?</p>
<p>At what angles are the magnitude and the x-component equal?</p>
<canvas id="myCanvas"> </canvas>
<div id='hud'>
</div>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
<br>
<br>
<br>
<br>
<p><b>Example:</b> A plane is taking off at an angle of 10<sup>o</sup> above the horizon. If the plane is moving at 250m/s how fast is it moving vertically?</p>
<details>
<summary>solution</summary>
$$ (v)sin \theta = v_{y}$$ $$ (250)sin(10) = v_{y}$$ $$ 43 \small\frac{m}{s} = \normalsize v_{y}$$
</details>
<p><b>Example:</b>You want to walk to the closest pokemon gym. The compass on your phone says you have to walk north/west. You arrive at the gym after walking 75 meters. Sadly you find that you need to be level 5, but you are level 3. How far west did
you walk?</p>
<details>
<summary>solution</summary>
$$ (v)cos \theta = x$$ $$ (75)cos(45) = x$$ $$ 53m = x$$
</details>
<p><b>Example:</b>You walk 3 miles north and then 4 miles West. How far away are you from your starting location?</p>
<details>
<summary>solution</summary>
$$a^{2}+b^{2} = c^{2}$$ $$3^{2}+4^{2} = distance^{2}$$ $$25 = distance^{2}$$ $$5miles = distance$$
</details>
<br>
<br>
<script type="text/javascript" id="WolframAlphaScript165760e088f76be729a18658d17d93fa" src="//www.wolframalpha.com/widget/widget.jsp?id=165760e088f76be729a18658d17d93fa&theme=black&output=lightbox"></script>
<script type="text/javascript" id="WolframAlphaScript8b75f0c5f0a99a16ef024c5f4e46166b" src="//www.wolframalpha.com/widget/widget.jsp?id=8b75f0c5f0a99a16ef024c5f4e46166b&theme=black"></script>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Raw
script.js
/* window.onresize = function(event) {
ctx.canvas.width = 500;//window.innerWidth;
ctx.canvas.height = 500;window.innerHeight;
settings = {
x: window.innerWidth * 0.5,
y: window.innerHeight * 0.5,
}
}; */
function vectorDiagram() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//find the width of the parent node and set the canvas to that wdith
var id = document.getElementById("myCanvas").parentNode.id
ctx.canvas.width = document.getElementById(id).clientWidth;
ctx.canvas.height = 400; //window.innerHeight;
ctx.font = '15px Arial';
ctx.lineWidth = 1;
var settings = {
x: canvas.width * 0.5,
y: canvas.height * 0.5,
}
window.onresize = function(event) {
var id = document.getElementById("myCanvas").parentNode.id
ctx.canvas.width = document.getElementById(id).clientWidth;
ctx.canvas.height = 400; //window.innerHeight;
ctx.font = '20px Arial';
settings = {
x: canvas.width * 0.5,
y: canvas.height * 0.5,
}
};
var vector = {
x: 0,
y: 0,
angle: 0,
mag: 0,
}
var mousePos = {
x: canvas.width * 0.75,
y: canvas.height * 0.25
};
//gets mouse position
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
// waits for mouse move and then updates position
canvas.addEventListener('mousemove', function(evt) {
mousePos = getMousePos(canvas, evt);
cycle();
}, false);
function cycle() {
//set new values
vector.x = mousePos.x - settings.x;
vector.y = mousePos.y - settings.y;
vector.mag = Math.sqrt((vector.x * vector.x) + (vector.y * vector.y))
vector.angle = (2 * Math.PI + Math.atan2(settings.y - mousePos.y, mousePos.x - settings.x)) % (2 * Math.PI);
//clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
//angle
if (Math.abs(vector.mag > 50)) {
ctx.beginPath();
ctx.arc(settings.x, settings.y, 20, -vector.angle, 0);
ctx.stroke();
}
//right angle mark
if (Math.abs(vector.x) > 50 && Math.abs(vector.y) > 50) {
var xOff = vector.x > 0 ? -20 : 20;
var yOff = vector.y > 0 ? 20 : -20;;
ctx.beginPath();
ctx.moveTo(settings.x + vector.x + xOff, settings.y);
ctx.lineTo(settings.x + vector.x + xOff, settings.y + yOff);
ctx.lineTo(settings.x + vector.x, settings.y + yOff);
ctx.strokeStyle = "grey";
ctx.stroke();
}
//x and y components
ctx.beginPath();
ctx.moveTo(settings.x, settings.y);
ctx.lineTo(mousePos.x, settings.y);
ctx.lineTo(mousePos.x, mousePos.y);
ctx.strokeStyle = "red";
ctx.stroke();
//hypotenus
ctx.beginPath();
ctx.moveTo(mousePos.x, mousePos.y);
ctx.lineTo(settings.x, settings.y);
ctx.strokeStyle = "black";
ctx.stroke();
//data
ctx.fillText('magnitude = ' + vector.mag.toFixed(0), 5, 25);
ctx.fillText('θ = ' + (vector.angle * 180 / Math.PI).toFixed(0), 5, 50);
ctx.fillText('x-component = ' + vector.x.toFixed(0), 5, 75);
ctx.fillText('y-component = ' + -vector.y.toFixed(0), 5, 100);
//triangle data
if (Math.abs(vector.x) > 50) {
ctx.fillText(vector.x.toFixed(0), settings.x + vector.x * 0.5, settings.y);
}
if (Math.abs(vector.y) > 50) {
ctx.fillText(-vector.y.toFixed(0), settings.x + vector.x, settings.y + vector.y * 0.5);
}
if (Math.abs(vector.mag) > 50) {
ctx.save();
ctx.translate(settings.x, settings.y);
ctx.rotate(-vector.angle);
ctx.fillText(vector.mag.toFixed(0), vector.mag * 0.5, 0);
ctx.restore();
}
}
cycle()
}
Raw
style.css
body {
font: 15px arial, sans-serif;
background-color: white;
padding-top: 0px;
}
#bodybox {
margin: auto;
max-width: 700px;
font: 20px arial, sans-serif;
background-color: white;
}
#hud {
font-family: "Lucida Console", Monaco, monospace;
font-size: 100%;
}
canvas {
border:1px solid black;
/*background-color: #f9f9f9;*/
border-radius: 5px;
cursor: crosshair;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment