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

【问题标题】：How can I rotate a square to minimize the distance between each point and four arbitrary points?如何旋转正方形以最小化每个点与四个任意点之间的距离？
【发布时间】：2021-01-09 08:53:53
【问题描述】：

我一直在尝试关注这篇文章： 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 提供的修复程序进行了更新] ~~但是生成的正方形似乎有一个几乎随机的旋转，所以我在调整代码时一定犯了一些错误。~~

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

【问题讨论】：

标签： javascript geometry p5.js calculus procedural-generation

【解决方案1】：

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

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

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

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

将其替换为以下定义：

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

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

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

【讨论】：

啊，那个老犯！谢谢你。通过调整xyt 数组的顺序，我能够匹配顶点。再次感谢您的精彩文章并花时间进行调试。