Peppers_Ghost_Simulator
## 🎩 Pepper's Ghost Multi-Mirror Simulator
A real-time interactive simulator of the classic Victorian-era stage illusion — the optical trick still used today in museum exhibits, concerts, and AR displays to make objects appear to float in mid-air.
Place a tilted glass between a viewer and a hidden screen. The screen's image reflects toward the eye, and the brain interprets it as a ghost hovering in space behind the mirror. This sim lets you build setups with **up to 8 mirrors** and watch the chained reflections work in real time. Every component is draggable.
### ✨ Features
- **Up to 8 mirrors** with free placement and rotation
- **Real-time light-path tracing** through chained reflections
- Computes virtual-image positions using vector reflection law: **P′ = P − 2(P·n̂)n̂**
- **Drag everything** directly on canvas (viewer, source, any mirror)
- Click mirror center → translate
- Click mirror endpoint → rotate
- **Validity status:** VALID / OFF MIRROR / NO BOUNCE
- **7 built-in presets:** single 45°, V-shape, parallel, zigzag, periscope, tunnel, kaleidoscope
- **Toggleable overlays:** rays, incidence/reflection arcs, intermediate virtual images, grid
- **Bilingual UI:** Thai 🇹🇭 / English 🇬🇧 with one-click toggle
### 🔬 How it works
The "ghost" position **G** is computed by recursively reflecting the source **S** across each mirror plane:
> G = reflect(reflect(… reflect(S, M₁) …, Mₙ₋₁), Mₙ)
The light path is then traced backwards from the viewer's eye, finding the intersection with each mirror plane in reverse order. If a bounce point falls outside the actual mirror segment, it's flagged in red.
### ⚠️ Notes on real-world feasibility
The math always produces a valid geometric result, but a real piece of glass only reflects ~8–10% of light per surface. After 3+ bounces the image becomes effectively invisible. In practical Pepper's Ghost installations, only **1–2 mirrors** are used. Multi-mirror setups in this sim are valuable for understanding optics intuition rather than direct construction — but they're fun to play with.
### 🛠️ Built with
Vanilla **HTML / SVG / JavaScript**. No frameworks, no build step, no dependencies. Single file. Works offline once loaded.
### 🎓 Use cases
- Physics & optics education (high school / undergrad)
- Stagecraft and museum exhibit prototyping
- Magic / illusion design reference
- Hologram-style display research
- Just being curious about how light bounces
### 📐 Controls
| Action | Result |
|---|---|
| Drag 👁️ (viewer) | Move viewing position |
| Drag 🟨 (source) | Move light source |
| Click + drag mirror **center** | Translate mirror |
| Click + drag mirror **endpoint** | Rotate mirror |
| Slider next to each mirror | Set angle precisely |
| Preset buttons | Load example configurations |
### 🌐 Language
The interface is fully bilingual. Use the **ไทย / EN** toggle in the top-right corner to switch.
---
## 🎩 Pepper's Ghost Multi-Mirror Simulator
ซิมูเลเตอร์แบบโต้ตอบเรียลไทม์สำหรับ "Pepper's Ghost" — ภาพลวงตาทางแสงสมัยวิคตอเรียนที่ทำให้วัตถุดูเหมือนลอยอยู่กลางอากาศ ปัจจุบันยังใช้ในพิพิธภัณฑ์ คอนเสิร์ต และจอ AR
วางกระจกใสเอียงระหว่างผู้ชมกับจอที่ซ่อนไว้ ภาพจากจอจะสะท้อนเข้าสู่ตา สมองตีความว่าเป็น "ภาพลอย" อยู่หลังกระจก ซิมนี้ให้คุณสร้าง setup ได้ถึง **8 บาน** แล้วดูการสะท้อนต่อเนื่องทำงานแบบ real-time ทุกองค์ประกอบลากได้
### ✨ ฟีเจอร์
- กระจกได้สูงสุด **8 บาน** วางได้อิสระ หมุนได้
- ลากเส้นแสงและคำนวณตำแหน่งภาพลอยแบบเรียลไทม์
- ใช้สูตรสะท้อนเวกเตอร์: **P′ = P − 2(P·n̂)n̂**
- ลากทุกอย่างบน canvas ได้ — ผู้ชม, แหล่งแสง, กระจก
- คลิกกลางกระจก → เลื่อน
- คลิกปลายกระจก → หมุน
- สถานะตรวจความถูกต้อง: VALID / OFF MIRROR / NO BOUNCE
- Preset 7 แบบ: 1 บาน, V, ขนาน, ซิกแซก, เพอริสโคป, อุโมงค์, คาเลโดสโคป
- ปุ่มสลับภาษา ไทย / EN
### 🔬 หลักการ
ภาพลอย **G** คำนวณด้วยการสะท้อนแหล่งแสง **S** ข้ามระนาบกระจกซ้ำกันไปเรื่อย ๆ จนครบทุกบาน แล้วลากเส้นแสงย้อนกลับจากตาผู้ชมผ่านทุกกระจกกลับไปหาแหล่งแสง ถ้าจุดที่แสงควรเด้งดันตกนอกขอบกระจกจริง ระบบจะ flag เป็นสีแดง
### ⚠️ หมายเหตุเรื่องของจริง
คณิตศาสตร์คำนวณได้เสมอ แต่กระจกใสในชีวิตจริงสะท้อนแสงแค่ ~8–10% ต่อด้าน สะท้อน 3 ครั้งขึ้นไปก็แทบมองไม่เห็น ของจริงเลยใช้แค่ 1–2 บานเท่านั้น setup ที่ใช้กระจกเยอะในซิมนี้เหมาะสำหรับเรียนรู้สัญชาตญาณทางแสงมากกว่าการประยุกต์จริง
### 🛠️ Built with
HTML / SVG / JavaScript ล้วน ๆ ไม่มี framework ไม่มี build step ไฟล์เดียว ใช้ได้แม้ offline
