<main></main>

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

let useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

const s = function(p) {
  let xSpacing = 16;
  let waveWidth;
  let theta = 0.0;
  let amplitude = 75.0;
  let period = 500.0;
  let dx;
  let yValues;
  let colors;
  
  p.setup = function() {
    p.createCanvas(p.windowWidth, p.windowHeight);
    waveWidth = p.width + 16;
    dx = (p.TWO_PI / period) * xSpacing;
    yValues = new Array(p.floor(waveWidth / xSpacing));
    colors = {
      background: p.color(255),
      ellipseFill: p.color(33, 37, 41),
      backgroundDark: p.color(14, 22, 31),
      ellipseFillDark: p.color(255)
    };
  };
  
  p.draw = function() {
    p.background(useDarkMode ? colors.backgroundDark : colors.background);
    calcWave();
    renderWave();
    
    function calcWave() {
      theta += 0.02;
      
      let x = theta;
      for (let i = 0; i < yValues.length; i++) {
        yValues[i] = p.sin(x) * amplitude;
        x += dx;
      }
    }
    
    function renderWave() {
      p.noStroke();
      p.fill(useDarkMode ? colors.ellipseFillDark : colors.ellipseFill);
      for (const [x, y] of yValues.entries()) {
        p.ellipse(x * xSpacing, p.height / 2 + y, 16, 16);
      }
    }
  };
  
  p.windowResized = function() {
    p.resizeCanvas(p.windowWidth, p.windowHeight);
    waveWidth = p.width + 16;
    yValues = new Array(p.floor(waveWidth / xSpacing));
  };
};
new p5(s, document.querySelector('main'));