<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js" integrity="sha512-3RlxD1bW34eFKPwj9gUXEWtdSMC59QqIqHnD8O/NoTwSJhgxRizdcFVQhUMFyTp5RwLTDL0Lbcqtl8b7bFAzog==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

body {margin:0px; padding:0px; overflow: hidden}

let cnt = 0;
function setup() {
  createCanvas(windowWidth, windowHeight);
}

function reflectVec(d, n) {
    return d.copy().add(n.copy().mult(d.copy().mult(2).dot(n) / pow(n.mag(), 2) * -1));
}

function draw() {
  background(235, 255, 160);
  const s = 32;// + sin(cnt / 480 * PI) * 24;
  const c = createVector(width * 0.5, height - 48);
  noFill();
  strokeWeight(2);
  line(0, c.y, width, c.y);
  
  const ang = sin((cnt++) / 180) * PI / 2.4 - PI / 2;
  const lightDir = createVector(cos(ang), sin(ang));
  const normal = createVector(0, -1);
  const reflectionDir = reflectVec(lightDir.copy().mult(-1), normal);
  
  strokeWeight(1);
  stroke(128)
  for (let a = -175; a <= 175; a += 5) {
    const ang = a / 180 * PI / 2 - PI / 2;
    const arrowDir = createVector(cos(ang), sin(ang));
    const h = p5.Vector.add(arrowDir, lightDir).normalize();
    const dotNH = normal.dot(h);
    const v = 240 * pow(max(0,dotNH), s);
    const ae = p5.Vector.add(c, arrowDir.copy().mult(v));
    if (v > 20) {
      drawArrow(c.x, c.y, ae.x, ae.y);
    }
  }
  
  const ls = p5.Vector.add(c, lightDir.copy().mult(max(width, height) * 2));
  const le = p5.Vector.add(c, lightDir.copy().mult(4));
  stroke(0)
  strokeWeight(2);
  drawArrow(ls.x, ls.y, le.x, le.y);
  
  const rs = p5.Vector.add(c, reflectionDir.copy().mult(4));
  const re = p5.Vector.add(c, reflectionDir.copy().mult(48));
  stroke(0)
  strokeWeight(2);
  drawArrow(rs.x, rs.y, re.x, re.y);
}
       
function drawArrow(x0, y0, x1, y1) {
  line(x0, y0, x1, y1);
  let v = createVector(x1 - x0, y1 - y0).normalize();
  line(x1, y1, x1 - v.y * 4 - v.x * 4, y1 + v.x * 4 - v.y * 4);
  line(x1, y1, x1 + v.y * 4 - v.x * 4, y1 - v.x * 4 - v.y * 4);
}