Java Applet 實現雙眼跟隨鼠標移動的動態視覺效果

效果預覽

核心原理

• 繼承 java.applet.Applet，實現 MouseMotionListener 監聽鼠標移動。
• 雙眼參數（位置、虹膜/瞳孔半徑、顏色、偏移係數）均通過 <param> 外部配置，靈活復用。
• 數學核心：根據鼠標相對眼球中心的向量，利用三角函數計算虹膜/瞳孔在允許圓形區域內的最大位移，並引入雙眼獨立性係數 模擬真實眼球協調運動。
• 採用雙緩衝繪圖（createImage + 離屏 Graphics）消除閃爍。

關鍵代碼結構

public class Eye extends Applet {
    // 參數：leftEyeX, leftEyeY, rightEyeX, rightEyeY, irisRadius, pupilRadius,
    // leftEyeRadius, rightEyeRadius, horizontalSkew, eyeIndependence,
    // irisRed/Green/Blue, verticalOffset, faceFile, testMode...

    private Image mFace; // 背景臉部圖片
    private int mMouseX, mMouseY; // 鼠標座標

    public void init() {
        // 解析 param 參數，設置默認值
        // 計算瞳孔最大移動半徑 mLeftPupilTR, mRightPupilTR
        addMouseMotionListener(new MouseMotionAdapter() {
            public void mouseMoved(MouseEvent e) {
                mMouseX = e.getX(); mMouseY = e.getY();
                calculateEyePositions(); // 核心幾何計算
                repaint();
            }
        });
        setSize(400, 135);
    }

    private void calculateEyePositions() {
        // 左眼向量
        int dx = mMouseX - mLeftEyeX;
        int dy = mMouseY - mLeftEyeY;
        // ... 利用勾股定理與相似三角形計算虹膜/瞳孔新座標
        // 引入 eyeIndependence 進行雙眼協調平滑
    }

    public void paint(Graphics g) {
        // 雙緩衝：創建離屏圖像，繪製幀，最後 drawImage 到屏幕
        // 繪製背景臉部、虹膜(填充橢圓)、瞳孔(填充黑色橢圓)
        // testMode 可顯示眼球移動邊界圓
    }
}

HTML 嵌入示例

<applet code="Eye" codebase="codebase" width="400" height="135" name="eyesApplet">
    <param name="faceFile" value="doofus.jpg"/>
    <param name="leftEyeX" value="75"/> <param name="leftEyeY" value="77"/>
    <param name="rightEyeX" value="310"/> <param name="rightEyeY" value="75"/>
    <param name="irisRadius" value="20"/> <param name="pupilRadius" value="8"/>
    <param name="leftEyeRadius" value="15"/> <param name="rightEyeRadius" value="5"/>
    <param name="horizontalSkew" value="3.5"/>
    <param name="eyeIndependence" value="0.4"/>
    <param name="irisRed" value="128"/> <param name="irisGreen" value="64"/> <param name="irisBlue" value="0"/>
    <param name="verticalOffset" value="100"/>
</applet>

現代替代方案

Applet 已被瀏覽器淘汰。同類效果可用 Canvas + JavaScript 或 JavaFX 實現，跨平台、無需插件、性能更優。