// ============================================================================
//  HOW IT WORKS
// ============================================================================
// Each blade of grass is made up of two Bezier curves that are offset at the
// base, and meet at the tip. On every frame, the update function rotates 
// the anchor point for the tip of each blade around, creating the sway.


// This will place the blades at the bottom of the svg
var svgHeight = 600;

// Changes the slope, creating the curvature of the blade
var curvature = 1.5;

var path1 = document.querySelector("#path-1");
var path2 = document.querySelector("#path-2");

var width1 = 6;
var width2 = 8;

var height1 = 400;
var height2 = 450;

// Convert angle to radians
var angle1 =  30 * Math.PI / 180;
var angle2 = -20 * Math.PI / 180;

// This will be converted to radians in the update
var maxAngle1 = 10;
var maxAngle2 = 15;

// First anchor point, start position of blade
var sx1 = 300;
var sy1 = svgHeight;

var sx2 = 600;
var sy2 = svgHeight;

// Control points, creates curvature
var cx1 = sx1 - curvature;
var cy1 = sy1 - height1;

var cx2 = sx2 - curvature;
var cy2 = sy2 - height2 / 2; // This creates a different looking blade

// Last anchor point, this will offset the Bezier curves at the base
var dx1 = sx1 + width1;
var dy1 = sy1;

var dx2 = sx2 + width2;
var dy2 = sy2;

// Coords use to construct the Bezier curves
var coords1 = [sx1, sy1, cx1, cy1, cx1, cy1, dx1, dy1];
var coords2 = [sx2, sy2, cx2, cy2, cx2, cy2, dx2, dy2];

// Create an object to hold all the blade's values
var blade1 = {
  path: path1,
  width: width1,
  height: height1,
  angle: angle1,
  maxAngle: maxAngle1,
  coords: coords1
};

var blade2 = {
  path: path2,
  width: width2,
  height: height2,
  angle: angle2,
  maxAngle: maxAngle2,
  coords: coords2
};

// Put the blades objects into an array so we can loop through them
var blades = [blade1, blade2];

// Now we can use the ticker to render the blades
TweenLite.ticker.addEventListener("tick", render)

function render() {

  var time = Date.now();

  for (var i = 0; i < blades.length; i++) {
    update(blades[i], time);
  } 
}

function update(blade, time) {

  // Changes the speed of the sway
  var wind = 0.0007;
  
  var coords = blade.coords;
  var tip = Math.sin(time * wind);

  // Rotates the anchor point for the tip of the blade
  var th = blade.angle + Math.PI / 2 + tip * Math.PI / 180 * (blade.maxAngle * Math.cos(time * 0.0002));
  var px = coords[0] + blade.width  + blade.height * Math.cos(th);
  var py = coords[1] - blade.height * Math.sin(th);
  
  // Position of the blade
  var d = "M" + [coords[0], coords[1]];
  
  // Bezier curves
  d += "C" + [coords[0], coords[1], coords[2], coords[3], px, py];  
  d += "C" + [px, py, coords[4], coords[5], coords[6], coords[7]];
  
  // Set attribute on path element
  blade.path.setAttribute("d", d);
}