🔬 Hair Thickness — Diffraction Simulation

An interactive browser-based simulation that demonstrates how laser diffraction can be used to estimate the thickness of a human hair.

The project combines physics, mathematical modeling, and JavaScript visualization into an interactive experiment that runs entirely in the browser.

🚀 Live Demo

GitHub Pages: https://abhardwaj28.github.io/Hair-Diffraction-Simulation/

📌 About the Project

A strand of hair can act as a thin obstacle when illuminated by a laser. According to Babinet's principle, the diffraction pattern produced by a thin obstacle is related to the diffraction pattern of a slit of the same width.

By measuring the distance between the central maximum and the first diffraction minimum, the diameter of the hair can be estimated.

The simulation models this diffraction pattern and allows the user to change experimental parameters interactively.

🧠 Physics Behind the Simulation

For a thin obstacle, the first diffraction minimum can be approximated using:

$$ d\sin(\theta)=\lambda $$

For small angles:

$$ \sin(\theta)\approx\frac{\beta}{D} $$

Therefore:

$$ \boxed{d=\frac{\lambda D}{\beta}} $$

Where:

Symbol	Meaning
d	Hair diameter
λ	Laser wavelength
D	Hair-to-screen distance
β	Distance from the central maximum to the first minimum

The simulation calculates the expected diffraction intensity across the screen using the single-slit diffraction intensity relationship:

$$ I(\theta)=I_0\left(\frac{\sin u}{u}\right)^2 $$

where

$$ u=\frac{\pi d\sin(\theta)}{\lambda} $$

✨ Features

• Interactive diffraction-pattern simulation
• Adjustable laser wavelength
• Adjustable hair-to-screen distance
• Adjustable hair diameter
• Adjustable screen width
• Automatic calculation of the first diffraction minimum
• Automatic hair-thickness estimation
• Real-time graph updates
• Central diffraction maximum visualization
• Runs directly in a web browser
• No backend or server required

🛠️ Technologies Used

• HTML
• CSS
• JavaScript
• HTML Canvas
• Mathematical modeling
• Diffraction physics

📂 Project Structure

Hair-Diffraction-Simulation/
│
├── index.html
└── README.md

The entire simulation is contained inside index.html, making it simple to deploy using GitHub Pages.

💻 Running Locally

Clone the repository:

git clone https://github.com/ABhardwaj28/Hair-Diffraction-Simulation.git

Enter the project directory:

cd Hair-Diffraction-Simulation

Then open:

index.html

in any modern web browser.

No Python installation or backend server is required.

🌐 Deployment

The project is deployed using GitHub Pages.

To deploy your own copy:

1. Create a public GitHub repository.

2. Upload index.html.

3. Open Settings → Pages.

4. Select:

   • Source: Deploy from a branch
   • Branch: main
   • Folder: / (root)

5. Save the settings.

GitHub Pages will automatically publish the website.

🔬 Example Experiment

Using approximately:

Laser wavelength = 650 nm
Hair-to-screen distance = 2 m
Hair diameter = 70 µm

the simulation predicts the position of the first diffraction minimum and uses it to calculate the hair diameter.

The values can be changed to explore how wavelength, distance, and hair thickness affe