前後に揺れるシンプルな振り子の視覚シミュレーターを作成してください。アプリは英語で、ユーザーフレンドリーなインターフェイスを備えている必要があります。

レイアウト:
- 振り子の揺れを視覚的に表示するキャンバス領域。
- ユーザーが振り子の長さ（0.1～5メートル）、初期角度（0～90度）、重力加速度（0～15 m/s²）を調整できるスライダー付きのフォームセクション。
- 時間とともに振り子の角度変位を表示するグラフ領域。

インタラクション:
- ユーザーは振り子の動きを開始・一時停止できるようにする。
- スライダーは振り子のパラメーターを動的に調整し、その変更はシミュレーションに即座に反映される。

アニメーション:
- 振り子は実際の物理計算に基づいてリアルなアニメーションを行うこと。
- アニメーションのdurationと速度は振り子のパラメーターによって決まり、自然なリアルタイムの感覚を提供する。

グラフ:
- 時間経過に伴う角度変位を折れ線グラフで表示する。
- シミュレーションの進行中にグラフがリアルタイムで更新されることを確認する。
- 軸ラベルとグリッドを明確にしてグラフの視認性を向上させる。

ベストプラクティス:
- 視覚的な更新に滑らかなトランジションを使用してユーザー体験を向上させる。
- 振り子のパラメーターを簡単に操作できる直感的なユーザーインターフェイスを維持する。
- 物理計算とアニメーションを効率的に処理できるようにパフォーマンスを最適化する。

Build a visual simulator of a simple pendulum swinging back and forth. Add a form with sliders for pendulum length (0.1–5 meters), initial angle (0–90 degrees), and gravitational acceleration (0–15 m/s²). Animate the pendulum’s motion and show a graph of its angular displacement over time.

Q: How should the pendulum be represented visually?
A: yes

Q: What should be the duration and speed of the animation?
A: yes

Q: What kind of graph style do you prefer for angular displacement?
A: decide