Skip to content

Commit

Permalink
Split into html/css/js files
Browse files Browse the repository at this point in the history
  • Loading branch information
@maresb
maresb committed Nov 13, 2023
1 parent f7c28e6 commit c5f864b
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 98 deletions.
115 changes: 17 additions & 98 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,106 +2,25 @@
<html>
<head>
<title>Airy linear wave animation</title>
<style>
/* Basic styling for canvas and inputs */
canvas {
border: 1px solid black;
}
.controls {
margin: 10px;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="controls">
<label for="a">a:</label>
<input type="number" id="a" value="0.1" step="0.01"><br>
<label for="k">k:</label>
<input type="number" id="k" value="2" step="0.2"><br>
<label for="h">h:</label>
<input type="number" id="h" value="0.6" step="0.1"><br>
<label for="g">g:</label>
<input type="number" id="g" value="9.8" step="0.1"><br>
<label for="gridSpacing">Grid Spacing:</label>
<input type="number" id="gridSpacing" value="0.06" step="0.01"><br>
</div>
<form id="waveControls" class="controls">
<fieldset>
<legend>Wave Parameters</legend>
<label for="a">a:</label>
<input type="number" id="a" value="0.1" step="0.01"><br>
<label for="k">k:</label>
<input type="number" id="k" value="2" step="0.2"><br>
<label for="h">h:</label>
<input type="number" id="h" value="0.6" step="0.1"><br>
<label for="g">g:</label>
<input type="number" id="g" value="9.8" step="0.1"><br>
<label for="gridSpacing">Grid Spacing:</label>
<input type="number" id="gridSpacing" value="0.06" step="0.01"><br>
</fieldset>
</form>
<canvas id="waveCanvas" width="600" height="400"></canvas>

<script>

// Get canvas and context
const canvas = document.getElementById('waveCanvas');
const ctx = canvas.getContext('2d');

// Parameters
let a = parseFloat(document.getElementById('a').value);
let k = parseFloat(document.getElementById('k').value);
let h = parseFloat(document.getElementById('h').value);
let g = parseFloat(document.getElementById('g').value);
let gridSpacing = parseFloat(document.getElementById('gridSpacing').value);
let w = Math.sqrt(g * k * Math.tanh(k * h));

// Global variable to store the animation frame ID
let animationFrameId;

// Function to update parameters
function updateParameters() {
a = parseFloat(document.getElementById('a').value);
k = parseFloat(document.getElementById('k').value);
h = parseFloat(document.getElementById('h').value);
g = parseFloat(document.getElementById('g').value);
gridSpacing = parseFloat(document.getElementById('gridSpacing').value);
w = Math.sqrt(g * k * Math.tanh(k * h));
draw();
}

// Calculate particle positions
function particlePosition(x0, z0, t) {
// See "particle excursion" in
// <https://en.wikipedia.org/wiki/Airy_wave_theory#Table_of_wave_quantities>
const theta = k * x0 - w * t;
const x = x0 - a * Math.cosh(k * (z0 + h)) / Math.sinh(k * h) * Math.sin(theta);
const z = z0 + a * Math.sinh(k * (z0 + h)) / Math.sinh(k * h) * Math.cos(theta);
return { x, z };
}

// Animation function
function draw() {
// Cancel the previous animation frame
if (animationFrameId) {
cancelAnimationFrame(animationFrameId);
}

ctx.clearRect(0, 0, canvas.width, canvas.height);
const time = new Date().getTime() / 1000;

// Adjusted loop for grid spacing
for (let x0 = -8; x0 <= 8; x0 += gridSpacing) {
for (let z0 = -h; z0 <= 0; z0 += gridSpacing) {
const pos = particlePosition(x0, z0, time);
// Adjust position calculation to fit canvas
const canvasX = pos.x * 200 + canvas.width / 2;
const canvasZ = canvas.height - (pos.z + h) * 200;
ctx.beginPath();
ctx.arc(canvasX, canvasZ, 2, 0, 2 * Math.PI);
ctx.fill();
}
}
// Store the new animation frame ID
animationFrameId = requestAnimationFrame(draw);
}

// Event listeners for input elements
document.getElementById('a').addEventListener('input', updateParameters);
document.getElementById('k').addEventListener('input', updateParameters);
document.getElementById('h').addEventListener('input', updateParameters);
document.getElementById('g').addEventListener('input', updateParameters);
document.getElementById('gridSpacing').addEventListener('input', updateParameters);

// Initial draw
draw();


</script>
<script src="script.js"></script>
</body>
</html>
58 changes: 58 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
document.addEventListener("DOMContentLoaded", function() {
const canvas = document.getElementById('waveCanvas');
const ctx = canvas.getContext('2d');
const controls = {
a: document.getElementById('a'),
k: document.getElementById('k'),
h: document.getElementById('h'),
g: document.getElementById('g'),
gridSpacing: document.getElementById('gridSpacing')
};
let animationFrameId;

function updateParameters() {
const params = {
a: parseFloat(controls.a.value),
k: parseFloat(controls.k.value),
h: parseFloat(controls.h.value),
g: parseFloat(controls.g.value),
gridSpacing: parseFloat(controls.gridSpacing.value),
w: 0
};
params.w = Math.sqrt(params.g * params.k * Math.tanh(params.k * params.h));
draw(params);
}

function particlePosition(x0, z0, t, params) {
const theta = params.k * x0 - params.w * t;
const x = x0 - params.a * Math.cosh(params.k * (z0 + params.h)) / Math.sinh(params.k * params.h) * Math.sin(theta);
const z = z0 + params.a * Math.sinh(params.k * (z0 + params.h)) / Math.sinh(params.k * params.h) * Math.cos(theta);
return { x, z };
}

function draw(params) {
if (animationFrameId) {
cancelAnimationFrame(animationFrameId);
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
const time = new Date().getTime() / 1000;

for (let x0 = -8; x0 <= 8; x0 += params.gridSpacing) {
for (let z0 = -params.h; z0 <= 0; z0 += params.gridSpacing) {
const pos = particlePosition(x0, z0, time, params);
const canvasX = pos.x * 200 + canvas.width / 2;
const canvasZ = canvas.height - (pos.z + params.h) * 200;
ctx.beginPath();
ctx.arc(canvasX, canvasZ, 2, 0, 2 * Math.PI);
ctx.fill();
}
}
animationFrameId = requestAnimationFrame(() => draw(params));
}

for (const key in controls) {
controls[key].addEventListener('input', updateParameters);
}

updateParameters(); // Initial draw
});
6 changes: 6 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
canvas {
border: 1px solid black;
}
.controls {
margin: 10px;
}

0 comments on commit c5f864b

Please sign in to comment.