Skip to content

Interactive 2D wave pendulum simulation using HTML5 Canvas and p5.js. Explore synchronization, resonance, and gravity effects.

License

Notifications You must be signed in to change notification settings

Huzitive/Wave-Pendulum

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

4 Commits
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🌊 Wave Pendulum Simulation – NEDUET Physics

This web-based interactive simulation demonstrates the physics of pendulum waves. Created using pure HTML, CSS, and JavaScript, it visualizes the motion of multiple pendulums of varying lengths and simulates wave-like interference patterns over time.

βœ… Created by: Huzaifa Ahmed Khan πŸ‘©β€πŸ« Under the Supervision of: Ms. Marium Ghulam Nabi 🏫 Department of Physics, NED University of Engineering & Technology


🧠 Physics Behind the Simulation

The motion of each pendulum follows the classical harmonic equation:

$$ \theta(t) = \theta_0 \cos\left(\sqrt{\frac{g}{L}} , t\right) $$

Where:

  • $\theta(t)$ – Angular displacement at time $t$
  • $\theta_0$ – Initial angle
  • $g$ – Gravitational acceleration
  • $L$ – Length of pendulum

By using pendulums of slightly varying lengths, their oscillations fall in and out of phase, creating beautiful wave-like patterns.


πŸ›  Features

  • πŸŽ›οΈ Adjustable parameters:

    • Number of pendulums
    • Shortest & longest pendulum length
    • Gravity
    • Initial angle
  • 🎨 Toggle motion trails for visual effects

  • πŸ“ˆ Real-time graph of $\theta(t)$ for the first pendulum using Chart.js

  • πŸ“€ Export graph data as:

    • PNG image
    • CSV data
  • πŸ“± Responsive UI (scales well on various screen sizes)


πŸ“‚ File Structure

wave-pendulum-simulation/
β”‚
β”œβ”€β”€ index.html       # Main simulation page
β”œβ”€β”€ style (inline)   # Embedded CSS styling
└── script (inline)  # JS logic for pendulum physics, animation & charting

πŸš€ Getting Started

βœ… Prerequisites

No installations or builds needed. This simulation is pure HTML/CSS/JS.

▢️ Run Locally

  1. Clone this repository

    git clone https://github.com/your-username/wave-pendulum-simulation.git
  2. Open index.html in any modern browser


πŸ§ͺ Technologies Used

  • HTML5
  • CSS3
  • JavaScript (ES6+)
  • MathJax – for LaTeX math rendering
  • Chart.js – for plotting angular motion

πŸ“€ Exports

  • Export PNG: Download the graph as a .png image
  • Export CSV: Download time-angle data for further analysis

πŸ“œ License

This project is for academic and educational purposes. Contact the author if you'd like to reuse or build upon this work.


About

Interactive 2D wave pendulum simulation using HTML5 Canvas and p5.js. Explore synchronization, resonance, and gravity effects.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages