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