Creating 2-D Animations on Canvas - the solar system

In this tutorial you will learn:

  • How to make the planets turn around the Sun.
  • How to make the Moon turn around the Earth.
  • How to make the timing realistic while using the timer functions.
  • How to realistically update a calendar, depending the position of the Earth and the Moon.
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:

The Solar System

In this animation, three images of The Sun, Earth, and the rest of the planets, along with the Moon are used.

The Sun remains stationary; Earth orbits the sun in 365 days; The Moon orbits Earth in 28 days. Other planets orbits with a fairly realistic timings.

Using both sine and cosine functions of trigonometry, the positions of orbits are calculated.

When the animation progresses, the day, month and year are updated - giving them realistic values.






The Source Code for Interactive Solar System is as follows:

<script>
var canvas = document.getElementById('Canvas_Six');
var context_six = canvas.getContext('2d');
// x:angle; b:increment; m:months; d:day
var y = new Date();
var s = y.getSeconds();
var year = y.getFullYear(); x = 0; b = 1; m = 1; d = 1; angM = 0; angV = 0; angMa = 0; angJ = 270; angS = 20; angU = 180; angN = 120; angP = 300; angC = 0;
// variables for the sun, earth and moon
var imgSn = new Image();
var imgErth = new Image();
var imgMn = new Image();
var imgMerc = new Image();
var imgVenus = new Image();
var imgMars = new Image();
var imgJup = new Image();
var imgSat = new Image();
var imgUr = new Image();
var imgNep = new Image();
var imgPluto = new Image();
var imgComet = new Image();
//window.setInterval('orbit()', 180);
function orbit() {
x = x + b; d = d + 1;
var z;
// the earth makes the full circle; year updated;
if (x == 360) { x = 0; year = year + 1; m = 0; }
// days and months are updated
if (x % 30 == 0) { m = m + 1; d = 0; }
context_six.clearRect(0, 0, 500, 500);
// image of the sun
context_six.beginPath();
context_six.drawImage(imgSn, 220, 220);
imgSn.src = '../images/sun.png';
// image of the moving mercury
angM = angM + 0.2 * b;
if (angM >= 360) { angM = 0; }
var xm = 250 + 40 * Math.sin(angM * Math.PI / 180);
var ym = 250 + 40 * Math.cos(angM * Math.PI / 180);
context_six.drawImage(imgMerc, xm - 5, ym - 5);
imgMerc.src = '../images/mercury.png';
// image of the moving venus
angV = angV + 0.7 * b;
if (angV >= 360) { angV = 0; }
var xv = 250 + 60 * Math.sin(angV * Math.PI / 180);
var yv = 250 + 60 * Math.cos(angV * Math.PI / 180);
context_six.drawImage(imgVenus, xv - 10, yv - 10);
imgVenus.src = '../images/venus.png';
// image of the moving earth
var xe = 250 + 110 * Math.sin(x * Math.PI / 180);
var ye = 250 + 110 * Math.cos(x * Math.PI / 180);
context_six.drawImage(imgErth, xe - 10, ye - 10);
imgErth.src = '../images/earth.png';
// image of the moving moon
var x2 = xe + 20 * Math.sin(13 * x * Math.PI / 180);
var y2 = ye + 20 * Math.cos(13 * x * Math.PI / 180);
context_six.drawImage(imgMn, x2 - 4, y2 - 4);
imgMn.src = '../images/moon.png';
// image of the moving mars
angMa = angMa + 0.5 * b;
if (angMa >= 360) { angMa = 0; }
var xMa = 250 + 150 * Math.sin(angMa * Math.PI / 180);
var yMa = 250 + 150 * Math.cos(angMa * Math.PI / 180);
context_six.drawImage(imgMars, xMa - 5, yMa - 5);
imgMars.src = '../images/mars.png';
// image of the moving jupiter
angJ = angJ + 0.03 * b;
if (angJ >= 360) { angJ = 0; }
var xj = 250 + 180 * Math.sin(angJ * Math.PI / 180);
var yj = 250 + 180 * Math.cos(angJ * Math.PI / 180);
context_six.drawImage(imgJup, xj - 15, yj - 15);
imgJup.src = '../images/jupiter.png';
// image of the moving saturn
angS = angS + 2 * 0.04 * b;
if (angS >= 360) { angS = 0; }
var xs = 250 + 205 * Math.sin(angS * Math.PI / 180);
var ys = 250 + 205 * Math.cos(angS * Math.PI / 180);
context_six.drawImage(imgSat, xs - 15, ys - 15);
imgSat.src = '../images/saturn.png';
// image of the moving uranus
angU = angU + 0.05 * b;
if (angU >= 360) { angU = 0; }
var xu = 250 + 235 * Math.sin(angU * Math.PI / 180);
var yu = 250 + 235 * Math.cos(angU * Math.PI / 180);
context_six.drawImage(imgUr, xu + 15, yu - 15);
imgUr.src = '../images/uranus.png';
// image of the moving neptune
angN = angN + 0.04 * b;
if (angN >= 360) { angN = 0; }
var xn = 250 + 265 * Math.sin(angN * Math.PI / 180);
var yn = 250 + 265 * Math.cos(angN * Math.PI / 180);
context_six.drawImage(imgNep, xn - 15, yn - 15);
imgNep.src = '../images/neptune.png';
// year, month and day updated
context_six.font = '12pt Calibri';
context_six.fillStyle = 'white'; context_six.fillText('Year: ' + year, 40, 20);
context_six.fillStyle = 'white';
context_six.fillText('Month: ' + m, 130, 20);
context_six.fillStyle = 'white';
context_six.fillText('Day: ' + d, 220, 20);
context_six.fillStyle = 'white';
z = x / 15;
if (x < 180)
{ context_six.fillText('Time - snap shot at: ' + Math.round(z) + ' .00 am', 300, 20); }
else if (x > 180) { context_six.fillText('Time - snap shot at: ' + (Math.round(z) - 12) + ' .00 pm', 300, 20); }
else { context_six.fillText('Time - snap shot at: ' + Math.round(z) + ' .00 noon', 300, 20); }
//colours of the sky
if (z >= 5 && z < 7) {
document.getElementById('Canvas_Six').style.backgroundImage = "";
document.getElementById('Canvas_Six').style.backgroundColor = "#98afc7";
}
else if (z >= 7 && z < 9) {
document.getElementById('Canvas_Six').style.backgroundImage = "";
document.getElementById('Canvas_Six').style.backgroundColor = "#4863a0"; ;
}
else if (z >= 9 && z < 16) {
document.getElementById('Canvas_Six').style.backgroundImage = "";
document.getElementById('Canvas_Six').style.backgroundColor = "#000080"; ;
}
else if (z >= 16 && z < 18) {
document.getElementById('Canvas_Six').style.backgroundImage = "";
document.getElementById('Canvas_Six').style.backgroundColor = "#4863a0";
}
else if (z >= 18 && z < 20) {
document.getElementById('Canvas_Six').style.backgroundImage = "";
document.getElementById('Canvas_Six').style.backgroundColor = "#000011";
}
else {
document.getElementById('Canvas_Six').style.backgroundImage = "url('../images/night.jpg')";
document.getElementById('Canvas_Six').style.backgroundColor = "#000000";
}
}
context_six.font = '10pt Calibri';
context_six.fillStyle = 'white';
context_six.fillText('Programmed by Vivax Solutions', 20, 490);
function orbitting() {
j = window.setInterval('orbit()', 180);
}
}
</script>

 

 

 

 

 

 

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.

Email: 

Stand Out - from the crowd

students

"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.

Advertisements

Advertisement