Earth Clock

Developer
Bryan Jones
Size
5,611 Kb
Views
66,792
  1. Earth Clock Previews
  2. Earth Clock HTML Codes
  3. Earth Clock CSS Codes
  4. Earth Clock JS Codes

How do I make an earth clock?

A clock that gets the current astronomical set up of the solar system based on date. Predicts future events such as when Mars or Venus will be closest to the Earth.. What is a earth clock? How do you make a earth clock? This script and codes were developed by Bryan Jones on 13 July 2022, Wednesday.

Earth Clock Previews
IQ Test

Earth Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Earth Clock</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Earth Clock -->
<!-- Get the earth's current position around the sun based on date. -->
<select id="selector"> <option value="0">January</option> <option value="1">February</option> <option value="2">March</option> <option value="3">April</option> <option value="4">May</option> <option value="5">June</option> <option value="6">July</option> <option value="7">August</option> <option value="8">September</option> <option value="9">October</option> <option value="10">November</option> <option value="11">December</option>
</select>
<div id="day-selection"> <select id="day-list"></select>
</div>
<div id="year-text-wrapper"> <form name="input"> <input id="year-field" size="5" type="text" name="year"> <!--<div id="submit">Submit</div>--> </form>
</div>
<canvas id="earth-clock" width="800px" height="800px"> Your browser must support HTML5 Canvas to view.
</canvas> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Earth Clock - Script Codes CSS Codes

html { background-color: #000;
}
canvas { background-color: #000; left: calc(50% - 400px); position: absolute; top: calc(50% - 400px);
}
#submit { background-color: #eee; color: #000; cursor: pointer; display: block; height: 25px; margin-top: 5px; padding: 10px 0 0 0; text-align: center; width: 70px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}

Earth Clock - Script Codes JS Codes

/** * Created by Bryan Jones. * * Choose a month, a day, and a year. */
// Using unit circle math might be easier, but the laws of sin
// and cosine are so much more fun! Plus I will be adding elliptical
// orbits.
$(document).ready(function() { drawCanvas(); // Set the default drop down to match current month. $('#selector').val(new Date().getMonth()); var total_days = daysInMonth(new Date().getMonth(), new Date().getYear()); var selectList = document.getElementById('day-list'); for (var i = 1; i <= total_days; i++) { var option = document.createElement("option"); option.value = i; option.text = i; selectList.appendChild(option); } $('#day-list').val(new Date().getDate()); $('#year-field').val(new Date().getFullYear()); // Detect changes in the year field. $('#year-field').on('input', function() { resetCanvas();	}); // Allow the user to change the year with arrow keys. $('#year-field').on('keydown', function(event) { if (event.which == 40 || event.which == 37) {	// Subtract a year.	$(this).val(parseInt($(this).val()) - 1);	} else if (event.which == 38 || event.which == 39) { // Add a year. $(this).val(parseInt($(this).val()) + 1); } resetCanvas(); }); // Change the canvas if they select a month or day. $('#selector, #day-list').change(function() { resetCanvas(); });
});
/** * Draw the canvas. */
function drawCanvas(date, day, year) { if (typeof date == "undefined" || typeof day == "undefined") { date = new Date().getMonth(); day = new Date().getDate(); } if (typeof year == "undefined") { year = new Date().getFullYear(); } var canvas = document.getElementById('earth-clock'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.restore(); var centerX = 400; var centerY = 400; var mercury_eccentricity = 1; var mercuryRadius = 3; var venus_eccentricity = 0.0067; var venusRadius = 9; var earth_eccentricity = 0.0167; var earthRadius = 10; var mars_eccentricity = 0.0935; var marsRadius = 7; var jupiter_eccentricity = 0.048775; var jupiterRadius = 30; var saturn_eccentricity = 0.055723219; var saturnRadius = 20; var uranus_eccentricity = 0.047220087; var uranusRadius = 12; var neptune_eccentricity = 0.0113; var neptuneRadius = 12; var mercuryColor = "#aaa"; var venusColor = "#a51"; var earthColor = "#18e"; var marsColor = "#723"; var jupiterColor = "#f95"; var saturnColor = "#993"; var uranusColor = "#0f7"; var neptuneColor = "#04f"; var mercuryOrbitRadius = 40; var venusOrbitRadius = 60; var earthOrbitRadius = 90; var marsOrbitRadius = 120; var jupiterOrbitRadius = 170; var saturnOrbitRadius = 230; var uranusOrbitRadius = 280; var neptuneOrbitRadius = 320; var mercuryOrbitalPeriod = 88; var venusOrbitalPeriod = 224.7; var earthOrbitalPeriod = 365.25; var marsOrbitalPeriod = 686.971; var jupiterOrbitalPeriod = 4332.59; var saturnOrbitalPeriod = 10759.22; var uranusOrbitalPeriod = 30687.15; var neptuneOrbitalPeriod = 60190.03; // Offset in degrees (relative to Earth). var mercuryOffset = 300; var venusOffset = 298; var earthOffset = 0; var marsOffset = 190; var jupiterOffset = 130; var saturnOffset = 170; var uranusOffset = 144; var neptuneOffset = 230; var plutoOffset = 230; // Just a guess. // Adding pluto for eccentricity testing. var plutoRadius = 2; var pluto_eccentricity = 0.248; var plutoColor = "#72a"; var plutoOrbitRadius = 350; var plutoOrbitalPeriod = 90465.03; var neptuneOffset = 230; // Draw orbit. drawOrbit(ctx, centerX, centerY, earthOrbitRadius, earth_eccentricity); drawOrbit(ctx, centerX, centerY, marsOrbitRadius, mars_eccentricity); drawOrbit(ctx, centerX, centerY, mercuryOrbitRadius, mercury_eccentricity); drawOrbit(ctx, centerX, centerY, venusOrbitRadius, venus_eccentricity); drawOrbit(ctx, centerX, centerY, jupiterOrbitRadius, jupiter_eccentricity); drawOrbit(ctx, centerX, centerY, saturnOrbitRadius, saturn_eccentricity); drawOrbit(ctx, centerX, centerY, uranusOrbitRadius, uranus_eccentricity); drawOrbit(ctx, centerX, centerY, neptuneOrbitRadius, neptune_eccentricity); drawOrbit(ctx, centerX, centerY, plutoOrbitRadius, pluto_eccentricity); // Draw sun drawSun(ctx, centerX, centerY); // Draw Mercury. drawPlanet(ctx, centerX, centerY, mercuryOrbitRadius, mercuryRadius, mercuryColor, mercuryOrbitalPeriod, date, day, year, mercuryOffset); // Draw Venus. drawPlanet(ctx, centerX, centerY, venusOrbitRadius, venusRadius, venusColor, venusOrbitalPeriod, date, day, year, venusOffset); // Draw Earth. drawPlanet(ctx, centerX, centerY, earthOrbitRadius, earthRadius, earthColor, earthOrbitalPeriod, date, day, year, earthOffset); // Draw Mars. drawPlanet(ctx, centerX, centerY, marsOrbitRadius, marsRadius, marsColor, marsOrbitalPeriod, date, day, year, marsOffset); // Draw Jupiter. drawPlanet(ctx, centerX, centerY, jupiterOrbitRadius, jupiterRadius, jupiterColor, jupiterOrbitalPeriod, date, day, year, jupiterOffset); // Draw Saturn. drawPlanet(ctx, centerX, centerY, saturnOrbitRadius, saturnRadius, saturnColor, saturnOrbitalPeriod, date, day, year, saturnOffset); // Draw Uranus. drawPlanet(ctx, centerX, centerY, uranusOrbitRadius, uranusRadius, uranusColor, uranusOrbitalPeriod, date, day, year, uranusOffset); // Draw Neptune. drawPlanet(ctx, centerX, centerY, neptuneOrbitRadius, neptuneRadius, neptuneColor, neptuneOrbitalPeriod, date, day, year, neptuneOffset); // Draw Pluto. drawPlanet(ctx, centerX, centerY, plutoOrbitRadius, plutoRadius, plutoColor, plutoOrbitalPeriod, date, day, year, plutoOffset); }
}
/** * Resets the canvas. */
function resetCanvas() { // Set store selected values. var month = parseInt($("#selector").val()); var day = parseInt($('#day-list').val()); var year = parseInt($('#year-field').val()); // Remove old options from the day list. $("#day-list option").remove(); var total_days = daysInMonth(month, year); // Rebuild the select list based off of month. var selectList = document.getElementById('day-list'); for (var i = 1; i <= total_days; i++) { var option = document.createElement("option"); option.value = i; option.text = i; selectList.appendChild(option); } // If the day is larger than the month total, set it to the total. if (day > total_days) { day = total_days; } $('#day-list').val(day); drawCanvas(month, day, year);
}
/** * Draw the orbital path. */
function drawOrbit(ctx, centerX, centerY, orbitRadius, eccentricity) { eccentricity = typeof eccentricity !== 'undefined' ? eccentricity : 2; // Calculate centerX using eccentricity offset. //centerX = (centerX * (eccentricity * 1.5)) + centerX; ctx.save(); ctx.scale(1, 1); //ctx.scale(1 - eccentricity, 1); ctx.beginPath(); ctx.arc(centerX, centerY, orbitRadius, 0, 2 * Math.PI, false); ctx.restore(); ctx.strokeStyle = "rgba(255, 255, 255, 0.2)"; ctx.closePath(); ctx.stroke();
}
/** * Draw the sun. */
function drawSun(ctx, centerX, centerY) { var sunRadius = 20; ctx.beginPath(); ctx.arc(centerX, centerY, sunRadius, 0, 2 * Math.PI, false); ctx.shadowBlur = 40; ctx.shadowColor = "#ffa500"; ctx.fillStyle = "#ff0"; ctx.fill(); ctx.strokeStyle = "#ee0"; ctx.closePath(); ctx.stroke();
}
/** * Draw the earth and position it. */
function drawPlanet(ctx, centerX, centerY, orbitRadius, radius, color, orbitalPeriod, inMonth, inDay, inYear, offset, reverse) { // Get the current date to position the planet. var degree_per_day = (360/orbitalPeriod); inDay = degree_per_day * getDateYear(inMonth, inDay, inYear); // Get the x and y coordinates. var xPosition = calculateXPosition(inDay, inYear, orbitRadius, centerX, offset); var yPosition = calculateYPosition(inDay, inYear, orbitRadius, xPosition, offset); if (typeof reverse != 'undefined') { xPosition = xPosition * -1; } ctx.beginPath(); ctx.arc((xPosition + orbitRadius) + (centerX - orbitRadius), yPosition + (centerY - orbitRadius), radius, 0, 2 * Math.PI, false); ctx.fillStyle = color; ctx.shadowBlur = 8; ctx.shadowColor = ColorLuminance(color, 8); ctx.fill(); ctx.strokeStyle = ColorLuminance(color, -0.2); ctx.stroke(); ctx.closePath();
}
/** * Calculate the Y position based on date. */
function calculateYPosition(day, year, orbitRadius, xPosition, offset) { // Grab the angle in degrees. var degree = getDegrees(day) + getDegrees(offset); // Get the length of the unknown side using the law of cosines. var distance = Math.pow(orbitRadius, 2) + Math.pow(orbitRadius, 2); distance = distance - 2 * orbitRadius * orbitRadius * Math.cos(degree); distance = Math.sqrt(distance); // Now that we have the distance, we need to make sure it is // positioned at the right angle. If right angle, use orbitRadius. var drop = Math.pow(distance, 2) - Math.pow(xPosition, 2); drop = Math.sqrt(drop); return drop;
}
/** * Calculate the X position based on date. */
function calculateXPosition(day, year, orbitRadius, centerX, offset) { // Grab the angle in degrees. var degree = getDegrees(day) + getDegrees(offset) var distance = orbitRadius * Math.sin(degree); return distance;
}
/** * Convert radians to degrees. */
function getDegrees(radians) { // Convert radians to degrees. var degree = radians * Math.PI/180; return degree;
}
/** * Get current percentage relative to total days in current month. */
function getDayPercent(month, day, year) { // Get the total days of the month and current day. var total_days = 0; if (typeof month == 'undefined') { total_days = daysInMonth(new Date().getMonth(), new Date().getYear()); } else { total_days = daysInMonth(month, year); } if (typeof day == 'undefined') { day = new Date().getDate(); } // Get the current percentage of the day within the month. degree_percent = day/total_days; return degree_percent;
}
/** * Month is 0 based */
function daysInMonth(month, year) { return new Date(year, month + 1, 0).getDate();
}
/** * Lighten or darken a hex value. */
function ColorLuminance(hex, lum) {	// Validate hex string.	hex = String(hex).replace(/[^0-9a-f]/gi, '');	if (hex.length < 6) {	hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];	}	lum = lum || 0;	// Convert to decimal and change luminosity.	var rgb = "#", c, i;	for (i = 0; i < 3; i++) {	c = parseInt(hex.substr(i * 2,2), 16);	c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);	rgb += ("00" + c).substr(c.length);	}	return rgb;
}
/** * Get the day of the year starting from 0. */
function getDateYear(month, day, year) { var now = 0; var start = 0; if (typeof month == 'undefined') { now = new Date(); start = new Date(0, 0, 0); } else { now = new Date(year, month, day); start = new Date(0, 0, 0); } var diff = now - start; var oneDay = 1000 * 60 * 60 * 24; var total_day = Math.floor(diff / oneDay); return total_day;
}
Earth Clock - Script Codes
Earth Clock - Script Codes
Home Page Home
Developer Bryan Jones
Username bartuc
Uploaded July 13, 2022
Rating 3
Size 5,611 Kb
Views 66,792
Do you need developer help for Earth Clock?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Bryan Jones (bartuc) Script Codes
Name
Hover Effects
Lens Flare
Universe Zoom
Screens
Solar System
Card Flip
Planet Awesome
Subscribe
Particles
Books
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!