Pseudo 3D: Animation of the rotation of planets and other ball-like objects

Description of a small trick on the animation of the rotation of the planets or other spherical gizmos. To write this article, I was prompted by the article Sphere of two triangles (worth reading). And the trick itself is based on a very simple way of creating in Photoshop a pseudo-volume image from a flat one, which is described under the cut.

microdemo



')
How to do it in Photoshop (micro-lesson):

• select the desired texture
• cut a circle out of it
• add a darkening or lightening “to taste” through the properties of the layer (I will use lightening, and more realistic results are obtained with a combination of different shadows)

In order not to bother with the implementation for a long time (since this is already a minor moment), I will use js + css + html. The “lesson” described above for Photoshop for a web page will look like this:

• we select the infinite texture repeating on a vertical (or across, or in both directions)
• set this texture as a background
• change background position with js at fixed intervals

You can also solve this problem using canvas (a cross-platform fast solution can be obtained using, for example, pixi.js or similar libraries, or pure js + canvas).

Decision

What does the style look like:

.planet2d { background: repeat-x 0 0 url(earthmap-h100.jpg); border: 1px solid #999; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; box-shadow: inset 0 0 10px rgba(255,255,255,0.9); height: 100px; width: 100px; } .planet2d.moon { background-image: url(moon-h100.jpg); } .planet2d.jupiter { background-image: url(jupiter-h100.jpg); } .planet2d.venus { background-image: url(venus-h100.jpg); } .planet2d.mercury { background-image: url(mercury-h100.jpg); } .planet2d.io { background-image: url(io-h100.jpg); } 

those. you need to set the initial state of the background, then round the block (here I just use border-radius, but you can use a picture-template with a circle cut inside, while you can also include shadows in this template, thus achieving a steeper result) and making a shadow , then set the block sizes - that's all. And then styles for different planets are described.

No more javascript code:

 (function (w) { w.Planet2D = function (interval) { interval = interval || 40; var j = 0; setInterval(function () { var els = document.querySelectorAll(".planet2d"); j--; for (var i = 0; i < els.length; i++) { els[i].style.backgroundPosition = j + "px 0px"; } }, interval); } })(window); 

those. you need to make a selection of all the elements and move their background image.

Total

1. No math
2. The trick is easily implemented under many platforms
3. The animation is very believable like 3D

Links

Demo
Landscapes of different planets
GitHub for preparation

UPD: omfg : You can make codepen.io/chinchang/pen/xCkus on pure css