Added the rest of the files

This commit is contained in:
2021-08-18 19:24:55 -07:00
parent 8b192df20f
commit 8d02141211
48 changed files with 8318 additions and 0 deletions

130
8-2.html Normal file
View 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>