<canvas id="canvas"></canvas>

const width = 400;
const height = 200;

const minPeriod = 20;
const maxPeriod = 50;
const minAmp = 50;
const maxAmp = 100;
const paddingRight = 15;

const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

const points = [];

function rnd(min, max) {
  return min + Math.random() * (max - min);
}

const gradient = ctx.createLinearGradient(0, 0, 0, height);
gradient.addColorStop(0, "#e91e63");
gradient.addColorStop(1, "#673ab7");

let shiftX = 0;
let lastPoint = null;

function loop(now) {
  requestAnimationFrame(loop);
  const left = -shiftX;
  const right = -shiftX + width - paddingRight;
  const animProgress = (now % 1000 / 1000);

  ctx.clearRect(0, 0, width, height);

  ctx.save();
  ctx.translate(shiftX, 0);

  if (points.length > 1 && points[1].x < left) {
    points.splice(0, 1);
  }

  while (
    points.length === 0 ||
    points[points.length - 1].x <= right
  ) {
    const lastX = lastPoint ? lastPoint.x + rnd(minPeriod, maxPeriod) : 0;
    const p = new Point(lastX, rnd(minAmp, maxAmp));
    lastPoint = p;
    points.push(p);
  }
  
  const p1 = points[points.length - 1];
  const p2 = points[points.length - 2];
  const intp = lineIntersect(p1.x, p1.y, p2.x, p2.y, right, 0, right, height);
 
  
  // clip start 1
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(left, 0);
  ctx.lineTo(right, 0);
  ctx.lineTo(right, height);
  ctx.lineTo(left, height);
  ctx.clip();
  
  // clip start 2
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(points[0].x, points[0].y);

  for (let i = 1; i < points.length; i++) {
    ctx.lineTo(points[i].x, points[i].y);
  }

  ctx.lineTo(right + 10, height + 10);
  ctx.lineTo(-10, height + 10);
  ctx.closePath();

  ctx.clip();

  ctx.fillStyle = gradient;
  ctx.fillRect(left, 0, width, height);
  ctx.restore();
  // clip end 2

  ctx.lineWidth = 5;
  ctx.lineJoin = "round";
  ctx.strokeStyle = "#3f51b5";
  ctx.stroke();
  ctx.restore();  
  // clip end 1
  
  ctx.fillStyle = "rgba(76, 175, 80, 0.5)";
  ctx.beginPath();
  ctx.arc(intp.x, intp.y, animProgress * 9 + 6, 0, 2 * Math.PI);
  ctx.fill();
  
  ctx.fillStyle = "rgba(76, 175, 80, 0.75)";
  ctx.beginPath();
  ctx.arc(intp.x, intp.y, 6, 0, 2 * Math.PI);
  ctx.fill();

  shiftX -= 0.5;
  ctx.restore();
}

requestAnimationFrame(loop);


function lineIntersect(x1, y1, x2, y2, x3, y3, x4, y4) {
  // Check if none of the lines are of length 0
  if ((x1 === x2 && y1 === y2) || (x3 === x4 && y3 === y4)) {
    return null;
  }

  const denominator = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1));

  // Lines are parallel
  if (denominator === 0) {
    return null;
  }

  const ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator;
  const ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator;

  // is the intersection along the segments
  if (ua < 0 || ua > 1 || ub < 0 || ub > 1) {
    return null;
  }

  // Return a object with the x and y coordinates of the intersection
  const x = x1 + ua * (x2 - x1);
  const y = y1 + ua * (y2 - y1);

  return { x, y };
}