Planetarium Jquery Plugin

In this article, we will undestand how to create Planetarium using jquery. Planetarium is a jQuery plugin that helps you to construct an interactive Planetarium and build the Universe on your website.

Following are the examples of Planetarium Jquery Plugin.

Example 1:

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  Planetarium Jquery Plugin </title>    
        <meta name = "description"/>    
        <meta content = "width=600, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jquery.com/jquery-3.5.1.min.js">    
        </script>                 
<style>
@import url('https://fonts.googleapis.com/css?family=Jura:300');
* {
	margin: 10;
	padding: 10;
	box-sizing: border-box;
}
body { 
  font-family: 'Open Sans', sans-serif;
  background-color: #f4f4f4;
  margin: 0;	
  padding: 0;
background: radial-gradient(#000014, #000008);
}
#container {
	position: relative;
	display: flex;
	width: 100vw;
	height: 100vh;
	overflow-x: hidden;
}
header {
	position: absolute;
	width: 100%;
}
h2 {
	font-family: 'Jura', sans-serif;
	font-weight: 300;
	color: white;
	text-align: center;
	font-size: 50px;
	letter-spacing: 50px;
	padding-top: 400px;
	opacity: 0.06;
}
#solarSystem {
	margin: auto;
	padding: 50px;
	overflow: hidden;
}
.patbit {
	position: relative;
	margin: auto;
	vertical-align: center;
	border-radius: 50%;
}
#sun {
	position: relative;
	margin: auto;
	vertical-align: center;
	border-radius: 50%;
}
.patbit {
	display: flex;
}
.pat {
	position: absolute;
	top: 50%;
	border-radius: 50%;
	animation: patSpin 5s linear infinite;
}
@keyframes patSpin {
	100% {
		transform: rotate(360deg);
	}
}
#sun {
	background-color: #ffcc00;
	width: 100px;
	height: 100px;
	box-shadow: 0 0 100px orange;
	animation: glow 3s linear infinite;
}
@keyframes glow {
    0 {
        box-shadow: 0 0 100px orange;
    }
    50% {
        box-shadow: 0 0 50px orange;
    }
    100% {
        box-shadow: 0 0 100px orange;
    }
}
#mercuryOrbit {
	width: 200px;
	height: 200px;
}
#mercury {
	background: linear-gradient(to right, #8B0000, #DA0000);
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	animation-duration: 0.879s;
	transform-origin: 103px 3px;
}
#venusOrbit {
	width: 250px;
	height: 250px;
}
#venus {
	background: linear-gradient(to right, #EFBE7C, #FAEBD7);
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	animation-duration: 2.247s;
	transform-origin: 131px 6px;
}
#earthOrbit {
	width: 300px;
	height: 300px;
}
#earth {
	background: linear-gradient(to right, #6495ED, #82AAF1);
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	animation-duration: 3.65s;
	transform-origin: 157px 7px;
}
#marsOrbit {
	width: 370px;
	height: 370px;
}
#mars {
	background: linear-gradient(to right, #A52A2A, #CE3F3F);
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	animation-duration: 6.869s;
	transform-origin: 190px 5px;
}
#jupiterOrbit {
	width: 520px;
	height: 520px;
}
#jupiter {
	background: linear-gradient(to right, #FF7F50, #FFA483);
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	animation-duration: 43.326s;
	transform-origin: 290px 30px;
}
#satOrbit {
	width: 700px;
	height: 700px;
}
#sat {
	background: linear-gradient(to right, #DC143C, #F05574);
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	animation-duration: 107.592s;
	transform-origin: 370px 20px;
}
#sat::after {
	content: " ";
	display: bock;
	background-color: bisque;
	position: absolute;
	left: -10px;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 60px;
	height: 2px;
	box-shadow: 2px 2px 5px black;
	transform: rotate(30deg);
	animation: satRing 107.592s linear infinite;
}
@keyframes satRing {
    100% {
        transform: rotate(-360deg);
    }
}
#uranusOrbit {
	width: 850px;
	height: 850px;
}
#uranus {
	background: linear-gradient(to right, #87CEFA, #A8DBFB);
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	animation-duration: 306.87s;
	transform-origin: 492px 17px;
}
#neptOrbit {
	width: 1000px;
	height: 1000px;
}
#nept {
	background: linear-gradient(to right, #191970, #2F2FD1);
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	animation-duration: 601.90s;
	transform-origin: 515px 15px;
}
.star {
	background: white;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  position: absolute;
}
@keyframes knipper {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>
<body>
<div id = "container">
	<header>
		<h2> Example of PLANETARIUM using Jquery </h2>
	</header>
	<div id="solarSystem">		
		<div id="neptOrbit" class="patbit">
		<div id="nept" class="pat"></div>
		<div id="uranusOrbit" class="patbit">
		<div id="uranus" class="pat"></div>		
		<div id="satOrbit" class="patbit">
		<div id="sat" class="pat"></div>	
		<div id="jupiterOrbit" class="patbit">
		<div id="jupiter" class="pat"></div>	
		<div id="marsOrbit" class="patbit">
		<div id="mars" class="pat"></div>		
	      <div id="earthOrbit" class="patbit">
		<div id="earth" class="pat"></div>
		<div id="venusOrbit" class="patbit">
		<div id="venus" class="pat"></div>			
	     <div id="mercuryOrbit" class="patbit">
		<div id="mercury" class="pat"></div>		
		<div id="sun"> </div>
		</div>
		</div>
								
		</div>					
		</div>			
		</div>			
		</div>		
		</div>	
	</div>	
	</div>
</div>
<script>
var container = document.querySelector("#container");
for (var i = 0; i < 100; i++) {
  container.insertAdjacentHTML('afterbegin', '<div class="star"></div>');
  var ster = document.querySelector(".star");
  var randomX = Math.random() * window.innerWidth;
  var randomY = Math.random() * window.innerHeight;
  ster.style.transform = "translate(" + randomX + "px, " + randomY + "px)";
  ster.style.animation = "knipper 1s " + Math.random() + "s linear infinite";
}
</script>
</body>
</html>

Exaplanation:

In the above example we created a Planetarium jquery plugin.

Output:

Followimg is the output of this example.

Example 2:

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  Planetarium Jquery Plugin </title>  
        <meta name = "description"/>    
        <meta content = "width=600, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jquery.com/jquery-3.5.1.min.js">    
        </script>                 
<style>
@import url('https://fonts.googleapis.com/css?family=Jura:300');
      .orbit {
        stroke : #000000;
        fill : none;
      }
h2 {
	font-family: 'Jura', sans-serif;
	font-weight: 800;
	color: red;
	text-align: center;
	font-size: 20px;
	letter-spacing: 1px;
	padding-top: 1px;	
}
      .pat {
        stroke : #ff0000;
}
</style>
<body>
<h2> Example of PLANETARIUM using Jquery </h2>
<div id = "every">
</div>
<script>
var w = 500, h = 400;
var t0 = Date.now();
var pats = [ 
  { R: 200, r: 5, speed: 5, phi0:90},
  { R: 150, r: 10, speed: 2, phi0: 10} 
    ];
var svg = d3.select("#everything").append("svg")
    .attr("width", w).attr("height",h);
svg.append("circle").attr("r", 20).attr("cx", w/2)
    .attr("cy", h/2).attr("class", "sun");
container.selectAll("g.pat").data(pats).enter().append("g")
    .attr("class", "pat").each(function(d, i) {
d3.select(this).append("circle").attr("class", "orbit")
    .attr("r", d.R);
d3.select(this).append("circle")
          .attr("r", d.r).attr("cx",d.R)
    .attr("cy", 0).attr("class", "pat"); 
});
      d3.timer(function() {
        var delta = (Date.now() - t0);
        svg.selectAll(".pat").attr("transform", function(d) {
          return "rotate(" + d.phi0 + delta * d.speed/200 + ")";
        });
          function rotate(d) {
              var x = d3.event.x;
              var y = d3.event.y;
              d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
              if(d3.select(this).attr("class") == "sun") {
                line.attr("x1", x);
                line.attr("y1", y);
              } else {
                line.attr("x2", x);
                line.attr("y2", y);
              }
          }
      });
</script>
</body>
</html>

Exaplanation:

In the above example we created a Planetarium jquery plugin.

Output:

Followimg is the output of this example.