Added the rest of the files
This commit is contained in:
9
.vscode/settings.json
vendored
Normal file
9
.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"[json]": {
|
||||
|
||||
"editor.quickSuggestions": {
|
||||
"strings": true
|
||||
},
|
||||
"editor.suggest.insertMode": "replace"
|
||||
}
|
||||
}
|
||||
122
1-1.html
Normal file
122
1-1.html
Normal file
@@ -0,0 +1,122 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 1-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 = .05;
|
||||
//Time
|
||||
var m = 1;
|
||||
//Parameter interval for spring
|
||||
var tStep = 0.1;
|
||||
//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(3, 3);
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
ctx.strokeStyle = "#000000";
|
||||
/*
|
||||
var i;
|
||||
for(i=-360; i<360; i+= 20/3){
|
||||
ctx.moveTo(0,i + (5/3));
|
||||
ctx.lineTo(0,i);
|
||||
}
|
||||
ctx.stroke();
|
||||
*/
|
||||
//Spinning line
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos, yPos);
|
||||
ctx.lineTo(xPos + 25 * Math.cos(dt * m), yPos + -25 * Math.sin(dt * m));
|
||||
ctx.stroke();
|
||||
//One-dimensional SHM
|
||||
ctx.strokeStyle = "#FF0000";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos, yPos - 25);
|
||||
ctx.lineTo(xPos + 25 * Math.cos(dt * m), yPos - 25);
|
||||
ctx.stroke();
|
||||
ctx.strokeStyle = "#0000FF";
|
||||
//Mass on spring
|
||||
drawSpring(1, 3, 25 * Math.cos(dt * m) + 48, 5, 7, xPos - 50, yPos + 25, tStep);
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + 25 * Math.cos(dt * m), yPos + 25, 2, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
m += 1;
|
||||
console.log(m);
|
||||
setTimeout(Update, 1000/60)
|
||||
}
|
||||
|
||||
function drawSpring(a, b, xSize, ySize, numLoops, x, y, tStep)
|
||||
{
|
||||
//Draws coiled spring using prolate cycloid
|
||||
var tStart = Math.PI / 2;
|
||||
var tEnd = (3 * Math.PI / 2) + (2 * Math.PI * numLoops);
|
||||
var xEnd = a * tEnd - b * Math.sin(tEnd);
|
||||
var yEnd = a + b;
|
||||
var xFactor = xSize / xEnd;
|
||||
var yFactor = ySize / yEnd;
|
||||
var xShift = x - a * (Math.PI / 2) + b * Math.sin(Math.PI / 2);
|
||||
var yShift = y - a + b * Math.cos(Math.PI / 2);
|
||||
for (t = tStart; t <= tEnd; t += tStep)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xShift + xFactor * (a * t - b * Math.sin(t)), yShift + yFactor * (a - b * Math.cos(t)));
|
||||
ctx.lineTo(xShift + xFactor * (a * (t + tStep) - b * Math.sin(t + tStep)), yShift + yFactor * (a - b * Math.cos(t + tStep)));
|
||||
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(3, 3);
|
||||
}, 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>
|
||||
235
1-2.html
Normal file
235
1-2.html
Normal file
@@ -0,0 +1,235 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 1-2
|
||||
</title>
|
||||
<style>
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.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: #00ff00;
|
||||
border-radius: 50%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.greenSlider::-moz-range-thumb {
|
||||
background: #00ff00;
|
||||
border-radius: 50%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.redSlider {
|
||||
-webkit-appearance: none;
|
||||
border-radius: 5px;
|
||||
height: 10px;
|
||||
background: #d3d3d3;
|
||||
outline: none;
|
||||
opacity: 0.7;
|
||||
-webkit-transition: .2s;
|
||||
transition: opacity .2s;
|
||||
|
||||
}
|
||||
|
||||
.redSlider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: #ff0000;
|
||||
border-radius: 50%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.redSlider::-moz-range-thumb {
|
||||
background: #ff0000;
|
||||
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>This program multiplies complex numbers.</t>
|
||||
<t>Input the coordinates on w and z in the complex</t>
|
||||
<t>plane.Then the blue vector is their product.</t>
|
||||
<br>
|
||||
<t>Real part of w</t>
|
||||
<input type="range" min="-20" max="20" value="0" class="greenSlider" id="wRSlider">
|
||||
<br>
|
||||
<t>Imaginary part of w</t>
|
||||
<input type="range" min="-20" max="20" value="0" class="greenSlider" id="wISlider">
|
||||
<br>
|
||||
<t>Real part of z</t>
|
||||
<input type="range" min="-20" max="20" value="0" class="redSlider" id="zRSlider">
|
||||
<br>
|
||||
<t>Imaginary part of z</t>
|
||||
<input type="range" min="-20" max="20" value="0" class="redSlider" id="zISlider">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
var clx = "#ff0000";
|
||||
var clw = "#00ff00";
|
||||
var clz = "#0000ff";
|
||||
var wR = 0;
|
||||
var wRSlider = document.getElementById("wRSlider");
|
||||
var wI = 0;
|
||||
var wISlider = document.getElementById("wISlider");
|
||||
var zR = 0;
|
||||
var zRSlider = document.getElementById("zRSlider");
|
||||
var zI = 0;
|
||||
var zISlider = document.getElementById("zISlider");
|
||||
var delta = 1;
|
||||
var xPos = 0;
|
||||
var yPos = 0;
|
||||
var bottom = 0;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(3, 3);
|
||||
|
||||
wRSlider.oninput = function()
|
||||
{
|
||||
wR = this.value * 5;
|
||||
}
|
||||
wISlider.oninput = function()
|
||||
{
|
||||
wI = -this.value * 5;
|
||||
}
|
||||
zRSlider.oninput = function()
|
||||
{
|
||||
zR = this.value * 5;
|
||||
}
|
||||
zISlider.oninput = function()
|
||||
{
|
||||
zI = -this.value * 5;
|
||||
}
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
var x2 = (zR * wR - zI * wI) / 50;
|
||||
var y2 = (zR * wI + zI * wR) / 50;
|
||||
ctx.strokeStyle = clx;
|
||||
ctx.fillStyle = clx;
|
||||
ctx.beginPath();
|
||||
ctx.arc(zR, zI, 1, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = clw;
|
||||
ctx.fillStyle = clw;
|
||||
ctx.beginPath();
|
||||
ctx.arc(wR, wI, 1, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.fillStyle = "#000000";
|
||||
ctx.font = '5px serif';
|
||||
ctx.fillText("Real axis", 65, -3);
|
||||
ctx.rotate(Math.PI / 2);
|
||||
ctx.fillText("Imaginary axis", 65, -3);
|
||||
ctx.rotate(-Math.PI / 2);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-3, 50);
|
||||
ctx.lineTo(3, 50);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-3, -50);
|
||||
ctx.lineTo(3, -50);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(50, -3);
|
||||
ctx.lineTo(50, 3);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-50, -3);
|
||||
ctx.lineTo(-50, 3);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, bottom - 100);
|
||||
ctx.lineTo(0, 120);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-150, 0);
|
||||
ctx.lineTo(150, 0);
|
||||
ctx.stroke();
|
||||
ctx.strokeStyle = clx;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(zR, zI);
|
||||
ctx.lineTo(0, 0);
|
||||
ctx.stroke();
|
||||
ctx.strokeStyle = clw;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(wR, wI);
|
||||
ctx.lineTo(0, 0);
|
||||
ctx.stroke();
|
||||
ctx.strokeStyle = clz;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x2, y2);
|
||||
ctx.lineTo(0, 0);
|
||||
ctx.stroke();
|
||||
ctx.strokeStyle = clz;
|
||||
ctx.fillStyle = clz;
|
||||
ctx.beginPath();
|
||||
ctx.arc(x2, y2, 1, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
setTimeout(Update, 1000/60)
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(3, 3);
|
||||
}, 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>
|
||||
162
10-1.html
Normal file
162
10-1.html
Normal file
@@ -0,0 +1,162 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 10-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;
|
||||
var h = 20;
|
||||
var dt = .08;
|
||||
var t = -1;
|
||||
var m = 1;
|
||||
var mmax = 100;
|
||||
var xPos = -50;
|
||||
var yPos = -50;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(3, -3);
|
||||
|
||||
function fnf(t)
|
||||
{
|
||||
var fd = 0;
|
||||
if (t >= 0)
|
||||
{
|
||||
fd = 1 - t;
|
||||
}
|
||||
if (t < 0)
|
||||
{
|
||||
fd = 1 + t;
|
||||
}
|
||||
if (t > 1)
|
||||
{
|
||||
fd = 0;
|
||||
}
|
||||
if (t < -1)
|
||||
{
|
||||
fd = 0;
|
||||
}
|
||||
return fd;
|
||||
}
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
m += 1;
|
||||
if (m > mmax)
|
||||
{
|
||||
m = 1;
|
||||
t = -1;
|
||||
}
|
||||
console.log(m);
|
||||
setTimeout(Update, 1000/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
xc = 5 + 15 * t;
|
||||
xc1 = 5 + 15 * (t - 1);
|
||||
xc2 = 5 + 15 * (t + 1);
|
||||
if (t < 0)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 5, yPos + 40 + h * fnf(-t));
|
||||
ctx.lineTo(xPos + xc2, yPos + 40);
|
||||
ctx.lineTo(xPos + 95, yPos + 40);
|
||||
ctx.stroke();
|
||||
}
|
||||
if (t >= 0 && t < 1)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 5, yPos + 40 + h * fnf(-t));
|
||||
ctx.lineTo(xPos + xc, yPos + 40 + h);
|
||||
ctx.lineTo(xPos + xc2, yPos + 40);
|
||||
ctx.lineTo(xPos + 95, yPos + 40);
|
||||
ctx.stroke();
|
||||
}
|
||||
if (t >= 1 && t < 5)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 5, yPos + 40);
|
||||
ctx.lineTo(xPos + xc1, yPos + 40);
|
||||
ctx.lineTo(xPos + xc, yPos + 40 + h);
|
||||
ctx.lineTo(xPos + xc2, yPos + 40);
|
||||
ctx.lineTo(xPos + 95, yPos + 40);
|
||||
ctx.stroke();
|
||||
}
|
||||
if (t >= 5 && t < 6)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 5, yPos + 40);
|
||||
ctx.lineTo(xPos + xc1, yPos + 40);
|
||||
ctx.lineTo(xPos + xc, yPos + 40 + h);
|
||||
ctx.lineTo(xPos + 95, yPos + 40 + h * fnf(6-t));
|
||||
ctx.stroke();
|
||||
}
|
||||
if (t >= 6 && t < 7)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 5, yPos + 40);
|
||||
ctx.lineTo(xPos + xc1, yPos + 40);
|
||||
ctx.lineTo(xPos + 95, yPos + 40 + h * fnf(6-t));
|
||||
ctx.stroke();
|
||||
}
|
||||
if (t >= 7 && t < 8)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 5, yPos + 40);
|
||||
ctx.lineTo(xPos + 95, yPos + 40);
|
||||
ctx.stroke();
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + 5, yPos + 40 + h * fnf(-t), 1, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
t += dt;
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(3, -3);
|
||||
}, 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>
|
||||
130
10-2.html
Normal file
130
10-2.html
Normal file
@@ -0,0 +1,130 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 10-2
|
||||
</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;
|
||||
var mm1 = 25;
|
||||
var mm2 = 22;
|
||||
var mmax = 40;
|
||||
var nn1 = 18;
|
||||
var nn2 = 14;
|
||||
var m = 1;
|
||||
var nmax = 5 * nn1;
|
||||
var xPos = -50;
|
||||
var yPos = -50;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(3, -3);
|
||||
|
||||
var y1 = new Array(nn1 + 1);
|
||||
var y3 = new Array(nn2 + 1);
|
||||
for (n = 0; n <= nn1; n++)
|
||||
{
|
||||
y1[n] = new Array()
|
||||
for (m = 0; m < mm1; m++)
|
||||
{
|
||||
y1[n][m] = 10 * Math.cos(2 * Math.PI * (n / nn1 - m / mm1));
|
||||
}
|
||||
}
|
||||
for (n = 0; n <= nn2; n++)
|
||||
{
|
||||
y3[n] = new Array()
|
||||
for (m = 0; m < mm2; m++)
|
||||
{
|
||||
y3[n][m] = 10 * Math.cos(2 * Math.PI * (n / nn2 - m / mm2));
|
||||
}
|
||||
}
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
m += 1;
|
||||
console.log(m);
|
||||
setTimeout(Update, 1000/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
ctx.strokeStyle = "#cccccc";
|
||||
ctx.lineWidth = 0.5;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 5, yPos + 75);
|
||||
ctx.lineTo(xPos + 85 + 80 / nmax, yPos + 75);
|
||||
ctx.stroke();
|
||||
for (n = 0; n <= nmax; n++)
|
||||
{
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 5 + 80 * n / nmax, yPos + y1[n % nn1][m % mm1] + 15);
|
||||
ctx.lineTo(xPos + 5 + 80 * (n + 1) / nmax, yPos + y1[(n + 1) % nn1][m % mm1] + 15);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 5 + 80 * n / nmax, yPos + y3[n % nn2][m % mm2] + 40);
|
||||
ctx.lineTo(xPos + 5 + 80 * (n + 1) / nmax, yPos + y3[(n + 1) % nn2][m % mm2] + 40);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 5 + 80 * n / nmax, yPos + y1[n % nn1][m % mm1] + y3[n % nn2][m % mm2] + 75);
|
||||
ctx.lineTo(xPos + 5 + 80 * (n + 1) / nmax, yPos + y1[(n + 1) % nn1][m % mm1] + y3[(n + 1) % nn2][m % mm2] + 75);
|
||||
ctx.stroke();
|
||||
ctx.strokeStyle = "#ff0000";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 5 + 80 * n / nmax, yPos + 75 + 20 * Math.cos(Math.PI * (n / nn1 - n / nn2 - m / mm1 + m / mm2)));
|
||||
ctx.lineTo(xPos + 5 + 80 * (n + 1) / nmax, yPos + 75 + 20 * Math.cos(Math.PI * ((n + 1) / nn1 - (n + 1) / nn2 - m / mm1 + m / mm2)));
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 5 + 80 * n / nmax, yPos + 75 - 20 * Math.cos(Math.PI * (n / nn1 - n / nn2 - m / mm1 + m / mm2)));
|
||||
ctx.lineTo(xPos + 5 + 80 * (n + 1) / nmax, yPos + 75 - 20 * Math.cos(Math.PI * ((n + 1) / nn1 - (n + 1) / nn2 - m / mm1 + m / mm2)));
|
||||
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(3, -3)
|
||||
}, 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
10-3.html
Normal file
153
10-3.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>
|
||||
Waves 10-3
|
||||
</title>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<form>
|
||||
<label for="ratio">k2 / k1</label>
|
||||
<input type="number" id="ratio" name="ratio" min="0" max="10" step = "0.1" value = "1">
|
||||
</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;
|
||||
var k = 1;
|
||||
var eps = parseFloat(document.getElementById("ratio").value);
|
||||
var tau = 2 / (1 + eps);
|
||||
var r = (1 - eps) / (1 + eps);
|
||||
var kappa = .05;
|
||||
var dt = .2 * (1 + eps);
|
||||
var t = -30;
|
||||
var nn = 40;
|
||||
var m = 1;
|
||||
var color1
|
||||
var xPos = 0;
|
||||
var yPos = -50;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(4, -4);
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
if (parseFloat(document.getElementById("ratio").value) != eps)
|
||||
{
|
||||
eps = parseFloat(document.getElementById("ratio").value);
|
||||
tau = 2 / (1 + eps);
|
||||
r = (1 - eps) / (1 + eps);
|
||||
kappa = .05;
|
||||
dt = .2 * (1 + eps);
|
||||
t = -30;
|
||||
nn = 40;
|
||||
}
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
t += dt;
|
||||
if (eps <= 1)
|
||||
{
|
||||
if (t > 30)
|
||||
{
|
||||
t = -30;
|
||||
}
|
||||
}
|
||||
if (eps > 1)
|
||||
{
|
||||
if (t > 30 * eps)
|
||||
{
|
||||
t = -30;
|
||||
}
|
||||
}
|
||||
m += 1;
|
||||
ctx.strokeStyle = "#000000";
|
||||
setTimeout(Update, 1000/60)
|
||||
}
|
||||
|
||||
function y(x)
|
||||
{
|
||||
if (kappa * x * x < 10)
|
||||
{
|
||||
return Math.exp(-kappa * x * x);
|
||||
} else
|
||||
{
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
for (n = -nn/2; n <= -1; n++)
|
||||
{
|
||||
ctx.strokeStyle = "#ff0000";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 100 * n / nn, yPos + 20 * (y(n - t) + r * y(-n -t)) + 50);
|
||||
ctx.lineTo(xPos + 100 * (n + 1) / nn, yPos + 20 * (y(n + 1 - t) + r * y( - n - 1 - t)) + 50);
|
||||
ctx.stroke();
|
||||
}
|
||||
if (eps == 0)
|
||||
{
|
||||
ctx.strokeStyle = "#0000ff";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos, yPos + 20 * tau * y(-t) + 50);
|
||||
ctx.lineTo(xPos + 50, yPos + 20 * tau * y(-t) + 50);
|
||||
ctx.stroke();
|
||||
} else
|
||||
{
|
||||
for (n = 0; n <= eps * nn / 2 - 1; n++)
|
||||
{
|
||||
ctx.strokeStyle = "#0000ff";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 100 * n / nn / eps, yPos + 20 * tau * y(n-t) + 50);
|
||||
ctx.lineTo(xPos + 100 * (n + 1) / nn / eps, yPos + 20 * tau * y((n + 1)-t) + 50);
|
||||
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(4, -4);
|
||||
}, 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>
|
||||
122
10-4.html
Normal file
122
10-4.html
Normal file
@@ -0,0 +1,122 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 10-4
|
||||
</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");
|
||||
ctx.canvas.width = window.innerWidth;
|
||||
ctx.canvas.height = window.innerHeight;
|
||||
|
||||
var v = 1;
|
||||
var g = 1;
|
||||
var x0 = -15;
|
||||
var x1 = 15;
|
||||
var t0 = -10;
|
||||
var t1 = 30;
|
||||
var mmax = 120;
|
||||
var nmax = 90;
|
||||
var a = 30;
|
||||
var m = 1;
|
||||
var xPos = -50;
|
||||
var yPos = -50;
|
||||
|
||||
function thexp(x)
|
||||
{
|
||||
if (x < 0)
|
||||
{
|
||||
return 0;
|
||||
} else
|
||||
{
|
||||
return Math.exp(-g * x);
|
||||
}
|
||||
}
|
||||
|
||||
function fng(x, t)
|
||||
{
|
||||
if (x < 0)
|
||||
{
|
||||
return Math.exp(-g * Math.abs(t - x/v)) - Math.exp( -g * Math.abs(t + x / v)) / 2 + g *(t + x/v) * thexp(t + x/v);
|
||||
} else
|
||||
{
|
||||
return Math.exp(-g * Math.abs(t - x/v)) / 2 + g * (t - x/v) * thexp(t - x/v);
|
||||
}
|
||||
}
|
||||
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(4, -4);
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
t = t0 + m * (t1 - t0) / mmax;
|
||||
Draw();
|
||||
m += 1;
|
||||
if (m > mmax)
|
||||
{
|
||||
m = 1;
|
||||
}
|
||||
setTimeout(Update, 1000/45)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
Clear(ctx);
|
||||
for (n = 0; n <= nmax; n++)
|
||||
{
|
||||
x = x0 + n * (x1 - x0) / nmax;
|
||||
xx = x + (x1 - x0) / nmax;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10 + 80 * n / nmax, yPos + a * fng(x, t) + 50);
|
||||
ctx.lineTo(xPos + 10 + 80 * (n + 1) / nmax, yPos + a * fng(xx, t) + 50);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + 50, yPos + a * fng(0, t) + 50, 1, 0, Math.PI * 2);
|
||||
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(4, -4);
|
||||
}, 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>
|
||||
156
11-1.html
Normal file
156
11-1.html
Normal file
@@ -0,0 +1,156 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 11-1
|
||||
</title>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
form {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<form>
|
||||
<label for="x">X mode</label>
|
||||
<input type="number" id="x" name="x" min="1" max="10" step = "1" value = "1">
|
||||
<br>
|
||||
<label for="y">Y mode</label>
|
||||
<input type="number" id="y" name="y" min="1" max="10" step = "1" value = "1">
|
||||
</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;
|
||||
var cll = "#ff0000";
|
||||
var dz = 10;
|
||||
var nxb = 25;
|
||||
var nyb = 25;
|
||||
var modex = parseFloat(document.getElementById("x").value);
|
||||
var modey = parseFloat(document.getElementById("y").value);
|
||||
var ell = 10;
|
||||
var ellx = ell * nxb;
|
||||
var elly = ell * nyb;
|
||||
var cTwo = .2;
|
||||
var omega = 1;
|
||||
var dt = .1;
|
||||
var t = 0;
|
||||
var m = 1;
|
||||
var xPos = 0;
|
||||
var yPos = 0;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
|
||||
ctx.scale(1.5, -1.5);
|
||||
function fnx(x, y, z)
|
||||
{
|
||||
return (x + y) / Math.SQRT2;
|
||||
}
|
||||
|
||||
function fny(x, y, z)
|
||||
{
|
||||
return z + cTwo * (y - x);
|
||||
}
|
||||
|
||||
function threedline(x1, y1, z1, x2, y2, z2, cll)
|
||||
{
|
||||
ctx.strokeStyle = cll;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + fnx(x1, y1, z1), yPos + fny(x1, y1, z1));
|
||||
ctx.lineTo(xPos + fnx(x2, y2, z2), yPos + fny(x2, y2, z2));
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
function fna(nx, ny)
|
||||
{
|
||||
return Math.sin(modex * Math.PI * nx / (nxb + 1)) * Math.sin(modey * Math.PI * ny / (nyb + 1));
|
||||
}
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
console.log("Clear!");
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
document.getElementById("x").value = Math.round(document.getElementById("x").value);
|
||||
document.getElementById("y").value = Math.round(document.getElementById("y").value);
|
||||
modex = document.getElementById("x").value;
|
||||
modey = document.getElementById("y").value;
|
||||
if (modex <= 0)
|
||||
{
|
||||
modex = 1;
|
||||
document.getElementById("x").value = 1;
|
||||
} else if (modex > 5)
|
||||
{
|
||||
modex = 5;
|
||||
document.getElementById("x").value = 5;
|
||||
}
|
||||
if (modey <= 0)
|
||||
{
|
||||
modey = 1;
|
||||
document.getElementById("y").value = 1;
|
||||
} else if (modey > 5)
|
||||
{
|
||||
modey = 5;
|
||||
document.getElementById("y").value = 5;
|
||||
}
|
||||
omega = Math.sqrt((Math.pow(modex, 2) + Math.pow(modey, 2)) / 2);
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
m += 1;
|
||||
console.log(m);
|
||||
setTimeout(Update, 1000/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
threedline(-ellx, -elly, 0, ellx, -elly, 0, cll);
|
||||
threedline(-ellx, -elly, 0, -ellx, elly, 0, cll);
|
||||
threedline(ellx, elly, 0, ellx, -elly, 0, cll);
|
||||
threedline(ellx, elly, 0, -ellx, elly, 0, cll);
|
||||
for (nx = 0; nx <= nxb; nx++)
|
||||
{
|
||||
for (ny = 0; ny <= nyb; ny++)
|
||||
{
|
||||
threedline(-ellx + 2 * ellx * nx / (nxb + 1), -elly + 2 * elly * ny / (nyb + 1), dz * Math.sin(omega * t) * fna(nx, ny), -ellx + 2 * ellx * (nx + 1) / (nxb + 1), -elly + 2 * elly * ny / (nyb + 1), dz * Math.sin(omega * t) * fna((nx + 1), (ny)), cll);
|
||||
threedline(-ellx + 2 * ellx * nx / (nxb + 1), -elly + 2 * elly * ny / (nyb + 1), dz * Math.sin(omega * t) * fna(nx, ny), -ellx + 2 * ellx * (nx) / (nxb + 1), -elly + 2 * elly * (ny + 1) / (nyb + 1), dz * Math.sin(omega * t) * fna((nx), (ny + 1)), cll);
|
||||
}
|
||||
}
|
||||
t += dt;
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(1.5, -1.5);
|
||||
}, 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>
|
||||
222
11-2.html
Normal file
222
11-2.html
Normal file
@@ -0,0 +1,222 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 11-2
|
||||
</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");
|
||||
ctx.canvas.width = window.innerWidth;
|
||||
ctx.canvas.height = window.innerHeight;
|
||||
|
||||
var l1 = 20;
|
||||
var n1 = 3;
|
||||
var n2 = 2;
|
||||
var l2 = l1 * n1/n2;
|
||||
var theta1 = .5;
|
||||
var theta2 = Math.atan(n1 * Math.sin(theta1) / n2 / Math.sqrt(1 - (Math.pow(n1 * Math.sin(theta1) / n2 , 2))));
|
||||
var clv = "#ff0000";
|
||||
var cll = "#00ff00";
|
||||
var clb = "#0000ff";
|
||||
var xPos = 0;
|
||||
var yPos = -35;
|
||||
var xPosA = 10;
|
||||
var yPosA = -35;
|
||||
var xPosB = -15;
|
||||
var yPosB = -15;
|
||||
|
||||
var height = 75;
|
||||
var ttheta1 = Math.tan(theta1);
|
||||
var ttheta2 = Math.tan(theta2);
|
||||
var d1 = height * ttheta1;
|
||||
var d2 = height * ttheta2;
|
||||
|
||||
var l1c = l1 / Math.cos(theta1);
|
||||
var l2c = l2 / Math.cos(theta2);
|
||||
var vc = l1 / Math.sin(theta1);
|
||||
|
||||
var kx1 = 10 * Math.cos(theta1) * n1;
|
||||
var ky1 = 10 * Math.sin(theta1) * n1;
|
||||
var kx11 = kx1 - 3 * Math.cos(theta1 - Math.PI / 6);
|
||||
var ky11 = ky1 - 3 * Math.sin(theta1 - Math.PI / 6);
|
||||
var kx12 = kx1 - 3 * Math.cos(theta1 + Math.PI / 6);
|
||||
var ky12 = ky1 - 3 * Math.sin(theta1 + Math.PI / 6);
|
||||
var kx2 = 10 * Math.cos(theta2) * n2;
|
||||
var ky2 = 10 * Math.sin(theta2) * n2;
|
||||
var kx21 = kx2 - 3 * Math.cos(theta2 - Math.PI / 6);
|
||||
var ky21 = ky2 - 3 * Math.sin(theta2 - Math.PI / 6);
|
||||
var kx22 = kx2 - 3 * Math.cos(theta2 + Math.PI / 6);
|
||||
var ky22 = ky2 - 3 * Math.sin(theta2 + Math.PI / 6);
|
||||
var mmax = 30;
|
||||
var m = 1;
|
||||
var x1 = l1c * (mmax - m) / mmax;
|
||||
var x = x1;
|
||||
var xx = 0;
|
||||
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
|
||||
ctx.scale(3, -3);
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
x1 = l1c * (mmax - m) / mmax;
|
||||
Draw();
|
||||
m += 1;
|
||||
if (m > mmax)
|
||||
{
|
||||
m = 1;
|
||||
}
|
||||
setTimeout(Update, 1000/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
Clear(ctx);
|
||||
ctx.strokeStyle = clb;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos, yPos + height);
|
||||
ctx.lineTo(xPos, yPos);
|
||||
ctx.stroke();
|
||||
x = x1;
|
||||
thex1loopllp1();
|
||||
}
|
||||
|
||||
function thex1loopllp1()
|
||||
{
|
||||
if (x > 50)
|
||||
{
|
||||
outx1loopllp1();
|
||||
return;
|
||||
}
|
||||
ctx.strokeStyle = cll
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos - x, yPos);
|
||||
ctx.lineTo(xPos - x - d1, yPos + height);
|
||||
ctx.stroke();
|
||||
x += l1c;
|
||||
thex1loopllp1();
|
||||
}
|
||||
|
||||
function outx1loopllp1()
|
||||
{
|
||||
x -= l1c;
|
||||
y = vc - x1 / ttheta1;
|
||||
they1loopllp1();
|
||||
}
|
||||
|
||||
function they1loopllp1()
|
||||
{
|
||||
if (y > height)
|
||||
{
|
||||
outy1loopllp1();
|
||||
return;
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos, yPos + y);
|
||||
ctx.lineTo(xPos - d1, yPos + y + height);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos, yPos + y);
|
||||
ctx.lineTo(xPos + d2, yPos + y - height);
|
||||
ctx.stroke();
|
||||
y += vc;
|
||||
they1loopllp1();
|
||||
}
|
||||
|
||||
function outy1loopllp1()
|
||||
{
|
||||
y -= vc;
|
||||
xx = l2c - (height - y) * ttheta2;
|
||||
thex2loopllp1();
|
||||
}
|
||||
|
||||
function thex2loopllp1()
|
||||
{
|
||||
if (xx > 50)
|
||||
{
|
||||
outx2loopllp1();
|
||||
return;
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xx + xPos, yPos + height);
|
||||
ctx.lineTo(xPos + xx + d2, yPos);
|
||||
ctx.stroke();
|
||||
xx += l2c;
|
||||
thex2loopllp1();
|
||||
}
|
||||
|
||||
function outx2loopllp1()
|
||||
{
|
||||
ctx.strokeStyle = clv;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPosA - 40, yPosA + 20);
|
||||
ctx.lineTo(xPosA - 40 + kx1, yPosA + 20 + ky1);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPosB + 20, yPosB + 20);
|
||||
ctx.lineTo(xPosB + 20 + kx2, yPosB + 20 + ky2);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPosA + kx1 - 40, yPosA + ky1 + 20);
|
||||
ctx.lineTo(xPosA - 40 + kx11, yPosA + 20 + ky11);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPosA + kx1 - 40, yPosA + ky1 + 20);
|
||||
ctx.lineTo(xPosA - 40 + kx12, yPosA + 20 + ky12);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPosB + kx2 + 20, yPosB + ky2 + 20);
|
||||
ctx.lineTo(xPosB + 20 + kx21, yPosB + 20 + ky21);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPosB + kx2 + 20, yPosB + ky2 + 20);
|
||||
ctx.lineTo(xPosB + 20 + kx22, yPosB + 20 + ky22);
|
||||
ctx.stroke();
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, (c.height + yPos));
|
||||
ctx.clearRect(-c.width, yPos + height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(3, -3);
|
||||
}, 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>
|
||||
152
11-3.html
Normal file
152
11-3.html
Normal file
@@ -0,0 +1,152 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 11-3
|
||||
</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");
|
||||
ctx.canvas.width = window.innerWidth;
|
||||
ctx.canvas.height = window.innerHeight;
|
||||
|
||||
var height = 60;
|
||||
var dt = .2;
|
||||
var omega = 1;
|
||||
var nk = 1;
|
||||
var k = nk * Math.PI / 80;
|
||||
var eps = 10;
|
||||
var mmax = 40;
|
||||
var nx = 12;
|
||||
var ny = 4;
|
||||
var dxy = 80 / nx;
|
||||
var stepX = 0.1;
|
||||
var stepY = 0.1;
|
||||
var clp = "#0000ff";
|
||||
var cll = "#000000";
|
||||
var xPos = -45;
|
||||
var yPos = -30;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
|
||||
ctx.scale(3, -3);
|
||||
|
||||
function fnpsix(x, y, t)
|
||||
{
|
||||
return -eps * Math.sin(k * x) * Math.cosh(k * y) * Math.cos(t);
|
||||
}
|
||||
|
||||
function fnpsiy(x, y, t)
|
||||
{
|
||||
return eps * Math.cos(k * x) * Math.sinh(k * y) * Math.cos(t);
|
||||
}
|
||||
|
||||
xp = new Array(nx + 1);
|
||||
yp = new Array(nx + 1);
|
||||
for (ix = 0; ix <= nx; ix++)
|
||||
{
|
||||
xp[ix] = new Array(ny + 1);
|
||||
yp[ix] = new Array(ny + 1);
|
||||
for (iy = 0; iy <= ny; iy++)
|
||||
{
|
||||
xp[ix][iy] = new Array(mmax + 1);
|
||||
yp[ix][iy] = new Array(mmax + 1);
|
||||
for (im = 0; im <= mmax; im++)
|
||||
{
|
||||
xp[ix][iy][im] = ix * dxy + fnpsix(ix * dxy, iy * dxy, 2 * Math.PI * im / mmax);
|
||||
yp[ix][iy][im] = iy * dxy + fnpsiy(ix * dxy, iy * dxy, 2 * Math.PI * im / mmax);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function continuousXp(ix, iy, im)
|
||||
{
|
||||
return ix * dxy + fnpsix(ix * dxy, iy * dxy, 2 * Math.PI * im / mmax);
|
||||
}
|
||||
function continuousYp(ix, iy, im)
|
||||
{
|
||||
return iy * dxy + fnpsiy(ix * dxy, iy * dxy, 2 * Math.PI * im / mmax);
|
||||
}
|
||||
|
||||
var m = 1;
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Draw();
|
||||
m += 1;
|
||||
if (m > mmax)
|
||||
{
|
||||
m = 1;
|
||||
}
|
||||
setTimeout(Update, 1000/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
Clear(ctx);
|
||||
ctx.strokeStyle = cll;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos - 1, yPos - 1);
|
||||
ctx.lineTo(xPos + 81, yPos - 1);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos - 1, yPos - 1);
|
||||
ctx.lineTo(xPos - 1, yPos + dxy * ny + 3 * eps);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 81, yPos - 1);
|
||||
ctx.lineTo(xPos + 81, yPos + dxy * ny + 3 * eps);
|
||||
ctx.stroke();
|
||||
for (ix = 0; ix <= nx; ix += stepX)
|
||||
{
|
||||
for (iy = 0; iy <= ny; iy += stepY)
|
||||
{
|
||||
ctx.fillStyle = clp;
|
||||
ctx.beginPath();
|
||||
ctx.fillRect(xPos - 0.5 + continuousXp(ix, iy, m), yPos - 0.5 + continuousYp(ix, iy, m), 1, 1);
|
||||
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(3, -3);
|
||||
}, 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>
|
||||
168
11-4.html
Normal file
168
11-4.html
Normal file
@@ -0,0 +1,168 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 11-4
|
||||
</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");
|
||||
ctx.canvas.width = window.innerWidth;
|
||||
ctx.canvas.height = window.innerHeight;
|
||||
|
||||
var height = 70;
|
||||
var dt = .2;
|
||||
var omega = 1;
|
||||
var nk = 1;
|
||||
var k = nk * Math.PI / 80;
|
||||
var eps = 5;
|
||||
var mmax = 40;
|
||||
var nx = 20;
|
||||
var ny = 6;
|
||||
var dxy = 80 / nx;
|
||||
var dd = 2 * dxy * ny;
|
||||
var stepX = 0.1;
|
||||
var stepY = 0.1;
|
||||
var clp = "#0000ff";
|
||||
var otherColor = "#ff0000";
|
||||
var cll = "#000000";
|
||||
var xPos = -45;
|
||||
var yPos = -30;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
|
||||
ctx.scale(3, -3);
|
||||
|
||||
function fnpsix(x, y, t)
|
||||
{
|
||||
return -eps * Math.sin(k * x) * Math.cosh(k * y) * Math.cos(t);
|
||||
}
|
||||
|
||||
function fnpsiy(x, y, t)
|
||||
{
|
||||
return eps * Math.cos(k * x) * Math.sinh(k * y) * Math.cos(t);
|
||||
}
|
||||
|
||||
xp = new Array(nx + 1);
|
||||
yp = new Array(nx + 1);
|
||||
for (ix = 0; ix <= nx; ix++)
|
||||
{
|
||||
xp[ix] = new Array(ny + 1);
|
||||
yp[ix] = new Array(ny + 1);
|
||||
for (iy = 0; iy <= ny; iy++)
|
||||
{
|
||||
xp[ix][iy] = new Array(mmax + 1);
|
||||
yp[ix][iy] = new Array(mmax + 1);
|
||||
for (im = 0; im <= mmax; im++)
|
||||
{
|
||||
xp[ix][iy][im] = ix * dxy + fnpsix(ix * dxy, iy * dxy, 2 * Math.PI * im / mmax);
|
||||
yp[ix][iy][im] = iy * dxy + fnpsiy(ix * dxy, iy * dxy, 2 * Math.PI * im / mmax);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function continuousXp(ix, iy, im)
|
||||
{
|
||||
return ix * dxy + fnpsix(ix * dxy, iy * dxy, 2 * Math.PI * im / mmax);
|
||||
}
|
||||
function continuousYp(ix, iy, im)
|
||||
{
|
||||
return iy * dxy + fnpsiy(ix * dxy, iy * dxy, 2 * Math.PI * im / mmax);
|
||||
}
|
||||
|
||||
var m = 1;
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Draw();
|
||||
m += 1;
|
||||
if (m > mmax)
|
||||
{
|
||||
m = 1;
|
||||
}
|
||||
setTimeout(Update, 1000/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
Clear(ctx);
|
||||
ctx.strokeStyle = cll;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos - 1, yPos - 1);
|
||||
ctx.lineTo(xPos + 81, yPos - 1);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos - 1, yPos - 1);
|
||||
ctx.lineTo(xPos - 1, yPos + dd + 1);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 81, yPos - 1);
|
||||
ctx.lineTo(xPos + 81, yPos + dd + 1);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos - 1, yPos + dd + 1);
|
||||
ctx.lineTo(xPos + 81, yPos + dd + 1);
|
||||
ctx.stroke();
|
||||
for (ix = 0; ix <= nx; ix += stepX)
|
||||
{
|
||||
for (iy = 0; iy <= ny; iy += stepY)
|
||||
{
|
||||
ctx.fillStyle = clp;
|
||||
ctx.beginPath();
|
||||
ctx.fillRect(xPos - 0.5 + continuousXp(ix, iy, m), yPos - 0.5 + continuousYp(ix, iy, m), 1, 1);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
for (ix = 0; ix <= nx; ix += stepX)
|
||||
{
|
||||
for (iy = 0; iy <= ny; iy += stepY)
|
||||
{
|
||||
ctx.fillStyle = otherColor;
|
||||
ctx.beginPath();
|
||||
ctx.fillRect(xPos + 80 - 0.5 - continuousXp(ix, iy, m), yPos - 0.5 + dd - continuousYp(ix, iy, m), 1, 1);
|
||||
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(3, -3);
|
||||
}, 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>
|
||||
233
12-1.html
Normal file
233
12-1.html
Normal file
@@ -0,0 +1,233 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 12-1
|
||||
</title>
|
||||
<style>
|
||||
.container
|
||||
{
|
||||
position: relative;
|
||||
}
|
||||
#u1IncreaseButton
|
||||
{
|
||||
left: 12.5px;
|
||||
top: 12.5px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
}
|
||||
#u1DecreaseButton
|
||||
{
|
||||
left: 12.5px;
|
||||
top: 75px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
}
|
||||
#u2IncreaseButton
|
||||
{
|
||||
left: 12.5px;
|
||||
top: 137.5px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
}
|
||||
#u2DecreaseButton
|
||||
{
|
||||
left: 12.5px;
|
||||
top: 200px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
}
|
||||
#phiIncreaseButton
|
||||
{
|
||||
left: 12.5px;
|
||||
top: 262.5px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
}
|
||||
#phiDecreaseButton
|
||||
{
|
||||
left: 12.5px;
|
||||
top: 325px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
canvas
|
||||
{
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="myCanvas" width="1" height="1" style="border:1px solid #ffffff;"></canvas>
|
||||
<div class="container">
|
||||
<button type="button" id="u1IncreaseButton" onclick="u1Increase()">Increase u1</button>
|
||||
<button type="button" id="u1DecreaseButton" onclick="u1Decrease()">Decrease u1</button>
|
||||
<button type="button" id="u2IncreaseButton" onclick="u2Increase()">Increase |u2|</button>
|
||||
<button type="button" id="u2DecreaseButton" onclick="u2Decrease()">Decrease |u2|</button>
|
||||
<button type="button" id="phiIncreaseButton" onclick="phiIncrease()">Increase phi</button>
|
||||
<button type="button" id="phiDecreaseButton" onclick="phiDecrease()">Decrease phi</button>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
ctx.canvas.width = window.innerWidth;
|
||||
ctx.canvas.height = window.innerHeight;
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
var scrwidth = 200;
|
||||
var u1 = 1;
|
||||
var phi1 = 0;
|
||||
var u2 = 1;
|
||||
var phi2 = 0;
|
||||
var dt = .03;
|
||||
var t = 0;
|
||||
var cl1 = "#ff0000";
|
||||
var cl2 = "#00ff00";
|
||||
var cl3 = "#0000ff";
|
||||
var cl4 = "#000000";
|
||||
var nmu = 10;
|
||||
var nphi = 0;
|
||||
var nmphi = 10;
|
||||
var nu1 = nmu;
|
||||
var nu2 = nmu;
|
||||
var mmm = 24;
|
||||
var xPos = -10;
|
||||
var yPos = -10;
|
||||
var m = 1;
|
||||
var stepSize = 0.5;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(1.5, -1.5);
|
||||
|
||||
function Update()
|
||||
{
|
||||
Draw();
|
||||
m += 1;
|
||||
setTimeout(Update, 1000/60);
|
||||
}
|
||||
|
||||
Update();
|
||||
|
||||
function Draw()
|
||||
{
|
||||
Clear(ctx);
|
||||
ctx.strokeStyle = cl1;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos, yPos);
|
||||
ctx.lineTo(xPos + 100 * u1 * Math.cos(t - phi1), yPos);
|
||||
ctx.stroke();
|
||||
ctx.strokeStyle = cl2;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos, yPos);
|
||||
ctx.lineTo(xPos, yPos + 100 * u2 * Math.cos(t - phi2));
|
||||
ctx.stroke();
|
||||
ctx.strokeStyle = cl3;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos, yPos);
|
||||
ctx.lineTo(xPos + 100 * u1 * Math.cos(t - phi1), yPos + 100 * u2 * Math.cos(t - phi2));
|
||||
ctx.stroke();
|
||||
ctx.strokeStyle = "#000000";
|
||||
for (mm = 0; mm <= mmm; mm += stepSize)
|
||||
{
|
||||
ctx.fillStyle = cl4;
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + 100 * u1 * Math.cos(2 * Math.PI * mm / mmm - phi1), yPos + 100 * u2 * Math.cos(2 * Math.PI * mm / mmm - phi2), 1, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
}
|
||||
t += dt;
|
||||
}
|
||||
|
||||
function u1Increase()
|
||||
{
|
||||
if (nu1 < nmu)
|
||||
{
|
||||
nu1 += 1;
|
||||
}
|
||||
u1 = nu1 / nmu;
|
||||
}
|
||||
|
||||
function u1Decrease()
|
||||
{
|
||||
if (nu1 > 0)
|
||||
{
|
||||
nu1 -= 1;
|
||||
}
|
||||
u1 = nu1 / nmu;
|
||||
}
|
||||
|
||||
function u2Increase()
|
||||
{
|
||||
if (nu2 < nmu)
|
||||
{
|
||||
nu2 += 1;
|
||||
}
|
||||
u2 = nu2 / nmu;
|
||||
}
|
||||
|
||||
function u2Decrease()
|
||||
{
|
||||
if (nu2 > 0)
|
||||
{
|
||||
nu2 -= 1;
|
||||
}
|
||||
u2 = nu2 / nmu;
|
||||
}
|
||||
|
||||
function phiDecrease()
|
||||
{
|
||||
nphi = nphi - 1;
|
||||
if (nphi <= -nmphi)
|
||||
{
|
||||
nphi += 2 * nmphi;
|
||||
}
|
||||
phi2 = nphi * Math.PI / nmphi;
|
||||
}
|
||||
|
||||
function phiIncrease()
|
||||
{
|
||||
nphi = nphi + 1;
|
||||
if (nphi > nmphi)
|
||||
{
|
||||
nphi -= 2 * nmphi;
|
||||
}
|
||||
phi2 = nphi * Math.PI / nmphi;
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(1.5, -1.5);
|
||||
}, true);
|
||||
|
||||
</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>
|
||||
149
12-2.html
Normal file
149
12-2.html
Normal file
@@ -0,0 +1,149 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 12-2
|
||||
</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");
|
||||
ctx.canvas.width = window.innerWidth;
|
||||
ctx.canvas.height = window.innerHeight;
|
||||
|
||||
var screenasp = 1;
|
||||
var plotarea = 200;
|
||||
var k12 = 3;
|
||||
var nn = 2;
|
||||
var dt = .1 * nn;
|
||||
var o1 = new Array(nn + 1);
|
||||
var o2 = new Array(nn + 1);
|
||||
var f1 = new Array(nn + 1);
|
||||
var f2 = new Array(nn + 1);
|
||||
var d = 30;
|
||||
var colorSpeed = 1;
|
||||
var maxReps = 1;
|
||||
var xPos = -100;
|
||||
var yPos = -100;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
|
||||
ctx.scale(2, -2);
|
||||
|
||||
for (j = 1; j <= nn; j++)
|
||||
{
|
||||
o1[j] = Math.random() - 0.5;
|
||||
o2[j] = Math.random() - 0.5;
|
||||
f1[j] = (Math.random() - 0.5) * Math.PI;
|
||||
f2[j] = (Math.random() - 0.5) * Math.PI;
|
||||
}
|
||||
|
||||
function x(t)
|
||||
{
|
||||
fx = 0;
|
||||
for (j = 1; j <= nn; j++)
|
||||
{
|
||||
fx += Math.cos((1 + o1[j] / d) * t + f1[j]);
|
||||
}
|
||||
return fx / nn;
|
||||
}
|
||||
|
||||
function y(t)
|
||||
{
|
||||
fy = 0;
|
||||
for (j = 1; j <= nn; j++)
|
||||
{
|
||||
fy += Math.cos((1 + o2[j] / d) * t + f1[j]);
|
||||
}
|
||||
return fy / nn;
|
||||
}
|
||||
|
||||
var xmin = -1;
|
||||
var xmax = 1;
|
||||
var ymin = -1;
|
||||
var ymax = 1;
|
||||
|
||||
function xx(x)
|
||||
{
|
||||
return 200 * (x - xmin) / (xmax - xmin);
|
||||
}
|
||||
|
||||
function yy(y)
|
||||
{
|
||||
return 200 * (y - ymin) / (ymax - ymin);
|
||||
}
|
||||
|
||||
function Fade()
|
||||
{
|
||||
for (i = 0; i <= maxReps; i++)
|
||||
{
|
||||
ctx.globalAlpha = 0.025;
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.beginPath();
|
||||
ctx.fillRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
ctx.stroke();
|
||||
ctx.globalAlpha = 1;
|
||||
}
|
||||
setTimeout(Fade, 2000)
|
||||
}
|
||||
|
||||
var x1 = x(0);
|
||||
var y1 = y(0);
|
||||
var t = 0;
|
||||
Fade(ctx);
|
||||
|
||||
function Update()
|
||||
{
|
||||
t += dt;
|
||||
nx = x(t);
|
||||
ny = y(t);
|
||||
xFactor = 1;
|
||||
yFactor = 1;
|
||||
//xFactor = c.width / 400;
|
||||
//yFactor = c.height / 400;
|
||||
ctx.strokeStyle = "hsl(" + (t * colorSpeed) % 360 + ",100%,50%)";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo((xx(x1) + xPos) * xFactor, (yy(y1) + yPos) * yFactor);
|
||||
ctx.lineTo((xx(nx) + xPos) * xFactor, (yy(ny) + yPos) * yFactor);
|
||||
ctx.stroke();
|
||||
x1 = nx;
|
||||
y1 = ny;
|
||||
setTimeout(Update, 500/60)
|
||||
}
|
||||
|
||||
|
||||
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>
|
||||
273
2-1.html
Normal file
273
2-1.html
Normal file
@@ -0,0 +1,273 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 2-1
|
||||
</title>
|
||||
<style>
|
||||
.container
|
||||
{
|
||||
position: relative;
|
||||
}
|
||||
#caseOneButton
|
||||
{
|
||||
left: 12.5px;
|
||||
top: 12.5px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
}
|
||||
#caseTwoButton
|
||||
{
|
||||
left: 12.5px;
|
||||
top: 75px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
}
|
||||
#caseThreeButton
|
||||
{
|
||||
left: 12.5px;
|
||||
top: 137.5px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
}
|
||||
#caseFourButton
|
||||
{
|
||||
left: 12.5px;
|
||||
top: 200px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
canvas
|
||||
{
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="myCanvas" width="1" height="1" style="border:1px solid #ffffff;"></canvas>
|
||||
<div class="container">
|
||||
<button type="button" id="caseOneButton" onclick="Case1()">ω/ω₀ = 0.5</button>
|
||||
<button type="button" id="caseTwoButton" onclick="Case2()">ω/ω₀ = 0.75</button>
|
||||
<button type="button" id="caseThreeButton" onclick="Case3()">ω/ω₀ = 1</button>
|
||||
<button type="button" id="caseFourButton" onclick="Case4()">ω/ω₀ = 2</button>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
ctx.canvas.width = window.innerWidth;
|
||||
ctx.canvas.height = window.innerHeight;
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
var cl = 11;
|
||||
var clc = 12;
|
||||
var dt = .025;
|
||||
var o = 1.5;
|
||||
var g = .5;
|
||||
var dom = .1;
|
||||
var bottom = 0;
|
||||
var side = 350;
|
||||
var dh = 150;
|
||||
var dr = -50;
|
||||
var h = 10;
|
||||
var k = 90;
|
||||
var m = 10;
|
||||
var v = 0;
|
||||
var dis = 0;
|
||||
var phi = 0;
|
||||
var i = 1;
|
||||
var t = 0;
|
||||
var xPos = -20;
|
||||
var yPos = 00;
|
||||
var amp = 0;
|
||||
var pause = false;
|
||||
var steadyStadeReps = 400;
|
||||
var o0 = Math.sqrt(k/m);
|
||||
CalculateInitialValues();
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(3, 3);
|
||||
|
||||
function Update()
|
||||
{
|
||||
if (!pause)
|
||||
{
|
||||
dis += v * dt;
|
||||
var stretch = (-h*Math.cos(o*t - phi) + dis)
|
||||
v += ((-stretch * k * dt / m) + (-v * g * dt));
|
||||
Draw();
|
||||
t = t + dt;
|
||||
ctx.strokeStyle = "#000000";
|
||||
}
|
||||
setTimeout(Update, 1000/120);
|
||||
}
|
||||
|
||||
Update();
|
||||
|
||||
function Case1()
|
||||
{
|
||||
o = Math.sqrt(k/m) * 0.5;
|
||||
CalculateInitialValues();
|
||||
}
|
||||
|
||||
function Case2()
|
||||
{
|
||||
o = Math.sqrt(k/m) * 0.75;
|
||||
CalculateInitialValues();
|
||||
}
|
||||
|
||||
function Case3()
|
||||
{
|
||||
o = Math.sqrt(k/m);
|
||||
CalculateInitialValues();
|
||||
}
|
||||
|
||||
function Case4()
|
||||
{
|
||||
o = Math.sqrt(k/m) * 2;
|
||||
CalculateInitialValues();
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
Clear(ctx);
|
||||
var x1 = dr + h*Math.cos(o*t);
|
||||
var a = (h*(o0^2 - o^2))/((o0^2 - o^2)^2 + g^2 * o^2)
|
||||
var b = (h*(g*o))/((o0^2 - o^2)^2 + g^2 * o^2)
|
||||
var x2 = dh + dr + dis
|
||||
if (x2 > amp)
|
||||
{
|
||||
amp = x2;
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(dr + xPos, -10 + yPos);
|
||||
ctx.lineTo(dr + xPos, yPos);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(dh + dr + xPos, -10 + yPos);
|
||||
ctx.lineTo(dh + dr + xPos, yPos);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(h + dr + xPos, -10 + yPos);
|
||||
ctx.lineTo(h + dr + xPos, yPos);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(dh + dr + (k*h/m)/(g*o0) + xPos, -10 + yPos);
|
||||
ctx.lineTo(dh + dr + (k*h/m)/(g*o0) + xPos, 0 + yPos);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-h + dr + xPos, -10 + yPos);
|
||||
ctx.lineTo(-h + dr + xPos, yPos);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(dh + dr - (k*h/m)/(g*o0) + xPos, -10 + yPos);
|
||||
ctx.lineTo(dh + dr - (k*h/m)/(g*o0) + xPos, yPos);
|
||||
ctx.stroke();
|
||||
var dx = (x2 - x1) / 3;
|
||||
/*ctx.beginPath();
|
||||
ctx.moveTo(x1 + 10 + xPos, -30 + yPos);
|
||||
ctx.lineTo(x1 + dx + xPos, -20 + yPos);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x1 + dx + xPos, -20 + yPos);
|
||||
ctx.lineTo(x1 + dx + dx + xPos, -40 + yPos);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x1 + dx + dx + xPos, -40 + yPos);
|
||||
ctx.lineTo(x2 - 10 + xPos, -30 + yPos);
|
||||
ctx.stroke();*/
|
||||
drawSpring(1, 3, (x2 - 10) - (x1 + 10), 10, 10, x1 + 10 + xPos, -30 + yPos, 0.1);
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.beginPath();
|
||||
ctx.arc(x1 + xPos, -30 + yPos, 10, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.arc(x2 + xPos, -30 + yPos, 10, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.arc(x1 + xPos, -30 + yPos, 10, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.arc(x2 + xPos, -30 + yPos, 10, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
function Reset()
|
||||
{
|
||||
pause = !pause;
|
||||
}
|
||||
|
||||
function drawSpring(a, b, xSize, ySize, numLoops, x, y, tStep)
|
||||
{
|
||||
var tStart = Math.PI / 2;
|
||||
var tEnd = (3 * Math.PI / 2) + (2 * Math.PI * numLoops);
|
||||
var xEnd = a * tEnd - b * Math.sin(tEnd);
|
||||
var yEnd = a + b;
|
||||
var xFactor = xSize / xEnd;
|
||||
var yFactor = ySize / yEnd;
|
||||
var xShift = x - a * (Math.PI / 2) + b * Math.sin(Math.PI / 2);
|
||||
var yShift = y - a + b * Math.cos(Math.PI / 2);
|
||||
for (p = tStart; p <= tEnd; p += tStep)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xShift + xFactor * (a * p - b * Math.sin(p)), yShift + yFactor * (a - b * Math.cos(p)));
|
||||
ctx.lineTo(xShift + xFactor * (a * (p + tStep) - b * Math.sin(p + tStep)), yShift + yFactor * (a - b * Math.cos(p + tStep)));
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
function CalculateInitialValues()
|
||||
{
|
||||
/*var a = ((k*h/m)*(o0^2 - o^2))/((o0^2 - o^2)^2 + g^2 * o^2);
|
||||
var b = ((k*h/m)*(g*o))/((o0^2 - o^2)^2 + g^2 * o^2);
|
||||
phi = Math.atan(b/a);
|
||||
if (a < 0)
|
||||
{
|
||||
phi += Math.PI;
|
||||
}
|
||||
dis = 0;
|
||||
v = o * ((k*h/m)/(g*o0));*/
|
||||
for (j = 0; j < steadyStadeReps; j++)
|
||||
{
|
||||
dis += v * dt;
|
||||
var stretch = (-h*Math.cos(o*t - phi) + dis)
|
||||
v += ((-stretch * k * dt / m) + (-v * g * dt));
|
||||
t = t + dt;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(3, 3);
|
||||
}, true);
|
||||
|
||||
</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>
|
||||
145
3-1.html
Normal file
145
3-1.html
Normal file
@@ -0,0 +1,145 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 3-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");
|
||||
ctx.canvas.width = window.innerWidth;
|
||||
ctx.canvas.height = window.innerHeight;
|
||||
|
||||
//var bottom = -50;
|
||||
//var side = 300;
|
||||
//var t = 1;
|
||||
//var ii = 800 * t;
|
||||
var tm = .1;
|
||||
var om = .1;
|
||||
var dom = .02;
|
||||
var a1 = 1;
|
||||
var a2 = 0;
|
||||
var b1 = 0;
|
||||
var b2 = .4;
|
||||
//var asp = 1;
|
||||
var i = 1;
|
||||
var y1 = 0;
|
||||
var y2 = 0;
|
||||
var x1 = 0;
|
||||
var x2 = 0;
|
||||
var xPos = 0;
|
||||
var yPos = -100;
|
||||
|
||||
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
|
||||
ctx.scale(1.5, 1.5);
|
||||
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
var theta11 = tm * (a1 * Math.cos(om*i) + b1 * Math.sin(om*i));
|
||||
var theta21 = tm * (a1 * Math.cos(om*i) + b1 * Math.sin(om*i));
|
||||
var theta12 = tm * (a2 * Math.cos((om + dom)*i) + b2 * Math.sin((om + dom)*i));
|
||||
var theta22 = tm * (-a2 * Math.cos((om + dom)*i) - b2 * Math.sin((om + dom)*i));
|
||||
var theta1 = theta11 + theta12;
|
||||
var theta2 = theta21 + theta22;
|
||||
theta2 = tm * (a1 * Math.cos(om*i) - a2 * Math.cos((om+dom)*i) + b1* Math.sin(om*i) - b2*Math.sin((om+dom)*i));
|
||||
y1 = yPos + 200 * Math.cos(theta1);
|
||||
y2 = yPos + 200 * Math.cos(theta2);
|
||||
x1 = (xPos - 50) - 200 * Math.sin(theta1);
|
||||
x2 = (xPos + 50) - 200 * Math.sin(theta2);
|
||||
Draw();
|
||||
i += 1;
|
||||
setTimeout(Update, 1000/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
Clear(ctx);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x1, y1);
|
||||
ctx.lineTo(xPos - 50, yPos);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x2, y2);
|
||||
ctx.lineTo(xPos + 50, yPos);
|
||||
ctx.stroke();
|
||||
drawSpring(1, 3, x2 - x1, 5, 7, x1, y1, 0.1, y2 - y1);
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.beginPath();
|
||||
ctx.arc(x1, y1, 7, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.arc(x2, y2, 7, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.arc(x1, y1, 7, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.arc(x2, y2, 7, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
function drawSpring(a, b, xSize, ySize, numLoops, x, y, tStep, deltaY)
|
||||
{
|
||||
var tStart = Math.PI / 2;
|
||||
var tEnd = (3 * Math.PI / 2) + (2 * Math.PI * numLoops);
|
||||
var xEnd = a * tEnd - b * Math.sin(tEnd);
|
||||
var yEnd = a + b;
|
||||
var xFactor = xSize / xEnd;
|
||||
var yFactor = ySize / yEnd;
|
||||
var xShift = x - a * (Math.PI / 2) + b * Math.sin(Math.PI / 2);
|
||||
var yShift = y - a + b * Math.cos(Math.PI / 2);
|
||||
var slope = deltaY / xSize;
|
||||
for (p = tStart; p <= tEnd; p += tStep)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xShift + xFactor * (a * p - b * Math.sin(p)), yShift + yFactor * (a - b * Math.cos(p)) + slope * (a * p - b * Math.sin(p)));
|
||||
ctx.lineTo(xShift + xFactor * (a * (p + tStep) - b * Math.sin(p + tStep)), yShift + yFactor * (a - b * Math.cos(p + tStep)));
|
||||
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.5, 1.5);
|
||||
}, 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>
|
||||
169
4-1.html
Normal file
169
4-1.html
Normal file
@@ -0,0 +1,169 @@
|
||||
|
||||
<!--
|
||||
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>
|
||||
Waves 4-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");
|
||||
ctx.canvas.width = window.innerWidth;
|
||||
ctx.canvas.height = window.innerHeight;
|
||||
|
||||
//var bottom = -50;
|
||||
//var side = 300;
|
||||
//var t = 1;
|
||||
//var ii = 800 * t;
|
||||
var tm = .1;
|
||||
var om = .1;
|
||||
var dom = .02;
|
||||
var a1 = 1;
|
||||
var a2 = 0;
|
||||
var b1 = 0;
|
||||
var b2 = .4;
|
||||
//var asp = 1;
|
||||
var i = 1;
|
||||
var y1 = 0;
|
||||
var y2 = 0;
|
||||
var x1 = 0;
|
||||
var x2 = 0;
|
||||
var xPos = -150;
|
||||
var yPos = -350;
|
||||
var theta11 = 0;
|
||||
var theta21 = 0;
|
||||
var theta12 = 0;
|
||||
var theta22 = 0;
|
||||
|
||||
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
|
||||
//ctx.scale(2/3, 2/3);
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
theta11 = tm * (a1 * Math.cos(om*i) + b1 * Math.sin(om*i));
|
||||
theta21 = tm * (a1 * Math.cos(om*i) + b1 * Math.sin(om*i));
|
||||
theta12 = tm * (a2 * Math.cos((om + dom)*i) + b2 * Math.sin((om + dom)*i));
|
||||
theta22 = tm * (-a2 * Math.cos((om + dom)*i) - b2 * Math.sin((om + dom)*i));
|
||||
var theta1 = theta11 + theta12;
|
||||
var theta2 = theta21 + theta22;
|
||||
theta2 = tm * (a1 * Math.cos(om*i) - a2 * Math.cos((om+dom)*i) + b1* Math.sin(om*i) - b2*Math.sin((om+dom)*i));
|
||||
y1 = yPos + 220 + 200 * Math.cos(theta1);
|
||||
y2 = yPos + 220 + 200 * Math.cos(theta2);
|
||||
x1 = xPos + 100 - 200 * Math.sin(theta1);
|
||||
x2 = xPos + 200 - 200 * Math.sin(theta2);
|
||||
Draw();
|
||||
i += 1;
|
||||
setTimeout(Update, 1000/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
Clear(ctx);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x1, y1);
|
||||
ctx.lineTo(xPos + 100, yPos + 220);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x2, y2);
|
||||
ctx.lineTo(xPos + 200, yPos + 220);
|
||||
ctx.stroke();
|
||||
drawSpring(1, 3, x2 - x1, 5, 7, x1, y1, 0.1, y2 - y1);
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.beginPath();
|
||||
ctx.arc(x1, y1, 7, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.arc(x2, y2, 7, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.arc(x1, y1, 7, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.arc(x2, y2, 7, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
var y11 = yPos + 650 - 200 * Math.cos(theta11);
|
||||
var y21 = yPos + 650 - 200 * Math.cos(theta21);
|
||||
var x11 = xPos + 100 - 200 * Math.sin(theta11);
|
||||
var x21 = xPos + 200 - 200 * Math.sin(theta21);
|
||||
ctx.beginPath();
|
||||
ctx.arc(x11, y11, 7, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.arc(x21, y21, 7, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
var y12 = yPos + 680 - 200 * Math.cos(theta12);
|
||||
var y22 = yPos + 680 - 200 * Math.cos(theta22);
|
||||
var x12 = xPos + 100 - 200 * Math.sin(theta12);
|
||||
var x22 = xPos + 200 - 200 * Math.sin(theta22);
|
||||
ctx.beginPath();
|
||||
ctx.arc(x12, y12, 7, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.arc(x22, y22, 7, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
function drawSpring(a, b, xSize, ySize, numLoops, x, y, tStep, deltaY)
|
||||
{
|
||||
var tStart = Math.PI / 2;
|
||||
var tEnd = (3 * Math.PI / 2) + (2 * Math.PI * numLoops);
|
||||
var xEnd = a * tEnd - b * Math.sin(tEnd);
|
||||
var yEnd = a + b;
|
||||
var xFactor = xSize / xEnd;
|
||||
var yFactor = ySize / yEnd;
|
||||
var xShift = x - a * (Math.PI / 2) + b * Math.sin(Math.PI / 2);
|
||||
var yShift = y - a + b * Math.cos(Math.PI / 2);
|
||||
var slope = deltaY / xSize;
|
||||
for (p = tStart; p <= tEnd; p += tStep)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xShift + xFactor * (a * p - b * Math.sin(p)), yShift + yFactor * (a - b * Math.cos(p)) + slope * (a * p - b * Math.sin(p)));
|
||||
ctx.lineTo(xShift + xFactor * (a * (p + tStep) - b * Math.sin(p + tStep)), yShift + yFactor * (a - b * Math.cos(p + tStep)));
|
||||
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>
|
||||
212
4-2.html
Normal file
212
4-2.html
Normal file
@@ -0,0 +1,212 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 4-2
|
||||
</title>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.dropbtn {
|
||||
background-color: #04AA6D;
|
||||
color: white;
|
||||
padding: 16px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: relative;
|
||||
background-color: #f1f1f1;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-content button {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {background-color: #ddd;}
|
||||
|
||||
.dropdown:hover .dropdown-content {display: block;}
|
||||
|
||||
.dropdown:hover .dropbtn {background-color: #3e8e41;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="myCanvas" width="1" height="1" style="border:1px solid #ffffff;"></canvas>
|
||||
<div class="dropdown">
|
||||
<button class="dropbtn" id="btn">Mode 1</button>
|
||||
<div class="dropdown-content">
|
||||
<button onclick="Cases(1)">Mode 1</button>
|
||||
<button onclick="Cases(2)">Mode 2</button>
|
||||
<button onclick="Cases(3)">Mode 3</button>
|
||||
<button onclick="Cases(4)">Mode 4</button>
|
||||
<button onclick="Cases(5)">Mode 5</button>
|
||||
<button onclick="Cases(6)">Mode 6</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
var btn = document.getElementById("btn");
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
var xPos = 0;
|
||||
var yPos = 0;
|
||||
var h = [1/2, 1, 1/2, -1/2, -1, -1/2];
|
||||
var d = [0, 0, 0, 0, 0, 0];
|
||||
var amp = Math.PI / 24;
|
||||
var l = 20;
|
||||
var a = 30;
|
||||
var omega = .5;
|
||||
var t = 0;
|
||||
var dt = .03;
|
||||
var j = 1;
|
||||
var em = 20;
|
||||
var bm = 9;
|
||||
var cm = -1;
|
||||
var dm = 1;
|
||||
var o = Math.sqrt(em - 2 * bm * Math.cos(j * Math.PI/3) - 2 * cm * Math.cos(2 * j * Math.PI/3) - dm * Math.cos(j * Math.PI));
|
||||
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(3, 3);
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Cases(num)
|
||||
{
|
||||
btn.textContent = "Mode " + num;
|
||||
if (num == 1)
|
||||
{
|
||||
Case1();
|
||||
} else if (num == 2)
|
||||
{
|
||||
Case2();
|
||||
} else if (num == 3)
|
||||
{
|
||||
Case3();
|
||||
} else if (num == 4)
|
||||
{
|
||||
Case4();
|
||||
} else if (num == 5)
|
||||
{
|
||||
Case5();
|
||||
} else if (num == 6)
|
||||
{
|
||||
Case6();
|
||||
}
|
||||
}
|
||||
|
||||
function Case1()
|
||||
{
|
||||
h = [1, 1/2, -1/2, -1, -1/2, 1/2];
|
||||
t = 0;
|
||||
j = 1;
|
||||
}
|
||||
|
||||
function Case2()
|
||||
{
|
||||
h = [-1, 1/2, 1/2, -1, 1/2, 1/2];
|
||||
t = 0;
|
||||
j = 3;
|
||||
}
|
||||
|
||||
function Case3()
|
||||
{
|
||||
h = [1, -1, 1, -1, 1, -1];
|
||||
t = 0;
|
||||
j = 3;
|
||||
}
|
||||
|
||||
function Case4()
|
||||
{
|
||||
h = [0, 1, 1, 0, -1, -1];
|
||||
t = 0;
|
||||
j = 1;
|
||||
}
|
||||
|
||||
function Case5()
|
||||
{
|
||||
h = [0, -1, 1, 0, -1, 1];
|
||||
t = 0;
|
||||
j = 3;
|
||||
}
|
||||
|
||||
function Case6()
|
||||
{
|
||||
h = [1, 1, 1, 1, 1, 1];
|
||||
t = 0;
|
||||
j = 0;
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
o = Math.sqrt(em - 2 * bm * Math.cos(j * Math.PI/3) - 2 * cm * Math.cos(2 * j * Math.PI/3) - dm * Math.cos(j * Math.PI));
|
||||
Clear(ctx);
|
||||
theta = 0;
|
||||
for (i = 0; i < 6; i++)
|
||||
{
|
||||
d[i] = h[i] * Math.sin(omega * o * t) * amp;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.lineTo(l * Math.cos(theta), l * Math.sin(theta));
|
||||
ctx.lineTo(l * Math.cos(theta) + l * Math.cos(theta + (d[i]/2)), l * Math.sin(theta) + l * Math.sin(theta + (d[i]/2)));
|
||||
ctx.lineTo(l * Math.cos(theta) + l * Math.cos(theta + (d[i]/2)) + l * Math.cos(theta + d[i]), l * Math.sin(theta) + l * Math.sin(theta + (d[i]/2)) + l * Math.sin(theta + d[i]));
|
||||
ctx.stroke();
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.beginPath();
|
||||
ctx.arc(l * Math.cos(theta) + l * Math.cos(theta + (d[i]/2)) + l * Math.cos(theta + d[i]), l * Math.sin(theta) + l * Math.sin(theta + (d[i]/2)) + l * Math.sin(theta + d[i]), 5, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.arc(l * Math.cos(theta) + l * Math.cos(theta + (d[i]/2)) + l * Math.cos(theta + d[i]), l * Math.sin(theta) + l * Math.sin(theta + (d[i]/2)) + l * Math.sin(theta + d[i]), 5, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
theta += Math.PI/3;
|
||||
}
|
||||
t += dt;
|
||||
setTimeout(Update, 1000/60)
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(3, 3);
|
||||
}, 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>
|
||||
228
5-1.html
Normal file
228
5-1.html
Normal file
@@ -0,0 +1,228 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 5-1
|
||||
</title>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.dropbtn {
|
||||
background-color: #04AA6D;
|
||||
color: white;
|
||||
padding: 16px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: relative;
|
||||
background-color: #f1f1f1;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-content button {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
width: 100px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {background-color: #ddd;}
|
||||
|
||||
.dropdown:hover .dropdown-content {display: block;}
|
||||
|
||||
.dropdown:hover .dropbtn {background-color: #3e8e41;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="myCanvas" width="1" height="1" style="border:1px solid #ffffff;"></canvas>
|
||||
<div class="dropdown">
|
||||
<button class="dropbtn" id="btn">1 Mass</button>
|
||||
<div class="dropdown-content">
|
||||
<button onclick="Blocks(2)">1 Mass</button>
|
||||
<button onclick="Blocks(3)">2 Masses</button>
|
||||
<button onclick="Blocks(4)">3 Masses</button>
|
||||
<button onclick="Blocks(5)">4 Masses</button>
|
||||
<button onclick="Blocks(6)">5 Masses</button>
|
||||
<button onclick="Blocks(7)">6 Masses</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
var btn = document.getElementById("btn");
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
var nn = 2;
|
||||
var mm = new Array(nn);
|
||||
var a = new Array (nn);
|
||||
var mmax = 350;
|
||||
nmax = nn;
|
||||
var yy = new Array(nn + 1);
|
||||
var xPos = -50;
|
||||
var yPos = -50;
|
||||
var m = 1;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(4, -4);
|
||||
|
||||
for (k = 1; k <= nn - 1; k++)
|
||||
{
|
||||
mm[k] = 80 / Math.sqrt(3 - 2 * Math.cos(k * Math.PI / nn));
|
||||
a[k] = 2 / nn;
|
||||
}
|
||||
|
||||
var y = new Array(nn);
|
||||
for (i = 0; i <= nn - 1; i++)
|
||||
{
|
||||
y[i] = new Array(nn);
|
||||
for (j = 0; j <= nn; j++)
|
||||
{
|
||||
y[i][j] = new Array(Math.round(mm[1]));
|
||||
for (k = 0; k <= mm[1]; k++)
|
||||
{
|
||||
y[i][j][k] = a[i]*4*Math.sin(i* Math.PI * j / nn) * Math.sin(2 * Math.PI * (k - 1) / mm[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function Blocks(num)
|
||||
{
|
||||
nn = num;
|
||||
console.log(num);
|
||||
btn.textContent = (num - 1) + " Masses";
|
||||
|
||||
nmax = nn;
|
||||
for (k = 1; k <= nn - 1; k++)
|
||||
{
|
||||
mm[k] = 40 / Math.sqrt(3 - 2 * Math.cos(k * Math.PI / nn));
|
||||
a[k] = 2 / nn;
|
||||
}
|
||||
|
||||
y = new Array(nn);
|
||||
for (i = 0; i <= nn - 1; i++)
|
||||
{
|
||||
y[i] = new Array(nn);
|
||||
for (j = 0; j <= nn; j++)
|
||||
{
|
||||
y[i][j] = new Array(Math.round(mm[1]));
|
||||
for (k = 0; k <= mm[1]; k++)
|
||||
{
|
||||
y[i][j][k] = a[i]*4*Math.sin(i* Math.PI * j / nn) * Math.sin(2 * Math.PI * (k - 1) / mm[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
m += 1;
|
||||
setTimeout(Update, 1000/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
|
||||
for (n = 0; n < nn + 1; n++)
|
||||
{
|
||||
yy[n] = 0;
|
||||
for (k = 1; k < nn; k++)
|
||||
{
|
||||
yy[n] += y[k][n][m % Math.round(mm[k])];
|
||||
}
|
||||
}
|
||||
for (n = 1; n < nmax; n++)
|
||||
{
|
||||
ctx.strokeStyle = "#cccccc";
|
||||
ctx.lineWidth = 0.5;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10 + 80 * n / nmax, c.height);
|
||||
ctx.lineTo(xPos + 10 + 80 * n / nmax, -c.height);
|
||||
ctx.stroke();
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10 + 80*n/nmax + yy[n], yPos + 82);
|
||||
ctx.lineTo(xPos + 10 + 80*n/nmax, yPos + 100);
|
||||
ctx.stroke();
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + 10 + 80 * n/nmax + yy[n], yPos + 80, 2, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + 10 + 80 * n/nmax + yy[n], yPos + 80, 2, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
for (k = 1; k < nn; k++)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + 10 + 80 * n/nmax + y[k][n][m % Math.round(mm[k])], yPos + k * 80/nn, 2, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + 10 + 80 * n/nmax + y[k][n][m % Math.round(mm[k])], yPos + k * 80/nn, 2, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
for (n = 0; n < nmax; n++)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 12 + 80 * n / nmax + yy[n], yPos + 80);
|
||||
ctx.lineTo(xPos + 8 + 80*(n+1)/nmax + yy[n+1], yPos + 80);
|
||||
ctx.stroke();
|
||||
for (k = 1; k < nn; k++)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 12 + 80 * n/nmax + y[k][n][m % Math.round(mm[k])], yPos + k*80/nn);
|
||||
ctx.lineTo(xPos + 8 + 80*(n+1)/nmax + y[k][n+1][m % Math.round(mm[k])], yPos + k*80/nn);
|
||||
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(4, -4);
|
||||
}, 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>
|
||||
210
5-2.html
Normal file
210
5-2.html
Normal file
@@ -0,0 +1,210 @@
|
||||
<!--
|
||||
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>
|
||||
<heaad>
|
||||
<title>
|
||||
Waves 5-2
|
||||
</title>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.dropbtn {
|
||||
background-color: #04AA6D;
|
||||
color: white;
|
||||
padding: 16px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #f1f1f1;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-content button {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
width: 100px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {background-color: #ddd;}
|
||||
|
||||
.dropdown:hover .dropdown-content {display: block;}
|
||||
|
||||
.dropdown:hover .dropbtn {background-color: #3e8e41;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="myCanvas" width="1" height="1" style="border:1px solid #ffffff;"></canvas>
|
||||
<div class="dropdown">
|
||||
<button class="dropbtn" id="btn">1 Mass</button>
|
||||
<div class="dropdown-content">
|
||||
<button onclick="Blocks(2)">1 Mass</button>
|
||||
<button onclick="Blocks(3)">2 Masses</button>
|
||||
<button onclick="Blocks(4)">3 Masses</button>
|
||||
<button onclick="Blocks(5)">4 Masses</button>
|
||||
<button onclick="Blocks(6)">5 Masses</button>
|
||||
<button onclick="Blocks(7)">6 Masses</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
var btn = document.getElementById("btn");
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
var nnn = 1;
|
||||
var nn = nnn + 1;
|
||||
var mm = new Array(nn);
|
||||
var a = new Array (nn);
|
||||
var mmax = 350;
|
||||
nmax = nn;
|
||||
var yy = new Array(nn + 1);
|
||||
var xPos = -50;
|
||||
var yPos = -90;
|
||||
var m = 1;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(3, -3);
|
||||
|
||||
for (k = 1; k <= nn - 1; k++)
|
||||
{
|
||||
mm[k] = 80 / Math.sqrt(2 - 2 * Math.cos(k * Math.PI / nn));
|
||||
a[k] = 3 / nn;
|
||||
}
|
||||
|
||||
var y = new Array(nn);
|
||||
for (i = 0; i <= nn - 1; i++)
|
||||
{
|
||||
y[i] = new Array(nn + 1);
|
||||
for (j = 0; j <= nn; j++)
|
||||
{
|
||||
y[i][j] = new Array(Math.round(mm[1] + 1));
|
||||
for (k = 0; k <= mm[1]; k++)
|
||||
{
|
||||
y[i][j][k] = a[i]*8*Math.sin(i* Math.PI * j / nn) * Math.sin(2 * Math.PI * (k - 1) / mm[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function Blocks(num)
|
||||
{
|
||||
nn = num;
|
||||
console.log(num);
|
||||
btn.textContent = (num - 1) + " Masses";
|
||||
|
||||
nmax = nn;
|
||||
for (k = 1; k <= nn - 1; k++)
|
||||
{
|
||||
mm[k] = 40 / Math.sqrt(3 - 2 * Math.cos(k * Math.PI / nn));
|
||||
a[k] = 2 / nn;
|
||||
}
|
||||
|
||||
y = new Array(nn);
|
||||
for (i = 0; i <= nn - 1; i++)
|
||||
{
|
||||
y[i] = new Array(nn);
|
||||
for (j = 0; j <= nn; j++)
|
||||
{
|
||||
y[i][j] = new Array(Math.round(mm[1]));
|
||||
for (k = 0; k <= mm[1]; k++)
|
||||
{
|
||||
y[i][j][k] = a[i]*8*Math.sin(i* Math.PI * j / nn) * Math.sin(2 * Math.PI * (k - 1) / mm[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
m += 1;
|
||||
setTimeout(Update, 1000/40)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
|
||||
for (n = 0; n < nn + 1; n++)
|
||||
{
|
||||
yy[n] = 160;
|
||||
for (k = 1; k < nn; k++)
|
||||
{
|
||||
yy[n] += y[k][n][m % Math.round(mm[k])];
|
||||
}
|
||||
}
|
||||
for (n = 0; n < nmax; n++)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(10 + 80 * n / nmax + xPos, yy[n] + yPos);
|
||||
ctx.lineTo(10 + 80*(n+1)/nmax + xPos, yy[n+1] + yPos);
|
||||
ctx.stroke();
|
||||
for (k = 1; k < nn; k++)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(10 + 80 * n/nmax + xPos, yPos + k*160/nn + y[k][n][m % Math.round(mm[k])]);
|
||||
ctx.lineTo(10 + 80*(n+1)/nmax + xPos,yPos+ k*160/nn+ y[k][n+1][m % Math.round(mm[k])]);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
for (n = 1; n < nmax; n++)
|
||||
{
|
||||
ctx.fillStyle = "#000000";
|
||||
ctx.beginPath();
|
||||
ctx.arc(10 + 80 * n/nmax + xPos, yPos + yy[n], 2, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
for (k = 1; k < nn; k++)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.arc(10 + 80 * n/nmax + xPos, yPos + k * 160/nn + y[k][n][m % Math.round(mm[k])], 2, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(3, -3);
|
||||
}, 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>
|
||||
215
5-3.html
Normal file
215
5-3.html
Normal file
@@ -0,0 +1,215 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 5-3
|
||||
</title>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.dropbtn {
|
||||
background-color: #04AA6D;
|
||||
color: white;
|
||||
padding: 16px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: relative;
|
||||
background-color: #f1f1f1;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-content button {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
width: 100px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {background-color: #ddd;}
|
||||
|
||||
.dropdown:hover .dropdown-content {display: block;}
|
||||
|
||||
.dropdown:hover .dropbtn {background-color: #3e8e41;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="myCanvas" width="1" height="1" style="border:1px solid #ffffff;"></canvas>
|
||||
<div class="dropdown">
|
||||
<button class="dropbtn" id="btn">1 Mass</button>
|
||||
<div class="dropdown-content">
|
||||
<button onclick="Blocks(2)">1 Mass</button>
|
||||
<button onclick="Blocks(3)">2 Masses</button>
|
||||
<button onclick="Blocks(4)">3 Masses</button>
|
||||
<button onclick="Blocks(5)">4 Masses</button>
|
||||
<button onclick="Blocks(6)">5 Masses</button>
|
||||
<button onclick="Blocks(7)">6 Masses</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
var btn = document.getElementById("btn");
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
var nnn = 1;
|
||||
var nn = nnn + 1;
|
||||
var mm = new Array(nn);
|
||||
var a = new Array (nn);
|
||||
var mmax = 350;
|
||||
nmax = nn;
|
||||
var yy = new Array(nn + 1);
|
||||
var xPos = -50;
|
||||
var yPos = -90;
|
||||
var m = 1;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(3, -3);
|
||||
|
||||
for (k = 1; k <= nn - 1; k++)
|
||||
{
|
||||
mm[k] = 80 / Math.sqrt(2 - 2 * Math.cos((k - 1/2) * Math.PI / (2*nn-1)));
|
||||
a[k] = 3 / nn;
|
||||
}
|
||||
|
||||
var y = new Array(nn);
|
||||
for (i = 0; i <= nn - 1; i++)
|
||||
{
|
||||
y[i] = new Array(nn + 1);
|
||||
for (j = 0; j <= nn; j++)
|
||||
{
|
||||
y[i][j] = new Array(Math.round(mm[1] + 1));
|
||||
for (k = 0; k <= mm[1]; k++)
|
||||
{
|
||||
y[i][j][k] = a[i]*8*Math.sin(i* Math.PI * j / (2*nn-1)) * Math.sin(2 * Math.PI * (k - 1) / mm[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function Blocks(num)
|
||||
{
|
||||
nn = num;
|
||||
console.log(num);
|
||||
btn.textContent = (num - 1) + " Masses";
|
||||
|
||||
nmax = nn;
|
||||
for (k = 1; k <= nn - 1; k++)
|
||||
{
|
||||
mm[k] = 80 / Math.sqrt(3 - 2 * Math.cos(k * Math.PI / nn));
|
||||
a[k] = 2 / nn;
|
||||
}
|
||||
|
||||
y = new Array(nn);
|
||||
for (i = 0; i <= nn - 1; i++)
|
||||
{
|
||||
y[i] = new Array(nn);
|
||||
for (j = 0; j <= nn; j++)
|
||||
{
|
||||
y[i][j] = new Array(Math.round(mm[1]));
|
||||
for (k = 0; k <= mm[1]; k++)
|
||||
{
|
||||
y[i][j][k] = a[i]*8*Math.sin((2*i-1)* Math.PI * (j) / (2*nn-1)) * Math.sin(2 * Math.PI * (k - 1) / mm[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
m += 1;
|
||||
setTimeout(Update, 1000/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
|
||||
for (n = 0; n < nn + 1; n++)
|
||||
{
|
||||
yy[n] = 160;
|
||||
for (k = 1; k < nn; k++)
|
||||
{
|
||||
yy[n] += y[k][n][m % Math.round(mm[k])];
|
||||
}
|
||||
}
|
||||
for (n = 0; n < nmax; n++)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(10 + 80 * n / nmax + xPos, yy[n] + yPos);
|
||||
ctx.lineTo(10 + 80*(n+1)/nmax + xPos, yy[n+1] + yPos);
|
||||
ctx.stroke();
|
||||
for (k = 1; k < nn; k++)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(10 + 80 * n/nmax + xPos, yPos + k*160/nn + y[k][n][m % Math.round(mm[k])]);
|
||||
ctx.lineTo(10 + 80*(n+1)/nmax + xPos,yPos+ k*160/nn+ y[k][n+1][m % Math.round(mm[k])]);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
for (n = 1; n < nmax; n++)
|
||||
{
|
||||
ctx.fillStyle = "#000000";
|
||||
ctx.beginPath();
|
||||
ctx.arc(10 + 80 * n/nmax + xPos, yPos + yy[n], 2, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
for (k = 1; k < nn; k++)
|
||||
{
|
||||
ctx.fillStyle = "#000000";
|
||||
ctx.beginPath();
|
||||
ctx.arc(10 + 80 * n/nmax + xPos, yPos + k * 160/nn + y[k][n][m % Math.round(mm[k])], 2, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(90 + xPos, c.height);
|
||||
ctx.lineTo(90 + xPos, -c.height);
|
||||
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(3, -3);
|
||||
}, 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>
|
||||
135
6-1.html
Normal file
135
6-1.html
Normal file
@@ -0,0 +1,135 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 6-1
|
||||
</title>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#increase
|
||||
{
|
||||
width: 50;
|
||||
height: 50;
|
||||
top: 12.5;
|
||||
left: 12.5;
|
||||
position: absolute;
|
||||
background-image: url(upArrow.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#decrease
|
||||
{
|
||||
width: 50;
|
||||
height: 50;
|
||||
top: 75;
|
||||
left: 12.5;
|
||||
position: absolute;
|
||||
background-image: url(downArrow.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
</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>
|
||||
<button id = "increase" onclick = "Increase()"></button>
|
||||
<button id = "decrease" onclick = "Decrease()"></button>
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
k = 1;
|
||||
a0 = 40;
|
||||
a = a0;
|
||||
nn = 48;
|
||||
mm0 = 24;
|
||||
mm = mm0;
|
||||
m = 1;
|
||||
var xPos = -100;
|
||||
var yPos = -75;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(3, 3);
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
m += 1;
|
||||
ctx.strokeStyle = "#000000";
|
||||
setTimeout(Update, 1000/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10, yPos + 80);
|
||||
for (n = 0; n < nn; n++)
|
||||
{
|
||||
ctx.lineTo(xPos + 10 + 160 * (n + 1) / nn, yPos + 80 + a * Math.sin(k * (n+1) * Math.PI / nn) * Math.sin(m / mm));
|
||||
}
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
function Increase()
|
||||
{
|
||||
k += 1;
|
||||
if (k > 10)
|
||||
{
|
||||
k = 10;
|
||||
}
|
||||
mm = mm0 / k;
|
||||
a = a0 / k;
|
||||
}
|
||||
|
||||
function Decrease()
|
||||
{
|
||||
k -= 1;
|
||||
if (k <= 0)
|
||||
{
|
||||
k = 1;
|
||||
}
|
||||
mm = mm0 / k;
|
||||
a = a0 / k;
|
||||
}
|
||||
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(3, 3);
|
||||
}, 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>
|
||||
141
6-2.html
Normal file
141
6-2.html
Normal file
@@ -0,0 +1,141 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 6-2
|
||||
</title>
|
||||
<style>
|
||||
#increase
|
||||
{
|
||||
width: 50;
|
||||
height: 50;
|
||||
top: 12.5;
|
||||
left: 12.5;
|
||||
position: absolute;
|
||||
background-image: url(upArrow.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#decrease
|
||||
{
|
||||
width: 50;
|
||||
height: 50;
|
||||
top: 75;
|
||||
left: 12.5;
|
||||
position: absolute;
|
||||
background-image: url(downArrow.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
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>
|
||||
<button id = "increase" onclick = "Increase()"></button>
|
||||
<button id = "decrease" onclick = "Decrease()"></button>
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
k = .5;
|
||||
a0 = 20;
|
||||
a = a0 / k;
|
||||
nn = 48;
|
||||
mm0 = 12;
|
||||
mm = mm0;
|
||||
m = 1;
|
||||
var xPos = -100;
|
||||
var yPos = -75;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(3, 3);
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
m += 1;
|
||||
ctx.strokeStyle = "#000000";
|
||||
setTimeout(Update, 1000/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 170, yPos + 20);
|
||||
ctx.lineTo(xPos + 170, yPos + 140);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + 170, yPos + 80 + a* Math.sin(k * Math.PI) * Math.sin(m / mm), 1, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10, yPos + 80);
|
||||
for (n = 0; n < nn; n++)
|
||||
{
|
||||
ctx.lineTo(xPos + 10 + 160 * (n + 1) / nn, yPos + 80 + a * Math.sin(k * (n+1) * Math.PI / nn) * Math.sin(m / mm));
|
||||
}
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
function Increase()
|
||||
{
|
||||
k += 1;
|
||||
if (k >= 10)
|
||||
{
|
||||
k = 9.5;
|
||||
}
|
||||
mm = mm0 / k;
|
||||
a = a0 / k;
|
||||
}
|
||||
|
||||
function Decrease()
|
||||
{
|
||||
k -= 1;
|
||||
if (k <= 0)
|
||||
{
|
||||
k = 0.5;
|
||||
}
|
||||
mm = mm0 / k;
|
||||
a = a0 / k;
|
||||
}
|
||||
|
||||
Update();
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(3, 3);
|
||||
}, true);
|
||||
|
||||
</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>
|
||||
126
6-3.html
Normal file
126
6-3.html
Normal file
@@ -0,0 +1,126 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 6-3
|
||||
</title>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="myCanvas" width="1" height="1" style="border:1px solid #ffffff;"></canvas>
|
||||
<form>
|
||||
<label for="w">w</label>
|
||||
<input type="number" id="w" name="w" min="0.1" max="0.9" step = "0.1" value="0.5">
|
||||
<br>
|
||||
<label for="nTerms">Number of terms</label>
|
||||
<input type="number" id="nTerms" name="nTerms" min="1" max="20" step = "1" value = "1">
|
||||
</form>
|
||||
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
var k = 1;
|
||||
var w = document.getElementById("w").value;
|
||||
var a0 = 40
|
||||
var nn = 400;
|
||||
var nterms = document.getElementById("nTerms").value;
|
||||
var mm0 = 16;
|
||||
var psi = new Array(nn);
|
||||
var m = 1;
|
||||
var xPos = -100;
|
||||
var yPos = -75;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(3, -3);
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
w = parseFloat(document.getElementById("w").value);
|
||||
if (w <= 0)
|
||||
{
|
||||
w = 0.1;
|
||||
document.getElementById("w").value = 0.1;
|
||||
} else if (w >= 1)
|
||||
{
|
||||
w = 0.9;
|
||||
document.getElementById("w").value = 0.9;
|
||||
}
|
||||
nterms = parseFloat(document.getElementById("nTerms").value);
|
||||
if (nterms < 1)
|
||||
{
|
||||
nterms = 1;
|
||||
document.getElementById("nTerms").value = 1;
|
||||
} else if (nterms > 20)
|
||||
{
|
||||
nterms = 20;
|
||||
document.getElementById("nTerms").value = 20;
|
||||
}
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
ctx.strokeStyle = "#000000";
|
||||
setTimeout(Update, 1000/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
for (n = 0; n <= nn; n++)
|
||||
{
|
||||
psi[n] = 0;
|
||||
for (k = 1; k < nterms + 1; k++)
|
||||
{
|
||||
psi[n] += Math.sin(w*k*Math.PI) / k / k * Math.sin(k*n*Math.PI/nn) * Math.cos(m*k/mm0);
|
||||
}
|
||||
psi[n] = psi[n] * a0 / 4 / w / (1-w);
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10, yPos + 80 + psi[0]);
|
||||
for (n = 0; n <= nn; n++)
|
||||
{
|
||||
ctx.lineTo(xPos + 10 + 160 * (n + 1) / nn, yPos + 80 + psi[n+1]);
|
||||
}
|
||||
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(3, -3);
|
||||
}, 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>
|
||||
96
6-4.html
Normal file
96
6-4.html
Normal file
@@ -0,0 +1,96 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 6-4
|
||||
</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;
|
||||
var k = 1;
|
||||
var w = 0.5;
|
||||
var a0 = 40
|
||||
var nn = 20;
|
||||
var nterms = 20;
|
||||
var mm0 = 16;
|
||||
var psi = new Array(nn);
|
||||
var m = 1;
|
||||
var xPos = -100;
|
||||
var yPos = -75;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(3, 3);
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
m += 1;
|
||||
ctx.strokeStyle = "#000000";
|
||||
setTimeout(Update, 1000/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
for (n = 0; n <= nn; n++)
|
||||
{
|
||||
psi[n] = 0;
|
||||
for (k = 1; k < nterms + 1; k++)
|
||||
{
|
||||
psi[n] += Math.sin(w*k*Math.PI) / k / k * Math.sin(k*n*Math.PI/nn) * Math.cos(m*k/mm0);
|
||||
}
|
||||
psi[n] = psi[n] * a0 / 4 / w / (1-w);
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10, yPos + 80 + psi[0]);
|
||||
for (n = 0; n <= nn; n++)
|
||||
{
|
||||
ctx.lineTo(xPos + 10 + 160 * (n + 1) / nn, yPos + 80 + psi[n+1]);
|
||||
}
|
||||
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(3, 3);
|
||||
}, 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>
|
||||
128
6-5.html
Normal file
128
6-5.html
Normal file
@@ -0,0 +1,128 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 6-5
|
||||
</title>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<form>
|
||||
<label for="w">w</label>
|
||||
<input type="number" id="w" name="w" min="0" max="1" step = "0.1" value = "0.5">
|
||||
<br>
|
||||
<label for="nTerms">Number of terms</label>
|
||||
<input type="number" id="nTerms" name="nTerms" min="1" max="100" step = "1" value = "20">
|
||||
</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;
|
||||
var k = 1;
|
||||
var w = document.getElementById("w").value;
|
||||
var a0 = 40
|
||||
var nn = 100;
|
||||
var nterms = document.getElementById("nTerms").value;
|
||||
var mm0 = 16;
|
||||
var psi = new Array(nn);
|
||||
var m = 1;
|
||||
var xPos = -100;
|
||||
var yPos = -75;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(3, -3);
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
w = parseFloat(document.getElementById("w").value);
|
||||
if (w <= 0)
|
||||
{
|
||||
w = 0.1;
|
||||
document.getElementById("w").value = 0.1;
|
||||
} else if (w >= 1)
|
||||
{
|
||||
w = 0.9;
|
||||
document.getElementById("w").value = 0.9;
|
||||
}
|
||||
nterms = parseFloat(document.getElementById("nTerms").value);
|
||||
if (nterms < 1)
|
||||
{
|
||||
nterms = 1;
|
||||
document.getElementById("nTerms").value = 1;
|
||||
} else if (nterms > 100)
|
||||
{
|
||||
nterms = 100;
|
||||
document.getElementById("nTerms").value = 100;
|
||||
}
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
m += 1;
|
||||
ctx.strokeStyle = "#000000";
|
||||
setTimeout(Update, 1000/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
for (n = 0; n <= nn; n++)
|
||||
{
|
||||
psi[n] = 0;
|
||||
for (k = 1; k < nterms + 1; k++)
|
||||
{
|
||||
psi[n] += Math.sin(w*k*Math.PI) / k / k * Math.sin(k*n*Math.PI/nn) * Math.cos(m*k/mm0);
|
||||
}
|
||||
psi[n] = psi[n] * a0 / 4 / w / (1-w);
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10, yPos + 80 + psi[0]);
|
||||
for (n = 0; n <= nn; n++)
|
||||
{
|
||||
ctx.lineTo(xPos + 10 + 160 * (n + 1) / nn, yPos + 80 + psi[n+1]);
|
||||
}
|
||||
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(3, -3);
|
||||
}, 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>
|
||||
198
7-1.html
Normal file
198
7-1.html
Normal file
@@ -0,0 +1,198 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 7-1
|
||||
</title>
|
||||
<style>
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.dropbtn {
|
||||
background-color: #04AA6D;
|
||||
color: white;
|
||||
padding: 16px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: relative;
|
||||
background-color: #f1f1f1;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-content button {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
width: 100px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {background-color: #ddd;}
|
||||
|
||||
.dropdown:hover .dropdown-content {display: block;}
|
||||
|
||||
.dropdown:hover .dropbtn {background-color: #3e8e41;}
|
||||
</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="dropdown">
|
||||
<button class="dropbtn" id="btn">kL = 1/π</button>
|
||||
<div class="dropdown-content">
|
||||
<button onclick="Nodes(1)">kL = 1/π</button>
|
||||
<button onclick="Nodes(2)">kL = 2/π</button>
|
||||
<button onclick="Nodes(3)">kL = 3/π</button>
|
||||
<button onclick="Nodes(4)">kL = 4/π</button>
|
||||
<button onclick="Nodes(5)">kL = 5/π</button>
|
||||
<button onclick="Nodes(6)">kL = 6/π</button>
|
||||
<button onclick="Nodes(7)">kL = 7/π</button>
|
||||
<button onclick="Nodes(8)">kL = 8/π</button>
|
||||
<button onclick="Nodes(9)">kL = 9/π</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
var nodes = 1;
|
||||
var nn = 42;
|
||||
var eps = 20 / nodes;
|
||||
var kl = Math.PI * nodes;
|
||||
var o = 2 * nodes;
|
||||
var xPos = -90;
|
||||
var yPos = -50;
|
||||
var m = 1;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(6, -6);
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
m += 1;
|
||||
console.log(m);
|
||||
setTimeout(Update, 1000/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
drawOscillatingSpring(1, 7, 160, 10, 50, xPos, 0, 0.1)
|
||||
}
|
||||
|
||||
function drawOscillatingSpring(a, b, xSize, ySize, numLoops, x, y, tStep)
|
||||
{
|
||||
//Draws coiled spring using prolate cycloid
|
||||
var tStart = Math.PI / 2;
|
||||
var tEnd = (3 * Math.PI / 2) + (2 * Math.PI * numLoops);
|
||||
var xEnd = a * tEnd - b * Math.sin(tEnd);
|
||||
var yEnd = a + b;
|
||||
var xFactor = xSize / xEnd;
|
||||
var yFactor = ySize / yEnd;
|
||||
var xShiftA = - a * (Math.PI / 2) + b * Math.sin(Math.PI / 2);
|
||||
var yShift = y - a + b * Math.cos(Math.PI / 2);
|
||||
ctx.beginPath();
|
||||
var xDisplacement = eps * Math.sin(m * 0.1) * Math.sin((xFactor * (a * Math.PI / 2 - b * Math.sin(Math.PI / 2)) + xShiftA) * nodes * Math.PI / xSize);
|
||||
ctx.moveTo(xShiftA + x + xDisplacement + xFactor * (a * Math.PI / 2 - b * Math.sin(Math.PI / 2)), yShift + yFactor * (a - b * Math.cos(Math.PI / 2)));
|
||||
for (t = tStart; t <= tEnd; t += tStep)
|
||||
{
|
||||
xDisplacement = eps * Math.sin(m * 0.1) * Math.sin((xFactor * (a * t - b * Math.sin(t)) + xShiftA) * nodes * Math.PI / xSize);
|
||||
//ctx.moveTo(xShiftA + x + xDisplacement + xFactor * (a * t - b * Math.sin(t)), yShift + yFactor * (a - b * Math.cos(t)));
|
||||
ctx.lineTo(xShiftA + x + xDisplacement + xFactor * (a * (t + tStep) - b * Math.sin(t + tStep)), yShift + yFactor * (a - b * Math.cos(t + tStep)));
|
||||
}
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
function Nodes(num)
|
||||
{
|
||||
nodes = num;
|
||||
btn.textContent = "kL = " + nodes.toString();
|
||||
eps = 20 / nodes;
|
||||
kl = Math.PI * nodes;
|
||||
o = 2 * nodes;
|
||||
}
|
||||
|
||||
document.onkeypress = function (e) {
|
||||
e = e || window.event;
|
||||
if (e.keyCode == 49)
|
||||
{
|
||||
nodes = 1;
|
||||
} else if (e.keyCode == 50)
|
||||
{
|
||||
nodes = 2;
|
||||
} else if (e.keyCode == 51)
|
||||
{
|
||||
nodes = 3;
|
||||
} else if (e.keyCode == 52)
|
||||
{
|
||||
nodes = 4;
|
||||
} else if (e.keyCode == 53)
|
||||
{
|
||||
nodes = 5;
|
||||
} else if (e.keyCode == 54)
|
||||
{
|
||||
nodes = 6;
|
||||
} else if (e.keyCode == 55)
|
||||
{
|
||||
nodes = 7;
|
||||
} else if (e.keyCode == 56)
|
||||
{
|
||||
nodes = 8;
|
||||
} else if (e.keyCode == 57)
|
||||
{
|
||||
nodes = 9;
|
||||
}
|
||||
btn.textContent = "kl = " + nodes.toString();
|
||||
eps = 20 / nodes;
|
||||
kl = Math.PI * nodes;
|
||||
o = 2 * nodes;
|
||||
};
|
||||
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(6, -6);
|
||||
}, 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>
|
||||
198
7-2.html
Normal file
198
7-2.html
Normal file
@@ -0,0 +1,198 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 7-2
|
||||
</title>
|
||||
<link rel="stylesheet" href="/rmg/waves7-2/style2.css" type="text/css">
|
||||
<style>
|
||||
.dropbtn {
|
||||
background-color: #04AA6D;
|
||||
color: white;
|
||||
padding: 16px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: relative;
|
||||
background-color: #f1f1f1;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-content button {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
width: 100px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {background-color: #ddd;}
|
||||
|
||||
.dropdown:hover .dropdown-content {display: block;}
|
||||
|
||||
.dropdown:hover .dropbtn {background-color: #3e8e41;}
|
||||
|
||||
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>
|
||||
<div class="dropdown">
|
||||
<button class="dropbtn" id="btn">kL = 0.5/π</button>
|
||||
<div class="dropdown-content">
|
||||
<button onclick="Nodes(0.5)">kL = 0.5/π</button>
|
||||
<button onclick="Nodes(1.5)">kL = 1.5/π</button>
|
||||
<button onclick="Nodes(2.5)">kL = 2.5/π</button>
|
||||
<button onclick="Nodes(3.5)">kL = 3.5/π</button>
|
||||
<button onclick="Nodes(4.5)">kL = 4.5/π</button>
|
||||
<button onclick="Nodes(5.5)">kL = 5.5/π</button>
|
||||
<button onclick="Nodes(6.5)">kL = 6.5/π</button>
|
||||
<button onclick="Nodes(7.5)">kL = 7.5/π</button>
|
||||
<button onclick="Nodes(8.5)">kL = 8.5/π</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
var nodes = .5;
|
||||
var nn = 42
|
||||
var eps = 20 / (nodes + 1);
|
||||
var kl = Math.PI * nodes;
|
||||
var o = 2 * nodes;
|
||||
var xPos = -90;
|
||||
var yPos = -50;
|
||||
var m = 1;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(6, -6);
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
m += 1;
|
||||
console.log(m);
|
||||
setTimeout(Update, 1000/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
drawOscillatingSpring(1, 7, 160, 10, 50, xPos, 0, 0.1)
|
||||
}
|
||||
|
||||
function drawOscillatingSpring(a, b, xSize, ySize, numLoops, x, y, tStep)
|
||||
{
|
||||
//Draws coiled spring using prolate cycloid
|
||||
var tStart = Math.PI / 2;
|
||||
var tEnd = (3 * Math.PI / 2) + (2 * Math.PI * numLoops);
|
||||
var xEnd = a * tEnd - b * Math.sin(tEnd);
|
||||
var yEnd = a + b;
|
||||
var xFactor = xSize / xEnd;
|
||||
var yFactor = ySize / yEnd;
|
||||
var xShiftA = - a * (Math.PI / 2) + b * Math.sin(Math.PI / 2);
|
||||
var yShift = y - a + b * Math.cos(Math.PI / 2);
|
||||
ctx.beginPath();
|
||||
var xDisplacement = eps * Math.sin(m * 0.1) * Math.sin((xFactor * (a * Math.PI / 2 - b * Math.sin(Math.PI / 2)) + xShiftA) * nodes * Math.PI / xSize);
|
||||
ctx.moveTo(xShiftA + x + xDisplacement + xFactor * (a * Math.PI / 2 - b * Math.sin(Math.PI / 2)), yShift + yFactor * (a - b * Math.cos(Math.PI / 2)));
|
||||
for (t = tStart; t <= tEnd; t += tStep)
|
||||
{
|
||||
xDisplacement = eps * Math.sin(m * 0.1) * Math.sin((xFactor * (a * t - b * Math.sin(t)) + xShiftA) * nodes * Math.PI / xSize);
|
||||
//ctx.moveTo(xShiftA + x + xDisplacement + xFactor * (a * t - b * Math.sin(t)), yShift + yFactor * (a - b * Math.cos(t)));
|
||||
ctx.lineTo(xShiftA + x + xDisplacement + xFactor * (a * (t + tStep) - b * Math.sin(t + tStep)), yShift + yFactor * (a - b * Math.cos(t + tStep)));
|
||||
}
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
function Nodes(num)
|
||||
{
|
||||
nodes = num;
|
||||
btn.textContent = "kL = " + num;
|
||||
eps = 20 / (nodes + 1);
|
||||
kl = Math.PI * nodes;
|
||||
o = 2 * nodes;
|
||||
}
|
||||
|
||||
document.onkeypress = function (e) {
|
||||
e = e || window.event;
|
||||
if (e.keyCode == 49)
|
||||
{
|
||||
nodes = .5;
|
||||
} else if (e.keyCode == 50)
|
||||
{
|
||||
nodes = 1.5;
|
||||
} else if (e.keyCode == 51)
|
||||
{
|
||||
nodes = 2.5;
|
||||
} else if (e.keyCode == 52)
|
||||
{
|
||||
nodes = 3.5;
|
||||
} else if (e.keyCode == 53)
|
||||
{
|
||||
nodes = 4.5;
|
||||
} else if (e.keyCode == 54)
|
||||
{
|
||||
nodes = 5.5;
|
||||
} else if (e.keyCode == 55)
|
||||
{
|
||||
nodes = 6.5;
|
||||
} else if (e.keyCode == 56)
|
||||
{
|
||||
nodes = 7.5;
|
||||
} else if (e.keyCode == 57)
|
||||
{
|
||||
nodes = 8.5;
|
||||
}
|
||||
btn.textContent = "kl = " + nodes;
|
||||
eps = 20 / (nodes + 1);
|
||||
kl = Math.PI * nodes;
|
||||
o = 2 * nodes;
|
||||
};
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(6, -6);
|
||||
}, 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>
|
||||
105
8-1.html
Normal file
105
8-1.html
Normal file
@@ -0,0 +1,105 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 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;
|
||||
var mm = 60;
|
||||
var mmax = 50;
|
||||
var nn = 20;
|
||||
var nmax = 5 * nn / 4 - 1;
|
||||
var xPos = -50;
|
||||
var yPos = -50;
|
||||
var m = 1;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(4, -4);
|
||||
|
||||
var y1 = new Array(nn + 1);
|
||||
var y2 = new Array(nn + 1);
|
||||
for (n = 0; n < nn + 1; n++)
|
||||
{
|
||||
y1[n] = new Array(mm + 1);
|
||||
y2[n] = new Array(mm + 1);
|
||||
for (m = 0; m < mm + 1; m++)
|
||||
{
|
||||
y1[n][m] = 10 * Math.cos(2 * Math.PI * n / nn) * Math.cos(2 * Math.PI * (m-1) / mm);
|
||||
y2[n][m] = 10 * Math.sin(2 * Math.PI * n / nn) * Math.sin(2 * Math.PI * (m-1) / mm);
|
||||
}
|
||||
}
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
m += 1;
|
||||
console.log(m);
|
||||
setTimeout(Update, 1500/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
for (n = 0; n <= nmax; n++)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10 + 80 * n / nmax, y1[n % nn][m % mm] + y2[n % nn][m % mm] + 45 + yPos);
|
||||
ctx.lineTo(xPos + 10 + 80 * (n+1) / nmax, y1[(n+1) % nn][m % mm] + y2[(n+1) % nn][m % mm] + 45 + yPos);
|
||||
ctx.stroke();
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + 10 + 80 / nmax * nn *((m) % mm) / mm, 55 + yPos, 1, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
if ((m % mm) * 4 <= mm)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + 10 + 80 * nn / nmax + 80 / nmax * nn * ((m) % mm) / mm, 55 + yPos, 1, 0, Math.PI * 2);
|
||||
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(4, -4);
|
||||
}, 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>
|
||||
130
8-2.html
Normal file
130
8-2.html
Normal file
@@ -0,0 +1,130 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 8-2
|
||||
</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;
|
||||
var mm = 50;
|
||||
var mmax = 50;
|
||||
var nn = 16;
|
||||
var nmax = 5 * nn / 4 - 1;
|
||||
var xPos = -50;
|
||||
var yPos = -50;
|
||||
var m = 1;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(4, -4);
|
||||
|
||||
var y1 = new Array(nn + 1);
|
||||
var y3 = new Array(nn + 1);
|
||||
for (n = 0; n < nn + 1; n++)
|
||||
{
|
||||
y1[n] = new Array(mm + 1);
|
||||
y3[n] = new Array(mm + 1);
|
||||
for (m = 0; m < mm + 1; m++)
|
||||
{
|
||||
y1[n][m] = 10 * Math.cos(2 * Math.PI * n / nn) * Math.cos(2 * Math.PI * (m-1) / mm);
|
||||
y3[n][m] = 10 * Math.sin(2 * Math.PI * n / nn) * Math.sin(2 * Math.PI * (m-1) / mm);
|
||||
}
|
||||
}
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
m += 1;
|
||||
console.log(m);
|
||||
setTimeout(Update, 1500/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
ctx.strokeStyle = "#cccccc";
|
||||
ctx.lineWidth = 0.5;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10, 15 + yPos);
|
||||
ctx.lineTo(xPos + 90 + 80 / nmax, 15 + yPos);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10, 40 + yPos);
|
||||
ctx.lineTo(xPos + 90 + 80 / nmax, 40 + yPos);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10, 75 + yPos);
|
||||
ctx.lineTo(xPos + 90 + 80 / nmax, 75 + yPos);
|
||||
ctx.stroke();
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.lineWidth = 1;
|
||||
for (n = 0; n <= nmax; n++)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10 + 80 * n / nmax, y1[n % nn][m % mm] + 15 + yPos);
|
||||
ctx.lineTo(xPos + 10 + 80 * (n+1) / nmax, y1[(n+1) % nn][m % mm] + 15 + yPos);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10 + 80 * n / nmax, y3[n % nn][m % mm] + 40 + yPos);
|
||||
ctx.lineTo(xPos + 10 + 80 * (n+1) / nmax, y3[(n+1) % nn][m % mm] + 40 + yPos);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10 + 80 * n / nmax, y1[n % nn][m % mm] + y3[n % nn][m % mm] + 75 + yPos);
|
||||
ctx.lineTo(xPos + 10 + 80 * (n+1) / nmax, y1[(n+1) % nn][m % mm] + y3[(n+1) % nn][m % mm] + 75 + yPos);
|
||||
ctx.stroke();
|
||||
}
|
||||
ctx.fillStyle = "#000000";
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + 10 + 80 / nmax * nn * ((m) % mm) / mm, yPos+ 85, 1, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
if ((m % mm) * 4 <= mm)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + 10 + 80 * nn / nmax + 80 / nmax * nn * ((m) % mm) / mm, yPos + 85, 1, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(4, -4);
|
||||
}, 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>
|
||||
104
8-3.html
Normal file
104
8-3.html
Normal file
@@ -0,0 +1,104 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 8-3
|
||||
</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;
|
||||
var kk = 4;
|
||||
var kp = 2;
|
||||
var mm = 60;
|
||||
var mmax = 200;
|
||||
var nn = 50;
|
||||
var cycles = 7/4;
|
||||
var nmax = 2 * nn * cycles / kk;
|
||||
var xPos = -50;
|
||||
var yPos = -50;
|
||||
var m = 1;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(3, -3);
|
||||
var ay = 10 / Math.sqrt((Math.cos(kk * Math.PI * nmax / nn) ^ 2 * (1 - Math.exp(-2 * kp * nmax / nn)) ^ 2) + (Math.sin(kk * Math.PI * nmax / nn) ^ 2 * (1 + Math.exp(-2 * kp * nmax / nn)) ^ 2));
|
||||
var y1 = new Array(nn + 1);
|
||||
for (n = 0; n < nn + 1; n++)
|
||||
{
|
||||
y1[n] = new Array(mm + 1);
|
||||
for (m = 0; m < mm + 1; m++)
|
||||
{
|
||||
y1[n][m] = ay * (Math.exp(-kp * n / nn) * Math.cos(kk * Math.PI * (n / nn - nmax / nn - m/mm)));
|
||||
}
|
||||
}
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
m += 1;
|
||||
console.log(m);
|
||||
setTimeout(Update, 1500/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
ctx.strokeStyle = "#cccccc";
|
||||
ctx.lineWidth = 0.5;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos, 50 + yPos);
|
||||
ctx.lineTo(100 + xPos, 50 + yPos);
|
||||
ctx.stroke();
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.lineWidth = 1;
|
||||
for (n = 0; n < nmax; n++)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 100 * n / nmax, y1[n][m % mm] + 50 + yPos);
|
||||
ctx.lineTo(xPos + 100 * (n + 1) / nmax, y1[(n + 1)][m % mm] + 50 +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(3, -3);
|
||||
}, 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>
|
||||
105
8-4.html
Normal file
105
8-4.html
Normal file
@@ -0,0 +1,105 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 8-4
|
||||
</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;
|
||||
var kk = 4;
|
||||
var kp = 1.3;
|
||||
var mm = 60;
|
||||
var mmax = 200;
|
||||
var nn = 50;
|
||||
var cycles = 11/4;
|
||||
var nmax = Math.round(2 * nn * cycles / kk);
|
||||
var xPos = -50;
|
||||
var yPos = -50;
|
||||
var m = 1;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(3, -3);
|
||||
var ay = 10 / Math.sqrt((Math.cos(kk * Math.PI * nmax / nn) ^ 2 * (1 - Math.exp(-2 * kp * nmax / nn)) ^ 2) + (Math.sin(kk * Math.PI * nmax / nn) ^ 2 * (1 + Math.exp(-2 * kp * nmax / nn)) ^ 2));
|
||||
var y1 = new Array(nmax + 1);
|
||||
for (n = 0; n < nmax + 1; n++)
|
||||
{
|
||||
y1[n] = new Array(mm + 1);
|
||||
for (m = 0; m < mm + 1; m++)
|
||||
{
|
||||
y1[n][m] = ay * (Math.exp(-kp * n / nn) * Math.cos(kk * Math.PI * (n / nn - nmax / nn - m/mm)) - Math.exp(-2 * kp * nmax / nn) * Math.exp(kp * n / nn) * Math.cos(kk * Math.PI * (n / nn - nmax / nn + m / mm)));
|
||||
}
|
||||
}
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
m += 1;
|
||||
console.log(m);
|
||||
setTimeout(Update, 1500/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
ctx.strokeStyle = "#cccccc";
|
||||
ctx.lineWidth = 0.5;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10, yPos + 50);
|
||||
ctx.lineTo(xPos + 90, yPos + 50);
|
||||
ctx.stroke();
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.lineWidth = 1;
|
||||
for (n = 0; n < nmax; n++)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 90 - 80 * n / nmax, y1[n][m % mm] + 50 + yPos);
|
||||
ctx.lineTo(xPos + 90 - 80 * (n + 1) / nmax, y1[(n + 1)][m % mm] + 50 + 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(3, -3);
|
||||
}, 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>
|
||||
111
8-5.html
Normal file
111
8-5.html
Normal file
@@ -0,0 +1,111 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 8-5
|
||||
</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;
|
||||
var kk = 4;
|
||||
var kp = 1.3;
|
||||
var mm = 60;
|
||||
var mmax = 200;
|
||||
var nn = 9;
|
||||
var cycles = 11/4;
|
||||
var nmax = Math.round(2 * nn * cycles / kk);
|
||||
var xPos = -50;
|
||||
var yPos = -50;
|
||||
var m = 1;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(3, -3);
|
||||
var ay = 10 / Math.sqrt((Math.cos(kk * Math.PI * nmax / nn) ^ 2 * (1 - Math.exp(-2 * kp * nmax / nn)) ^ 2) + (Math.sin(kk * Math.PI * nmax / nn) ^ 2 * (1 + Math.exp(-2 * kp * nmax / nn)) ^ 2));
|
||||
var y1 = new Array(nmax + 1);
|
||||
for (n = 0; n < nmax + 1; n++)
|
||||
{
|
||||
y1[n] = new Array(mm + 1);
|
||||
for (m = 0; m < mm + 1; m++)
|
||||
{
|
||||
y1[n][m] = ay * (Math.exp(-kp * n / nn) * Math.cos(kk * Math.PI * (n / nn - nmax / nn - m/mm)) - Math.exp(-2 * kp * nmax / nn) * Math.exp(kp * n / nn) * Math.cos(kk * Math.PI * (n / nn - nmax / nn + m / mm)));
|
||||
}
|
||||
}
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
m += 1;
|
||||
console.log(m);
|
||||
setTimeout(Update, 1500/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
ctx.strokeStyle = "#cccccc";
|
||||
ctx.lineWidth = 0.5;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10, yPos + 50);
|
||||
ctx.lineTo(xPos + 90, yPos + 50);
|
||||
ctx.stroke();
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.lineWidth = 1;
|
||||
for (n = 0; n < nmax; n++)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 90 - 80 * n / nmax, yPos + y1[n][m % mm] + 50);
|
||||
ctx.lineTo(xPos + 90 - 80 * (n + 1) / nmax, yPos + y1[(n + 1)][m % mm] + 50);
|
||||
ctx.stroke();
|
||||
}
|
||||
for (n = 1; n < nmax; n++)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + 90 - 80 * n / nmax, yPos + y1[n][m % mm] + 50, 1, 0, Math.PI * 2);
|
||||
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(3, -3);
|
||||
}, 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>
|
||||
203
8-6.html
Normal file
203
8-6.html
Normal file
@@ -0,0 +1,203 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 8-6
|
||||
</title>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.container
|
||||
{
|
||||
position: relative;
|
||||
}
|
||||
#omegaIncrease
|
||||
{
|
||||
left: 12.5px;
|
||||
top: 12.5px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
}
|
||||
#omegaDecrease
|
||||
{
|
||||
left: 12.5px;
|
||||
top: 75px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
}
|
||||
#domegaIncrease
|
||||
{
|
||||
left: 12.5px;
|
||||
top: 137.5px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
}
|
||||
#domegaDecrease
|
||||
{
|
||||
left: 12.5px;
|
||||
top: 200px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
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>
|
||||
<div class="container">
|
||||
<button type="button" id="omegaIncrease" onclick="increase86()">Increase ω</button>
|
||||
<button type="button" id="omegaDecrease" onclick="decrease86()">Decrease ω</button>
|
||||
<button type="button" id="domegaIncrease" onclick="increasel86()">Increase Δω</button>
|
||||
<button type="button" id="domegaDecrease" onclick="decreasel86()">Decrease Δω</button>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
var nn = 7;
|
||||
var domega = .05;
|
||||
var omega = 6;
|
||||
var dt = .03;
|
||||
var t = 0;
|
||||
var m = 1;
|
||||
var yy = new Array(nn + 2);
|
||||
var xPos = -50;
|
||||
var yPos = -50;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(3, -3);
|
||||
|
||||
function fny86(x, t)
|
||||
{
|
||||
if (omega < 7 && omega > 5)
|
||||
{
|
||||
k = 2 * Math.atan(Math.sqrt(Math.pow(omega, 2) - 25) / (49 - Math.pow(omega, 2)));
|
||||
return 10 * Math.cos(k * x - omega * t);
|
||||
} else if (omega > 7)
|
||||
{
|
||||
k = 2 * Math.log10(Math.sqrt((Math.pow(omega, 2) - 49) / 14) + Math.sqrt((Math.pow(omega, 2) - 25) / 14));
|
||||
return 10 * Math.exp(-k * x) * Math.cos(Math.PI * x) * Math.cos(omega * t);
|
||||
} else if (omega < 5)
|
||||
{
|
||||
k = 2 * Math.log10(Math.sqrt((49 - Math.pow(omega, 2)) / 14) + Math.sqrt((25 - Math.pow(omega, 2)) / 14));
|
||||
return 10 * Math.exp(-k * x) * Math.cos(omega * t);
|
||||
} else if (omega == 7)
|
||||
{
|
||||
return 10 * Math.cos(Math.PI * x) * Math.cos(omega * t);
|
||||
} else if (omega == 5)
|
||||
{
|
||||
return 10 * Math.cos(omega * t);
|
||||
}
|
||||
}
|
||||
|
||||
function increase86()
|
||||
{
|
||||
omega += domega;
|
||||
}
|
||||
|
||||
function decrease86()
|
||||
{
|
||||
omega -= domega;
|
||||
}
|
||||
|
||||
function increasel86()
|
||||
{
|
||||
if (domega < .02)
|
||||
{
|
||||
domega *= 10;
|
||||
}
|
||||
}
|
||||
|
||||
function decreasel86()
|
||||
{
|
||||
if (domega > .000002)
|
||||
{
|
||||
domega /= 10;
|
||||
}
|
||||
}
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
m += 1;
|
||||
t += dt;
|
||||
console.log(m);
|
||||
setTimeout(Update, 1000/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10, yPos + 50);
|
||||
ctx.lineTo(xPos + 100 + 80 / nn, yPos + 50);
|
||||
ctx.stroke();
|
||||
for (n = 0; n < nn + 2; n++)
|
||||
{
|
||||
yy[n] = fny86(n, t);
|
||||
}
|
||||
for (n = 0; n < nn + 1; n++)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10 + 80 * n / nn, yPos + yy[n] + 50);
|
||||
ctx.lineTo(xPos + 10 + 80 * (n + 1) / nn, yPos + yy[n+1] + 50);
|
||||
ctx.stroke();
|
||||
}
|
||||
for (n = 1; n < nn + 2; n++)
|
||||
{
|
||||
ctx.fillStyle = "#000000";
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + 10 + 80 * n / nn, yPos + yy[n] + 50, 2, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10 + 80 * n / nn, yPos + 50);
|
||||
ctx.lineTo(xPos + 10.5 + 80 * n / nn, yPos + yy[n] / 2 + 50);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10 + 80 * n / nn, yPos + yy[n] + 50);
|
||||
ctx.lineTo(xPos + 10.5 + 80 * n / nn, yPos + yy[n] / 2 + 50);
|
||||
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(3, -3);
|
||||
}, 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>
|
||||
121
9-1.html
Normal file
121
9-1.html
Normal file
@@ -0,0 +1,121 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 9-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;
|
||||
var r = .3;
|
||||
var mm = 40;
|
||||
var mmax = 80;
|
||||
var nn = 16;
|
||||
var nmax = 2 * nn;
|
||||
var xPos = -50;
|
||||
var yPos = -50;
|
||||
var m = 1;
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
|
||||
ctx.scale(3, -3);
|
||||
|
||||
var y1 = new Array(nn + 1);
|
||||
var y2 = new Array(nn + 1);
|
||||
for (n = 0; n < nn + 1; n++)
|
||||
{
|
||||
y1[n] = new Array(mm + 1);
|
||||
y2[n] = new Array(mm + 1);
|
||||
for (m = 0; m < mm + 1; m++)
|
||||
{
|
||||
y1[n][m] = 10 * Math.cos(2 * Math.PI * (n / nn - m / mm));
|
||||
y2[n][m] = 10 * r * Math.cos(2 * Math.PI * (n / nn + m / mm));
|
||||
}
|
||||
}
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
m += 1;
|
||||
console.log(m);
|
||||
setTimeout(Update, 1000/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
ctx.strokeStyle = "#cccccc";
|
||||
ctx.lineWidth = 0.5;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 5, 15 + yPos);
|
||||
ctx.lineTo(xPos + 85 + 80 / nmax, 15 + yPos);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 5, 40 + yPos);
|
||||
ctx.lineTo(xPos + 85 + 80 / nmax, 40 + yPos);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 5, 75 + yPos);
|
||||
ctx.lineTo(xPos + 85 + 80 / nmax, 75 + yPos);
|
||||
ctx.stroke();
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.lineWidth = 1;
|
||||
for (n = 0; n <= nmax; n++)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 5 + 80 * n / nmax, yPos + y1[n % nn][m % mm] + 15);
|
||||
ctx.lineTo(xPos + 5 + 80 * (n+1) / nmax, yPos + y1[(n+1) % nn][m % mm] + 15);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 5 + 80 * n / nmax, yPos + y2[n % nn][m % mm] + 40);
|
||||
ctx.lineTo(xPos + 5 + 80 * (n+1) / nmax, yPos + y2[(n+1) % nn][m % mm] + 40);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 5 + 80 * n / nmax, yPos + y1[n % nn][m % mm] + y2[n % nn][m % mm] + 75);
|
||||
ctx.lineTo(xPos + 5 + 80 * (n+1) / nmax, yPos + y1[(n+1) % nn][m % mm] + y2[(n+1) % nn][m % mm] + 75);
|
||||
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(3, -3);
|
||||
}, 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>
|
||||
198
9-2.html
Normal file
198
9-2.html
Normal file
@@ -0,0 +1,198 @@
|
||||
<!--
|
||||
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>
|
||||
Waves 9-2
|
||||
</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;
|
||||
var eps = new Array(3);
|
||||
eps[0] = .85;
|
||||
eps[1] = 2;
|
||||
eps[2] = 5;
|
||||
var mm = 40;
|
||||
var mmax = 80;
|
||||
var nn = 16;
|
||||
var nn4 = nn/4;
|
||||
var nmax = 2 * nn;
|
||||
var xPos = -50;
|
||||
var yPos = -50;
|
||||
var m = 1;
|
||||
var je = 1;
|
||||
var th = Math.atan(eps[je] / 2);
|
||||
var r = eps[je] / Math.sqrt(4 + Math.pow(eps[je], 2));
|
||||
var t = 2 / Math.sqrt(4 + Math.pow(eps[je], 2));
|
||||
var nth = (nn * th / 2 / Math.PI);
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
|
||||
ctx.scale(3, -3);
|
||||
|
||||
var y1 = new Array(nn + 1);
|
||||
var y2 = new Array(nn + 1);
|
||||
for (n = 0; n < nn + 1; n++)
|
||||
{
|
||||
y1[n] = new Array(mm + 1);
|
||||
y2[n] = new Array(mm + 1);
|
||||
for (m = 0; m < mm + 1; m++)
|
||||
{
|
||||
y1[n][m] = 10 * Math.cos(2 * Math.PI * (n / nn - m / mm));
|
||||
y2[n][m] = 10 * r * Math.cos(2 * Math.PI * (n / nn + m / mm));
|
||||
}
|
||||
}
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
m += 1;
|
||||
console.log(m);
|
||||
setTimeout(Update, 1000/45)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
ctx.strokeStyle = "#cccccc";
|
||||
ctx.lineWidth = 0.5;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10 + 80 / nmax, 15 + yPos);
|
||||
ctx.lineTo(xPos + 90 + 80 / nmax, 15 + yPos);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10 + 80 / nmax, 40 + yPos);
|
||||
ctx.lineTo(xPos + 90 + 80 / nmax, 40 + yPos);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10 + 80 / nmax, 75 + yPos);
|
||||
ctx.lineTo(xPos + 90 + 80 / nmax, 75 + yPos);
|
||||
ctx.stroke();
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.lineWidth = 1;
|
||||
for (n = 1; n < nn; n++)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10 + 80 * n / nmax, yPos + y1[n % nn][m % mm] + 15);
|
||||
ctx.lineTo(xPos + 10 + 80 * (n+1) / nmax, yPos + y1[(n+1) % nn][m % mm] + 15);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10 + 80 * n / nmax, yPos + y2[(nn + n - nth - nn4) % nn][m % mm] + 40);
|
||||
ctx.lineTo(xPos + 10 + 80 * (n+1) / nmax, yPos + y2[(nn + n - nth - nn4 +1) % nn][m % mm] + 40);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10 + 80 * n / nmax, yPos + y1[n % nn][m % mm] + y2[(nn + n - nth - nn4) % nn][m % mm] + 75);
|
||||
ctx.lineTo(xPos + 10 + 80 * (n+1) / nmax, yPos + y1[(n+1) % nn][m % mm] + y2[(nn + n - nth - nn4 + 1) % nn][m % mm] + 75);
|
||||
ctx.stroke();
|
||||
}
|
||||
for (n = nn; n <= nmax; n++)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10 + 80 * n / nmax, yPos + t * y1[(n + nth) % nn][m % mm] + 15);
|
||||
ctx.lineTo(xPos + 10 + 80 * (n + 1) / nmax, yPos + t * y1[(n + nth + 1) % nn][m % mm] + 15);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + 10 + 80 * n / nmax, yPos + t * y1[(n + nth) % nn][m % mm] + 75);
|
||||
ctx.lineTo(xPos + 10 + 80 * (n + 1) / nmax, yPos + t * y1[(n + nth + 1) % nn][m % mm] + 75);
|
||||
ctx.stroke();
|
||||
}
|
||||
var n = nn;
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + 10 + 80 * n / nmax, yPos + t * y1[(n + nth) % nn][m % mm] + 75, 1, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
var i;
|
||||
|
||||
}
|
||||
|
||||
function Case1()
|
||||
{
|
||||
je = 0;
|
||||
var th = Math.atan(eps[je] / 2);
|
||||
var r = eps[je] / Math.sqrt(4 + Math.pow(eps[je], 2));
|
||||
var t = 2 / Math.sqrt(4 + Math.pow(eps[je], 2));
|
||||
var nth = (nn * th / 2 / Math.PI);
|
||||
for (n = 0; n < nn + 1; n++)
|
||||
{
|
||||
for (m = 0; m < mm + 1; m++)
|
||||
{
|
||||
y1[n][m] = 10 * Math.cos(2 * Math.PI * (n / nn - m / mm));
|
||||
y2[n][m] = 10 * r * Math.cos(2 * Math.PI * (n / nn + m / mm));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function Case2()
|
||||
{
|
||||
je = 1;
|
||||
var th = Math.atan(eps[je] / 2);
|
||||
var r = eps[je] / Math.sqrt(4 + Math.pow(eps[je], 2));
|
||||
var t = 2 / Math.sqrt(4 + Math.pow(eps[je], 2));
|
||||
var nth = (nn * th / 2 / Math.PI);
|
||||
for (n = 0; n < nn + 1; n++)
|
||||
{
|
||||
for (m = 0; m < mm + 1; m++)
|
||||
{
|
||||
y1[n][m] = 10 * Math.cos(2 * Math.PI * (n / nn - m / mm));
|
||||
y2[n][m] = 10 * r * Math.cos(2 * Math.PI * (n / nn + m / mm));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function Case3()
|
||||
{
|
||||
je = 2;
|
||||
var th = Math.atan(eps[je] / 2);
|
||||
var r = eps[je] / Math.sqrt(4 + Math.pow(eps[je], 2));
|
||||
var t = 2 / Math.sqrt(4 + Math.pow(eps[je], 2));
|
||||
var nth = (nn * th / 2 / Math.PI);
|
||||
for (n = 0; n < nn + 1; n++)
|
||||
{
|
||||
for (m = 0; m < mm + 1; m++)
|
||||
{
|
||||
y1[n][m] = 10 * Math.cos(2 * Math.PI * (n / nn - m / mm));
|
||||
y2[n][m] = 10 * r * Math.cos(2 * Math.PI * (n / nn + m / mm));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(3, -3);
|
||||
}, 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>
|
||||
130
chladni.html
Normal file
130
chladni.html
Normal file
@@ -0,0 +1,130 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
Waves: Chladni plates
|
||||
</title>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
}
|
||||
</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>
|
||||
<form>
|
||||
<label for="x">X mode</label>
|
||||
<input type="number" id="x" min="0" max="10" step="1" value="1">
|
||||
<br>
|
||||
<label for="y">Y mode</label>
|
||||
<input type="number" id="y" min="0" max="10" step="1" value="1">
|
||||
</form>
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
ctx.canvas.width = window.innerWidth;
|
||||
ctx.canvas.height = window.innerHeight;
|
||||
|
||||
var xMode = document.getElementById("x").value;
|
||||
var yMode = document.getElementById("y").value;
|
||||
var step = 0.01;
|
||||
var sandThreshold = 0.01;
|
||||
var plateSize = 53;
|
||||
var xPos = 0;
|
||||
var yPos = 0;
|
||||
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
|
||||
ctx.scale(4, -4);
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
setTimeout(Update, 1000/60);
|
||||
if (xMode != document.getElementById("x").value)
|
||||
{
|
||||
xMode = parseFloat(document.getElementById("x").value);
|
||||
sandThreshold = 0.065 + 0.055 * (1.02 ** (xMode + yMode));
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
}
|
||||
if (yMode != document.getElementById("y").value)
|
||||
{
|
||||
yMode = parseFloat(document.getElementById("y").value);
|
||||
sandThreshold = 0.065 + 0.055 * (1.02 ** (xMode + yMode));
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
}
|
||||
}
|
||||
|
||||
Update();
|
||||
|
||||
function Draw()
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos - plateSize, yPos - plateSize);
|
||||
ctx.lineTo(xPos + plateSize, yPos - plateSize);
|
||||
ctx.lineTo(xPos + plateSize, yPos + plateSize);
|
||||
ctx.lineTo(xPos - plateSize, yPos + plateSize);
|
||||
ctx.lineTo(xPos - plateSize, yPos - plateSize);
|
||||
ctx.stroke();
|
||||
for (x = -1; x <= 0; x += step)
|
||||
{
|
||||
for (y = -1; y <= 0; y += step)
|
||||
{
|
||||
if (Math.random() >= 0)
|
||||
{
|
||||
phi = (Math.cos(xMode * x * Math.PI) * Math.cos(yMode * y * Math.PI)) + (Math.cos(xMode * y * Math.PI) * Math.cos(yMode * x * Math.PI));
|
||||
console.log(phi);
|
||||
if (phi <= sandThreshold && phi >= -sandThreshold)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.arc(x * plateSize + xPos, y * plateSize + yPos, step * plateSize, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.arc(-x * plateSize + xPos, y * plateSize + yPos, step * plateSize, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.arc(x * plateSize + xPos, -y * plateSize + yPos, step * plateSize, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.arc(-x * plateSize + xPos, -y * plateSize + yPos, step * plateSize, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
console.log("point");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Draw();
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(4, -4);
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
}, true);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
downArrow.png
Normal file
BIN
downArrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
fourierSeries.png
Normal file
BIN
fourierSeries.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
502
index.html
Normal file
502
index.html
Normal file
@@ -0,0 +1,502 @@
|
||||
<!--
|
||||
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>
|
||||
List of programs
|
||||
</title>
|
||||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid #dddddd;
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
th {
|
||||
border: 1px solid #dddddd;
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #dddddd;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
Number
|
||||
</td>
|
||||
<td>
|
||||
Description
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan = "2">
|
||||
<t>Chapter 1: Harmonic Oscillation</t>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='1-1.html'>1-1</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>The connection between harmonic motion and uniform circular motion.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='1-2.html'>1-2</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Multiplication in the complex plane. Move the complex number
|
||||
z around in the complex plane with the arrow keys.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan = "2">
|
||||
<t>Chapter 2: Forced Oscillation and Resonance</t>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='2-1.html'>2-1</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>A damped forced harmonic oscillator with one degree of freedom.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan = "2">
|
||||
<t>Chapter 3: Normal Modes</t>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='3-1.html'>3-1</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Two coupled pendulums.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan = "2">
|
||||
<t>Chapter 4: Symmetries</t>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='4-1.html'>4-1</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Beats in two coupled pendulums.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='4-2.html'>4-2</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Modes of the hacksaw oscillator.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan = "2">
|
||||
<t>Chapter 5: Waves</t>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='5-1.html'>5-1</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Standing waves in a system of coupled pendulums with fixed
|
||||
ends.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='5-2.html'>5-2</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Standing waves on a beaded string with fixed ends.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='5-3.html'>5-3</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Standing waves on a beaded string with free ends.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan = "2">
|
||||
<t>Chapter 6: Continuum Limit and Fourier Series</t>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='6-1.html'>6-1</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Normal modes of the continuous string with fixed ends, with
|
||||
k = nπ/L for n = 1 to ∞. The up and down arrow keys increase n.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='6-2.html'>6-2</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Normal modes of the continuous string with one fixed end and
|
||||
one free end, with k = nπ/L ‐ π/2L for n = 1 to ∞. The up and down arrow keys increase
|
||||
n.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='6-3.html'>6-3</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>The Fourier series for the function of (6.19)</t>
|
||||
<br>
|
||||
<img src= "fourierSeries.png">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='6-4.html'>6-4</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Plucking an ideal string.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='6-5.html'>6-5</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Same program as 6-4, but with variable inputs.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan = "2">
|
||||
<t>Chapter 7: Longitudinal Oscillations and Sound</t>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='7-1.html'>7-1</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Longitudinal modes of a continuous spring with fixed ends.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='7-2.html'>7-2</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Longitudinal modes of a continuous spring with one fixed end
|
||||
and one free end.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan = "2">
|
||||
<t>Chapter 8: Traveling Waves</t>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='8-1.html'>8-1</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>A traveling wave with a circle moving along the maximum of
|
||||
the wave at the phase velocity.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='8-2.html'>8-2</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>A traveling wave built out of two standing waves.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='8-3.html'>8-3</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>A traveling wave with damping. It peters out as it travels.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='8-4.html'>8-4</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>A forced oscillation problem for a continuous string with damping
|
||||
and one end fixed.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='8-5.html'>8-5</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>A forced oscillation problem for a beaded string with damping
|
||||
and one end fixed.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='8-6.html'>8-6</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>High- and low-frequency cut-offs in a forced oscillation problem.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan = "2">
|
||||
<t>Chapter 9: The Boundary at Infinity</t>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='9-1.html'>9-1</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Looking at reflected waves. You can see the uneven motion of
|
||||
a traveling wave with a small reflected amplitude.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='9-2.html'>9-2</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Reflection and transmission from a mass on a string.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan = "2">
|
||||
<t>Chapter 10: Signals and Fourier Analysis</t>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='10-1.html'>10-1</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>A triangular pulse propagating on a stretched string.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='10-2.html'>10-2</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Group velocity (sum of two cosines).</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='10-3.html'>10-3</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Scattering of a pulse by a boundary between regions of different
|
||||
k.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='10-4.html'>10-4</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Scattering of a pulse by a mass on a string.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan = "2">
|
||||
<t>Chapter 11: Two and Three Dimensions</t>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='11-1.html'>11-1</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>The modes of a two-dimensional beaded string.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='11-2.html'>11-2</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Snell's law with no reflection.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='11-3.html'>11-3</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Water sloshing in a rectangular container.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='11-4.html'>11-4</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Two immiscible liquids sloshing. Note the mismatch between
|
||||
the upper and lower liquids in the middle. This is the result of the nonlinearity of the
|
||||
constraint of incompressibility.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan = "2">
|
||||
<t>Chapter 12: Polarization</t>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='12-1.html'>12-1</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>Polarization in the two-dimensional harmonic oscillator, or
|
||||
in an electromagnetic wave. This shows the position of a string stretched in the z direction.
|
||||
The transverse position is shown in the x-y plane along with the x and y components. Alternatively,
|
||||
this can represent Ex and Ey in the electromagnetic wave propagating in the z
|
||||
direction and the total E
|
||||
field. In the upper left-hand corner is the complex two dimensional
|
||||
vector, that describes the polarization.
|
||||
You can change u1 between 1 and 0 with the left and right arrows. You can change |u2|
|
||||
between 1 and 0 with the up and down arrows. F1 and F2 decrease and increase the phase of
|
||||
u2 between π and -π.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='12-2.html'>12-2</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>The wandering of the electric field in unpolarized light. The
|
||||
electric field direction in the x-y plane is indicated by the trace. The color of the line changes
|
||||
occasionally to make it visible.</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan = "2">
|
||||
<t>Extra Special Bonus Programs</t>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='rainbow.html'>Rainbow</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>
|
||||
Demonstration of red and blue light refracting in a raindrop.
|
||||
</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='rainbow2.html'>Rainbow 2</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>
|
||||
Visualization of the double rainbow and Alexander's dark band.
|
||||
</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='water20.html'>Water20</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>
|
||||
Water waves in an infinite ocean.
|
||||
</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='lens.html'>Lens</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>
|
||||
Light refracting through a lens.
|
||||
</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='xray0.html'>X-ray</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>
|
||||
The relationship between color and phase in x-ray diffraction.
|
||||
</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='xray1.html'>X-ray 2</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>
|
||||
A demonstration of x-rays diffracting through a crystal.
|
||||
</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='purcell.html'>Purcell</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>
|
||||
The electric field generated by a particle that starts moving.
|
||||
</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='purcell2.html'>Purcell 2</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>
|
||||
The electric field generated by a particle that stops moving.
|
||||
</t>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href='chladni.html'>Chladni plates</a>
|
||||
</td>
|
||||
<td>
|
||||
<t>
|
||||
The vibrational modes of a chladni plate.
|
||||
</t>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p xmlns:cc="http://creativecommons.org/ns#" >
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
271
lens.html
Normal file
271
lens.html
Normal file
@@ -0,0 +1,271 @@
|
||||
<!--
|
||||
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>
|
||||
Waves: Lens
|
||||
</title>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slideContainer {
|
||||
position: relative;
|
||||
}
|
||||
</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>
|
||||
<form>
|
||||
<label for="toggle">Position indicators</label>
|
||||
<input type="checkbox" id="toggle" onclick="toggleClick()">
|
||||
</form>
|
||||
<div class="slidecontainer">
|
||||
<t>X position</t>
|
||||
<input type="range" min="-350" max="350" value="0" step = "1" id="xSlider">
|
||||
<br>
|
||||
<t>Y position</t>
|
||||
<input type="range" min="-150" max="150" value="0" step = "1" id="ySlider">
|
||||
<br>
|
||||
<t>Focal length</t>
|
||||
<input type="range" min="-50" max="100" value="50" step = "1" id="fSlider">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
ctx.canvas.width = window.innerWidth;
|
||||
ctx.canvas.height = window.innerHeight;
|
||||
|
||||
var f = 50;
|
||||
var cll = "#000000";
|
||||
var clb = "#0000ff";
|
||||
var nxb = 3;
|
||||
var nyb = 3;
|
||||
var dt = .03;
|
||||
var a = new Array(6);
|
||||
for (i = 0; i < 6; i++)
|
||||
{
|
||||
a[i] = new Array(6);
|
||||
}
|
||||
var xAdj = 0;
|
||||
var x0 = xAdj - c.width / (2 * 1.5);
|
||||
var y0 = 0;
|
||||
var x1 = 0;
|
||||
var y1 = 30;
|
||||
var xs = c.width / (2 * 1.5);
|
||||
var dx = 5;
|
||||
var dy = 5;
|
||||
var t = 0;
|
||||
var m = 1;
|
||||
var toggle = false;
|
||||
var xPos = 0;
|
||||
var yPos = 0;
|
||||
var xSlider = document.getElementById("xSlider");
|
||||
var ySlider = document.getElementById("ySlider");
|
||||
var fSlider = document.getElementById("fSlider");
|
||||
xSlider.max = c.width / (2 * 1.5) - 30;
|
||||
if (xAdj > xSlider.max)
|
||||
{
|
||||
xAdj = xSlider.max;
|
||||
}
|
||||
x0 = xAdj - c.width / (2 * 1.5) - 5;
|
||||
xs = c.width / (2 * 1.5);
|
||||
|
||||
xSlider.oninput = function()
|
||||
{
|
||||
xAdj = parseFloat(this.value);
|
||||
x0 = xAdj - c.width / (2 * 1.5);
|
||||
}
|
||||
|
||||
ySlider.oninput = function()
|
||||
{
|
||||
y0 = parseFloat(this.value);
|
||||
}
|
||||
|
||||
fSlider.oninput = function()
|
||||
{
|
||||
f = parseFloat(this.value);
|
||||
}
|
||||
|
||||
function fnys(pxs, pf, px0, py0, px1, py1)
|
||||
{
|
||||
return ((py1 - py0) / (px1 - px0) - py1 / pf) * (pxs - px1) + py1;
|
||||
}
|
||||
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
|
||||
ctx.scale(1.5, -1.5);
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
m += 1;
|
||||
setTimeout(Update, 1000/60);
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
ys = fnys(xs, f, x0, y0, x1, y1);
|
||||
ctx.strokeStyle = cll;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + x1, yPos + y1);
|
||||
ctx.lineTo(xPos + x1, yPos - y1);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + x0, yPos + y0, 4, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
v = fnys(xs, f, x0, y0, x1, -y1) - fnys(xs, f, x0, y0, x1, y1) + 2 * y1;
|
||||
if (f != 0)
|
||||
{
|
||||
console.log("f != 0");
|
||||
xv = 2 * y1 * (xs - x1) / v;
|
||||
yv = y1 + xv * (fnys(xs, f, x0, y0, x1, y1) - y1) / (xs - x1);
|
||||
ctx.strokeStyle = clb;
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + xv, yPos + yv, 4, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
}
|
||||
ray(xs, f, x0, y0, x1, y1, clb, xv, yv);
|
||||
ray(xs, f, x0, y0, x1, -y1, clb, xv, yv);
|
||||
ray(xs, f, x0, y0, x1, 0, clb, xv, yv);
|
||||
/*ray(xs, f, x0, 0, x1, y1, "#00ffff");
|
||||
ray(xs, f, x0, 0, x1, -y1, "#00ffff");
|
||||
ray(xs, f, x0, 0, x1, 0, "#00ffff");*/
|
||||
if (toggle)
|
||||
{
|
||||
for (j = -150; j <= 140; j += 10)
|
||||
{
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + xv, yPos + j);
|
||||
ctx.lineTo(xPos + xv, yPos + j + 5);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + x0, yPos + j);
|
||||
ctx.lineTo(xPos + x0, yPos + j + 5);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function ray(pxs, pf, px0, py0, px1, py1, pclb, pxv, pyv)
|
||||
{
|
||||
if (px0 <= px1)
|
||||
{
|
||||
ctx.strokeStyle = pclb;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + px0, yPos + py0);
|
||||
ctx.lineTo(xPos + px1, yPos + py1);
|
||||
ctx.stroke();
|
||||
} else
|
||||
{
|
||||
ctx.strokeStyle = pclb;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos - pxs, yPos + py1 - pxs * (py1 - py0) / (px1 - px0));
|
||||
ctx.lineTo(xPos + px1, yPos + py1);
|
||||
ctx.stroke();
|
||||
}
|
||||
ctx.strokeStyle = "#00ffff";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + xs, yPos + fnys(pxs, pf, px0, py0, px1, py1));
|
||||
ctx.lineTo(xPos + px1, yPos + py1);
|
||||
ctx.stroke();
|
||||
console.log(pxs, px1);
|
||||
if (pxv < px1)
|
||||
{
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.setLineDash([5, 5]);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + px1, yPos + py1);
|
||||
ctx.lineTo(xPos + pxv, yPos + pyv);
|
||||
ctx.stroke();
|
||||
ctx.setLineDash([]);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(1.5, -1.5);
|
||||
xSlider.max = c.width / (2 * 1.5) - 30;
|
||||
if (xAdj > xSlider.max)
|
||||
{
|
||||
xAdj = xSlider.max;
|
||||
}
|
||||
x0 = xAdj - c.width / (2 * 1.5);
|
||||
xs = c.width / (2 * 1.5);
|
||||
|
||||
}, true);
|
||||
|
||||
/*document.onkeydown = checkKey;
|
||||
|
||||
function checkKey(e) {
|
||||
|
||||
e = e || window.event;
|
||||
|
||||
if (e.keyCode == '38') {
|
||||
yplus();
|
||||
}
|
||||
else if (e.keyCode == '40') {
|
||||
yminus();
|
||||
}
|
||||
else if (e.keyCode == '37') {
|
||||
xminus();
|
||||
}
|
||||
else if (e.keyCode == '39') {
|
||||
xplus();
|
||||
}
|
||||
else if (e.keyCode == '49') {
|
||||
//togglec();
|
||||
}
|
||||
else if (e.keyCode == '50') {
|
||||
toggled();
|
||||
}
|
||||
else if (e.keyCode == '51') {
|
||||
//togglee();
|
||||
}
|
||||
|
||||
}*/
|
||||
|
||||
function toggleClick()
|
||||
{
|
||||
checkBox = document.getElementById("toggle");
|
||||
toggle = checkBox.checked;
|
||||
Clear(ctx);
|
||||
}
|
||||
|
||||
|
||||
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>
|
||||
263
purcell.html
Normal file
263
purcell.html
Normal file
@@ -0,0 +1,263 @@
|
||||
<!--
|
||||
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>
|
||||
Waves: Purcell
|
||||
</title>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.slideContainer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#countdown {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
font-size: 150px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
</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>
|
||||
<t id="countdown"></t>
|
||||
<div class="slidecontainer">
|
||||
<t>X</t>
|
||||
<input type="range" min="0" max="0.95" value="0.4" step = ".05" id="xSlider">
|
||||
<br>
|
||||
<t>Number of rays</t>
|
||||
<input type="range" min="10" max="50" value="20" step = "1" id="nSlider">
|
||||
<br>
|
||||
<t id="countdown"></t>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
ctx.canvas.width = window.innerWidth;
|
||||
ctx.canvas.height = window.innerHeight;
|
||||
|
||||
var v = 0.4;
|
||||
var gaminv = Math.sqrt(1 - v ** 2);
|
||||
var rmax = 500;
|
||||
var n = 40;
|
||||
var scrwidth = c.width / 3;
|
||||
var dr = 1.5;
|
||||
var mm = 400 / dr;
|
||||
var dth = .01;
|
||||
var tg = 0;
|
||||
var theta = 0;
|
||||
var mInit = -120;
|
||||
var m = -100;
|
||||
var xPos = 0;
|
||||
var yPos = 0;
|
||||
var xSlider = document.getElementById("xSlider");
|
||||
|
||||
xSlider.oninput = function()
|
||||
{
|
||||
v = parseFloat(this.value);
|
||||
gaminv = Math.sqrt(1 - v ** 2);
|
||||
rmax = 500;
|
||||
m = mInit;
|
||||
}
|
||||
|
||||
nSlider.oninput = function()
|
||||
{
|
||||
n = parseFloat(this.value);
|
||||
}
|
||||
|
||||
function fnatn(s, c)
|
||||
{
|
||||
if (c > 0)
|
||||
{
|
||||
return Math.atan(s / c);
|
||||
}
|
||||
if (c == 0)
|
||||
{
|
||||
return Math.PI / 2;
|
||||
}
|
||||
if (c < 0)
|
||||
{
|
||||
return Math.PI - Math.atan(-s / c);
|
||||
}
|
||||
}
|
||||
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
|
||||
ctx.scale(1.5, -1.5);
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
m += 1;
|
||||
if (m < 0)
|
||||
{
|
||||
document.getElementById("countdown").textContent = (Math.ceil((-m) / 60)).toString();
|
||||
}
|
||||
if (m == 0)
|
||||
{
|
||||
document.getElementById("countdown").textContent = "";
|
||||
}
|
||||
setTimeout(Update, 1000/60);
|
||||
}
|
||||
|
||||
Update();
|
||||
|
||||
function Draw()
|
||||
{
|
||||
r = 0;
|
||||
tt = 5;
|
||||
if (m > 0)
|
||||
{
|
||||
r = m;
|
||||
}
|
||||
rp = r + tt;
|
||||
if (m < -tt)
|
||||
{
|
||||
rp = 0;
|
||||
}
|
||||
if (rp > rmax)
|
||||
{
|
||||
m = mInit;
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(v * r, 0);
|
||||
ctx.lineTo(rmax, 0);
|
||||
ctx.stroke();
|
||||
if ((n / 2) - Math.floor(n / 2) == 0)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(v * r, 0);
|
||||
ctx.lineTo(-rmax, 0);
|
||||
ctx.stroke();
|
||||
}
|
||||
for (j = 1; j <= (n - 1) / 2; j++)
|
||||
{
|
||||
theta = 2 * Math.PI * j / n;
|
||||
cost = Math.cos(theta)
|
||||
sint = Math.sin(theta)
|
||||
costp = (cost + v) / (1 + v * cost)
|
||||
sintp = gaminv * sint / (1 + v * cost)
|
||||
thetap = fnatn(sintp, costp)
|
||||
ctx.strokeStyle = Colorify((j % 5) + 3);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + rp * cost, yPos + rp * sint);
|
||||
ctx.lineTo(xPos + rmax * cost, yPos + rmax * sint);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + v * r, yPos);
|
||||
ctx.lineTo(xPos + r * costp, yPos + r * sintp);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + rp * cost, yPos - rp * sint);
|
||||
ctx.lineTo(xPos + rmax * cost, yPos - rmax * sint);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + v * r, yPos);
|
||||
ctx.lineTo(xPos + r * costp, yPos - r * sintp);
|
||||
ctx.stroke();
|
||||
if (Math.abs(theta - thetap) > 0.001)
|
||||
{
|
||||
console.log(thetap);
|
||||
console.log(theta);
|
||||
for (thj = thetap; thj <= theta; thj += dth)
|
||||
{
|
||||
rr1 = r + tt * (thj - thetap) / (theta - thetap);
|
||||
rr2 = rr1 + tt * dth / (theta - thetap);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + rr1 * Math.cos(thj), yPos + rr1 * Math.sin(thj));
|
||||
ctx.lineTo(xPos + rr2 * Math.cos(thj + dth), yPos + rr2 * Math.sin(thj + dth));
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + rr1 * Math.cos(thj), yPos - rr1 * Math.sin(thj));
|
||||
ctx.lineTo(xPos + rr2 * Math.cos(thj + dth), yPos - rr2 * Math.sin(thj + dth));
|
||||
ctx.stroke();
|
||||
rr1 = rr2;
|
||||
}
|
||||
} else
|
||||
{
|
||||
console.log("No");
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + r * Math.cos(theta), yPos + r * Math.sin(theta));
|
||||
ctx.lineTo(xPos + rp * Math.cos(theta), yPos + rp * Math.sin(theta));
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + r * Math.cos(theta), yPos - r * Math.sin(theta));
|
||||
ctx.lineTo(xPos + rp * Math.cos(theta), yPos - rp * Math.sin(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.5, -1.5);
|
||||
}, true);
|
||||
|
||||
function Colorify(n)
|
||||
{
|
||||
if (n == 0)
|
||||
{
|
||||
return "#000000"
|
||||
} else if (n == 1)
|
||||
{
|
||||
return "#0000aa"
|
||||
} else if (n == 2)
|
||||
{
|
||||
return "#00aa00"
|
||||
} else if (n == 3)
|
||||
{
|
||||
return "#00aaaa"
|
||||
} else if (n == 4)
|
||||
{
|
||||
return "#aa0000"
|
||||
} else if (n == 5)
|
||||
{
|
||||
return "#aa00aa"
|
||||
} else if (n == 6)
|
||||
{
|
||||
return "#aa5500"
|
||||
} else if (n == 7)
|
||||
{
|
||||
return "#aaaaaa"
|
||||
}
|
||||
}
|
||||
|
||||
function sleep(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
|
||||
</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>
|
||||
285
purcell2.html
Normal file
285
purcell2.html
Normal file
@@ -0,0 +1,285 @@
|
||||
|
||||
<!--
|
||||
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>
|
||||
Waves: Purcell
|
||||
</title>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.slideContainer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#countdown {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
font-size: 150px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
</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>
|
||||
<t id="countdown"></t>
|
||||
<div class="slidecontainer">
|
||||
<t>X</t>
|
||||
<input type="range" min="0" max="0.95" value="0.4" step = ".05" id="xSlider">
|
||||
<t>Number of rays</t>
|
||||
<input type="range" min="10" max="50" value="20" step = "1" id="nSlider">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
ctx.canvas.width = window.innerWidth;
|
||||
ctx.canvas.height = window.innerHeight;
|
||||
|
||||
var v = 0.4;
|
||||
var gaminv = Math.sqrt(1 - v ** 2);
|
||||
var rmax = 500 / gaminv;
|
||||
var n = 20;
|
||||
var scrwidth = c.width / 3;
|
||||
var dr = 1.5;
|
||||
var mm = 600 / dr / v;
|
||||
var dth = .01;
|
||||
var tg = 0;
|
||||
var theta = 0;
|
||||
var mInit = -100;
|
||||
var m = -100;
|
||||
var xPos = 0;
|
||||
var yPos = 0;
|
||||
var xSlider = document.getElementById("xSlider");
|
||||
|
||||
xSlider.oninput = function()
|
||||
{
|
||||
v = parseFloat(this.value);
|
||||
gaminv = Math.sqrt(1 - v ** 2);
|
||||
rmax = 500 / gaminv;
|
||||
m = mInit;
|
||||
}
|
||||
|
||||
nSlider.oninput = function()
|
||||
{
|
||||
n = parseFloat(this.value);
|
||||
}
|
||||
|
||||
function fnatn(s, c)
|
||||
{
|
||||
if (c > 0)
|
||||
{
|
||||
return Math.atan(s / c);
|
||||
}
|
||||
if (c == 0)
|
||||
{
|
||||
return Math.PI / 2;
|
||||
}
|
||||
if (c < 0)
|
||||
{
|
||||
return Math.PI - Math.atan(-s / c);
|
||||
}
|
||||
}
|
||||
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
|
||||
ctx.scale(1.5, -1.5);
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
m += 1;
|
||||
if (m < 0)
|
||||
{
|
||||
document.getElementById("countdown").textContent = (Math.ceil((-m) / 60)).toString();
|
||||
}
|
||||
if (m == 0)
|
||||
{
|
||||
document.getElementById("countdown").textContent = "";
|
||||
}
|
||||
setTimeout(Update, 1000/60);
|
||||
}
|
||||
|
||||
Update();
|
||||
|
||||
function Draw()
|
||||
{
|
||||
r = -scrwidth / v + scrwidth / 3;
|
||||
tt = 5;
|
||||
if (m > 0)
|
||||
{
|
||||
r = m - scrwidth / v + scrwidth / 3;
|
||||
}
|
||||
rp = r + tt;
|
||||
if (rp > rmax)
|
||||
{
|
||||
m = mInit;
|
||||
}
|
||||
if (r < 0)
|
||||
{
|
||||
//ctx.strokeStyle = "#ff0000";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + v * r - scrwidth / 3, yPos);
|
||||
ctx.lineTo(xPos + rmax - scrwidth / 3, yPos);
|
||||
ctx.stroke();
|
||||
if ((n / 2) - Math.floor(n / 2) == 0)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + v * r - scrwidth / 3, yPos);
|
||||
ctx.lineTo(xPos + -rmax - scrwidth / 3, yPos);
|
||||
ctx.stroke();
|
||||
}
|
||||
} else
|
||||
{
|
||||
//ctx.strokeStyle = "#000000";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos - scrwidth / 3, yPos);
|
||||
ctx.lineTo(xPos + rmax - scrwidth / 3, yPos);
|
||||
ctx.stroke();
|
||||
if ((n / 2) - Math.floor(n / 2) == 0)
|
||||
{
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos - scrwidth / 3, yPos);
|
||||
ctx.lineTo(xPos + -rmax - scrwidth / 3, yPos);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
for (j = 1; j <= (n - 1) / 2; j++)
|
||||
{
|
||||
theta = 2 * Math.PI * j / n;
|
||||
cost = Math.cos(theta)
|
||||
sint = Math.sin(theta)
|
||||
costp = (cost + v) / (1 + v * cost)
|
||||
sintp = gaminv * sint / (1 + v * cost)
|
||||
thetap = fnatn(sintp, costp)
|
||||
ctx.strokeStyle = Colorify((j % 5) + 3);
|
||||
if (r < 0)
|
||||
{
|
||||
//ctx.strokeStyle = "#00ff00";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + v * r - scrwidth / 3, yPos);
|
||||
ctx.lineTo(xPos + rmax * cost * gaminv + v * r - scrwidth / 3, yPos + rmax * sint);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + v * r - scrwidth / 3, yPos);
|
||||
ctx.lineTo(xPos + rmax * cost * gaminv + v * r - scrwidth / 3, yPos - rmax * sint);
|
||||
ctx.stroke();
|
||||
} else
|
||||
{
|
||||
//ctx.strokeStyle = "#ff00ff";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos - scrwidth / 3, yPos);
|
||||
ctx.lineTo(xPos + r * cost - scrwidth / 3, yPos + r * sint);
|
||||
ctx.stroke();
|
||||
//ctx.strokeStyle = "#ffff00";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + rp * costp - scrwidth / 3, yPos + rp * sintp);
|
||||
ctx.lineTo(xPos + rmax * cost * gaminv + v * r - scrwidth / 3, yPos + rmax * sint);
|
||||
ctx.stroke();
|
||||
//ctx.strokeStyle = "#ff00ff";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos - scrwidth / 3, yPos);
|
||||
ctx.lineTo(xPos + r * cost - scrwidth / 3, yPos - r * sint);
|
||||
ctx.stroke();
|
||||
//ctx.strokeStyle = "#ffff00";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + rp * costp - scrwidth / 3, yPos - rp * sintp);
|
||||
ctx.lineTo(xPos + rmax * cost * gaminv + v * r - scrwidth / 3, yPos - rmax * sint);
|
||||
ctx.stroke();
|
||||
if (theta - thetap > dth)
|
||||
{
|
||||
//ctx.strokeStyle = "#0000ff";
|
||||
console.log(thetap);
|
||||
console.log(theta);
|
||||
for (thj = thetap; thj <= theta; thj += dth)
|
||||
{
|
||||
rr1 = rp - tt * (thj - thetap) / (theta - thetap);
|
||||
rr2 = rr1 - tt * dth / (theta - thetap);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + rr1 * Math.cos(thj) - scrwidth / 3, yPos + rr1 * Math.sin(thj));
|
||||
ctx.lineTo(xPos + rr2 * Math.cos(thj + dth) - scrwidth / 3, yPos + rr2 * Math.sin(thj + dth));
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + rr1 * Math.cos(thj) - scrwidth / 3, yPos - rr1 * Math.sin(thj));
|
||||
ctx.lineTo(xPos + rr2 * Math.cos(thj + dth) - scrwidth / 3, yPos - rr2 * Math.sin(thj + dth));
|
||||
ctx.stroke();
|
||||
rr1 = rr2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(1.5, -1.5);
|
||||
scrwidth = c.width / 3;
|
||||
}, true);
|
||||
|
||||
function Colorify(n)
|
||||
{
|
||||
if (n == 0)
|
||||
{
|
||||
return "#000000"
|
||||
} else if (n == 1)
|
||||
{
|
||||
return "#0000aa"
|
||||
} else if (n == 2)
|
||||
{
|
||||
return "#00aa00"
|
||||
} else if (n == 3)
|
||||
{
|
||||
return "#00aaaa"
|
||||
} else if (n == 4)
|
||||
{
|
||||
return "#aa0000"
|
||||
} else if (n == 5)
|
||||
{
|
||||
return "#aa00aa"
|
||||
} else if (n == 6)
|
||||
{
|
||||
return "#aa5500"
|
||||
} else if (n == 7)
|
||||
{
|
||||
return "#aaaaaa"
|
||||
}
|
||||
}
|
||||
|
||||
function sleep(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
|
||||
</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>
|
||||
323
rainbow.html
Normal file
323
rainbow.html
Normal file
@@ -0,0 +1,323 @@
|
||||
<!--
|
||||
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>
|
||||
Waves: Rainbow
|
||||
</title>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slideContainer {
|
||||
position: relative;
|
||||
}
|
||||
</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>
|
||||
<form>
|
||||
<label for="red">Red</label>
|
||||
<input type="checkbox" id="red" onclick="redClick()">
|
||||
<br>
|
||||
<label for="blue">Blue</label>
|
||||
<input type="checkbox" id="blue" onclick="blueClick()">
|
||||
<br>
|
||||
<label for="lines">Rainbow angle</label>
|
||||
<input type="checkbox" id="lines" onclick="linesClick()">
|
||||
</form>
|
||||
<div class="slidecontainer">
|
||||
<t>Ray density</t>
|
||||
<input type="range" min="0.25" max="2.5" value="0.5" step = "0.01" id="slider">
|
||||
<br>
|
||||
<t>X position</t>
|
||||
<input type="range" min="-120" max="120" value="0" step = "1" id="xSlider">
|
||||
<br>
|
||||
<t>Y position</t>
|
||||
<input type="range" min="-120" max="120" value="0" step = "1" id="ySlider">
|
||||
<br>
|
||||
<t>Zoom</t>
|
||||
<input type="range" min="-10" max="10" value="0" step = "1" id="zSlider">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
ctx.canvas.width = window.innerWidth;
|
||||
ctx.canvas.height = window.innerHeight;
|
||||
|
||||
var nn = 1.35;
|
||||
var r = 75;
|
||||
var cl4 = "#ff0000";
|
||||
var cl17 = "#0000ff";
|
||||
var cl15 = "#000000";
|
||||
var red = false;
|
||||
var blue = false;
|
||||
var dtog = 0;
|
||||
var x0 = 0;
|
||||
var y0 = 0;
|
||||
var dy = 10;
|
||||
var nnn = 50;
|
||||
var xPos = 0;
|
||||
var yPos = 0;
|
||||
var slider = document.getElementById("slider");
|
||||
var xSlider = document.getElementById("xSlider");
|
||||
var ySlider = document.getElementById("ySlider");
|
||||
var density = 0.05;
|
||||
|
||||
slider.oninput = function()
|
||||
{
|
||||
density = this.value / 10;
|
||||
}
|
||||
|
||||
xSlider.oninput = function()
|
||||
{
|
||||
x0 = parseFloat(this.value);
|
||||
}
|
||||
|
||||
ySlider.oninput = function()
|
||||
{
|
||||
y0 = parseFloat(this.value);
|
||||
}
|
||||
|
||||
zSlider.oninput = function()
|
||||
{
|
||||
r = Math.pow(1.5, this.value) * 75;
|
||||
if (r < 50)
|
||||
{
|
||||
x0 = 2.5 * (50 - r);
|
||||
y0 = 1.8 * (50 - r);
|
||||
} else
|
||||
{
|
||||
x0 = 0;
|
||||
y0 = 0;
|
||||
}
|
||||
btog = 1;
|
||||
Clear(ctx);
|
||||
}
|
||||
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
|
||||
ctx.scale(1.5, -1.5);
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
btog = 0;
|
||||
ctx.strokeStyle = "#000000";
|
||||
for (n = 0; n <= 101; n++)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + x0 + r * Math.cos(Math.PI * n / nnn), yPos + y0 + r * Math.sin(Math.PI * n / nnn));
|
||||
ctx.lineTo(xPos + x0 + r * Math.cos(Math.PI * (n + 1) / nnn), yPos + y0 + r * Math.sin(Math.PI * (n + 1) / nnn));
|
||||
ctx.stroke();
|
||||
}
|
||||
for (h2 = 0; h2 <= 1; h2 += density)
|
||||
{
|
||||
if (red)
|
||||
{
|
||||
rline(r * h2, 1.332, cl4);
|
||||
}
|
||||
if (blue)
|
||||
{
|
||||
rline(r * h2, 1.35, cl17);
|
||||
}
|
||||
}
|
||||
if (btog == 1)
|
||||
{
|
||||
Clear(ctx);
|
||||
}
|
||||
if (dtog == 1)
|
||||
{
|
||||
//rline(r, 1.332, cl15);
|
||||
rrline(r, 1.332, cl15);
|
||||
//rline(r, 1.350, cl15);
|
||||
rrline(r, 1.350, cl15);
|
||||
}
|
||||
setTimeout(Update, 1000/60);
|
||||
}
|
||||
|
||||
function rline(h, nn, cl)
|
||||
{
|
||||
if (h < r)
|
||||
{
|
||||
th = Math.atan(h / Math.sqrt(Math.pow(r, 2) - Math.pow(h, 2)));
|
||||
} else
|
||||
{
|
||||
th = Math.PI / 2;
|
||||
}
|
||||
sth = h/r;
|
||||
thp = Math.atan(sth / nn / Math.sqrt(1 - sth * sth / nn / nn));
|
||||
console.log(thp);
|
||||
console.log(Math.asin(sth / nn));
|
||||
ctx.strokeStyle = cl;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-c.width, yPos + y0 + h);
|
||||
ctx.lineTo(xPos + x0 - Math.sqrt(r * r - h * h), yPos + y0 + h);
|
||||
ctx.stroke();
|
||||
xi1 = Math.PI + th - 2 * thp;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + x0 - r * Math.cos(xi1), yPos + y0 + r * Math.sin(xi1));
|
||||
ctx.lineTo(xPos + x0 - Math.sqrt(r * r - h * h), yPos + y0 + h);
|
||||
ctx.stroke();
|
||||
xi2 = th - 4 * thp;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + x0 - r * Math.cos(xi1), yPos + y0 + r * Math.sin(xi1));
|
||||
ctx.lineTo(xPos + x0 - r * Math.cos(xi2), yPos + y0 + r * Math.sin(xi2));
|
||||
ctx.stroke();
|
||||
xi3 = xi2 + th;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + x0 - r * Math.cos(xi2) - 350 * Math.cos(xi3), yPos + y0 + r * Math.sin(xi2) + 350 * Math.sin(xi3));
|
||||
ctx.lineTo(xPos + x0 - r * Math.cos(xi2), yPos + y0 + r * Math.sin(xi2));
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
function rrline(h, nn, cl)
|
||||
{
|
||||
sthp = 1/3/nn*3 ** (1/2) * (4 - nn ** 2) ** (1/2);
|
||||
thp = Math.atan(sthp / Math.sqrt(1 - sthp ** 2));
|
||||
sth = nn * sthp;
|
||||
th = Math.atan(sth / Math.sqrt(1 - sth ** 2));
|
||||
xi3 = 2 * th - 4 * thp;
|
||||
sthp1 = 1/15/nn * 15 ** (1/2) * (16 - nn ** 2) ** (1/2);
|
||||
thp1 = Math.atan(sthp1 / Math.sqrt(1 - sthp1 ** 2));
|
||||
sth1 = nn * sthp1;
|
||||
th1 = Math.atan(sth1 / Math.sqrt(1 - sth1 ** 2));
|
||||
xi2 = th1 - 4 * thp1;
|
||||
ctx.strokeStyle = cl;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + x0 - r * Math.cos(xi2) - 30 * Math.cos(xi3), yPos + y0 + r * Math.sin(xi2) + 30 * Math.sin(xi3));
|
||||
ctx.lineTo(xPos + x0 - r * Math.cos(xi2) - 350 * Math.cos(xi3), yPos + y0 + r * Math.sin(xi2) + 350 * Math.sin(xi3));
|
||||
ctx.stroke();
|
||||
console.log(Math.cos(th), Math.cos(thp) * nn / 2)
|
||||
}
|
||||
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(1.5, -1.5);
|
||||
}, true);
|
||||
|
||||
document.onkeydown = checkKey;
|
||||
|
||||
function checkKey(e) {
|
||||
|
||||
e = e || window.event;
|
||||
|
||||
if (e.keyCode == '38') {
|
||||
yplus();
|
||||
}
|
||||
else if (e.keyCode == '40') {
|
||||
yminus();
|
||||
}
|
||||
else if (e.keyCode == '37') {
|
||||
xminus();
|
||||
}
|
||||
else if (e.keyCode == '39') {
|
||||
xplus();
|
||||
}
|
||||
else if (e.keyCode == '49') {
|
||||
//togglec();
|
||||
}
|
||||
else if (e.keyCode == '50') {
|
||||
toggled();
|
||||
}
|
||||
else if (e.keyCode == '51') {
|
||||
//togglee();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function redClick()
|
||||
{
|
||||
checkBox = document.getElementById("red");
|
||||
red = checkBox.checked;
|
||||
Clear(ctx);
|
||||
}
|
||||
|
||||
function blueClick()
|
||||
{
|
||||
checkBox = document.getElementById("blue");
|
||||
blue = checkBox.checked;
|
||||
Clear(ctx);
|
||||
}
|
||||
|
||||
function linesClick()
|
||||
{
|
||||
checkBox = document.getElementById("blue");
|
||||
dtog = 1 - dtog;
|
||||
Clear(ctx);
|
||||
}
|
||||
|
||||
function toggled()
|
||||
{
|
||||
console.log("toggled");
|
||||
dtog = 1 - dtog;
|
||||
btog = 1;
|
||||
Clear(ctx);
|
||||
}
|
||||
|
||||
function zoomPlus()
|
||||
{
|
||||
r *= 1.5;
|
||||
if (r < 50)
|
||||
{
|
||||
x0 = 2.5 * (50 - r);
|
||||
y0 = 1.8 * (50 - r);
|
||||
} else
|
||||
{
|
||||
x0 = 0;
|
||||
y0 = 0;
|
||||
}
|
||||
btog = 1;
|
||||
Clear(ctx);
|
||||
}
|
||||
|
||||
function zoomMinus()
|
||||
{
|
||||
r /= 1.5;
|
||||
if (r < 50)
|
||||
{
|
||||
x0 = 2.5 * (50 - r);
|
||||
y0 = 1.8 * (50 - r);
|
||||
} else
|
||||
{
|
||||
x0 = 0;
|
||||
y0 = 0;
|
||||
}
|
||||
btog = 1;
|
||||
Clear(ctx);
|
||||
}
|
||||
|
||||
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>
|
||||
343
rainbow2.html
Normal file
343
rainbow2.html
Normal file
@@ -0,0 +1,343 @@
|
||||
<!--
|
||||
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>
|
||||
Waves: Rainbow 2
|
||||
</title>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slideContainer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
</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>
|
||||
<form>
|
||||
<label for="red">Red</label>
|
||||
<input type="checkbox" id="red" onclick="redClick()">
|
||||
<br>
|
||||
<label for="blue">Blue</label>
|
||||
<input type="checkbox" id="blue" onclick="blueClick()">
|
||||
</form>
|
||||
<div class="slidecontainer">
|
||||
<t>Ray density</t>
|
||||
<input type="range" min="0.09" max="0.2" value="0.14" step = "0.003" id="slider">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
class Vector2 {
|
||||
constructor (x, y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
}
|
||||
|
||||
scale(n)
|
||||
{
|
||||
this.x *= n;
|
||||
this.y *= n;
|
||||
}
|
||||
|
||||
get len()
|
||||
{
|
||||
return this.calcLen();
|
||||
}
|
||||
|
||||
calcLen()
|
||||
{
|
||||
return (Math.sqrt(this.x * this.x + this.y * this.y));
|
||||
}
|
||||
}
|
||||
|
||||
class Circle {
|
||||
constructor (x, y, r)
|
||||
{
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.r = r;
|
||||
}
|
||||
}
|
||||
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
ctx.canvas.width = window.innerWidth;
|
||||
ctx.canvas.height = window.innerHeight;
|
||||
|
||||
var nn = 1.35;
|
||||
var r = 25;
|
||||
var cl4 = "#ff0000";
|
||||
var cl17 = "#0000ff";
|
||||
var cl15 = "#000000";
|
||||
var red = false;
|
||||
var blue = false;
|
||||
var dtog = 0;
|
||||
var x0 = 0;
|
||||
var y0 = 60;
|
||||
var x1 = 0;
|
||||
var y1 = -60;
|
||||
var dy = 10;
|
||||
var nnn = 50;
|
||||
var maxSteps = 18000;
|
||||
var reflections = 0;
|
||||
var maxReflections = 1;
|
||||
var step = r / 10;
|
||||
var xPos = 0;
|
||||
var yPos = 0;
|
||||
var red = false;
|
||||
var blue = false;
|
||||
var density = 0.14;
|
||||
var circles = [];
|
||||
|
||||
slider.oninput = function()
|
||||
{
|
||||
density = parseFloat(this.value);
|
||||
console.log(density);
|
||||
Update();
|
||||
}
|
||||
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
|
||||
ctx.scale(1.5, -1.5);
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + x0, yPos + y0, r, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
circles.push(new Circle(x0, y0, r));
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + x1, yPos + y1, r, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
ctx.scale(1, -1);
|
||||
ctx.fillText("Light from one reflection", -150, -30);
|
||||
ctx.fillText("Light from two reflections", -50, 130);
|
||||
ctx.fillText("Dark band", -155, 140);
|
||||
ctx.scale(1, -1);
|
||||
circles.push(new Circle(x1, y1, r));
|
||||
for (h2 = 0; h2 <= 1; h2 += density)
|
||||
{
|
||||
if (h2 != 0 && h2 < 0.99999)
|
||||
{
|
||||
if (red)
|
||||
{
|
||||
maxReflections = 1;
|
||||
Ray(new Vector2(1 - c.width, h2 * r + y0), new Vector2(1, 0), 1, 1.332, "#ff0000");
|
||||
maxReflections = 2;
|
||||
Ray(new Vector2(1 - c.width, - h2 * r + y1), new Vector2(1, 0), 1, 1.332, "#ff0000");
|
||||
}
|
||||
if (blue)
|
||||
{
|
||||
maxReflections = 1;
|
||||
Ray(new Vector2(1 - c.width, h2 * r + y0), new Vector2(1, 0), 1, 1.35, "#0000ff");
|
||||
maxReflections = 2;
|
||||
Ray(new Vector2(1 - c.width, - h2 * r + y1), new Vector2(1, 0), 1, 1.35, "#0000ff");
|
||||
}
|
||||
}
|
||||
}
|
||||
/*Ray(new Vector2(1 - c.width, 2 * r / 3 + y0), new Vector2(1, 0.00), 1, 1.332, "#ff0000");
|
||||
//Ray(new Vector2(r / 2, c.height - 1), new Vector2(-0.03, -1), 0.1, 1.332, "#ff0000");
|
||||
Ray(new Vector2(1 - c.width, 2 * r / 3 + y0), new Vector2(1, 0.00), 1, 1.35, "#0000ff");
|
||||
maxReflections = 2;
|
||||
Ray(new Vector2(1 - c.width, - 15 * r / 16 + y1), new Vector2(1, 0.00), 1, 1.332, "#ff0000");
|
||||
//Ray(new Vector2(r / 2, c.height - 1), new Vector2(-0.03, -1), 0.1, 1.332, "#ff0000");
|
||||
Ray(new Vector2(1 - c.width, - 15 * r / 16 + y1), new Vector2(1, 0.00), 1, 1.35, "#0000ff");
|
||||
//setTimeout(Update, 1000/60);*/
|
||||
}
|
||||
|
||||
function Ray(startPos, startDir, distStep, nCircle, color)
|
||||
{
|
||||
pos = startPos;
|
||||
dir = startDir;
|
||||
n = 1;
|
||||
nLastStep = 1;
|
||||
nSteps = 0;
|
||||
reflections = 0;
|
||||
circlePos = new Vector2(0, 0);
|
||||
for (i = 0; i < circles.length; i++)
|
||||
{
|
||||
dist = Math.sqrt(Math.pow(pos.x - circles[i].x, 2) + Math.pow(pos.y - circles[i].y, 2));
|
||||
if (dist < r)
|
||||
{
|
||||
n = nCircle;
|
||||
circlePos = new Vector2(circles[i].x, circles[i].y);
|
||||
}
|
||||
}
|
||||
while (Math.abs(pos.x) <= c.width && Math.abs(pos.y) <= c.height && nSteps <= maxSteps)
|
||||
{
|
||||
nSteps += 1;
|
||||
|
||||
nCurrent = 1;
|
||||
for (i = 0; i < circles.length; i++)
|
||||
{
|
||||
dist = Math.sqrt(Math.pow(pos.x - circles[i].x, 2) + Math.pow(pos.y - circles[i].y, 2));
|
||||
if (dist < r)
|
||||
{
|
||||
nCurrent = nCircle;
|
||||
circlePos = new Vector2(circles[i].x, circles[i].y);
|
||||
}
|
||||
}
|
||||
if (nCurrent != n && nCurrent != nLastStep)
|
||||
{
|
||||
if (nCurrent < n && reflections < maxReflections)
|
||||
{
|
||||
dir = calculateReflectedDir(dir, pos, n, nCurrent, circlePos);
|
||||
reflections += 1;
|
||||
} else
|
||||
{
|
||||
dir = calculateRefractedDir(dir, pos, n, nCurrent, circlePos);
|
||||
}
|
||||
//console.log(dir, nCurrent, nSteps);
|
||||
}
|
||||
nLastStep = n;
|
||||
n = nCurrent;
|
||||
ctx.strokeStyle = color;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(pos.x, pos.y);
|
||||
ctx.lineTo(pos.x + dir.x * distStep, pos.y + dir.y * distStep);
|
||||
ctx.stroke();
|
||||
pos.x += dir.x * distStep;
|
||||
pos.y += dir.y * distStep;
|
||||
}
|
||||
}
|
||||
|
||||
function calculateRefractedDir(dir, pos, n1, n2, cPos)
|
||||
{
|
||||
//console.log("recalc");
|
||||
posToCircle = new Vector2(pos.x - cPos.x, pos.y - cPos.y);
|
||||
circleNormal = new Vector2(-posToCircle.x / posToCircle.len, -posToCircle.y / posToCircle.len);
|
||||
/*ctx.strokeStyle = "#000000";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(pos.x + circleNormal.x * 10, pos.y + circleNormal.y * 10);
|
||||
ctx.lineTo(pos.x - circleNormal.x * 10, pos.y - circleNormal.y * 10);
|
||||
ctx.stroke();*/
|
||||
if (n1 > n2)
|
||||
{
|
||||
circleNormal.x *= -1;
|
||||
circleNormal.y *= -1;
|
||||
}
|
||||
theta1 = Math.acos((dir.x * circleNormal.x + dir.y * circleNormal.y) / (dir.len * circleNormal.len));
|
||||
theta2 = Math.asin(n1 * Math.sin(theta1) / n2);
|
||||
angle = theta2 - theta1;
|
||||
angleDiff = polarCoords(dir).y - polarCoords(new Vector2(circleNormal.x, circleNormal.y)).y;
|
||||
//console.log("calculate", angleDiff);
|
||||
if (Math.abs(angleDiff) > 90)
|
||||
{
|
||||
angleDiff *= -1;
|
||||
}
|
||||
if (angleDiff < 0)
|
||||
{
|
||||
//console.log("flipr")
|
||||
angle *= -1;
|
||||
}
|
||||
//console.log(angle, dir.x, dir.y, posToCircle.x, posToCircle.y, theta1, theta2);
|
||||
return new Vector2(dir.x * Math.cos(angle) - dir.y * Math.sin(angle), dir.x * Math.sin(angle) + dir.y * Math.cos(angle));
|
||||
}
|
||||
|
||||
function calculateReflectedDir(dir, pos, n1, n2, cPos)
|
||||
{
|
||||
//console.log("reflect");
|
||||
posToCircle = new Vector2(pos.x - cPos.x, pos.y - cPos.y);
|
||||
circleNormal = new Vector2(-posToCircle.x / posToCircle.len, -posToCircle.y / posToCircle.len);
|
||||
ctx.strokeStyle = "#000000";
|
||||
/*ctx.beginPath();
|
||||
ctx.moveTo(pos.x + circleNormal.x * 10, pos.y + circleNormal.y * 10);
|
||||
ctx.lineTo(pos.x - circleNormal.x * 10, pos.y - circleNormal.y * 10);
|
||||
ctx.stroke();*/
|
||||
if (n1 > n2)
|
||||
{
|
||||
circleNormal.x *= -1;
|
||||
circleNormal.y *= -1;
|
||||
}
|
||||
theta1 = Math.acos((dir.x * circleNormal.x + dir.y * circleNormal.y) / (dir.len * circleNormal.len));
|
||||
angle = Math.PI - 2 * theta1
|
||||
angleDiff = polarCoords(dir).y - polarCoords(new Vector2(circleNormal.x, circleNormal.y)).y;
|
||||
//console.log("calculate", angleDiff);
|
||||
if (Math.abs(angleDiff) > 90)
|
||||
{
|
||||
angleDiff *= -1;
|
||||
}
|
||||
if (angleDiff < 0)
|
||||
{
|
||||
//console.log("flipr")
|
||||
angle *= -1;
|
||||
}
|
||||
//console.log(angle, dir.x, dir.y, posToCircle.x, posToCircle.y);
|
||||
return new Vector2(dir.x * Math.cos(angle) - dir.y * Math.sin(angle), dir.x * Math.sin(angle) + dir.y * Math.cos(angle));
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(1.5, -1.5);
|
||||
Update();
|
||||
}, true);
|
||||
|
||||
function polarCoords(pos)
|
||||
{
|
||||
theta = Math.atan(pos.y / pos.x);
|
||||
if (pos.x < 0)
|
||||
{
|
||||
theta += Math.PI;
|
||||
}
|
||||
if (theta < 0)
|
||||
{
|
||||
theta += Math.PI * 2;
|
||||
}
|
||||
return new Vector2(pos.len, theta * 180 / Math.PI);
|
||||
}
|
||||
|
||||
function redClick()
|
||||
{
|
||||
checkBox = document.getElementById("red");
|
||||
red = checkBox.checked;
|
||||
Clear(ctx);
|
||||
Update();
|
||||
}
|
||||
|
||||
function blueClick()
|
||||
{
|
||||
checkBox = document.getElementById("blue");
|
||||
blue = checkBox.checked;
|
||||
Clear(ctx);
|
||||
Update();
|
||||
}
|
||||
|
||||
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>
|
||||
BIN
upArrow.png
Normal file
BIN
upArrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
264
water20.html
Normal file
264
water20.html
Normal file
@@ -0,0 +1,264 @@
|
||||
<!--
|
||||
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>
|
||||
Waves: Water20
|
||||
</title>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slideContainer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slider {
|
||||
width: 150px;
|
||||
-webkit-appearance: none;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background-color: rgb(0, 0, 255);
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 10px;
|
||||
background-color: rgb(200, 200, 200);
|
||||
overflow: visible;
|
||||
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>
|
||||
<form>
|
||||
<label for="toggle">Water particles</label>
|
||||
<input type="checkbox" id="toggle" onclick="tClick()">
|
||||
<br>
|
||||
<label for="mtoggle">Swimmer</label>
|
||||
<input type="checkbox" id="mtoggle" onclick="mtClick()">
|
||||
<br>
|
||||
<label for="ttoggle">Swimmer's path</label>
|
||||
<input type="checkbox" id="ttoggle" onclick="ttClick()">
|
||||
</form>
|
||||
<div class="slidecontainer">
|
||||
<t>Amplitude</t>
|
||||
<input type="range" min="0" max="180" value="50" id="ampSlider" class = "slider">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
ctx.canvas.width = window.innerWidth;
|
||||
ctx.canvas.height = window.innerHeight;
|
||||
|
||||
var asp = 1;
|
||||
var scrwidth = 1280;
|
||||
console.log(scrwidth);
|
||||
var ampSlider = document.getElementById("ampSlider");
|
||||
var h = 70;
|
||||
var nxb = 3;
|
||||
var nyb = 3;
|
||||
var modex = 1;
|
||||
var modey = 1;
|
||||
var ell = 100;
|
||||
var c = .2;
|
||||
var dt = .1;
|
||||
var nn = 60;
|
||||
var kw = 20;
|
||||
var k = kw / 2.2 / scrwidth;
|
||||
var depth = 120;
|
||||
var htn = (Math.exp(k * depth) - Math.exp(-k * depth)) / (Math.exp(k * depth) + Math.exp(-k * depth));
|
||||
var t = 0;
|
||||
var m = 1;
|
||||
var xPos = 0;
|
||||
var yPos = -100;
|
||||
var toggle = false;
|
||||
var mtoggle = false;
|
||||
var trace = false;
|
||||
|
||||
ampSlider.oninput = function()
|
||||
{
|
||||
h = this.value;
|
||||
if (h > 143)
|
||||
{
|
||||
document.getElementById("ampSlider").style.backgroundColor = "#ff0000";
|
||||
} else
|
||||
{
|
||||
document.getElementById("ampSlider").style.backgroundColor = "#0000ff";
|
||||
}
|
||||
}
|
||||
|
||||
function tClick()
|
||||
{
|
||||
checkBox = document.getElementById("toggle");
|
||||
toggle = checkBox.checked;
|
||||
Clear(ctx);
|
||||
}
|
||||
|
||||
function mtClick()
|
||||
{
|
||||
checkBox = document.getElementById("mtoggle");
|
||||
mtoggle = checkBox.checked;
|
||||
Clear(ctx);
|
||||
}
|
||||
|
||||
function ttClick()
|
||||
{
|
||||
checkBox = document.getElementById("ttoggle");
|
||||
trace = checkBox.checked;
|
||||
Clear(ctx);
|
||||
}
|
||||
|
||||
function vector(xv, yv, xvv, yvv, va, cl)
|
||||
{
|
||||
vl = ((xvv - xv) ** 2 + Math.pow(yvv - yv, 2)) ** (1/2);
|
||||
ctx.strokeStyle = cl;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + xv, yPos + yv);
|
||||
ctx.lineTo(xPos + xvv, yPos + yvv);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + xvv, yPos + yvv);
|
||||
ctx.lineTo(xPos + xvv - va / vl * (xvv - xv) + va / vl / 2 * (yvv - yv), yPos + yvv - va / vl * (yvv - yv) - va / vl / 2 * (xvv - xv));
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + xvv, yPos + yvv);
|
||||
ctx.lineTo(xPos + xvv - va / vl * (xvv - xv) - va / vl / 2 * (yvv - yv), yPos + yvv - va / vl * (yvv - yv) + va / vl / 2 * (xvv - xv));
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
ctx.translate(scrwidth / 2, ctx.canvas.height / 2);
|
||||
ctx.scale(1.5, -1.5);
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-scrwidth, -ctx.canvas.height, scrwidth * 2, ctx.canvas.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
m += 1;
|
||||
setTimeout(Update, 1000/45);
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
ctx.strokeStyle = "#0000ff";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-scrwidth, yPos);
|
||||
ctx.lineTo(scrwidth, yPos);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.fillRect(-1.1 * scrwidth - h * Math.sin(-t) + xPos, htn * h * Math.cos(-t) + depth + yPos, 1, 1);
|
||||
ctx.fill();
|
||||
for (jj = -1; jj <= nn + 2; jj++)
|
||||
{
|
||||
x = 1.1 * scrwidth * (-1 + 2 * jj / nn);
|
||||
xx = jj / nn * kw;
|
||||
ctx.strokeStyle = "#0000ff";
|
||||
ctx.lineTo(xPos + x - h * Math.sin(xx - t), yPos + htn * h * Math.cos(xx - t) + depth);
|
||||
}
|
||||
ctx.stroke();
|
||||
|
||||
hh = (h / Math.cosh(depth * k));
|
||||
for (y = -50; y <= depth - 50; y += 20)
|
||||
{
|
||||
cky = Math.cosh(k * (y + 50));
|
||||
sky = Math.sinh(k * (y + 50));
|
||||
for (x = -1.1 * scrwidth; x <= 3.1 * scrwidth; x += 20)
|
||||
{
|
||||
if (toggle)
|
||||
{
|
||||
ctx.fillStyle = "#000000";
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos + x - hh * Math.sin(k * x - t) * cky - 1.1 * scrwidth, yPos + y + 50 + hh * Math.cos(k * x - t) * sky, 1.5, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
}
|
||||
xx = kw / 2;
|
||||
if (mtoggle)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos -h * Math.sin(xx - t), yPos + htn * h * Math.cos(xx - t) + 3 + depth, 3, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
ctx.scale(1, 1.3);
|
||||
ctx.beginPath();
|
||||
ctx.arc(xPos -h * Math.sin(xx - t), yPos / 1.3 + 1/(1.3) * htn * h * Math.cos(xx - t) - 32 + depth, 3, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
ctx.scale(1, 1/(1.3));
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos - h * Math.sin(xx - t) - 3, yPos + htn * h * Math.cos(xx - t) - 2 + depth);
|
||||
ctx.lineTo(xPos - h * Math.sin(xx - t) - 7, yPos + htn * h * Math.cos(xx - t) + 2 + depth);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos - h * Math.sin(xx - t) + 3, yPos + htn * h * Math.cos(xx - t) - 2 + depth);
|
||||
ctx.lineTo(xPos - h * Math.sin(xx - t) + 7, yPos + htn * h * Math.cos(xx - t) + 2 + depth);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos - h * Math.sin(xx - t) + 2, yPos + htn * h * Math.cos(xx - t) - 11 + depth);
|
||||
ctx.lineTo(xPos - h * Math.sin(xx - t) + 4, yPos + htn * h * Math.cos(xx - t) - 16 + depth);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos - h * Math.sin(xx - t) - 2, yPos + htn * h * Math.cos(xx - t) - 11 + depth);
|
||||
ctx.lineTo(xPos - h * Math.sin(xx - t) - 4, yPos + htn * h * Math.cos(xx - t) - 16 + depth);
|
||||
ctx.stroke();
|
||||
}
|
||||
ctx.strokeStyle = "#ff0000";
|
||||
if (trace)
|
||||
{
|
||||
for (p = 0; p <= 101; p+= 0.1)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos -h * Math.sin(xx - p), yPos + htn * h * Math.cos(xx - p) - 4 + depth);
|
||||
ctx.lineTo(xPos -h * Math.sin(xx - (p+ 0.1)), yPos + htn * h * Math.cos(xx - (p + 0.1)) - 4 + depth);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
t += dt;
|
||||
ctx.strokeStyle = "#000000"
|
||||
vector(0, 0, 30, 0, 10, 13);
|
||||
vector(0, 0, 0, 30, 10, 13);
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
ctx.canvas.width = window.innerWidth;
|
||||
ctx.canvas.height = window.innerHeight;
|
||||
ctx.translate(scrwidth / 2, ctx.canvas.height / 2);
|
||||
ctx.scale(1.5, -1.5);
|
||||
k = kw / 2.2 / scrwidth;
|
||||
htn = (Math.exp(k * depth) - Math.exp(-k * depth)) / (Math.exp(k * depth) + Math.exp(-k * depth));
|
||||
}, 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>
|
||||
113
xray0.html
Normal file
113
xray0.html
Normal file
@@ -0,0 +1,113 @@
|
||||
<!--
|
||||
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>
|
||||
Waves X-ray
|
||||
</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");
|
||||
ctx.canvas.width = window.innerWidth;
|
||||
ctx.canvas.height = window.innerHeight;
|
||||
|
||||
var scrwidth = (c.width / 3);
|
||||
var lclr = ["#aa00aa", "#aa0000", "#ff5555", "#ffff55", "#55ff55","#00aa00", "#5555ff", "#0000aa"];
|
||||
var xPos = 0;
|
||||
var yPos = 00;
|
||||
var m = 1;
|
||||
var t0 = 0;
|
||||
/// ??? ///
|
||||
var th = 0;
|
||||
|
||||
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
|
||||
ctx.scale(1.5, -1.5);
|
||||
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Draw();
|
||||
m += 1;
|
||||
setTimeout(Update, 1000/60)
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
Clear(ctx);
|
||||
cth = Math.cos(th);
|
||||
sth = Math.sin(th);
|
||||
for (j = 0; j <= 21; j++)
|
||||
{
|
||||
ctx.strokeStyle = lclr[j % 8];
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + scrwidth * (j - 10.6) / 10, yPos - 150);
|
||||
ctx.lineTo(xPos + scrwidth * (j - 10.6) / 10, yPos + 100);
|
||||
ctx.stroke();
|
||||
ctx.scale(1, -1);
|
||||
ctx.scale(1, -1);
|
||||
}
|
||||
vector(-50, -25, 90, -25, 10, "#000000");
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(1.5, -1.5);
|
||||
}, true);
|
||||
|
||||
|
||||
function vector(xv, yv, xvv, yvv, va, cl)
|
||||
{
|
||||
vl = ((xvv - xv) ** 2 + Math.pow(yvv - yv, 2)) ** (1/2);
|
||||
ctx.strokeStyle = cl;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + xv, yPos + yv);
|
||||
ctx.lineTo(xPos + xvv, yPos + yvv);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + xvv, yPos + yvv);
|
||||
ctx.lineTo(xPos + xvv - va / vl * (xvv - xv) + va / vl / 2 * (yvv - yv), yPos + yvv - va / vl * (yvv - yv) - va / vl / 2 * (xvv - xv));
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + xvv, yPos + yvv);
|
||||
ctx.lineTo(xPos + xvv - va / vl * (xvv - xv) - va / vl / 2 * (yvv - yv), yPos + yvv - va / vl * (yvv - yv) + va / vl / 2 * (xvv - xv));
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
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>
|
||||
260
xray1.html
Normal file
260
xray1.html
Normal file
@@ -0,0 +1,260 @@
|
||||
<!--
|
||||
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>
|
||||
Waves: X-ray 1
|
||||
</title>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slideContainer {
|
||||
position: relative;
|
||||
}
|
||||
</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>
|
||||
<form id = "form">
|
||||
<label for="t1">Incoming planes of constant phase</label>
|
||||
<input type="checkbox" id="t1" onclick="t1Click()">
|
||||
<br>
|
||||
<label for="t2">Outgoing planes of constant phase</label>
|
||||
<input type="checkbox" id="t2" onclick="t2Click()">
|
||||
<br>
|
||||
<label for="t3">Atoms in the crystal</label>
|
||||
<input type="checkbox" id="t3" onclick="t3Click()">
|
||||
<br>
|
||||
<label for="t4">Incoming k-vector</label>
|
||||
<input type="checkbox" id="t4" onclick="t4Click()">
|
||||
<br>
|
||||
<label for="t5">Outgoing k-vector</label>
|
||||
<input type="checkbox" id="t5" onclick="t5Click()">
|
||||
<br>
|
||||
<label for="t6">Change in k-vector</label>
|
||||
<input type="checkbox" id="t6" onclick="t6Click()">
|
||||
</form>
|
||||
<div class="slidecontainer" id = "div">
|
||||
<t>Direction of incoming x-rays</t>
|
||||
<input type="range" min="-12" max="12" value="0" step = "0.1" id="xSlider">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
ctx.canvas.width = window.innerWidth;
|
||||
ctx.canvas.height = window.innerHeight;
|
||||
|
||||
var scrwidth = c.width / 3;
|
||||
var lclr = ["#aa00aa", "#aa0000", "#ff5555", "#ffff55", "#55ff55","#00aa00", "#5555ff", "#0000aa"];
|
||||
var t1 = false;
|
||||
var t2 = false;
|
||||
var t3 = false;
|
||||
var t4 = false;
|
||||
var t5 = false;
|
||||
var t6 = false;
|
||||
var dth = .05;
|
||||
var th = .525;
|
||||
var xPos = 0;
|
||||
var yPos = 0;
|
||||
var xSlider = document.getElementById("xSlider");
|
||||
var m = 1;
|
||||
|
||||
xSlider.oninput = function()
|
||||
{
|
||||
th = parseFloat(this.value);
|
||||
}
|
||||
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
|
||||
ctx.scale(1.5, -1.5);
|
||||
|
||||
function Clear(ctx)
|
||||
{
|
||||
ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
|
||||
}
|
||||
|
||||
function Update()
|
||||
{
|
||||
Clear(ctx);
|
||||
Draw();
|
||||
setTimeout(Update, 1000/60);
|
||||
}
|
||||
|
||||
function Draw()
|
||||
{
|
||||
cth = Math.cos(th);
|
||||
sth = Math.sin(th);
|
||||
ke = 300 * sth / cth * 25 / scrwidth;
|
||||
if (t3)
|
||||
{
|
||||
for (j = 0; j <= 50; j++)
|
||||
{
|
||||
for (k = -20; k <= 70; k++)
|
||||
{
|
||||
ctx.fillStyle = lclr[(j - k + 200) % 8];
|
||||
console.log(ctx.fillStyle);
|
||||
ctx.beginPath();
|
||||
ctx.arc(scrwidth * (j - 25) / 25, scrwidth / 25 / sth * (k - 25 - (j - 25) * cth), 2, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
if (t1)
|
||||
{
|
||||
for (j = 0; j <= 50; j++)
|
||||
{
|
||||
ctx.strokeStyle = lclr[j % 8];
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(scrwidth * (j - 25) / 25, c.height / 3);
|
||||
ctx.lineTo(scrwidth * (j - 25) / 25, -c.height / 3);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
if (t2)
|
||||
{
|
||||
for (j = -20; j <= 70; j++)
|
||||
{
|
||||
ctx.strokeStyle = lclr[(j + 200) % 8];
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(scrwidth * (j - 25) / 25 / cth + 150 * sth / cth, c.height / 3);
|
||||
ctx.lineTo(scrwidth * (j - 25) / 25 / cth - 150 * sth / cth, -c.height / 3);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
if (t4)
|
||||
{
|
||||
vector(0, 0, 100, 0, 8, "#000000");
|
||||
}
|
||||
if (t5)
|
||||
{
|
||||
vector(0, 0, 100 * Math.cos(th), 100 * Math.sin(th), 8, "#000000");
|
||||
}
|
||||
if (t6)
|
||||
{
|
||||
vector(0, 0, 100 * (1 - Math.cos(th)), -100 * Math.sin(th), 8, "#000000");
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
c.width = window.innerWidth;
|
||||
c.height = window.innerHeight;
|
||||
ctx.translate(c.width / 2, c.height / 2);
|
||||
ctx.scale(1.5, -1.5);
|
||||
scrwidth = c.width / 3;
|
||||
}, true);
|
||||
|
||||
document.onkeydown = checkKey;
|
||||
|
||||
function checkKey(e) {
|
||||
|
||||
e = e || window.event;
|
||||
|
||||
if (e.keyCode == '38') {
|
||||
htmlHide();
|
||||
}
|
||||
}
|
||||
|
||||
function htmlHide()
|
||||
{
|
||||
var x = document.getElementById("form");
|
||||
if (x.style.display === "none") {
|
||||
x.style.display = "block";
|
||||
} else {
|
||||
x.style.display = "none";
|
||||
}
|
||||
x = document.getElementById("div");
|
||||
if (x.style.display === "none") {
|
||||
x.style.display = "block";
|
||||
} else {
|
||||
x.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
function t1Click()
|
||||
{
|
||||
checkBox = document.getElementById("t1");
|
||||
t1 = checkBox.checked;
|
||||
Clear(ctx);
|
||||
}
|
||||
|
||||
function t2Click()
|
||||
{
|
||||
checkBox = document.getElementById("t2");
|
||||
t2 = checkBox.checked;
|
||||
Clear(ctx);
|
||||
}
|
||||
|
||||
function t3Click()
|
||||
{
|
||||
checkBox = document.getElementById("t3");
|
||||
t3 = checkBox.checked;
|
||||
Clear(ctx);
|
||||
}
|
||||
|
||||
function t4Click()
|
||||
{
|
||||
checkBox = document.getElementById("t4");
|
||||
t4 = checkBox.checked;
|
||||
Clear(ctx);
|
||||
}
|
||||
|
||||
function t5Click()
|
||||
{
|
||||
checkBox = document.getElementById("t5");
|
||||
t5 = checkBox.checked;
|
||||
Clear(ctx);
|
||||
}
|
||||
|
||||
function t6Click()
|
||||
{
|
||||
checkBox = document.getElementById("t6");
|
||||
t6 = checkBox.checked;
|
||||
Clear(ctx);
|
||||
}
|
||||
|
||||
function vector(xv, yv, xvv, yvv, va, cl)
|
||||
{
|
||||
vl = ((xvv - xv) ** 2 + Math.pow(yvv - yv, 2)) ** (1/2);
|
||||
ctx.strokeStyle = cl;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + xv, yPos + yv);
|
||||
ctx.lineTo(xPos + xvv, yPos + yvv);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + xvv, yPos + yvv);
|
||||
ctx.lineTo(xPos + xvv - va / vl * (xvv - xv) + va / vl / 2 * (yvv - yv), yPos + yvv - va / vl * (yvv - yv) - va / vl / 2 * (xvv - xv));
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xPos + xvv, yPos + yvv);
|
||||
ctx.lineTo(xPos + xvv - va / vl * (xvv - xv) - va / vl / 2 * (yvv - yv), yPos + yvv - va / vl * (yvv - yv) + va / vl / 2 * (xvv - xv));
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user