<h1 id="title">Follow the Mouse</h1>
<div id="el1" class="lerpme"></div>
<div id="el2" class="lerpme"></div>

$color_blue-dark: #44656a;
$color_blue: #719998;
$color_blue-light: #b9d0be;
$color_pink: #dd8088;
$color_pink-light: #e6b7ad;
$color_silver: #a89f90;
$color_silver-light: #e4ddcb;

$font_primary: 'Knewave', cursive;
$font_secondary: 'Raleway', sans-serif;

$animation_reveal-duration: 1s;
$animation_reveal-stagger: $animation_reveal-duration / 2;

$ease-default: ease-in-out;

body {  
  cursor: none;
  width: 100vw;
  height: 100vh;
  background-image: radial-gradient($color_blue-light, $color_blue, $color_blue-dark);  
}

.lerpme {
  box-sizing: border-box;
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation-name: reveal;
  animation-timing-function: $ease-default;
  animation-duration: $animation_reveal-duration;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes reveal {
  100% { opacity: 1; }
}

#el1 {
  $mySize: 20vh;
  width: $mySize;
  height: $mySize;
  border: $mySize/5 solid $color_pink;
  box-shadow: 2px 2px 30px $color_blue-dark, inset 2px 2px 30px $color_blue-dark;
  animation-delay: $animation_reveal-stagger;
  @media (orientation: landscape) {
    $mySize: 20vw;
    width: $mySize;
    height: $mySize;
    border: $mySize/5 solid $color_pink;    
  }
}

#el2 {
  $mySize: 4vh;
  width: $mySize;
  height: $mySize;
  background-color: $color_pink-light;
  box-shadow: 2px 2px 20px $color_blue-dark;
  @media (orientation: landscape) {
    $mySize: 4vw;
    width: $mySize;
    height: $mySize;    
  }
}

#title {
  display: block;
  position: absolute;
  top: 75%;
  left: 50%;
  font-family: $font_primary;
  font-size: 24px;
  text-shadow: 1px 1px 3px $color_blue;
  text-align: center;
  color: $color_silver-light;
  transform: translateX(-50%) translateY(-50%);
  pointer-events: none;

  &::after {
    content: "A Pen by Chris Caldwell";
    display: block;
    font-family: $font_secondary;
    font-size: 12px;
    margin-top: 1em;
    color: $color_blue-dark;
  }
  
}

// Variables
var mouseX = 0;
var mouseY = 0;
var mouseMoved = false;



// LERP || Linear Interpolation
function lerp(A, B, t) {
  // A = Starting position
  // B = Final position
  // t = time or percentage A and B i.e. 0.0 to 1.0
  return A + t * (B - A);
}



// Mouse Events
function handleMouseMove() {
  mouseMoved = true;
  mouseX = event.clientX;
  mouseY = event.clientY;
}
document.onmousemove = handleMouseMove;



// Construct Transform
function setTransform(element, dx, dy) {
  var transform = "translateX(" + (dx) + "px) translateY(" + (dy) + "px)";
  element.style.webkitTransform = transform;
  element.style.mozTransform = transform;
  element.style.msTransform = transform;
  element.style.oTransform = transform;
  element.style.transform = transform;  
}



// Tracking
function followMouse(element, t) {
  // Determine Start Position
  var startX = element.getBoundingClientRect().left;
  var startY = element.getBoundingClientRect().top;
  
  // Determine End Position
  var targetX = mouseX - element.offsetWidth / 2;
  var targetY = mouseY - element.offsetHeight / 2;
  
  // Determine LERP position
  var newX = lerp(startX, targetX, t);
  var newY = lerp(startY, targetY, t);
  
  // Set Position using Transforms
  setTransform(element, newX, newY);
}



// Set Position
function setPosition(element, target) {
  // Determine Position
  var targetX = target.offsetWidth / 2 - element.offsetWidth / 2;
  var targetY = target.offsetHeight / 2 - element.offsetHeight / 2;
  
  // Set Position using Transforms
  setTransform(element, targetX, targetY);  
}



// Animation
/* requestAnimationFram, or "RAF", ensures animations 
are NOT directly connected to frames. This means that 
animation draws happen smoothly, at the correct time,
and without dropping 'frames'. */
window.requestAnimationFrame(draw); // Initial 'draw' call  
function draw() {
  if (mouseMoved) {
    followMouse(el1, 0.1);
    followMouse(el2, 0.3);    
  }
  window.requestAnimationFrame(draw); // 'draw' calls itself so it can keep drawing without firing again.
}



// Handle Load
window.onload = function() {
  var el1 = document.getElementById("el1");
  var el2 = document.getElementById("el2");
  var viewport = document.body;

  // Set Initial Positions
  setPosition(el1, viewport);
  setPosition(el2, viewport);
};