조절 가능한 매개변수로 앞뒤로 움직이는 단순 진자의 웹 기반 시각 시뮬레이터를 만드세요. **프로젝트 개요**: 슬라이더로 조절 가능한 볼이 달린 진자의 움직임을 관찰할 수 있는 시각적 시뮬레이션을 구축하세요. **UI/UX 디자인 및 흐름**: 진자의 길이(0.1–5미터), 초기 각도(0–90도), 중력가속도(0–15 m/s²)를 조절할 수 있는 슬라이더가 있는 폼을 구현하고, 이 폼을 그래프 옆에 배치하세요. **핵심 기능 및 로직**: 슬라이더로 설정된 매개변수에 따라 진자의 움직임을 애니메이션으로 구현하고, 각도 변위를 그래프로 계산 및 표시하며, 운동 에너지, 위치 에너지 및 그 합(기계 에너지)을 보여주는 그래프도 제공하세요. **베스트 프랙티스**: 직관적이고 반응성이 뛰어난 UI를 유지하며 슬라이더와 그래프, 애니메이션이 부드럽게 업데이트되도록 하고, 명확한 라벨과 높은 가독성을 제공하세요.

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 graphs of its angular displacement.
Show graphs of kinetic and potential energy of pendulum and sum them up into mechanical energy


Q: How should the pendulum's motion be visually represented?
A: Include a bob 

Q: What layout do you envision for the form and the graphs?
A: Place the form to the side of the graphs