当前位置：首页 > news >正文

【Mathematics】椭圆眼睛跟随鼠标交互中的仿射变换数学推导

news 2025/10/21 7:29:59

椭圆眼睛跟随鼠标交互中的仿射变换数学推导

摘要

本文详细分析了在Processing环境中实现椭圆眼睛跟随鼠标交互功能的数学原理，重点阐述了通过仿射变换将椭圆坐标系转换为圆形坐标系的核心算法。通过严谨的数学推导，证明了该变换方法的正确性和有效性，为计算机图形学中的类似问题提供了理论参考。
在这里插入图片描述

1. 引言

在计算机图形学中，实现图形对象对用户输入的精确响应是一个基础而重要的问题。本文研究的具体问题是：如何在椭圆区域内实现一个圆形眼珠跟随鼠标移动，且保证眼珠始终不超出椭圆边界。传统方法直接处理椭圆边界条件较为复杂，本文采用仿射变换技术，将椭圆坐标系转换为圆形坐标系，从而简化计算。

2. 问题描述与符号定义

设椭圆眼睛E的中心坐标为 $x_e, y_e)$ ，半长轴为 $a$ （x轴方向），半短轴为 $b$ （y轴方向）。椭圆的标准方程为：

$(x−xe)2a2+(y−ye)2b2=1\frac{(x - x_e)^2}{a^2} + \frac{(y - y_e)^2}{b^2} = 1$

鼠标位置为 $M = (x_m, y_m)$ ，眼珠半径 $rp=a⋅pupilScaler_p = a \cdot \text{pupilScale}$ ，其中 $pupilScale∈(0,1)\text{pupilScale} \in (0,1)$ 为眼珠相对于眼睛大小的比例系数。目标是计算眼珠中心位置 $P = (x_p, y_p)$ ，使得眼珠始终停留在椭圆边界内部，并尽可能跟随鼠标方向。

3. 仿射变换原理

3.1 坐标变换

为了简化计算，我们通过仿射变换将椭圆映射为圆形。定义缩放因子 $k$ 和新坐标系 $(X, Y)$ ：

$\frac{a}{b}$

$X = x - x_e$

$\cdot (y - y_e) = \frac{a}{b}(y - y_e)$
在这里插入图片描述

3.2 椭圆到圆的映射验证

在原椭圆坐标系中，椭圆方程为：

$(x−xe)2a2+(y−ye)2b2=1\frac{(x - x_e)^2}{a^2} + \frac{(y - y_e)^2}{b^2} = 1$

代入变换关系：

$X2a2+(Yk)2b2=X2a2+Y2k2b2\frac{X^2}{a^2} + \frac{\left(\frac{Y}{k}\right)^2}{b^2} = \frac{X^2}{a^2} + \frac{Y^2}{k^2 b^2}$

由于 $\frac{a}{b}$ ，则 $k^2 b^2 = a^2$ ，因此：

$X2a2+Y2a2=1\frac{X^2}{a^2} + \frac{Y^2}{a^2} = 1$

即：

$X^2 + Y^2 = a^2$

这确实是一个半径为 $a$ 的圆方程。因此，通过此仿射变换，椭圆被映射为半径为 $a$ 的圆形。
在这里插入图片描述

4. 眼珠位置计算

4.1 鼠标位置变换

鼠标位置 $M = (x_m, y_m)$ 在变换后的坐标系中为：

$X_m = x_m - x_e$

$Ym=ab(ym−ye)Y_m = \frac{a}{b}(y_m - y_e)$

变换后鼠标点 $M' = (X_m, Y_m)$ 到圆心 $(0, 0)$ 的距离为：

$\sqrt{X_m^2 + Y_m^2}$

4.2 眼珠边界条件

在变换后的圆形坐标系中，眼珠是一个半径为 $rp=a⋅pupilScaler_p = a \cdot \text{pupilScale}$ 的圆。眼珠中心 $P' = (X_p, Y_p)$ 必须满足不超出圆形边界的条件。

眼珠完全位于圆形眼睛内部的条件是眼珠中心到圆心的距离不超过 $a - r_p$ 。因此，我们分两种情况讨论：
在这里插入图片描述

情况一：鼠标在安全区域内

当 $\leq a - r_p$ 时，鼠标位于安全区域内，眼珠中心可以直接跟随鼠标位置：

$X_p = X_m$

$Y_p = Y_m$

情况二：鼠标在安全区域外

当 $d > a - r_p$ 时，鼠标位于安全区域外，眼珠中心应位于从圆心指向鼠标方向的射线上，且与圆心的距离为 $a - r_p$ 。

首先计算单位方向向量：

$u=(Xmd,Ymd)\mathbf{u} = \left( \frac{X_m}{d}, \frac{Y_m}{d} \right)$

则眼珠中心位置为：

$Xp=ux⋅(a−rp)=Xmd⋅(a−rp)X_p = \mathbf{u}_x \cdot (a - r_p) = \frac{X_m}{d} \cdot (a - r_p)$

$Yp=uy⋅(a−rp)=Ymd⋅(a−rp)Y_p = \mathbf{u}_y \cdot (a - r_p) = \frac{Y_m}{d} \cdot (a - r_p)$

4.3 坐标逆变换

将眼珠位置 $P' = (X_p, Y_p)$ 从圆形坐标系变换回原始椭圆坐标系：

$x_p = X_p + x_e$

由 $Yp=ab(yp−ye)Y_p = \frac{a}{b}(y_p - y_e)$ 可得：

$yp=Yp⋅ba+yey_p = \frac{Y_p \cdot b}{a} + y_e$
在这里插入图片描述

5. 算法总结

基于上述推导，椭圆眼睛跟随鼠标的完整算法可总结如下：

输入参数：椭圆中心 $x_e, y_e)$ ，半长轴 $a$ ，半短轴 $b$ ，眼珠比例系数 $pupilScale\text{pupilScale}$ ，鼠标位置 $x_m, y_m)$

计算步骤：

计算眼珠半径： $rp=a⋅pupilScaler_p = a \cdot \text{pupilScale}$
计算缩放因子： $\frac{a}{b}$
变换鼠标坐标：
$X_m = x_m - x_e$
$Ym=k⋅(ym−ye)Y_m = k \cdot (y_m - y_e)$
计算变换后距离： $\sqrt{X_m^2 + Y_m^2}$
计算变换后眼珠位置：
- 若 $\leq a - r_p$ ：
  $X_p = X_m$ ， $Y_p = Y_m$
- 否则：
  $Xp=Xmd⋅(a−rp)X_p = \frac{X_m}{d} \cdot (a - r_p)$ ， $Yp=Ymd⋅(a−rp)Y_p = \frac{Y_m}{d} \cdot (a - r_p)$
逆变换得到最终眼珠位置：
$x_p = X_p + x_e$
$yp=Ypk+ye=Yp⋅ba+yey_p = \frac{Y_p}{k} + y_e = \frac{Y_p \cdot b}{a} + y_e$