Pseudo 3D: Animation of the rotation of planets and other spherical objects

Description of a little trick for animating the rotation of the planets or other spherical things. The article Sphere of two triangles (worth reading) prompted me to write this article . And the trick itself is based on a very simple way to create in Photoshop a pseudo-volumetric picture from a flat one, which is described under the cut.

microdemo




How is this done in Photoshop (micro-lesson):

• select the desired texture
• cut a circle out of it
• add dimming 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 issue), I will use js + css + html. The "tutorial" described above for Photoshop for a web page will look like this:

• select an endless texture that repeats vertically (either horizontally or in both directions)
• set this texture as background
• change the background position using js at fixed intervals

You can also solve this problem using canvas (a cross-platform quick 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 the template image with the circle cut out inside, and you can also include shadows in this template, thus achieving a steeper result) and make the shadow , then set the block size - 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 shift their background image.

Total

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

References

Demo
Landscapes different planets
GitHub for preparation

UPD: omfg : It is possible and in pure css do codepen.io/chinchang/pen/xCkus