// Copyright John Salguero All rights Reserved
const canvas = document.getElementById("waveCanvas");
const ctx = canvas.getContext("2d");

const pCanvas = document.getElementById("particleCanvas");
const pctx = pCanvas.getContext("2d");

let t = 0;

// Draw the left anchored Waves
function drawLeftWaves(){

  // angle controls diagonal direction
  const angle = -Math.PI * t / 10 + Math.PI * 2/5; // oscilation

  const cos = Math.cos(angle);
  const sin = Math.sin(angle);

  for (let i = 0; i < 3; i++) {
    ctx.beginPath();

    let offset = i * canvas.height * (5/12); // spacing

    for (let x = 0; x < canvas.width; x += 10) {
      // rotate coordinate system
      let rx = x * cos;
      let ry = x * sin;

      let wave =
        Math.sin((rx + ry) * 0.01 + t + i) * 40 +
        Math.sin((rx + ry) * 0.005 + t * 0.5) * 25;

      let y = ry + wave + offset;

      ctx.lineTo(x, y);
    }

    ctx.stroke();
  }
}

// Draw the right anchored waves
function drawRightWaves() {
  
  // angle controls diagonal direction
  const angle = Math.PI * t / 8; // oscilation

  const cos = Math.cos(angle);
  const sin = Math.sin(angle);

  for (let i = 0; i < 3; i++) {
    ctx.beginPath();

    let offset = i * canvas.height * (5/12); // spacing

    for (let x = 0; x < canvas.width; x += 10) {
      // rotate coordinate system
      let rx = x * cos;
      let ry = x * sin;

      let wave =
        -Math.sin((rx + ry) * 0.01 + t + i) * 40 -
        Math.sin((rx + ry) * 0.005 + t * 0.5) * 25;

      let y = ry + wave + offset;

      ctx.lineTo(canvas.width - x, y);
    }

    ctx.stroke();
  }
}

// Draw the waves
function drawWaves() {
  
  ctx.clearRect(0, 0, canvas.width, canvas.height);
	
  // Horizontal Waves
  ctx.globalAlpha = 0.15;
  ctx.strokeStyle = "#ffffff";
  ctx.lineWidth = 2;
  drawLeftWaves();

  // Vertical Waves
  ctx.globalAlpha = 0.12;
  ctx.strokeStyle = "#ffffff";
  ctx.lineWidth = 2;
  drawRightWaves()

  t += 0.01;
  requestAnimationFrame(drawWaves);
}

// Draw the particles
function drawParticles() {
  pctx.clearRect(0, 0, pCanvas.width, pCanvas.height);

  pctx.fillStyle = "rgba(255,255,255,0.4)";

  for (let p of particles) {
    p.x += p.dx;
    p.y += p.dy;

    if (p.x < 0) p.x = pCanvas.width;
    if (p.x > pCanvas.width) p.x = 0;
    if (p.y < 0) p.y = pCanvas.height;
    if (p.y > pCanvas.height) p.y = 0;

    pctx.beginPath();
    pctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
    pctx.fill();
  }

  requestAnimationFrame(drawParticles);
}

// resize function
function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  pCanvas.width = window.innerWidth;
  pCanvas.height = window.innerHeight;
}


resize();
// Define the particles
const particles = Array.from({ length: 80 }, () => ({
  x: Math.random() * window.innerWidth,
  y: Math.random() * window.innerHeight,
  r: Math.random() * 2 + 1,
  dx: (Math.random() - 0.5) * 0.3,
  dy: (Math.random() - 0.5) * 0.3
}));
drawParticles();
drawWaves();

window.addEventListener("resize", resize);