The planets (and pluto) a quick tour of the solar system

I think the Daleks waited until they had acquired inexpensive CGI technology before they started climbing stairs. :slight_smile:

2 Likes

Thanks! When I originally composed this, so many years ago the whole thing came to me in a finished form after about two hours of playing around- a rare bit of inspiration. I re-recorded it recently because the original version was recorded on tape, but it’s fundamentally the same composition.

Not a YouTube problem. My local copy is the same. The jagged edges could be caused by the way the original image was created (I didn’t create it) or perhaps as a result of the background being removed (I don’t recall if I did that). I suppose I could have blurred the edges to fix that. Too late now but something I’ll keep in mind for any future planet related videos. :slight_smile:

1 Like

If you removed the background from the original image this may have produced these sawteeth. I also remember that I saw here in the forum some “sawtooth” effect with a combination of filters in which SP&R was involved.

Depending on its severity, the sawteeth border can be somewhat smoothed with the Alpha Adjust filter using the blur setting.

I re-engineered the HTML file to fit all 4 planets on the screen and add Phobos and Daimos, the moons of mars. It now uses GSAP and most of the CSS has been removed. I have updated the video clip shown in post #9 above. I include the HTML/Javascript below if anyone is interested.

If you want to see a really cool interactive 3D solar system done in HTML/CSS/Javascript have a look at this: https://codepen.io/juliangarnier/pen/idhuG

Elusien’s Solar System code:

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
  html, body {width: 100%; height: 100%; margin: 0; padding: 0;}
  #solar_system {position: relative; width: 100%; height: 100%; background-color: #000000; font-family: sans-serif;}
</style>
</head>
<body>
   <!--h1> The inner planets of the Solar System</h1-->
    <div id='solar_system'>
        <div id='sun'    >S</div>
        <div id='mercury'>M</div>
        <div id='venus'  >V</div>
        <div id='earth'  >E</div>
        <div id='mars'   >M</div>
        <div id='moon'   >m</div>
        <div id='phobos' >p</div>
        <div id='daimos' >d</div>
    </div>
</body>
<script>
$( document ).ready(function() {
  var bodies = [ 'sun', 'mercury', 'venus', 'earth', 'mars', 'moon', 'phobos', 'daimos' ];
  var params = {
                sun     : {radius: 35, color: '#ffff00', parent: 'sun'  , theta: 0, orbit_r:   0, orbits:  0  },
                mercury : {radius:  9, color: '#bbbbbb', parent: 'sun'  , theta: 0, orbit_r:  30, orbits: 10.4},
                venus   : {radius: 18, color: '#44ff44', parent: 'sun'  , theta: 0, orbit_r:  70, orbits:  4.3},
                earth   : {radius: 15, color: '#4444ff', parent: 'sun'  , theta: 0, orbit_r: 120, orbits:  2.8},
                mars    : {radius: 12, color: '#ff4444', parent: 'sun'  , theta: 0, orbit_r: 170, orbits:  1  },
                moon    : {radius:  8, color: '#ffffff', parent: 'earth', theta: 0, orbit_r:  16, orbits: 25.3},
                phobos  : {radius:  6, color: '#aaaa00', parent: 'mars' , theta: 0, orbit_r:  12, orbits: 22.4},
                daimos  : {radius:  5, color: '#778800', parent: 'mars' , theta: 0, orbit_r:  14, orbits: 16.1}
               };
  let orbit_delta = 0.5 * Math.min($('#solar_system').width(), $('#solar_system').height()) /
                    (params.mars.orbit_r + 2*params.daimos.orbit_r);

  params.sun.x_center    = 0.5 * $('#solar_system').width();  
  params.sun.y_center    = 0.5 * $('#solar_system').height();
  params.sun.left        = params.sun.x_center - params.sun.radius;
  params.sun.top         = params.sun.y_center - params.sun.radius;
  params.sun.orbit_delta = orbit_delta;
  params.sun.delta_x     = 0;
  params.sun.delta_y     = 0;

  for (let i = 0; i < bodies.length; i++) { // set the CSS values of the Sun and planets;
    let body        = bodies[i];
    let data        = params[body];
    data.movement_x = 0;
    data.movement_y = 0;
    data.x_center   = params[data.parent].x_center + data.orbit_r * orbit_delta;
    data.y_center   = params[data.parent].y_center;
    data.left       = data.x_center - data.radius;
    data.top        = data.y_center - data.radius;
    $('#'+body).css({
      position        : 'absolute',
      left            : data.left         + 'px',
      top             : data.top          + 'px',
      width           : (2 * data.radius) + 'px',
      height          : (2 * data.radius) + 'px',
      backgroundColor : data.color,
      lineHeight      :  2 * data.radius  + 'px',
      borderRadius    :      data.radius  + 'px',
      fontSize        : (1.8*data.radius) + 'px',
      textAlign       : 'center'
    });
  }
      
  let time = {progress: 0};
  var master_timeline = gsap.timeline({paused: true});
  master_timeline.add(orbits_timeline, 0);    
  master_timeline.paused(false);

  function orbits_timeline(){ // We use GSAP to do te animation
    var tl = gsap.timeline();
    
    tl.to (time,
        {progress      : 1,			// time.progress goes in increments from 0.0 at the start to 1.0 at the end
         ease          : 'linear',
         onUpdateParams: [time],		// The parameter for the function called on update
         onUpdate      : function(time) {
                            let factor = -time.progress * 2 * Math.PI;
                            for (let i = 1; i < bodies.length; i++) { // animate the bodies here;
                              let body    = bodies[i];
                              let data    = params[body];
                              let r       = data.orbit_r * params.sun.orbit_delta;
                              let w       = data.orbits  * factor;
                              data.delta_x = -r * (1 - Math.cos(w));
                              data.delta_y = -r * Math.sin(w);
                              $('#'+body).css('transform',
                                              `translate(${data.delta_x+params[data.parent].delta_x}px,
                                                         ${data.delta_y+params[data.parent].delta_y}px)`);
                            }
                          },
         duration      : 20 // Animation duration = 20 seconds
                }
       );
    
    return tl;
  }
});
</script>
</html>

That’s great. Thanks!

…and SMOD?

Wow, that is amazing animation, mainly CSS!! Incredible.

That is so cool! Bravo @elusien. I intend to look into GSAP - it looks utterly brilliant.

This topic was automatically closed after 90 days. New replies are no longer allowed.