如何使用 p5.js 在多边形内绘制矩形

Question

I am working on a project for a solar panel installation calculator on roofs. The solar panels are rectangular and have fixed widths and heights. But the roofs are dynamic in shape, ie a polygon with multiple sides. See the attached image for reference.

I am trying to find out the maximum number of panels that can be installed on the roofs. I need to place the rectangles (panels) inside the polygon (roof), which you can not overlap and can not touch the boundary.

I was trying to achieve this using p5.js.

Here are the basic codes.

function setup() {
    createCanvas(800, 500);
    background(220);
    noLoop();
}
  
function draw() {
    fill(237, 34, 93);
    beginShape();
        vertex(50, 50);
        vertex(750, 50);
        vertex(750, 450);
        vertex(500, 450);
        vertex(500, 200);
        vertex(350, 200);
        vertex(350, 450);
        vertex(50, 450);
    endShape(CLOSE);

    var solarPanel = {
        width: 40,
        height: 40
    };
    
    //Algorithm to add the solar panels.
}

Link to p5.js editor - https://editor.p5js.org/abhishekdas/sketches/cVoxihH0n

I am new to p5.js. Can anyone please help me to find the correct Algorithm?

Answer 1

One simple option is to lay the panels in a grid. Your typical nested for loop should do the trick: remember to add the spacing required between panels when computing the position of each one (this should take care of overlaps).

Regarding panels laying inside the polygon of the shape you can get started with this point in polygon p5.js example . If you can test one point, you can check 4 points. If you can check 4 points (1 panel), you can check all panels) then simply remove the ones that aren't inside the roof polygon from the grid.

For reference here's function:

function pointInPoly(verts, pt) {
  let c = false;
  for (let i = 0, j = verts.length - 1; i < verts.length; j = i++) {
    if (((verts[i].y > pt.y) != (verts[j].y > pt.y)) && (pt.x < (verts[j].x - verts[i].x) * (pt.y - verts[i].y) / (verts[j].y - verts[i].y) + verts[i].x)) c = !c;
  }
  return c;
}

...where verts is an array of p5.Vector objects and pt is also a p5.Vector (though a basic object .x, .y properties will also work)

That should be a simple straight forward approach.

If you need more complex options you can look into square/rectangle packing algorithms / simulations and optimisations etc. though given the point is to set up solar panels, the real world probably the simpler setup to install and maintain on the long run will outweight potentially space saving layouts that are odd shaped.