---
# System prepended metadata

title: 物理模擬網站

---

## 動機
在高二學習物理的過程中，我常遇到許多抽象難懂的實驗內容。然而課堂大多僅依賴課本圖片講解，實際操作的機會有限，使我在理解上感到困難。因此，我希望設計一個能模擬物理實驗過程的網站，幫助跟我一樣的人可以透過動畫視覺化原理，提升學習成效。

## 網頁架構
```pgsql
專案根目錄/
├── public/
│   └── laser.png
├── src/
│   ├── assets/
│   │   └── ai_photo.png
│   ├── components/
│   │   ├── double-slit-interference.jsx
│   │   ├── home.jsx
│   │   ├── horizontal-projectile-motion.jsx
│   │   ├── linear-motion.jsx
│   │   ├── simply-input.jsx
│   │   └── wave.jsx
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .gitignore
├── eslint.config.js
├── index.html
├── package.json
├── package-lock.json
├── README.md
└── vite.config.js
```

## 網頁介紹
這是一個以 React + Vite 打造的開源科學動畫平台，主要展示高中與大學基礎物理中的各種運動與波動現象，提供互動式模擬以協助學習與理解抽象的物理概念。

## 功能
### 1. 雙狹縫干涉模擬（double-slit-interference.jsx）
模擬光波的干涉條紋，幫助理解波動疊加原理。

### 2. 水平拋體運動（horizontal-projectile-motion.jsx）
展示物體在水平方向投擲下的運動軌跡。

### 3. 直線運動與等加速度運動（linear-motion.jsx）
視覺化常見的一維運動。


## 心得 & 感想
在這次的實作中，我從一個要跟別人一起做網頁的新手，變成了可以自己獨立完成網頁的開發者，在這段開發期間，我比之前更了解網頁的架構，也重新找回了我之前寫網頁的記憶，讓我成功的把網頁撰寫了出來，雖然中間遇到許多困難以及要注意許多React的規定應以及細節，但我仍是ㄧㄧ的突破解決，增加我對寫網頁的信心。

## 連結區
- [網站](https://bosen-you.github.io/physics-React)
- [github](https://github.com/bosen-you/physics-React)