eccentric guest

by Laurens Maneschijn

HTML

<h3>Eccentric people make odd party guests...</h3>

<div>
<span class="" id="eccentric_orbit"></span>
<span class="orbit" id="earth_orbit"></span>
<span class="orbit" id="mars_orbit"></span>
<span class="body" id="sun">Sun<p></p></span>
<span class="body" id="earth">Earth<p></p></span>
<span class="body" id="mars">Mars<p></p></span>
<span class="body" id="eccentric">Eccentric<p></p></span>
</div>

CSS

div {background: #000000; color: #ffffff; position: relative; width:800px; height: 400px;}

span.orbit {
  position: absolute;
  display: inline-block;
  border: 1px dashed #404040;
  border-radius: 1000px;
}

span#eccentric_orbit {
  position: absolute;
  display: inline-block;
  /* background: radial-gradient(ellipse,#00000000 69%, #40404080 70%, #00000000 71%); */
  background: radial-gradient(closest-side,#00000000 98%, #40404080 99%, #00000000 100%);
}

/*
span#eccentric_orbit {
  position: absolute;
  display: inline-block;
  clip-path: ellipse(300px 150px);
  border: 1px dashed #404040;
  background: #101010;
}
*/

span.body {
  opacity: 0.8;
  position: absolute;
  display: inline-block;
  border-radius: 40px;
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  color: #ffffff;
}
span.body > p {
  background: #ffffff;
  color:#000000;
  border-radius: 10px;
  line-height: 1.2;
  position: absolute;
  bottom: 30px;
  left: 30px;
  padding: 5px;
}

#sun {background-color: #ffa000;}
#earth {background-color: #8080ff;}
#mars {background-color: #ff9090;}
#eccentric {background-color: #808080;}

JavaScript

let sun, earth, mars, eccentric, all;

let o = {el:null, x:0,y:0,name:'',text:'',r:0,rx:0,ry:0,rad:0,vrad:0,centerx:0,centery:0,sizex:40,sizey:40};
let getel = (sel) => {return document.querySelector(sel);};
let params = {
  center: {x:200, y:200},
  base_orbit_radius: 100
};

sun =       Object.assign({},o,{el:getel('#sun') });
earth =     Object.assign({},o,{el:getel('#earth')    ,r:1.0,vrad:1.5});
mars =      Object.assign({},o,{el:getel('#mars')     ,r:1.5,vrad:0.8});
eccentric = Object.assign({},o,{el:getel('#eccentric'),r:1.5,vrad:1.6,rx:3,ry:1.5,centerx:200});
all = [sun, earth, mars, eccentric];

Object.assign(getel('#earth_orbit').style, {
  left: (params.center.x - (params.base_orbit_radius * earth.r)) + 'px',
  top:  (params.center.y - (params.base_orbit_radius * earth.r)) + 'px',
  width:  (2 * params.base_orbit_radius * earth.r) + 'px',
  height: (2 * params.base_orbit_radius * earth.r) + 'px'
});
Object.assign(getel('#mars_orbit').style, {
  left: (params.center.x - (params.base_orbit_radius * mars.r)) + 'px',
  top:  (params.center.y - (params.base_orbit_radius * mars.r)) + 'px',
  width:  (2 * params.base_orbit_radius * mars.r) + 'px',
  height: (2 * params.base_orbit_radius * mars.r) + 'px'
});

Object.assign(getel('#eccentric_orbit').style, {
  left: (params.center.x) + eccentric.centerx - (params.base_orbit_radius * eccentric.rx) + 'px',
  top:  (params.center.y) + eccentric.centery - (params.base_orbit_radius * eccentric.ry) + 'px',
  width:  (2 * params.base_orbit_radius * eccentric.rx) + 'px',
  height: (2 * params.base_orbit_radius * eccentric.ry) + 'px'
});


all.forEach((o) => {
  o.elp = o.el.querySelector('p');
});

let t = 0;
let update = (o) => {
  if(o.rx) {
    tt= t+5*Math.cos(t/Math.PI*o.vrad/10);
    o.x = 100 * o.rx * Math.sin(tt/Math.PI*o.vrad/10);
    o.y = 100 * o.ry * Math.cos(tt/Math.PI*o.vrad/10);
    o.x += o.centerx;
    o.y += o.centery;
  } else {
    o.x = 100 * o.r *...