window.onload = function() {
    let canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    let context = canvas.getContext('2d');
  
    let phase = 1;
  
    let pixelSize = 900;  // Adjust pixelation
  
    let gradientCanvas = document.createElement('canvas');
    let gradientContext = gradientCanvas.getContext('2d');
  
    function resize() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
  
      gradientCanvas.width = Math.ceil(canvas.width / pixelSize);
      gradientCanvas.height = Math.ceil(canvas.height / pixelSize);
    }
  
    window.onresize = resize;
    resize();
  
    function draw() {
      // Read the frequency from the input field each time draw is called
      let frequency = document.getElementById('frequencyInput').value;
  
      // Create static checkered pattern with black and white
      for(let i = 0; i < gradientCanvas.width; i++) {
        for(let j = 0; j < gradientCanvas.height; j++) {
          let color = ((i+j) % 2 == 0) ? '#000' : '#000';
          gradientContext.fillStyle = color;
          gradientContext.fillRect(i, j, 1, 1);
        }
      }
  
      context.drawImage(gradientCanvas, 0, 0, gradientCanvas.width, gradientCanvas.height, 0, 0, canvas.width, canvas.height);
  
      // Set wave color as white
      context.strokeStyle = '#ffffff';
      context.beginPath();
  
      let time = Date.now() / 1000;  // Time for wave
      for (let x = 0; x < canvas.width; x++) {
        let y = canvas.height / 2 * (1 + Math.sin(2 * Math.PI * frequency * (x / canvas.width - time) + phase));
        if (x === 0) {
          context.moveTo(x, y);
        } else {
          context.lineTo(x, y);
        }
      }
  
      context.stroke();
  
      requestAnimationFrame(draw);
    }
  
    draw();
  };