:root {
–primary-color: #2c3e50;
–secondary-color: #3498db;
–accent-color: #e74c3c;
–light-bg: #ecf0f1;
–border-radius: 8px;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.calculator-container {
background: #fff;
padding: 30px;
border-radius: var(–border-radius);
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
margin-bottom: 40px;
border: 1px solid #ddd;
}
.calc-header {
text-align: center;
margin-bottom: 25px;
border-bottom: 2px solid var(–light-bg);
padding-bottom: 15px;
}
.calc-header h2 {
margin: 0;
color: var(–primary-color);
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(–primary-color);
}
.input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.input-wrapper input, .input-wrapper select {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: var(–border-radius);
font-size: 16px;
transition: border-color 0.3s;
}
.input-wrapper input:focus, .input-wrapper select:focus {
border-color: var(–secondary-color);
outline: none;
}
.unit-label {
position: absolute;
right: 12px;
color: #7f8c8d;
font-size: 14px;
}
button.calc-btn {
background: var(–secondary-color);
color: white;
border: none;
padding: 15px 30px;
width: 100%;
font-size: 18px;
font-weight: bold;
border-radius: var(–border-radius);
cursor: pointer;
transition: background 0.2s;
}
button.calc-btn:hover {
background: #2980b9;
}
#results-area {
margin-top: 30px;
background: var(–light-bg);
padding: 20px;
border-radius: var(–border-radius);
display: none;
}
.result-item {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #bdc3c7;
}
.result-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.result-label {
font-size: 14px;
color: #7f8c8d;
text-transform: uppercase;
letter-spacing: 1px;
}
.result-value {
font-size: 28px;
font-weight: bold;
color: var(–primary-color);
}
.result-formula {
font-family: "Courier New", monospace;
background: #fff;
padding: 5px 10px;
border-radius: 4px;
font-size: 14px;
color: #555;
margin-top: 5px;
display: inline-block;
}
.error-msg {
color: var(–accent-color);
font-weight: bold;
text-align: center;
display: none;
margin-top: 10px;
}
.content-section {
background: #fff;
padding: 30px;
border-radius: var(–border-radius);
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
h1, h2, h3 {
color: var(–primary-color);
}
.math-block {
background: #f8f9fa;
padding: 15px;
border-left: 4px solid var(–secondary-color);
font-family: "Georgia", serif;
margin: 20px 0;
overflow-x: auto;
}
.diagram-container {
text-align: center;
margin: 20px 0;
}
.diagram-svg {
max-width: 100%;
height: auto;
}
Understanding the Related Rates Shadow Problem
The "Shadow Problem" is a classic application of derivatives in Calculus, specifically falling under the category of Related Rates. It typically involves a person walking away from or towards a street lamp (or other point light source) and asks you to determine how fast the length of their shadow is changing or how fast the tip of the shadow is moving along the ground.
The Geometry: Similar Triangles
To solve this problem, we model the scenario using geometry. We assume the light source is perpendicular to the ground, and the person is also walking upright. This creates two similar right triangles:
- The Large Triangle: Formed by the light source, the tip of the shadow, and the base of the light pole.
- The Small Triangle: Formed by the person, the tip of the shadow, and the person's feet.
Variables:
H = Height of the light source
h = Height of the person
x = Distance of the person from the light pole
s = Length of the shadow
y = Distance of the shadow's tip from the pole (y = x + s)
Deriving the Formulas
Using the properties of similar triangles, we set up the proportion:
H / (x + s) = h / s
By cross-multiplying and simplifying:
Hs = h(x + s)
Hs = hx + hs
Hs – hs = hx
s(H – h) = hx
s = [h / (H – h)] * x
1. Rate of Change of Shadow Length (ds/dt)
To find how fast the shadow length changes, we differentiate the equation above with respect to time (t). Since H and h are constants (the pole and person don't change height):
ds/dt = [h / (H – h)] * (dx/dt)
Where dx/dt is the walking speed of the person.
2. Rate of Motion of the Shadow Tip (dy/dt)
The position of the tip of the shadow (y) is the sum of the person's distance from the pole (x) and the shadow length (s):
y = x + s
Differentiating with respect to time:
dy/dt = dx/dt + ds/dt
This tells us the absolute speed of the shadow's tip along the ground.
Example Calculation
Suppose a street lamp is 15 feet tall, and a person who is 6 feet tall walks away from it at a speed of 5 feet/second.
Step 1: Shadow Lengthening Rate (ds/dt)
ds/dt = (6 / (15 – 6)) * 5
ds/dt = (6 / 9) * 5
ds/dt = (2/3) * 5 = 3.33 ft/sec
Step 2: Shadow Tip Speed (dy/dt)
dy/dt = 5 + 3.33 = 8.33 ft/sec
Frequently Asked Questions
What if the person is walking towards the light?
If the person walks towards the light, dx/dt is negative (distance x is decreasing). Consequently, ds/dt will also be negative, meaning the shadow is shrinking.
Does the distance from the pole matter?
Interestingly, no. In this specific setup involving similar triangles on flat ground, the rate of change is constant regardless of how far the person is from the pole. The rates only depend on the heights and the walking speed.
function calculateShadowRates() {
// Get DOM elements
var lightHeightInput = document.getElementById('lightHeight');
var personHeightInput = document.getElementById('personHeight');
var walkerSpeedInput = document.getElementById('walkerSpeed');
var directionSelect = document.getElementById('direction');
var errorDiv = document.getElementById('error-message');
var resultsArea = document.getElementById('results-area');
// Parse values
var H = parseFloat(lightHeightInput.value);
var h = parseFloat(personHeightInput.value);
var v = parseFloat(walkerSpeedInput.value);
var direction = directionSelect.value;
// Reset error
errorDiv.style.display = 'none';
resultsArea.style.display = 'none';
// Validation
if (isNaN(H) || isNaN(h) || isNaN(v)) {
errorDiv.textContent = "Please enter valid numbers for all fields.";
errorDiv.style.display = 'block';
return;
}
if (H <= 0 || h <= 0 || v = H) {
errorDiv.textContent = "Math Error: The light source (H) must be taller than the person (h) to cast a proper shadow on the ground.";
errorDiv.style.display = 'block';
return;
}
// Adjust speed based on direction
// If walking towards, dx/dt is negative. If away, positive.
var dxdt = (direction === 'away') ? v : -v;
// Calculate ds/dt (Rate of shadow length change)
// Formula: ds/dt = (h / (H – h)) * (dx/dt)
var ratio = h / (H – h);
var dsdt = ratio * dxdt;
// Calculate dy/dt (Rate of shadow tip movement)
// Formula: dy/dt = dx/dt + ds/dt
// Note: dy/dt = (H / (H – h)) * (dx/dt) is another form
var dydt = dxdt + dsdt;
// Formatting results
var dsdtFormatted = dsdt.toFixed(3);
var dydtFormatted = dydt.toFixed(3);
// Adding unit labels context
var unitText = " units/sec";
// Update DOM
document.getElementById('res-shadow-rate').textContent = dsdtFormatted + unitText;
document.getElementById('res-tip-rate').textContent = dydtFormatted + unitText;
// Show explanation formulas in result
document.getElementById('formula-shadow-rate').textContent =
`Calculation: (${h} / (${H} – ${h})) × ${dxdt}`;
document.getElementById('formula-tip-rate').textContent =
`Calculation: ${dxdt} + ${dsdtFormatted}`;
resultsArea.style.display = 'block';
}