3次ベジエ曲線と点との最短距離を計算する方法を数式で説明します。 ## 3次ベジエ曲線の定義 3次ベジエ曲線は4つの制御点 P₀, P₁, P₂, P₃ で定義され、パラメータ t ∈ [0,1] を用いて以下の式で表されます： **B(t) = (1-t)³P₀ + 3(1-t)²tP₁ + 3(1-t)t²P₂ + t³P₃** ## 最短距離計算のアプローチ 任意の点 Q から曲線上の点 B(t) までの距離の2乗は： **d²(t) = |B(t) - Q|² = (B(t) - Q) · (B(t) - Q)** 最短距離を求めるには、この関数を最小化する t を見つける必要があります。 ## 最適化条件 距離が最小になる条件は： **d/dt[d²(t)] = 0** これを展開すると： **d/dt[d²(t)] = 2(B(t) - Q) · B'(t) = 0** つまり：**(B(t) - Q) · B'(t) = 0** この式は、点 Q から曲線上の点 B(t) へのベクトルが、その点での接線ベクトル B'(t) に垂直であることを意味します。 ## 1次導関数の計算 B'(t) = 3(1-t)²(P₁ - P₀) + 6(1-t)t(P₂ - P₁) + 3t²(P₃ - P₂) ## 実際の解法手順 1. **5次方程式の構築**：(B(t) - Q) · B'(t) = 0 を展開すると、一般的に t についての5次方程式になります 2. **数値解法**：この5次方程式は解析的に解けないため、以下の数値解法を使用： - ニュートン・ラフソン法 - 二分法 - その他の非線形方程式求解アルゴリズム 3. **候補点の評価**： - t ∈ [0,1] 範囲内のすべての解を求める - 端点 t = 0, t = 1 も考慮 - 各候補点での距離を計算 4. **最短距離の決定**： - すべての候補点での距離を比較 - 最小値が最短距離 ## 簡略化されたアルゴリズム 実装では以下のような近似手法もよく使われます： 1. **uniform sampling**：t を等間隔でサンプリングして最小値を探す 2. **adaptive subdivision**：曲線を再帰的に分割して精度を上げる 3. **初期値の改良**：サンプリングで得た近似解を数値最適化の初期値とする ## 2次元の場合の具体例 2次元で P₀ = (x₀,y₀), P₁ = (x₁,y₁), P₂ = (x₂,y₂), P₃ = (x₃,y₃), Q = (qₓ,qᵧ) の場合： **(B(t) - Q) · B'(t) = 0** を展開すると、x, y 成分それぞれについて計算し、それらの和が0になる条件から5次方程式が得られます。 この問題は計算量が多いため、実用的な実装では数値的なアプローチが一般的です。

ニュートン法を使って3次ベジエ曲線と点との最短距離を求めるHTMLとJavaScriptのコードを作成します。3次ベジエ曲線と点との最短距離をニュートン法で求めるインタラクティブなツールを作成しました。 ## 主要な機能： **数学的実装:** - `distanceFunction(t, q)`: (B(t) - Q) · B'(t) = 0 の左辺を計算 - `distanceFunctionDerivative(t, q)`: その導関数を計算 - `findClosestPointNewton()`: ニュートン法で解を求める **アルゴリズムの特徴:** - 複数の初期値（0, 0.25, 0.5, 0.75, 1）でニュートン法を実行 - 端点も候補に含めて評価 - パラメータ t を [0,1] 範囲にクランプ - 収束判定と最大反復回数制限 **視覚化:** - ベジエ曲線（緑色） - 制御点P0-P3（赤色） - 対象点Q（青緑色） - 最短距離の点（黄色） - 最短距離を示す点線 **操作方法:** 1. 制御点P0-P3の座標を変更 2. 対象点Qの座標を変更 3. ニュートン法のパラメータを調整 4. リアルタイムで結果が更新されます ニュートン法は局所的な最適化手法なので、複数の初期値を使用することで大域的な最小値を見つけやすくしています。

マウスドラッグ機能を確実に動作するように、より直接的で信頼性の高い実装に修正します。マウスドラッグ機能を完全に書き直して、確実に動作するようにしました！ ## 主な改善点： **1. シンプルで確実なイベント処理:** - グローバル変数でドラッグ状態を管理 - 直接的なイベントハンドラー関数 - 余計な複雑さを排除 **2. より大きな操作範囲:** - 制御点の半径を8ピクセルに拡大 - 点Qの半径を10ピクセルに拡大 - ドラッグ判定範囲を30ピクセルに拡大 **3. 視覚的な改善:** - 制御点に白い縁取りを追加 - ドラッグ可能であることを明確に表示 - カーソルの変化でインタラクション可能であることを示唆 **4. 確実なマウス座標計算:** - `getBoundingClientRect()`を使用した正確な座標変換 - キャンバス境界内への確実なクランプ **5. タッチデバイス対応:** - タッチイベントをマウスイベントに変換 - モバイルでも操作可能 ## 操作方法： 1. **制御点P0-P3（赤い丸）**や**点Q（青緑の丸）**に近づく 2. **カーソルが手の形**に変わる 3. **クリック&ドラッグ**で点を移動 4. **リアルタイムで最短距離が更新**される 5. **入力フィールドも自動更新**される この実装では、マウスドラッグが確実に動作するはずです。制御点を自由に動かして、ベジエ曲線の形状変化と最短距離の変化を直感的に確認できます！