A Pen by Johan Fagerbeg

Thumbnail
This awesome code was written by birjolaxew, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright birjolaxew ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Johan Fagerbeg</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div>
  <label>Radius 1: <input type="range" id="r1" min="0" max="1" value="0.25" step="0.01"></label>
  <label>Radius 2: <input type="range" id="r2" min="0" max="1" value="0.75" step="0.01"></label>
  
  <label>Speed 1: <input type="range" id="s1" min="0" max="10" value="2" step="0.01"></label>
  <label>Speed 2: <input type="range" id="s2" min="0" max="10" value="4" step="0.01"></label>
</div>
<canvas></canvas>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/birjolaxew/a-pen-by-johan-fagerbeg-eNaxdX */
div { position: fixed; top: 0; left: 0; padding: 1em; z-index: 99}
label { display: block; }

canvas {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/*Downloaded from https://www.codeseek.co/birjolaxew/a-pen-by-johan-fagerbeg-eNaxdX */
var c = document.getElementsByTagName("canvas")[0],
    ctx = c.getContext("2d");

var orbits = [
  {
    color: "rgb(150,150,255)",
    diameter: 0.75, // in percent
    speed: 2, // radians pr. sec
  },
  {
    color: "rgb(255,150,150)",
    diameter: 0.54,
    speed: 3.2
  }
];

var t = 0, lastT = 0, nextDraw = 0;
function draw(){
  // Keep track of time
  var now = Date.now(),
      dT = 0;
  if (lastT) {
    dT = (now - lastT) / 1000;
    t += dT;
  }
  lastT = now;
    
  // Actually draw
  var w = c.offsetWidth,
      h = c.offsetHeight,
      size = Math.max( Math.min(w,h) - 64, Math.min(w,h) * 0.9 ),
      center = [w/2, h/2].map(Math.round);
  
  var planets = []; // used for drawing lines
  
  // draw each orbit and planet
  for (var i = 0; i < orbits.length; ++i) {
    var orb = orbits[i],
        radius = (size * orb.diameter) / 2;
    
    // Orbit
    ctx.beginPath();
    ctx.arc(center[0], center[1], radius, 0, 2*Math.PI);
    ctx.strokeStyle = "rgba(0,0,0,.5)";
    ctx.lineWidth = 2;
    ctx.stroke();
    
    // Calculate where our planet is
    var pPos = [ center[0] + Math.cos(orb.pos)*radius,
                 center[1] + Math.sin(orb.pos)*radius ];
    
    // Planet
    ctx.beginPath();
    ctx.arc(pPos[0], pPos[1], 6, 0, 2*Math.PI);
    ctx.fillStyle = orb.color;
    ctx.fill();
    
    // Lines
    if (now > nextDraw) {
      ctx.beginPath();
      for (var i = 0; i < planets.length; ++i) {
        var target = planets[i];
        ctx.moveTo(pPos[0], pPos[1]);
        ctx.lineTo(target[0], target[1]);
      }
      ctx.lineWidth = 1;
      ctx.strokeStyle = "green";
      ctx.stroke();
    }
    
    orb.pos += orb.speed * dT;
    planets.push(pPos);
  }
  
  if (now > nextDraw) {
    nextDraw = now + 50; // draw 20 times a second
  }
  
  requestAnimationFrame(draw);
}

function reset(){
  var w = c.offsetWidth,
      h = c.offsetHeight;
  
  t = lastT = nextDraw = 0;
  for (var i = 0; i < orbits.length; ++i) {
    orbits[i].pos = -Math.PI/2;
  }
  
  c.width = w;
  c.height = h;
}

window.onresize = reset;
var binds = [{
  elm: document.getElementById("r1"),
  key: "diameter",
  ind: 0
},
 {
  elm: document.getElementById("r2"),
  key: "diameter",
  ind: 1
},
 {
  elm: document.getElementById("s1"),
  key: "speed",
  ind: 0
},
 {
  elm: document.getElementById("s2"),
  key: "speed",
  ind: 1
}];
for (var i = 0; i < binds.length; ++i) {
  (function(data){
    data.elm.addEventListener("input", function(){
      orbits[data.ind][data.key] = this.value;
      reset();
    });
  })(binds[i]);
}
reset();
draw();

Comments