如何旋转正方形以最小化每个点与四个任意点之间的距离？

如何解决如何旋转正方形以最小化每个点与四个任意点之间的距离？

我一直在努力关注这篇文章： https://andersource.dev/2020/11/06/organic-grid.html

特别是附录。但我对微积分及其符号的理解是有限的。

所以我也尝试理解和改编/重写源代码： https://raw.githubusercontent.com/andersource/andersource.github.io/master/assets/organic-grid/index.js

但它使用了一些我不熟悉的库，我想从第一原则开始工作。

这是一个包含我的代码的简单示例（所有相关代码都在 rotateSquaretoFitQuad 函数中）

https://editor.p5js.org/marcusround/sketches/5jckZCCw-

[编辑：此示例已使用下面的 andersource 提供的修复程序进行了更新] 但是生成的正方形似乎具有几乎随机的旋转，因此我在调整代码时一定犯了一些错误。

我的目标是最小化连接每对顶点的四条线的总长度。

解决方法

您对数学的实现是正确的。这种情况下的罪魁祸首是数学和许多图形实用程序之间 y 轴的“向上”方向之间臭名昭著的不匹配；这会影响文章中数学公式的“顺时针”假设。

在您的实现中，您可以像这样定义象限：

const quadrants = [
    [-1,-1],// TL
    [1,// TR
    [1,1],// BR
    [-1,// BL
  ]

这确实以顺时针方向渲染顶点，但在数学上会导致逆时针计算。

将其替换为以下定义：

  const quadrants = [
    [-1,[-1,[1,]

导致正确的解决方案（尽管顶点的逆时针渲染以及“拟合”正方形和原始顶点之间的移动对应关系）。

（另一种解决方案是在“向下为 y 为正”的系统中重新推导数学，但这可能是一种矫枉过正。）