在Desmos中实现正方形变形时点的相对位置保持功能

要实现单位正方形内点v在四边形变形后保持相对位置，双线性插值是最直接且符合需求的方法，能完美解决边界点不受其他顶点干扰的问题。

核心原理 #

假设原单位正方形的四个顶点对应关系为：

• 原(0,0) → 变形后顶点P₁
• 原(1,0) → 变形后顶点P₂
• 原(1,1) → 变形后顶点P₃
• 原(0,1) → 变形后顶点P₄

对于原单位正方形内的点v=(u, v)（u、v∈[0,1]），变形后的目标点V的坐标计算公式为：

Vₓ = (1-u)(1-v)·P₁ₓ + u(1-v)·P₂ₓ + u·v·P₃ₓ + (1-u)v·P₄ₓ
Vᵧ = (1-u)(1-v)·P₁ᵧ + u(1-v)·P₂ᵧ + u·v·P₃ᵧ + (1-u)v·P₄ᵧ

关键特性验证 #

• 当v=(1,0)时，代入公式得V=P₂，完全对应变形后的对应顶点，不受其他三个点影响
• 当v=(0.5,0.5)时，V=(P₁+P₂+P₃+P₄)/4，正好是变形四边形的中心
• 其他边界点（如(0,0)、(1,1)、(0,1)）都会精准映射到对应的变形后顶点

Desmos中实现步骤 #

1. 保留你已有的四个可拖动顶点P₁、P₂、P₃、P₄
2. 定义控制相对位置的参数u、v（范围0到1，可拖动滑块实现）
3. 计算目标点V的坐标：
   • 输入V_x=(1-u)(1-v)P1_x + u(1-v)P2_x + u*v*P3_x + (1-u)v*P4_x
   • 输入V_y=(1-u)(1-v)P1_y + u(1-v)P2_y + u*v*P3_y + (1-u)v*P4_y
4. 绘制点(V_x, V_y)即可

为什么之前的方法失效 #

• 普通线性插值（Lerp）只考虑了单边的比例关系，没有兼顾两个轴向的权重，导致边界点被其他顶点的位置干扰
• 基于距离的权重乘法如果没有对应双线性的权重逻辑，会因为距离的非线性变化导致位置偏移

内容的提问来源于stack exchange，提问作者Cameron Howell