wallmaker - bad geometry

wallmaker.js

// do once per "row" (going down)
for ( let y=0; y<boxesDown; y++ ) {
  // do once per "column" (going across)
  for ( let x=0; x<boxesAcross; x++ ) {
    // rx = top-left x coord of current square
    let rx = x * size;
    // ry = top-left y coord of current square
    let ry = y * size;
    // cx = centre point x coord of current square
    let cx = rx + halfSize;
    // cy = centre point y coord of current square
    let cy = ry + halfSize;
    // dx = detla between center x of the whole thing and cx
    let dx = cx - midX;
    // dy = detla between center y of the whole thing and cy
    let dy = cy - midY;
    // get the "slope"
    let slope = dy / dx;
    // "adjacent" (sohcahtoa) is half the box length (i.e. the middle)
    // of the square out to one edge, either vertically or horizontally
    let adjacent = halfSize;
    // create some variables
    let opposite, gx1, gy1, gx2, gy2;

    // some jiggery pokery here to use the correct
    // corners, depending on which quadrant the
    // original slope lies within. My geometry sucks.

    // what we are looking for is gx1, gy1 and gx2, gy2
    // the line of these points runs from the center of
    // the whole thing through the center of the current box

    // each of the pair of points is one the edge of the
    // current box ...
    if ( slope >= -1 && slope <= 1 ) {
      opposite = adjacent * slope;
      if ( slope < 0 && cy < midY ) {
        adjacent *= -1;
        opposite *= -1;
      }
      gx1 = Math.round(cx + adjacent);
      gy1 = Math.round(cy + opposite);
      gx2 = Math.round(cx - adjacent);
      gy2 = Math.round(cy - opposite);
    } else {
      opposite = adjacent / slope;
      gx1 = Math.round(cx + opposite);
      gy1 = Math.round(cy + adjacent);
      gx2 = Math.round(cx - opposite);
      gy2 = Math.round(cy - adjacent);
    }
    let gradient = context.createLinearGradient(gx1, gy1, gx2, gy2);
    let [pr0, pg0, pb0] = xyToRGBA(gx1, gy1, imageData);
    let [pr1, pg1, pb1] = xyToRGBA(gx2, gy2, imageData);
    gradient.addColorStop(0, `rgba(${pr1}, ${pg1}, ${pb1}, 0.4)`);
    gradient.addColorStop(1, `rgba(${pr0}, ${pg0}, ${pb0}, 0.8)`);
    context.fillStyle = gradient;
    context.fillRect(rx, ry, size, size);
  }
}