Added 6-3, 6-5, 7-4, 8-1, and gravity
This commit is contained in:
144
6-3.html
Normal file
144
6-3.html
Normal file
@@ -0,0 +1,144 @@
|
||||
<!--
|
||||
This work is licensed under CC BY-NC-ND 4.0
|
||||
Link to license: http://creativecommons.org/licenses/by-nc-nd/4.0/
|
||||
Attribute to Russell Georgi
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
Problem 6-3
|
||||
</title>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.greenSlider {
|
||||
-webkit-appearance: none;
|
||||
border-radius: 5px;
|
||||
height: 10px;
|
||||
background: #d3d3d3;
|
||||
outline: none;
|
||||
opacity: 0.7;
|
||||
-webkit-transition: .2s;
|
||||
transition: opacity .2s;
|
||||
|
||||
}
|
||||
|
||||
.greenSlider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.greenSlider::-moz-range-thumb {
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="myCanvas" width="1" height="1" style="border:1px solid #ffffff;">
|
||||
Your browser does not support the HTML5 canvas tag.</canvas>
|
||||
<div class="slidecontainer">
|
||||
<t>Omega</t>
|
||||
<input type="range" min="1" max="10" value="6" step="1" class="greenSlider" id="wSlider">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
//Time step
|
||||
var dt = 0.01;
|
||||
var t = 0;
|
||||
var g = 98;
|
||||
var a = 10;
|
||||
var l = 200;
|
||||
var w = 6;
|
||||
var x = 0;
|
||||
var theta = Math.PI / 4;
|
||||
var thetap = 0;
|
||||
//Relative position of canvas
|
||||
var xPos = 0;
|
||||
var yPos = 100;
|
||||
//Moves and scales canvas
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(1, -1);
|
||||
|
||||
wSlider.oninput = function()
|
||||
{
|
||||
w = parseFloat(this.value);
|
||||
Reset();
|
||||
}
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
x = a * Math.cos(w * t);
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
t += dt;
|
||||
thetap += ((x * w * w * Math.cos(theta)) - g * Math.sin(theta)) * dt / l;
|
||||
theta += thetap * dt;
|
||||
setTimeout(Update, 1);
|
||||
}
|
||||
|
||||
function Reset()
|
||||
{
|
||||
theta = Math.PI / 4;
|
||||
thetap = 0;
|
||||
t = 0;
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.rect(-20 + xPos + x, -20 + yPos, 40, 40);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + l * Math.sin(theta) + x, yPos - l * Math.cos(theta), 10, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + x, yPos - 20);
|
||||
ctx.lineTo(xPos + l * Math.sin(theta) + x, yPos - l * Math.cos(theta));
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(1, -1);
|
||||
}, true);
|
||||
|
||||
Update();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
<p xmlns:cc="http://creativecommons.org/ns#" style="font-size: 1vw; bottom: 0px; position: absolute;">
|
||||
This work is licensed under
|
||||
<a href="http://creativecommons.org/licenses/by-nc-nd/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-ND 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nd.svg?ref=chooser-v1"></a></p>
|
||||
</html>
|
||||
144
6-5.html
Normal file
144
6-5.html
Normal file
@@ -0,0 +1,144 @@
|
||||
<!--
|
||||
This work is licensed under CC BY-NC-ND 4.0
|
||||
Link to license: http://creativecommons.org/licenses/by-nc-nd/4.0/
|
||||
Attribute to Russell Georgi
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
Problem 6-5
|
||||
</title>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.greenSlider {
|
||||
-webkit-appearance: none;
|
||||
border-radius: 5px;
|
||||
height: 10px;
|
||||
background: #d3d3d3;
|
||||
outline: none;
|
||||
opacity: 0.7;
|
||||
-webkit-transition: .2s;
|
||||
transition: opacity .2s;
|
||||
|
||||
}
|
||||
|
||||
.greenSlider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.greenSlider::-moz-range-thumb {
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="myCanvas" width="1" height="1" style="border:1px solid #ffffff;">
|
||||
Your browser does not support the HTML5 canvas tag.</canvas>
|
||||
<div class="slidecontainer">
|
||||
<t>Omega</t>
|
||||
<input type="range" min="1" max="100" value="65" step="1" class="greenSlider" id="wSlider">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
//Time step
|
||||
var dt = 0.01;
|
||||
var t = 0;
|
||||
var g = 98;
|
||||
var a = 5;
|
||||
var l = 200;
|
||||
var w = 65;
|
||||
var y = 0;
|
||||
var theta = 0.1;
|
||||
var thetap = 0;
|
||||
//Relative position of canvas
|
||||
var xPos = 0;
|
||||
var yPos = 0;
|
||||
//Moves and scales canvas
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(1, -1);
|
||||
|
||||
wSlider.oninput = function()
|
||||
{
|
||||
w = parseFloat(this.value);
|
||||
Reset();
|
||||
}
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
y = a * Math.cos(w * t);
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
t += dt;
|
||||
thetap += (-Math.sin(theta) * (y * w * w - g)) * dt / l;
|
||||
theta += thetap * dt;
|
||||
setTimeout(Update, 1);
|
||||
}
|
||||
|
||||
function Reset()
|
||||
{
|
||||
theta = 0.1;
|
||||
thetap = 0;
|
||||
t = 0;
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.rect(-20 + xPos, -20 + yPos + y, 40, 40);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + l * Math.sin(theta), yPos + y + l * Math.cos(theta), 10, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos, yPos + y + 20);
|
||||
ctx.lineTo(xPos + l * Math.sin(theta), yPos + y + l * Math.cos(theta));
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(1, -1);
|
||||
}, true);
|
||||
|
||||
Update();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
<p xmlns:cc="http://creativecommons.org/ns#" style="font-size: 1vw; bottom: 0px; position: absolute;">
|
||||
This work is licensed under
|
||||
<a href="http://creativecommons.org/licenses/by-nc-nd/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-ND 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nd.svg?ref=chooser-v1"></a></p>
|
||||
</html>
|
||||
153
7-4.html
Normal file
153
7-4.html
Normal file
@@ -0,0 +1,153 @@
|
||||
<!--
|
||||
This work is licensed under CC BY-NC-ND 4.0
|
||||
Link to license: http://creativecommons.org/licenses/by-nc-nd/4.0/
|
||||
Attribute to Russell Georgi
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
Problem 7-4
|
||||
</title>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.greenSlider {
|
||||
-webkit-appearance: none;
|
||||
border-radius: 5px;
|
||||
height: 10px;
|
||||
background: #d3d3d3;
|
||||
outline: none;
|
||||
opacity: 0.7;
|
||||
-webkit-transition: .2s;
|
||||
transition: opacity .2s;
|
||||
|
||||
}
|
||||
|
||||
.greenSlider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.greenSlider::-moz-range-thumb {
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<form>
|
||||
<label for="k">k</label>
|
||||
<input type="number" id="k" name="k" min="-2" max="10" step = "0.1" value = "2">
|
||||
</form>
|
||||
<canvas id="myCanvas" width="1" height="1" style="border:1px solid #ffffff;">
|
||||
Your browser does not support the HTML5 canvas tag.</canvas>
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
//Time step
|
||||
var dt = 0.01;
|
||||
var t = 0;
|
||||
var omegaTheta = 1;
|
||||
var r = 200;
|
||||
var k = 2;
|
||||
var omegaR = omegaTheta * Math.sqrt(k + 2);
|
||||
var smallAmp = 20;
|
||||
var xPositions = new Array();
|
||||
var yPositions = new Array();
|
||||
//Relative position of canvas
|
||||
var xPos = 0;
|
||||
var yPos = 0;
|
||||
//Moves and scales canvas
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(1, -1);
|
||||
|
||||
function changeK(newK)
|
||||
{
|
||||
k = newK;
|
||||
omegaR = omegaTheta * Math.sqrt(k + 2);
|
||||
Reset();
|
||||
}
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
if (parseFloat(document.getElementById("k").value) != k)
|
||||
{
|
||||
changeK(parseFloat(document.getElementById("k").value));
|
||||
}
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
t += dt;
|
||||
setTimeout(Update, 1);
|
||||
}
|
||||
|
||||
function Reset()
|
||||
{
|
||||
t = 0;
|
||||
xPositions = new Array();
|
||||
yPositions = new Array();
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
ctx.setLineDash([5, 5]);
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos, yPos, r, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
xPositions.push((r + smallAmp * Math.cos(omegaR * t)) * Math.cos(omegaTheta * t));
|
||||
yPositions.push((r + smallAmp * Math.cos(omegaR * t)) * Math.sin(omegaTheta * t));
|
||||
ctx.setLineDash([]);
|
||||
ctx.beginPath();
|
||||
ctx.arc((r + smallAmp * Math.cos(omegaR * t)) * Math.cos(omegaTheta * t) + xPos, (r + smallAmp * Math.cos(omegaR * t)) * Math.sin(omegaTheta * t) + yPos, 5, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(r + smallAmp + xPos, yPos);
|
||||
for (i = 0; i < xPositions.length; i++)
|
||||
{
|
||||
ctx.lineTo(xPositions[i] + xPos, yPositions[i] + yPos);
|
||||
}
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(1, -1);
|
||||
}, true);
|
||||
|
||||
Update();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
<p xmlns:cc="http://creativecommons.org/ns#" style="font-size: 1vw; bottom: 0px; position: absolute;">
|
||||
This work is licensed under
|
||||
<a href="http://creativecommons.org/licenses/by-nc-nd/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-ND 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nd.svg?ref=chooser-v1"></a></p>
|
||||
</html>
|
||||
177
8-1.html
Normal file
177
8-1.html
Normal file
@@ -0,0 +1,177 @@
|
||||
<!--
|
||||
This work is licensed under CC BY-NC-ND 4.0
|
||||
Link to license: http://creativecommons.org/licenses/by-nc-nd/4.0/
|
||||
Attribute to Russell Georgi
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
Problem 8-1
|
||||
</title>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="myCanvas" width="1" height="1" style="border:1px solid #ffffff;">
|
||||
Your browser does not support the HTML5 canvas tag.</canvas>
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
//Time step
|
||||
var dt = 0.002;
|
||||
var t = 0;
|
||||
var g = 98;
|
||||
var y1 = 0;
|
||||
var y2 = 0;
|
||||
var y3 = 0;
|
||||
var y4 = 0;
|
||||
var v = 0;
|
||||
var v2 = 0;
|
||||
var r = 20;
|
||||
var xDist = 100;
|
||||
var theta = 0;
|
||||
var a = 2 * g / 7;
|
||||
var a2 = g / 3;
|
||||
//Relative position of canvas
|
||||
var xPos = -50;
|
||||
var yPos = 70;
|
||||
//Moves and scales canvas
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(2, -2);
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
t += dt;
|
||||
v += a * dt;
|
||||
v2 += a2 * dt;
|
||||
y1 += v * dt;
|
||||
y2 -= v * dt;
|
||||
y3 += v2 * dt;
|
||||
y4 -= v2 * dt;
|
||||
theta -= v * dt;
|
||||
if (Math.sqrt(((100 - y3) ** 2) + (400)) < 30)
|
||||
{
|
||||
Reset();
|
||||
}
|
||||
if (Math.sqrt(((100 - y4) ** 2) + (400)) < 30)
|
||||
{
|
||||
Reset();
|
||||
}
|
||||
setTimeout(Update, 5);
|
||||
}
|
||||
|
||||
function Reset()
|
||||
{
|
||||
y1 = 0;
|
||||
y2 = 0;
|
||||
y3 = 0;
|
||||
y4 = 0;
|
||||
theta = 0;
|
||||
v = 0;
|
||||
v2 = 0;
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
ctx.setLineDash([]);
|
||||
ctx.fillStyle = "#999999";
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos, yPos, r, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos, yPos);
|
||||
ctx.lineTo(xPos + r * Math.cos(theta), yPos + r * Math.sin(theta));
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos, yPos, r, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + r, yPos);
|
||||
ctx.lineTo(xPos + r, yPos - (100 - y2));
|
||||
ctx.stroke();
|
||||
ctx.fillStyle = "#000000";
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + r, yPos - (100 - y2), Math.PI * Math.sqrt(2), 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos - r, yPos);
|
||||
ctx.lineTo(xPos - r, yPos - (100 - y1));
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos - r, yPos - (100 - y1), Math.PI, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + xDist, yPos, r, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + xDist + r, yPos);
|
||||
ctx.lineTo(xPos + xDist + r, yPos - (100 - y4));
|
||||
ctx.stroke();
|
||||
ctx.fillStyle = "#000000";
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + xDist + r, yPos - (100 - y4), Math.PI * Math.sqrt(2), 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + xDist - r, yPos);
|
||||
ctx.lineTo(xPos + xDist - r, yPos - (100 - y3));
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + xDist - r, yPos - (100 - y3), Math.PI, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.setLineDash([2, 2]);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-c.width, yPos - 100 + y1);
|
||||
ctx.lineTo(c.width, yPos - 100 + y1);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-c.width, yPos - 100 + y2);
|
||||
ctx.lineTo(c.width, yPos - 100 + y2);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-c.width, yPos - 100 + y3);
|
||||
ctx.lineTo(c.width, yPos - 100 + y3);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-c.width, yPos - 100 + y4);
|
||||
ctx.lineTo(c.width, yPos - 100 + y4);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(2, -2);
|
||||
}, true);
|
||||
|
||||
Update();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
<p xmlns:cc="http://creativecommons.org/ns#" style="font-size: 1vw; bottom: 0px; position: absolute;">
|
||||
This work is licensed under
|
||||
<a href="http://creativecommons.org/licenses/by-nc-nd/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-ND 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nd.svg?ref=chooser-v1"></a></p>
|
||||
</html>
|
||||
214
gravity.html
Normal file
214
gravity.html
Normal file
@@ -0,0 +1,214 @@
|
||||
<!--
|
||||
This work is licensed under CC BY-NC-ND 4.0
|
||||
Link to license: http://creativecommons.org/licenses/by-nc-nd/4.0/
|
||||
Attribute to Russell Georgi
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
Chapter 7 - Gravity and Kepler's Laws
|
||||
</title>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.greenSlider {
|
||||
-webkit-appearance: none;
|
||||
border-radius: 5px;
|
||||
height: 10px;
|
||||
background: #d3d3d3;
|
||||
outline: none;
|
||||
opacity: 0.7;
|
||||
-webkit-transition: .2s;
|
||||
transition: opacity .2s;
|
||||
|
||||
}
|
||||
|
||||
.greenSlider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.greenSlider::-moz-range-thumb {
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="myCanvas" width="1" height="1" style="border:1px solid #ffffff;">
|
||||
Your browser does not support the HTML5 canvas tag.</canvas>
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
//Time step
|
||||
var dt = 0.01;
|
||||
var rc = 25;
|
||||
var a = 100000 * rc * rc / 625;
|
||||
var x = 100;
|
||||
var y = -50;
|
||||
var xVel = 25;
|
||||
var yVel = 0;
|
||||
|
||||
var clickedOnMass = false;
|
||||
var clickedOnPlanet = false;
|
||||
var dragging = false;
|
||||
var maxDist = 5;
|
||||
//Relative position of canvas
|
||||
var xPos = 0;
|
||||
var yPos = 0;
|
||||
|
||||
//Moves and scales canvas
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
|
||||
ctx.scale(1, -1);
|
||||
Draw();
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
Clear(ctx);
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos, yPos, rc, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + x, yPos + y, 5, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
arrow(xPos + x, yPos + y, xPos + x + xVel, yPos + y + yVel);
|
||||
var xt = x;
|
||||
var yt = y;
|
||||
var xvt = xVel;
|
||||
var yvt = yVel;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + x, yPos + y);
|
||||
for (t = 0; t < 200; t += dt)
|
||||
{
|
||||
var r = Math.sqrt(xt ** 2 + yt ** 2);
|
||||
var f = a / (r ** 2);
|
||||
var theta = Math.atan(yt/xt);
|
||||
if (xt < 0)
|
||||
{
|
||||
theta += Math.PI;
|
||||
}
|
||||
xvt -= f * Math.cos(theta) * dt;
|
||||
yvt -= f * Math.sin(theta) * dt;
|
||||
xt += xvt * dt;
|
||||
yt += yvt * dt;
|
||||
if (r < rc)
|
||||
{
|
||||
break;
|
||||
}
|
||||
if (t > 1 && Math.sqrt((xt - x) ** 2 + (yt - y) ** 2) < 2)
|
||||
{
|
||||
console.log("converges");
|
||||
}
|
||||
ctx.lineTo(xPos + xt, yPos + yt);
|
||||
}
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(1, -1);
|
||||
}, true);
|
||||
|
||||
function arrow(fromx, fromy, tox, toy) {
|
||||
var headlen = 10; // length of head in pixels
|
||||
var dx = tox - fromx;
|
||||
var dy = toy - fromy;
|
||||
var angle = Math.atan2(dy, dx);
|
||||
ctx.moveTo(fromx, fromy);
|
||||
ctx.lineTo(tox, toy);
|
||||
ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
|
||||
ctx.moveTo(tox, toy);
|
||||
ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
document.addEventListener("mousedown", function(e)
|
||||
{
|
||||
var rect = c.getBoundingClientRect()
|
||||
var mouseX = e.clientX - rect.left - c.width / 2;
|
||||
var mouseY = e.clientY - rect.top - c.height / 2;
|
||||
mouseY *= -1;
|
||||
console.log("x: " + mouseX + " y: " + mouseY);
|
||||
if (Math.sqrt((mouseX - x) ** 2 + (mouseY - y) ** 2) < maxDist)
|
||||
{
|
||||
clickedOnMass = true;
|
||||
}
|
||||
if (Math.sqrt((mouseX) ** 2 + (mouseY) ** 2) < rc)
|
||||
{
|
||||
clickedOnPlanet = true;
|
||||
}
|
||||
dragging = true;
|
||||
});
|
||||
|
||||
document.addEventListener("mouseup", function(e)
|
||||
{
|
||||
dragging = false;
|
||||
clickedOnMass = false;
|
||||
clickedOnPlanet = false;
|
||||
});
|
||||
|
||||
document.addEventListener("mousemove", function(e)
|
||||
{
|
||||
if (clickedOnMass && dragging)
|
||||
{
|
||||
var rect = c.getBoundingClientRect()
|
||||
x = e.clientX - rect.left - c.width / 2;
|
||||
y = e.clientY - rect.top - c.height / 2;
|
||||
y *= -1;
|
||||
Draw();
|
||||
} else if (clickedOnPlanet && dragging)
|
||||
{
|
||||
var rect = c.getBoundingClientRect()
|
||||
mx = e.clientX - rect.left - c.width / 2;
|
||||
my = e.clientY - rect.top - c.height / 2;
|
||||
my *= -1;
|
||||
rc = Math.sqrt(mx ** 2 + my ** 2);
|
||||
a = 100000 * rc * rc / 625;
|
||||
Draw();
|
||||
} else if (dragging)
|
||||
{
|
||||
var rect = c.getBoundingClientRect()
|
||||
xVel = e.clientX - rect.left - c.width / 2 - x;
|
||||
yVel = e.clientY - rect.top - c.height / 2;
|
||||
yVel *= -1;
|
||||
yVel -= y;
|
||||
Draw();
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
<p xmlns:cc="http://creativecommons.org/ns#" style="font-size: 1vw; bottom: 0px; position: absolute;">
|
||||
This work is licensed under
|
||||
<a href="http://creativecommons.org/licenses/by-nc-nd/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-ND 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nd.svg?ref=chooser-v1"></a></p>
|
||||
</html>
|
||||
45
index.html
45
index.html
@@ -249,11 +249,56 @@
|
||||
<t>Spring pendulum example problem</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='6-3.html'>Problem 6-3</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Pendulum with an oscillating support</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='6-5.html'>Problem 6-5</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Inverted pendulum - for high enough values of ω the pendulum stays upright</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan = "2">
|
||||
<t>Chapter 7: Central forces</t>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='gravity.html'>Orbit simulation</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Simulation of mass in a gravitational field. Drag the small mass to change its position, drag outside the small mass to change its velocity, and drag the large mass to change the strength of the gravitational field.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='7-4.html'>Problem 7-4</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Mass in a r<sup>k</sup> potential. Forms a closed path if √(k + 2) is rational</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan = "2">
|
||||
<t>Chapter 8: Angular momentum part 1</t>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='8-1.html'>Problem 8-1</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Atwood machine with massive pulley compared to atwood machine with massless pulley</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='8-20.html'>Problem 8-20</a>
|
||||
|
||||
Reference in New Issue
Block a user