Recipe for rotating planets in space on HTML5 + JavaScript

As part of creating our browser-based space game, we were faced with the task of developing a simple and least resource-intensive animation of the rotation of the planets in a star system.

Cross out

After a brief selection of various methods of implementation, options were immediately excluded:

• with gif-animation (due to poor image quality);
• with Flash (by agreement, Flash technologies decided not to be used in the project);
• with animation using jQuery through the function $ (). animate (due to its gluttony).

CANVAS to help!

So, we stopped on the use of Canvas and JavaScript, considering this option optimal for the implementation of our task.

Let's fantasize ...

In any available way we find, draw or generate a map of our future planet. Suppose we have this exoplanet, where there is water and vegetation. The map of our planet will look like this:

')





We need to copy half of the image and add it to the right side, since our map will move along the surface of the canvas-block, and at the extreme position start the movement anew. The result is:

Create a planet

As a cosmic space, we will have a div block with any suitable background, and inside we place an element with id = "planet":

<div style="background-image:url(space.jpg); width:1000px; height: 1000px;"> <canvas id="planet" width="300" height="300" style="position: absolute; left:200px; top: 200px;"> </canvas> </div> 

Then we force our map to move inside the created canvas element, which will soon turn into a planet:

  $(function(){ var pl_id = 'planet'; var image = new Image(); image.src = 'images/planets/1/1/map.jpg'; //      canvas var width = $('#'+pl_id).width(); var height = $('#'+pl_id).height(); var canvas = document.getElementById(pl_id); var id = canvas.getContext("2d"); var newMoveWidth = 0; var newMoveHeight = 0; var drawPl = function(){ id.clearRect(0, 0, width, height); //        id.drawImage(image, newMoveWidth, newMoveHeight, width, height, 0, 0, width, height); if (newMoveWidth >= 899.5) newMoveWidth = 0; //    ,   else newMoveWidth = newMoveWidth+0.5; //     } setInterval(drawPl, 50); //     50 . }); 

As a result of the actions taken, we get something like this:

Rounding out ...

Square planets have not yet been discovered, so we will give our celestial body a more familiar look by writing 50 percent to the style of our canvas element-radius. We get:







Already better, but still there is no feeling that we have a spherical object.



Now we will prepare in a graphic editor a circle with a shadow around the edges and highlights. It must be translucent, because we will lay it on our planetary map. In the original, it will look like this:







Now we add the effect of rotation to our animation, as well as impose a prepared image with shadows over the map of the planet.



The final code of our animated planet is:

 <div style="background-image:url(space.jpg); width:1000px; height: 1000px;"> <canvas id="planet" width="300" height="300" style="position: absolute; left:200px; top: 200px; border-radius:50%"> </canvas> </div> 

And the code for the animation itself:

 $(function(){ var pl_id = 'planet'; var image = new Image(); image.src = 'map2.jpg'; //       var fxShadow = new Image(); fxShadow.src = 'planet_shadow.png'; //      canvas var width = $('#'+pl_id).width(); var height = $('#'+pl_id).height(); //     var beta = 360/900; var beta = (beta*Math.PI)/360; var l = (Math.sqrt(width*width+width*width))/2; var gam = Math.PI - ((Math.PI - (beta * Math.PI)/360)/2) - (Math.PI/4); var b = 2*l*Math.sin(beta/2); var x = b*Math.sin(gam); var y = b*Math.cos(gam); var p1 = Math.cos(beta); var p2 = Math.sin(beta); var canvas = document.getElementById(pl_id); var id = canvas.getContext("2d"); var newMoveWidth = 0; var newMoveHeight = 0; var drawPl = function(){ id.clearRect(0, 0, width, height); //      id.transform(p1, p2, -p2, p1, x, -y); //        id.drawImage(image, newMoveWidth, newMoveHeight, width, height, 0, 0, width, height); //    id.drawImage(fxShadow, 0, 0, width, height); //    ,   if (newMoveWidth >= 899.5) newMoveWidth = 0; else newMoveWidth = newMoveWidth+0.5; //     } setInterval(drawPl, 50); //     50 . }); 

The final result of the animation of the planet in the game:











All questions and suggestions for improving this implementation option will be glad to see in the comments.



Thanks for attention!