Tidal Animation
About this app
An educational animation showing how the moon's orbit impacts the tides.
Tidal Animation The animation above demonstrates how the moon's orbit around the earth impacts our planet's tides. 🌍🌙 The moon's gravitational pull generates something called the tidal force. The tidal force causes Earth—and its water—to bulge out on the side closest to the moon and the side farthest from the moon. These bulges of water are high tides. As the Earth rotates, your region of Earth passes through both of these bulges each day. When you're in one of the bulges, you experience a high tide. When you're not in one of the bulges, you experience a low tide. This is why there are two high and two low tides each day.
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Tidal Animation</title>
<meta name="description" content="An educational animation showing how the moon's orbit impacts the tides.">
<meta name="keywords" content="education, animation, moon, orbit, tides, earth">
<style>
body {
background-color: #f5f5f5;
font-family: 'Courier New', monospace;
color: #333;
}
#info {
margin-top: 20px;
font-size: 1.2em;
}
canvas {
display: block;
margin: 0 auto;
background-color: #000;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<canvas id="animation"></canvas>
<div id="info">
<p>The animation above demonstrates how the moon's orbit around the earth impacts our planet's tides. 🌍🌙</p>
<p>The moon's gravitational pull generates something called the tidal force. The tidal force causes Earth—and its water—to bulge out on the side closest to the moon and the side farthest from the moon. These bulges of water are high tides.</p>
<p>As the Earth rotates, your region of Earth passes through both of these bulges each day. When you're in one of the bulges, you experience a high tide. When you're not in one of the bulges, you experience a low tide. This is why there are two high and two low tides each day.</p>
</div>
</div>
<script>
try {
let canvas = document.getElementById('animation');
let ctx = canvas.getContext('2d');
let width = window.innerWidth;
let height = window.innerHeight;
canvas.width = width;
canvas.height = height;
let earth = {x: width / 2, y: height / 2, radius: 100};
let moon = {x: earth.x + 300, y: earth.y, radius: 30};
let location = {x: earth.x, y: earth.y - earth.radius};
function drawCircle(x, y, radius, color) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw Earth
let earthGradient = ctx.createRadialGradient(earth.x, earth.y, 0, earth.x, earth.y, earth.radius);
earthGradient.addColorStop(0, 'green');
earthGradient.addColorStop(1, 'brown');
drawCircle(earth.x, earth.y, earth.radius, earthGradient);
// Draw Moon
drawCircle(moon.x, moon.y, moon.radius, 'white');
// Draw Water
let waterColor = 'rgba(0, 0, 255, 0.5)';
let waterX = earth.x + earth.radius * Math.cos(Date.now() / 2000);
let waterY = earth.y + earth.radius * Math.sin(Date.now() / 2000);
let waterRadiusX = earth.radius * 1.05;
let waterRadiusY = earth.radius * 0.95;
ctx.beginPath();
ctx.ellipse(waterX, waterY, waterRadiusX, waterRadiusY, 0, 0, 2 * Math.PI);
ctx.fillStyle = waterColor;
ctx.fill();
ctx.closePath();
// Update location and moon position
location.x = waterX;
location.y = waterY;
moon.x = earth.x + 300 * Math.cos(Date.now() / 5000);
moon.y = earth.y + 300 * Math.sin(Date.now() / 5000);
requestAnimationFrame(draw);
}
draw();
} catch (error) {
throw error;
}
</script>
</body>
</html>
NEW APPS
These are apps made by the community!