EN 
Українська
Polski
Español
Deutsch
日本語
Italiano
Português (BR)
Français
العربية
Nederlands
中文
한국어
हिन्दी
Türkçe
Tiếng Việt
Русский
Bahasa Indonesia
فارسی
বাংলা
ไทย
Filipino
Kiswahili
اردو
Bahasa Melayu
தமிழ்
עברית
Ελληνικά
ਪੰਜਾਬੀ
አማርኛ
မြန်မာဘာသာ
ខ្មែរ
ქართული
नेपाली
Монгол хэл
Հայերեն
සිංහල
ລາວ
Čeština
Română
Magyar
Български
Svenska
Dansk
Suomi
Norsk
Slovenčina
Hrvatski
Српски
Slovenščina
Lietuvių
Latviešu
Eesti
Íslenska
Shqip
Македонски
Bosanski
Malti🌳🌊 Mangrove Coastal Protection — Wave Attenuation
Mangrove wave attenuation simulator — compare a coastline with a mangrove root fringe against a bare shoreline as storm waves roll in and erode the coast.
Mangrove roots act as a natural wave brake. This split-screen simulation shows storm waves travelling toward two coastlines side by side — one shielded by a mangrove root fringe, one bare — so you can watch wave energy decay exponentially through the roots and see the bare shoreline erode much faster.
🔬 What It Demonstrates
Wave height attenuates exponentially as it travels through mangrove roots, H(x) = H₀·e^(−k·density·x). Because wave energy scales with height squared, even a moderate belt cuts destructive energy dramatically, slowing shoreline erosion.
🎮 How to Use
Raise the storm surge slider to send in bigger waves, adjust root density and belt width to see how quickly wave height decays, and watch the live erosion meter and shoreline recede faster on the unprotected side.
💡 Did You Know?
A single hectare of healthy mangrove forest can be worth more in flood-damage prevention than the same land converted to shrimp ponds or farmland — which is why coastal restoration projects worldwide now replant mangroves specifically as storm defences.
About the Mangrove Coastal Protection Simulation
This simulation renders two side-by-side coastlines on an HTML canvas: one fringed by a belt of mangrove roots, the other left completely bare. A shared periodic wave train — a sine-based sea surface — travels toward both shores at once, so the comparison is always fair. As each wave crosses the mangrove belt on the protected side, its height decays according to the coastal-engineering relationship H(x) = H₀·e^(−k·density·x), where x is the distance already travelled through the roots. Because wave energy is proportional to height squared, even a moderate reduction in height translates into a much larger cut in destructive energy by the time the wave reaches the shoreline.
A running erosion accumulator tracks shoreline loss on both sides, increasing faster wherever wave energy at the coast is higher. Over time you can watch the unprotected shoreline visibly recede while the mangrove-protected one barely shifts — the same dynamic that makes mangrove forests one of the most cost-effective natural defences against storm surge and coastal erosion. Adjust the storm surge, root density and belt width sliders to explore how each factor changes the outcome, and check the live info-bar for the exact wave-height reduction percentage and accumulated erosion numbers.
Frequently Asked Questions
What does this simulation show?
It compares two identical coastlines side by side as the same storm wave train arrives: one shielded by a mangrove root belt, one bare. You can watch wave height shrink as it crosses the mangrove roots on the protected side, while the unprotected side receives nearly full wave energy and erodes visibly faster.
What is the formula behind the wave decay?
Wave height through the mangrove belt follows H(x) = H₀·e^(−k·density·x), an exponential attenuation law used in real coastal engineering studies. H₀ is the incoming wave height, x is the distance already travelled through the roots, and k·density is the effective decay rate set by how thick and tangled the root mat is.
Why does root density matter so much?
Denser root systems present more drag and turbulence to passing water, extracting energy faster per metre travelled. Doubling the density roughly doubles the exponent in the decay formula, so even a modest increase in density can noticeably shrink the waves that reach the shore.
What do the controls do?
Storm surge scales the incoming wave height and energy from the open sea; root density sets how thick and tangled the mangrove root mat is, controlling the decay rate; belt width sets how many metres of roots the waves must cross before reaching open shoreline; and reset restores the default storm and mangrove settings.
How is shoreline erosion calculated?
An accumulator on each side increases every frame in proportion to the wave energy arriving at that shoreline, and wave energy is modelled as proportional to wave height squared. Because the unprotected side keeps almost all of its incoming energy, its accumulator grows much faster, which is drawn as a visibly receding shoreline line and shown as a running number in the info-bar.
Why does wave energy depend on height squared, not just height?
In real ocean physics, the energy carried by a wave is proportional to the square of its amplitude (wave height). This is why even a modest reduction in height — say, cutting height in half — actually removes about three-quarters of the wave's destructive energy, which is exactly what this simulation models.
Is this based on real coastal engineering?
Yes — the exponential decay relationship H(x) = H₀·e^(−k·density·x) mirrors the empirical and analytical models coastal engineers use to estimate wave attenuation through vegetated wetlands such as mangroves, salt marshes and seagrass beds. The exact decay constant varies with species, root structure and water depth in real field studies, but the exponential form is well established.
Why are mangroves restored as storm defences?
Because they cut wave energy and reduce erosion for a fraction of the cost of concrete seawalls, while also providing fish nursery habitat and storing carbon. Numerous coastal restoration projects around the world now replant mangrove belts specifically to protect villages, farmland and infrastructure from storm surge and sea-level rise.
Mangrove wave attenuation simulator — compare a coastline with a mangrove root fringe against a bare shoreline as storm waves roll in and erode the coast.
2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install