console.clear();

var values  = MorphSVGPlugin.pathDataToBezier("#motion-path");
var image   = document.querySelector("#image");
var rect    = document.querySelector("#rect");
var linear  = Linear.easeNone;

var steps  = 1000;
var speeds = [];
var lines  = [];

var speed = {
  now: 1,
  min: 0.5,
  max: 2.5,
  ratio: 0.5,
  step: 0.015
};

var size = { 
  x: 1200, 
  y: 870 
};

TweenLite.set(rect, { 
  x: values[0].x, 
  y: values[0].y, 
  xPercent: -50,   
  yPercent: -50,   
  transformOrigin: "50% 50%" 
});

var bezierTween = TweenLite.to(rect, 1, {
  bezier: { values, autoRotate: true, type: "cubic" },
  paused: true, 
  ease: linear
});

var progressTween = TweenMax.to(bezierTween, 5, {
  progress: 1,
  repeat: -1,
  onStart: setSpeed,
  onUpdate: setSpeed,
  ease: linear
}); 

var transform = rect._gsTransform;

createSpeedPath();

TweenLite.to("main", 0.5, { autoAlpha: 1 });

//
// SET SPEED
// ===========================================================================
function setSpeed() {
  
  var index = Math.round(progressTween.progress() * 1000);
  
  TweenLite.to(progressTween, 0.2, { timeScale: speeds[index] });
}

//
// CREATE SPEED PATH
// ===========================================================================
function createSpeedPath() {
  
  for (var loops = 0; loops < 2; loops++) {    
    for (var i = 0; i <= steps; i++) {
      
      bezierTween.progress(i * 0.001);
      
      var rot  = transform.rotation % 90;
      var sign = rot < 0 ? -1 : 1;
      var mult = Math.abs(rot / 90);      
      var diff = (speed.ratio + speed.step * sign * mult) || 0;
      
      speed.ratio = clamp(diff, 0, 1);
      
      if (!loops) continue;
            
      lines.push({ 
        stroke: lerpColor(speed.ratio), 
        x: transform.x, 
        y: transform.y 
      });
            
      speed.now = lerp(speed.min, speed.max, speed.ratio);
      
      speeds.push(speed.now);
    }
    
    speed.now = lerp(speed.min, speed.max, speed.ratio);
  } 
  
  bezierTween.progress(0);
  plotSpeed(size);
}

//
// PLOT SPEED
// ===========================================================================
function plotSpeed(size) {
    
  var canvas  = document.createElement("canvas");
  var context = canvas.getContext("2d");
  
  canvas.width  = size.x;
  canvas.height = size.y;
    
  var size = lines.length;  
  var prev = values[0];
  
  for (var i = 0; i < size; i++) {
    
    var line = lines[i];
    
    context.beginPath();    
    context.moveTo(prev.x, prev.y);     
    context.lineTo(line.x, line.y);
    context.lineWidth = 4;
    context.lineCap = "round";
    context.strokeStyle = line.stroke;
    context.stroke();
    
    prev = line;    
  }
  
  var dataURL = canvas.toDataURL("image/png");
  
  image.setAttributeNS("http://www.w3.org/1999/xlink", "href", dataURL);
}

//
// LERP COLOR
// ===========================================================================
function lerpColor(progress) {
  
  var color1 = [255, 0, 0];
  var color2 = [0, 255, 0];
  var result = [];
  
  for (var i = 0; i < 3; i++) {
    
    var rgb1 = Math.pow(color1[i], 2);
    var rgb2 = Math.pow(color2[i], 2);
       
    result[i] = Math.round(Math.sqrt(lerp(rgb1, rgb2, progress)));
  } 
  
  return `rgb(${result})`;
}

function lerp(start, stop, amt) {
  amt = clamp(amt, 0, 1);
  return start + (stop - start) * amt;
}

function clamp(value, a, b) {
  return value < a ? a : (value > b ? b : value);
}