Construct Interactive Planets and Build the Universe on Your Website

Did you know that, as a developer, you have the power to shape up the universe as you see fit? No? Well, today I’ll show you how you can create and construct a planet in a few minutes without waiting 4.6 billion years for it to form.. right on your website.

Introducing, jQuery Planetarium. A little fun plugin I created to allow you to easily construct a planet, define its features like rings, patterns, weather, colors of air, etc. in only a few minutes. You can create as many as you like on a page with their own options and styles. The power of God is now in your hands. Remember, with great power comes great responsibility. Are you ready for it?

Note: This plugin has been tested Chrome, Firefox, Safari, on desktop. This has not been tested on IE.

Construct Interactive Planets and Build the Universe on your website


How to Use the Planetarium Plugin

How does this work?

The plugin is very simple. First, it must shape the planet into circle with a specific width and height. It will then tilt the planet in the specified angle using CSS3’s transform, apply box-shadow to create a glow and shadow effect, add patterns using background styles, and add any other extra features like rings, etc.

Once the appearance is completed, the plugin will then apply a CSS3 animation that will move the pattern continuously to create an illusion that the planet is spinning. I then added the ability to drag the planet and let viewers control the pattern movement with the same function I used from my previous tutorial, the Panorama Viewer. To do this, I had to stop the auto spin CSS animation first so it doesn’t overwrite the viewer’s behavior. To do this I had to track the viewer’s cursor location, and detect the click trigger. If the viewer clicks the planet, that disables all the CSS3 animation styles, and reapplies them once the viewer releases the click trigger.

Now, all the options can be controlled easily through JavaScript or HTML markup without you having to dig inside the code and change them yourself.

How-Tos

To start handling this God-like power, you will first have to include the latest jQuery library available here, jQuery.planetarium.js and planetarium.css which can be found here, in to your document’s <head>. You can also use my planet textures available in my repository by moving these images into your project’s directory.

Now, let’s begin placing the seed of your planet in Space:

HTML

<body>
  ..
  <div class="earth planet"></div>
  ..
</body>

And all you have to do is call the Planetarium function as shown below and your planet will spring to life. No need to wait 4.6 billion years for the earth to form.

JS

$(".planet").planetarium({
   autospin: "1000ms", 
   angle: "20deg", 
   glow: "rgba(255, 255, 255, 0.34902) 0px 0px 50px, inset 33px 20px 50px rgba(0,0,0,0.5)",
   pattern: "img/texture-earth.jpg",
   size: "100x100",
   float: true,
   space: "body",
   ring: false,
   ringColor: "#fff",
   ringAngle: "20deg"
 });

The option above will create the Earth right on your web page by default. To create your own personalized planet, experiment with the options provided as shown below:

  • autospin: You can define the speed at which your planets spin with this option. It accepts the seconds or milliseconds in forms of "1s" and "1000ms" respectively. The default value is 1000ms.
  • angle: You can define the degree to which your planets will be tilted with this option. Make sure you end the value with deg. The default value is 20deg.
  • glow: You can define the glow and shadow of your planet with this option. It accepts the CSS box-shadow styles. The default value is as shown above where the first part, "rgba(255, 255, 255, 0.34902) 0px 0px 50px", is the glow effect and the second part, "inset 33px 20px 50px rgba(0,0,0,0.5)", is the shadow.
  • pattern: You can define your own planet patterns here. The option accepts an image path. Having your own pattern dimension matches with my pattern-earth.jpg provided is highly recommended. The default value is "img/texture-earth.jpg". Make sure you change the path to reflect your website’s structure.
  • size: You can define the width and height of your planets here in a format of "(width)x(height)". The default value is 100x100.
  • float: You can toggle the floating animation here. Set it to false to disable it. The default value is true.
  • space: You can define the container's selector to be used as the Space here. The default value is "body".
  • ring: You can toggle the ring of your planets here. To enable the ring, set this to true. The default value is false.
  • ringColor: You can set the ring's color here. The option accepts HEX color code. The default value is "#fff".
  • ringAngle: You can define the angle of the ring here. Make sure you end the value with “deg” like this: "180deg". The default option is "20deg".

Multiple Planets with their own options?

The problem in using the global options above is that the styles will apply globally, and so all your planets will look the same. We don’t want that, and so I decided to add the HTML markup you can use to define each planet’s options individually. Here are all the markups available:

  • data-ptr-autospin
    Individually assign a planet with its own autospin option:

    HTML

    <div class="earth planet" data-ptr-autospin="4000ms"></div>
    
  • data-ptr-angle
    Individually assign a planet with its own angle option:

    HTML

      <div class="earth planet" data-ptr-angle="60deg"></div>
    
  • data-ptr-glow
    Individually assign a planet with its own glow and shadow options:

    HTML:

      <div class="earth planet" data-ptr-glow="0 0 50px #fff"></div>
    
  • data-ptr-size
    Individually assign a planet with its own width and height options:

    HTML

      <div class="earth planet" data-ptr-size="500x500"></div>
    
  • data-ptr-float
    Individually assign a planet with its own float option options:

    HTML

      <div class="earth planet" data-ptr-float="false"></div>
    
  • data-ptr-ring
    Individually assign a planet with its own ring option:

    HTML

      <div class="earth planet" data-ptr-ring="true"></div>
    
  • data-ptr-ringcolor
    Individually assign a planet with its own ring's color option:

    HTML

      <div class="earth planet" data-ptr-ringcolor="#fff"></div>
    
  • data-ptr-ringangle
    Individually assign a planet with its own ring's angle option:

    HTML

      <div class="earth planet" data-ptr-ringangle="30deg"></div>
    

Conclusion

And there you have it, the ability to shape planets and create a galaxy like no other. I hope you enjoy this little fun plugin as much as I did creating it. If you have any questions or a suggestions, feel free to let me know in the comments below.