Creating 2-D Animations on Canvas - satellites

In this animation, a satellite orbits the Earth, which is orbiting around its own axis. The Earth in this case acts as a background image of the canvas. The satellite is a transparent image that goes around the earth.

The movement of the Earth is controlled by a JavaScript function, which is given below. The satellite orbits the Earth in approximately 24 hours - hence the name, geosynchronous satellite.

Finding a good book to master HTML5 can be very challenging: there are so many around - most with eye-catching titles and very complex substance.
Therefore, Vivax Solutions strongly recommends Core HTML5 Canvas for those who really want to delve into HTML5.
Please click the image to access Amazon:

Geosynchronous Satellites

An animation to show how a communication satellite orbits the earth to be seen as stationary:



The Code for the animation is as follows:


<script type = 'text/javascript' >
var canvas = document.getElementById('Canvas_Six');
var context_six = canvas.getContext('2d');
var i = 0, j = 10;
var tm;
var imgSat = new Image();
function orbit() {
i = i + j;
if (i >= 360) { i = 0; }
var t = Math.round(i / 15);
if (t < 10) { t = '0' + t + ' : 00'; }
{ t = t + ' : 00'; }
if (i <= 59 || i > 130) {
x = 250 + 210 * Math.cos(i * Math.PI / 180); y = 230 + 40 * Math.sin(-i * Math.PI / 180);
{ imgSat.src = ''; }
context_six.clearRect(0, 0, 500, 500);
context_six.font = "bold 30pt Calibri";
context_six.fillText('Time: ' + t, 160, 30);
context_six.font = "18pt Calibri";
context_six.fillText('Vivax Solutions', 340, 490);
context_six.fillStyle = 'green';
context_six.drawImage(imgSat, x, y);
imgSat.src = '../images/sat.png';
window.setInterval('orbit()', 180);







Resources at Fingertips

There is a significant selection of tutorials here, covering ASP.Net, HTML5, CSS3 and JavaScript. They are categorized clearly for you to access them easily on any device - desktops/laptops, smartphones and laptops.
There are quite a few of them on HTML5 Canvas and CSS3. In addition, there are tutorials on JavaScript and ASP.Net too.


Stand Out - from the crowd


"There's no such thing as a free lunch."

The best things in nature are free with no strings attached - fresh air, breathtakingly warm sunshine, scene of meadow on the horizon...

Vivax Solutions, while mimicking nature, offers a huge set of tutorials along with interactive tools for free.

Please use them and excel in the sphere of science education.

Everything is free; not even registration is required.



Recommended Reading


The best book to master HTML5 canvas animations. The author tells you how to manipulate the canvas element with JavaScript in a progressive way - starting from the easier to harder worked examples. It is ideal for anyone who wants to be a game developer in HTML5.