p5.js - 计算迭代中线的起点/终点以创建形状空隙

Question

标题听起来有点混乱，但本质上，我必须重新创建 Sol Lewitt 的壁画 340 ( https://massmoca.org/event/walldrawing340/ )。它由中心有空隙的水平线、圆形、正方形、矩形、三角形、梯形和平行四边形组成

我看到我需要使用某种迭代，但是我一生都无法想到如何计算迭代中水平线的各个起点/终点，然后是起点/终点由垂直线组成的六个空隙形状。

如果我想为自己学习这一点，可能会指出我走上正确轨道的解释会很棒。我必须使用开始/端点的数学来完成此操作。

标签： p5.js

Answer 1

这与多边形光栅化的问题相同——你有一个由一系列线段定义的形状，你需要找到光线进入和离开多边形的点。

（对于圆，您可以将其近似为多边形或编写特殊情况的算法，这将相对简单）

你可以找到很多关于多边形光栅化的谷歌结果；这些参考资料中的大部分细节都将处理剪辑，这是您不必担心的事情。

由于您知道所有光线都在多边形之外开始和结束，因此粗略的方法是：

- for each horizontal ray:
  - set x-min = x-max = 0
  - for each polygon segment:
    - find the intersection x of the ray and the line
    - if the intersection is between the segment’s start and end points:
      - if x is less than x-min, set x-min=x
      - if x is greater than x-max, set x-max=x
  - if x-min > 0:
    - draw a line from 0 to x-min, and from x-max to [screen width]

在形状内部绘制垂直线的过程非常相似，除了外部循环将遍历垂直射线，并且您将绘制从 y-min 到 y-max 的线。

对于线段的计算，您可能会发现谷歌“线段的参数表示”很有帮助。