Home Java Pseudo 3D: Animating the rotation of planets and other sphere-like objects

Pseudo 3D: Animating the rotation of planets and other sphere-like objects

by admin

Description of a little trick for animating the rotation of planets or other spherical things. I was inspired to write this article by the article The sphere of two triangles (worth a read). And the trick itself is based on a very simple way of creating a pseudo-volumetric picture from a flat one in Photoshop, which is described below.
microdemo
Pseudo 3D: Animating the rotation of planets and other sphere-like objects
How to do it in Photoshop (micro-lesson):

  • picking up the right texture
  • cut a circle out of it
  • add darkening or lightening "to taste" through the layer properties (I will use lightening, but more realistic results are obtained by combining different shadows)

In order not to get bogged down with the implementation (since it’s already a minor point), I will use js+css+html. The Photoshop "lesson" for the webpage described above will look like this :

  • pick up an infinite texture that repeats vertically (or horizontally, or in both directions)
  • set this texture as a background
  • Change the background position with js at fixed intervals

it is also possible to solve this problem using canvas (a cross-platform fast solution can be obtained with e.g, pixi.js or similar libraries, or pure js + canvas).

Solution

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); }

I.e. you need to set initial state of background, then round block (here I just use border-radius, but you can use picture-template with cut out circle inside, in this template you can include also shadows, thus achieving more abrupt result) and make shadow, then set block size – that’s all. And then the styles for the different planets are described.
No more JavaScript code than :

(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);

i.e. you need to select all elements and shift their background image.

Result

  1. There is no mathematics
  2. The trick is easily implemented on many platforms
  3. The animation is very believably reminiscent of 3D

Links

Demo
Landscapes of different planets
GitHub for dissection
UPD: omfg : You can also do it on pure css codepen.io/chinchang/pen/xCkus

You may also like