在2D室中模拟光源（点源）

Question

我正在尝试在2D房间中模拟全向光源。我想建立一个房间并且有一个＆＃34; light＆＃34;从点源传播，仅在到达墙壁时停止。结果是阴影将被投射到光线无法到达的地方。下图显示了几个点源的问题

我在D3 JS中实施此功能，作为基于art gallery problem的游戏的一部分。

我正在努力想出一个适合允许这种模拟和动画的数据结构。我想象一个圆从光源辐射出来，每当遇到一堵墙时就会分裂成弧形？ 有没有办法在不模拟大量单独光束的情况下做到这一点？

Answer 1

除了绘制SVG之外，我并不认为d3会对此有所帮助。在理论方面，<circle>元素定义了半径，这意味着它们将在圆周上弯曲。弧也会这样做。艺术画廊问题涉及多边形空间和圆圈（可以说）不是多边形。

在实践方面，如果您要使用d3，我建议您使用<polygon>元素。从你的照片看，它看起来好像每个“光”。至少覆盖一个房间，polygon的点可以匹配墙的坐标。在灯光延伸到其他房间的地方，在大多数情况下，从虚线看，它们看起来是三角形。在颜色重叠的地方，d3可以提供帮助，因为SVG元素允许fill属性与alpha组件。

d3.select('svg').append('polygon')
    .attr('fill', 'rgba(255, 0, 0, 0.5)')
    .attr('d', foo);

这将绘制一个半透明红色的多边形。

然而，d3无法帮助您弄清楚这些灯光的坐标。恕我直言，你可以用一个从光源开始的搜索算法来做到这一点＆＃39;并以线性方式散发出墙壁。当它找到一堵墙时，它会采用那个“停止”的坐标。指向并将其添加到polygon的路径中。当polygon绘制时，颜色将重叠并显示为光源。