Figuring out excessive vertices for shadow results in 2D sport utilizing JavaScript

I am going through a difficulty whereas making an attempt to determine the 2 most excessive vertices of an object in my 2D sport utilizing JavaScript. The purpose is to find out the place I ought to create a trapezoid to simulate the shadow casting.

Presently, my strategy entails rotating the thing’s vertices to the identical airplane as the sunshine after which deciding on the vertices with the best and lowest Y values. Nevertheless, this is not working as anticipated, as I find yourself constantly deciding on the diagonal vertices.

You possibly can see all of the code and run it dwell right here: Gitpod game-engine dwell instance
Github rep: https://github.com/markvaaz/game-engine/tree/Renderer

Here is a snippet of my try and create the strategy inside my LightingManager class:

  /**
   * Will get the extremes of the form in relation to the airplane of the angle between the sunshine and the form
   * @param {Object} form
   * @param {Object} mild
   * @methodology getVerticesFromExtremes
   */
  getVerticesFromExtremes(form, mild){
    const { place: heart, vertices } = form;
    const { place } = mild;
    const angle = new Vector(place).angleBetween(heart);
    let minIndex = 0;
    let maxIndex = 0;

    vertices.forEach((vertex, index) => {
      vertex = new Vector(vertex.x, vertex.y);
      vertex.rotate(-angle);

      if(vertex.y < vertices[minIndex].y){
        minIndex = index;
      }

      if(vertex.y > vertices[maxIndex].y){
        maxIndex = index;
      }
    });

    if(minIndex > maxIndex) return {
      min: maxIndex,
      max: minIndex
    }

    return {
      min: minIndex,
      max: maxIndex
    }
  }

Here is an instance picture illustrating the specified shadow impact achieved by deciding on the 2 most excessive factors:

For testing functions, I am utilizing the next vertex coordinates for a rectangle:

[ { "x": -32, "y": -41 }, { "x": 32, "y": -41 }, { "x": 32, "y": 41 }, { "x": -32, "y": 41 } ]

Be aware that the coordinates belong to the form, and the worldwide place
just isn’t included. The form’s world place is indicated by the
‘place’ property of the form. The sunshine place is its world
place

That is the sunshine object and its properties:

{
  "enabled": true,
  "mode": "lighter",
  "brightness": 1,
  "radius": 250,
  "sort": "cone",
  "place": {
    "x": 722.5,
    "y": 413.9
  },
  "steps": [
    {
      "start": 1,
      "color": "rgba(255, 255, 255, 0.8)"
    },
    {
      "start": 0,
      "color": "transparent"
    }
  ],
  "angle": 0.0006666665679014124,
  "distance": 150.0000333333296
}