const canvas = document.getElementById("background");
const ctx = canvas.getContext("2d");

// Resize Handling

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

resizeCanvas();
window.addEventListener("resize", resizeCanvas);

// Custom Math Functions

function customFunction(x, t, c) {
  const centerY = c.height / 2;

  return centerY + (30 + 10 * Math.sin(0.05 * t)) *
    Math.sin(0.006 * x - 0.4 * t) +
    20 * Math.sin(0.011 * x - 0.25 * t + 2);
}

function customFunctionTwo(x, t, c) {
  const centerY = c.height / 2;

  return centerY + (
    40 * Math.sin(0.005 * x - 0.6 * t) +
    25 * Math.sin(0.009 * x - 0.35 * t + 2) +
    15 * Math.sin(0.015 * x - 0.2 * t + 5)
  );
}

// Math Function Drawing Engine

// Get time from localstorage if it exists
let time = parseFloat(localStorage.getItem("time")) || 0;

function drawFunction(fn, color) {

  ctx.beginPath();

  // Start at left edge
  ctx.moveTo(0, fn(0, time, canvas));

  // Plot function across entire width
  for (let x = 0; x < canvas.width; x++) {
    const y = fn(x, time, canvas);
    ctx.lineTo(x, y);
  }

  ctx.strokeStyle = color;
  ctx.lineWidth = 2;
  ctx.stroke();
}

// Starfield Drawing Engine

function makeStarfield(width, height, count, seed = 1) {
  function rng() {
    seed |= 0;
    seed = seed + 0x6D2B79F5 | 0;
    let t = Math.imul(seed ^ seed >>> 15, 1 | seed);
    t ^= t + Math.imul(t ^ t >>> 7, 61 | t);
    return ((t ^ t >>> 14) >>> 0) / 4294967296;
  }

  const stars = [];

  for (let i = 0; i < count; i++) {
    stars.push({
      x: rng() * width,
      y: rng() * height,
      size: rng() * 1.5 + 0.3,
      base: 0.5 + rng() * 0.3,
      phase: rng() * Math.PI * 2,
      speed: 0.5 + rng() * 2.0
    });
  }

  return stars;
}

function drawStars(ctx, stars, time, color) {
  ctx.fillStyle = color;

  for (const s of stars) {
    const twinkle = Math.sin(time * s.speed + s.phase) * 0.5 + 0.5;
    const alpha = s.base + twinkle * 0.5;

    ctx.globalAlpha = alpha;
    ctx.fillRect(s.x, s.y, s.size, s.size);
  }

  ctx.globalAlpha = 1;
}

// Animation Loop

let animationId = null;
let lastTime = 0;

const stars = makeStarfield(canvas.width, canvas.height, 600, 42);

function animate(timestamp) {
  animationId = requestAnimationFrame(animate);

  // First frame setup
  if (!lastTime) {
    lastTime = timestamp;
  }

  // Time difference in seconds
  const delta = (timestamp - lastTime) / 1000;
  lastTime = timestamp;

  // Advance time
  time += delta;

  // save time in localstorage
  localStorage.setItem("time", time);

  // Get colors
  const styles = getComputedStyle(document.documentElement);
  const fgColor = styles.getPropertyValue("--fg").trim();

  // Clear the canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Draw Stars
  drawStars(ctx, stars, time, fgColor);

  // Draw first custom function
  drawFunction(customFunction, fgColor);

  // draw second custom function
  drawFunction(customFunctionTwo, fgColor);
}

animate(0);