288 lines
9.7 KiB
HTML
288 lines
9.7 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Thermal Diffusion Solver | Cathy Mcmasters</title>
|
|||
|
|
<style>
|
|||
|
|
:root {
|
|||
|
|
--bg: #0f0f0f;
|
|||
|
|
--surface: #1a1a1a;
|
|||
|
|
--primary: #d4af37; /* Hampton Gold */
|
|||
|
|
--text: #e0e0e0;
|
|||
|
|
--muted: #808080;
|
|||
|
|
--border: #333333;
|
|||
|
|
}
|
|||
|
|
body {
|
|||
|
|
font-family: 'Georgia', serif;
|
|||
|
|
background: var(--bg);
|
|||
|
|
color: var(--text);
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 2rem;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
header {
|
|||
|
|
border-bottom: 1px solid var(--primary);
|
|||
|
|
padding-bottom: 1rem;
|
|||
|
|
margin-bottom: 2rem;
|
|||
|
|
}
|
|||
|
|
h1 {
|
|||
|
|
font-size: 2rem;
|
|||
|
|
color: var(--primary);
|
|||
|
|
letter-spacing: 0.05em;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
p.subtitle {
|
|||
|
|
color: var(--muted);
|
|||
|
|
font-style: italic;
|
|||
|
|
margin-top: 0.5rem;
|
|||
|
|
}
|
|||
|
|
.grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr;
|
|||
|
|
gap: 2rem;
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
.panel {
|
|||
|
|
background: var(--surface);
|
|||
|
|
border: 1px solid var(--border);
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
label {
|
|||
|
|
display: block;
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
color: var(--primary);
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
}
|
|||
|
|
input[type="number"] {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 0.5rem;
|
|||
|
|
background: #000;
|
|||
|
|
border: 1px solid var(--border);
|
|||
|
|
color: var(--text);
|
|||
|
|
font-family: monospace;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
button {
|
|||
|
|
background: var(--primary);
|
|||
|
|
color: #000;
|
|||
|
|
border: none;
|
|||
|
|
padding: 0.75rem 1.5rem;
|
|||
|
|
font-weight: bold;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.2s;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
button:hover {
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
|
|||
|
|
}
|
|||
|
|
.result {
|
|||
|
|
margin-top: 1rem;
|
|||
|
|
padding: 1rem;
|
|||
|
|
background: #000;
|
|||
|
|
border-left: 3px solid var(--primary);
|
|||
|
|
font-family: monospace;
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
}
|
|||
|
|
canvas {
|
|||
|
|
background: #000;
|
|||
|
|
border: 1px solid var(--border);
|
|||
|
|
width: 100%;
|
|||
|
|
height: 300px;
|
|||
|
|
margin-top: 1rem;
|
|||
|
|
}
|
|||
|
|
.citation {
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
color: var(--muted);
|
|||
|
|
margin-top: 1rem;
|
|||
|
|
border-top: 1px dashed var(--border);
|
|||
|
|
padding-top: 0.5rem;
|
|||
|
|
}
|
|||
|
|
.strata-img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 200px;
|
|||
|
|
object-fit: cover;
|
|||
|
|
margin-top: 1rem;
|
|||
|
|
border: 1px solid var(--primary);
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.grid { grid-template-columns: 1fr; }
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<header>
|
|||
|
|
<h1>Thermal Diffusion Solver</h1>
|
|||
|
|
<p class="subtitle">Calculating safe burial depth for root cellars in Hampton clay-loam (Q16019)</p>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<div class="grid">
|
|||
|
|
<section class="panel">
|
|||
|
|
<h3>Input Parameters</h3>
|
|||
|
|
<form id="solver-form">
|
|||
|
|
<label for="deltaT">Surface Temperature Swing (ΔT)</label>
|
|||
|
|
<input type="number" id="deltaT" step="0.1" value="28.0" title="Annual difference between summer peak and winter trough">
|
|||
|
|
|
|||
|
|
<label for="conductivity">Thermal Conductivity (k)</label>
|
|||
|
|
<input type="number" id="conductivity" step="0.01" value="1.40" title="Watts per meter-Kelvin">
|
|||
|
|
|
|||
|
|
<label for="density">Soil Density (ρ)</label>
|
|||
|
|
<input type="number" id="density" step="10" value="1600" title="Kilograms per cubic meter">
|
|||
|
|
|
|||
|
|
<label for="specificHeat">Specific Heat Capacity (c)</label>
|
|||
|
|
<input type="number" id="specificHeat" step="100" value="2000" title="Joules per kilogram-Kelvin">
|
|||
|
|
|
|||
|
|
<label for="threshold">Safety Threshold (°C)</label>
|
|||
|
|
<input type="number" id="threshold" step="0.1" value="2.0" title="Maximum allowable temp fluctuation at storage depth">
|
|||
|
|
|
|||
|
|
<button type="submit">Compute Burial Profile</button>
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
<div class="citation">
|
|||
|
|
Constants derived from:<br>
|
|||
|
|
• Soil thermal properties: ASTM C518<br>
|
|||
|
|
• Hampton climate normals: NOAA NCEI (1991-2020)<br>
|
|||
|
|
• Diffusion equation: Fourier (1822)
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<img class="strata-img" src="https://images.pexels.com/photos/11924683/pexels-photo-11924683.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Vertical cross-section of soil strata with exposed root systems, illustrating the interface between biological and geological layers">
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="panel">
|
|||
|
|
<h3>Computation Results</h3>
|
|||
|
|
<div id="output" class="result">Awaiting computation...</div>
|
|||
|
|
<canvas id="gradientChart"></canvas>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
/**
|
|||
|
|
* Solves the 1D Heat Equation for periodic boundary conditions.
|
|||
|
|
* Amplitude decay follows: A(z) = A_0 * exp(-z * sqrt(πω / k))
|
|||
|
|
* where ω = angular frequency, k = thermal diffusivity (α)
|
|||
|
|
*/
|
|||
|
|
document.getElementById('solver-form').addEventListener('submit', function(e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
|
|||
|
|
const deltaT = parseFloat(document.getElementById('deltaT').value);
|
|||
|
|
const k_cond = parseFloat(document.getElementById('conductivity').value); // W/(m·K)
|
|||
|
|
const rho = parseFloat(document.getElementById('density').value); // kg/m³
|
|||
|
|
const c_spec = parseFloat(document.getElementById('specificHeat').value); // J/(kg·K)
|
|||
|
|
const threshold = parseFloat(document.getElementById('threshold').value); // °C
|
|||
|
|
|
|||
|
|
// Calculate thermal diffusivity (alpha)
|
|||
|
|
const alpha = k_cond / (rho * c_spec); // m²/s
|
|||
|
|
|
|||
|
|
// Angular frequency for annual cycle (seconds/year ≈ 31,557,600)
|
|||
|
|
const omega = (2 * Math.PI) / 31557600;
|
|||
|
|
|
|||
|
|
// Decay constant
|
|||
|
|
const decayConst = Math.sqrt(Math.PI * omega / alpha);
|
|||
|
|
|
|||
|
|
// Solve for depth where amplitude drops to threshold
|
|||
|
|
// threshold = (deltaT/2) * exp(-depth * decayConst)
|
|||
|
|
const initialAmplitude = deltaT / 2;
|
|||
|
|
const targetRatio = threshold / initialAmplitude;
|
|||
|
|
|
|||
|
|
let requiredDepth = 0;
|
|||
|
|
if (targetRatio > 0 && targetRatio < 1) {
|
|||
|
|
requiredDepth = -Math.log(targetRatio) / decayConst;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Generate profile points
|
|||
|
|
const points = [];
|
|||
|
|
for (let z = 0; z <= requiredDepth * 1.5; z += 0.1) {
|
|||
|
|
const ampAtZ = initialAmplitude * Math.exp(-z * decayConst);
|
|||
|
|
points.push({ depth: z, amplitude: ampAtZ });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Render results
|
|||
|
|
const outputDiv = document.getElementById('output');
|
|||
|
|
outputDiv.innerHTML = `
|
|||
|
|
<span style="color:#d4af37">MINIMUM BURIAL DEPTH:</span> ${requiredDepth.toFixed(2)} meters (${(requiredDepth * 3.28084).toFixed(2)} ft)
|
|||
|
|
|
|||
|
|
<span style="color:#d4af37">THERMAL DIFFUSIVITY (α):</span> ${(alpha * 1e6).toFixed(2)} mm²/s
|
|||
|
|
|
|||
|
|
<span style="color:#d4af37">DECAY CONSTANT:</span> ${decayConst.toFixed(4)} m⁻¹
|
|||
|
|
|
|||
|
|
<span style="color:#d4af37">SAFETY FACTOR:</span> ${((initialAmplitude / threshold)).toFixed(2)}x
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
// Draw Chart
|
|||
|
|
drawGradient(points, requiredDepth, threshold);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function drawGradient(data, criticalDepth, threshold) {
|
|||
|
|
const canvas = document.getElementById('gradientChart');
|
|||
|
|
const ctx = canvas.getContext('2d');
|
|||
|
|
const w = canvas.width = canvas.offsetWidth;
|
|||
|
|
const h = canvas.height = 300;
|
|||
|
|
|
|||
|
|
ctx.fillStyle = '#000';
|
|||
|
|
ctx.fillRect(0, 0, w, h);
|
|||
|
|
|
|||
|
|
// Axes
|
|||
|
|
ctx.strokeStyle = '#333';
|
|||
|
|
ctx.beginPath();
|
|||
|
|
ctx.moveTo(40, 20); ctx.lineTo(40, h-40); // Y axis
|
|||
|
|
ctx.lineTo(w-20, h-40); // X axis
|
|||
|
|
ctx.stroke();
|
|||
|
|
|
|||
|
|
// Labels
|
|||
|
|
ctx.fillStyle = '#808080';
|
|||
|
|
ctx.font = '10px monospace';
|
|||
|
|
ctx.fillText('DEPTH (m)', 10, h-20);
|
|||
|
|
ctx.fillText('AMPLITUDE (°C)', 10, 20);
|
|||
|
|
|
|||
|
|
// Plot curve
|
|||
|
|
ctx.strokeStyle = '#d4af37';
|
|||
|
|
ctx.lineWidth = 2;
|
|||
|
|
ctx.beginPath();
|
|||
|
|
|
|||
|
|
const xMax = data[data.length-1].depth;
|
|||
|
|
const yMax = data[0].amplitude;
|
|||
|
|
|
|||
|
|
data.forEach(p => {
|
|||
|
|
const x = 40 + (p.depth / xMax) * (w - 60);
|
|||
|
|
const y = h - 40 - (p.amplitude / yMax) * (h - 80);
|
|||
|
|
if (p.depth === 0) ctx.moveTo(x, y);
|
|||
|
|
else ctx.lineTo(x, y);
|
|||
|
|
});
|
|||
|
|
ctx.stroke();
|
|||
|
|
|
|||
|
|
// Critical line
|
|||
|
|
ctx.strokeStyle = '#ff4444';
|
|||
|
|
ctx.setLineDash([5, 5]);
|
|||
|
|
ctx.beginPath();
|
|||
|
|
const critY = h - 40 - (threshold / yMax) * (h - 80);
|
|||
|
|
ctx.moveTo(40, critY); ctx.lineTo(w-20, critY);
|
|||
|
|
ctx.stroke();
|
|||
|
|
ctx.setLineDash([]);
|
|||
|
|
|
|||
|
|
// Intersection marker
|
|||
|
|
const intersectIndex = data.findIndex(p => p.amplitude <= threshold);
|
|||
|
|
if (intersectIndex !== -1) {
|
|||
|
|
const p = data[intersectIndex];
|
|||
|
|
const ix = 40 + (p.depth / xMax) * (w - 60);
|
|||
|
|
const iy = h - 40 - (p.amplitude / yMax) * (h - 80);
|
|||
|
|
|
|||
|
|
ctx.fillStyle = '#d4af37';
|
|||
|
|
ctx.beginPath();
|
|||
|
|
ctx.arc(ix, iy, 4, 0, Math.PI*2);
|
|||
|
|
ctx.fill();
|
|||
|
|
|
|||
|
|
ctx.fillStyle = '#fff';
|
|||
|
|
ctx.fillText(`${p.depth.toFixed(1)}m`, ix + 10, iy + 15);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|