主題：使用 HTML Canvas 製作「煙火動畫」並探討其中的數學與物理概念

日期：

學科學習學習單

主題：使用 HTML Canvas 製作「煙火動畫」並探討其中的數學與物理概念

【課程目標】

  1. 了解簡易 HTML 網頁結構與 JavaScript 互動基礎。
  2. 實作煙火動畫，學習拋體運動與重力加速度在程式中的應用。
  3. 培養跨領域素養：將數學、自然科學（物理）與資訊技術整合。

一、預習問題

  1. HTML 與 JavaScript 的關係

    • 請同學在課前簡單查詢：HTML 負責什麼？JavaScript 又負責什麼？
    • 在學習單上簡短說明（2-3 句話即可）。

  2. 思考：煙火是如何爆炸並在空中散開？

    • 分享你所知道的拋物線運動或重力原理：
      1. 寫出你對「重力加速度」或「向量」的理解。
      2. 你認為程式中該如何模擬物體往下掉的效果？

  3. 程式碼預覽

    • 若先看過老師或講義上提供的程式碼，請你從中找出任何一個你覺得陌生的程式語法或函數名稱，記錄在下面：
      • 例：requestAnimationFrame()、Math.cos()、window.addEventListener()等。
    • 試著查詢它們各自的用途或功能（可透過書本、網路資源）：

二、操作練習

請同學下載並開啟老師提供的範例程式碼，或直接複製貼上到新建立的 .html 檔案中，然後在瀏覽器中執行並觀察。

  1. 執行結果

    • 當你開啟網頁後，看到了哪些效果？
    • 有沒有遇到畫面空白或出錯的情況？如果有，如何解決？

  2. 調參實驗

    • 試著修改下列參數並觀察效果：
      1. particleCount（初始設定在 explode() 裡）：將 50 + Math.floor(Math.random() * 50) 改成 80 + Math.floor(Math.random() * 120)。
      2. gravity（粒子物件中的 this.gravity）：從 0.06 改成 0.2 或 0.01。
    • 紀錄： 不同參數數值對動畫呈現造成哪些差異？
      • 若調大 gravity，粒子運動軌跡有何變化？
      • 若增加 particleCount，畫面會如何？你有察覺到效能或卡頓問題嗎？

  3. 擴充功能

    • 嘗試新增一個 input 或 button，讓使用者可在網頁上自訂「煙火產生間隔」或「粒子顏色」。
    • 將你修改後的程式碼與結果截圖貼在學習單上，並簡短說明怎麼做。

三、數學與物理連結

  1. 幾何與三角函數

    • 烟火粒子爆炸後會根據 angle（從 0 到 2π）平均分布，並使用 Math.cos(angle)、Math.sin(angle) 取得 x、y 方向速度。
    • 問題：
      • (1) 若想讓某些粒子只在上半部爆炸，應該如何控制 angle 的範圍？
      • (2) 在數學上，將角度均分到底有什麼意義？請舉例說明在其他情境中的應用（如多邊形頂點座標、旋轉對稱等）。

  2. 拋體運動與牛頓運動定律

    • 程式中的 gravity 值模擬重力加速度。請參考物理課中拋體運動公式 y=y0+v0t−12gt2y = y_0 + v_0t - \frac{1}{2} g t^2，思考程式如何以「迴圈 / 幀數更新」來逼真呈現物體下墜？
    • 問題：
      • (1) 粒子每次更新時，vy += this.gravity; 代表什麼物理意義？
      • (2) 如果重力加速度真實值約為 9.8 m/s29.8 \text{ m/s}^2，為何在程式中只用到 0.06 或其他小數？嘗試說明與動畫速度或比例有何關係？

  3. 機率與隨機

    • 程式中使用 Math.random() 產生隨機顏色、爆炸方向與火箭生成位置。
    • 思考：若你要統計每個爆炸總共有多少粒子落在畫布左邊和右邊，是否能從機率的角度做推論？實際觀察結果可能與理論推估相符嗎？為什麼？

四、延伸與應用

  1. 真實煙火 vs. 模擬動畫

    • 比較真實世界中煙火施放的過程與程式中「先上升、再爆炸、最後粒子散落」的邏輯。
    • 列舉真實情況下影響煙火軌跡的其他因素（如空氣阻力、風向、燃燒速度等），並想一想：若要讓動畫更逼真，程式或數學模型上需要哪些修正？

  2. 數位學習作品展示

    • 若有機會，將自己的成品嵌入到個人網站或課程平台，與同儕互動。
    • 可思考：除了煙火以外，還能用類似的方法做出「瀑布、雪花、火焰」等其他物理現象的模擬嗎？

  3. 專題融合

    • 與自然科、藝術或其他學科合作，共同製作「數位科學展」，展示各種物理、數學或美術結合的 Canvas 互動程式。
    • 或者嘗試以此模型延伸到機器人程式設計或遊戲開發領域，形成更大型的專題。

五、學習歷程紀錄與自我檢核

  1. 學習心得

    • 請同學在完成程式改寫與實驗後，簡述對 Canvas 技術、拋體運動、隨機分布等概念的理解度是否加深？
    • 此次活動哪個部分最具挑戰？你是如何克服的？

  2. 進一步想學／想嘗試的內容

    • 是否有想探索更進階的動畫特效（如文字煙火、心形煙火）或更複雜的數學模型？
    • 記錄你想研究的方向或新點子。

  3. 小組討論或互評

    • 與組員討論彼此程式的差異與成果。
    • 可互相欣賞不同的創意設定與設計思路，並給予回饋。

備註

  • 教師可依教學實務情況，將上述問題分配為「課堂分組討論」、「課後作業」、「小組報告」等形式。
  • 建議讓學生使用學習單、線上測驗或數位平台記錄實驗結果，累積學習歷程與素養表現。

期望成果

  • 學生能親手實作並理解煙火動畫的基礎邏輯，了解到背後牽涉到的數學（三角函數、幾何、機率） 與 物理（重力、運動定律） 概念。
  • 在過程中能建立初步的資訊程式思維：理解物件導向概念（Rocket 與 Particle 類別）、事件驅動（window.addEventListener）、以及持續更新畫面的動畫迴圈。
  • 透過跨領域與小組合作，強化 108 課綱強調的「思考、探索、實作」與「素養導向」學習精神，讓學生在動手實踐中更有成就感與學習動機。

教學小提醒： 本學習單內容可依學生程度或可上課時數進行增減，鼓勵教師彈性運用，也可加入更多 STEAM（科學、技術、工程、藝術、數學） 或 Project-based Learning 的元素，豐富學習體驗。祝教學順利，學生學習愉快！



以下提供一個以 HTML Canvas 與 JavaScript 製作「煙火」效果的範例程式碼。其核心概念是：

  1. 在畫面中先畫出「火箭」或「彈頭」，在它上升或到達指定高度後，再將它「爆炸」分解為許多彩色粒子。
  2. 這些粒子（firework particles）會以各自的速度和重力加速度移動，並逐漸消失(透明度變小或壽命減少)。
  1. 持續在 requestAnimationFrame 的主迴圈裡更新並重繪畫面，就能得到動態的煙火效果。

下面的程式碼整合了 HTML、CSS 與 JavaScript，你可以直接建立一個 .html 檔案貼上，然後在瀏覽器開啟查看效果。可依需求做美化或參數調整。

範例：HTML + CSS + JS


  • 課綱連結：
    1. 透過此活動引導學生運用所學的幾何公式（國中幾何基礎），也可以讓學生進一步探討單位、倍數關係。
    2. 培養學生操作數位工具（HTML/JavaScript），增進其資訊素養與程式設計思維。

2. Canvas 繪製與簡易幾何操作

  • 應用範圍：
    • 平面幾何的基礎教學（線段長度、三角形、四邊形的繪製與度量）。
    • 圓與多邊形的外接圓、內接圓等概念視覺化。
  • 活動設計：
    1. 以 Canvas + JavaScript 實作能夠動態改變頂點位置的多邊形，並同時計算週長、面積或角度。
    2. 學生透過拖曳頂點（HTML 事件監聽），觀察數值如何改變，進而體悟幾何性質。

3. 函數圖形動態展示

  • 應用範圍：
    • 直線方程式、二次函數、一元二次方程圖形等國中代數範疇。
  • 活動設計：
    1. 學生先在課堂上學會如何用 HTML 建構簡單界面，然後在 JavaScript 中使用 Canvas（或 SVG）繪製座標平面。
    2. 讓學生自行輸入二次函數參數 (a, b, c) 或直線斜率 (m) 和截距 (n)，即時看到函數圖形的變化。
    3. 與紙本作圖比較，強化對函數、圖形與參數之間關係的理解。

4. 資料視覺化與統計圖表

  • 應用範圍：
    • 國中數學中的統計與機率單元，包含長條圖、圓餅圖、折線圖等。
  • 活動設計：
    1. 學生可先使用表單輸入「班上幾位同學喜愛的運動種類」「收集到的校園生態觀察數據」等，透過 JavaScript 計算並生成長條圖或圓餅圖。
    2. 可利用 <canvas> 或外部套件（如 Chart.js）進行視覺化。
    3. 引導學生討論圖表背後的意義、趨勢或極端值，提高資料素養及判斷能力。

三、符合 108 課綱素養的重點

  1. 實踐與應用

    • 讓學生透過實際的情境（如日常生活中幾何的應用或數據的整理）來操作 HTML/JavaScript 的簡易網頁，強化「數學」在生活中的運用感。

  2. 跨領域與專題探究

    • 108 課綱鼓勵學生進行專題式、探究式學習，可讓學生以「數學 + 資訊」做小專題。例如：
      • 建立「身高 vs. 體重」資料蒐集網頁，計算 BMI、畫出折線圖或散佈圖。
      • 製作「速率、距離、時間」計算小工具。
    • 這類活動能培養學生的協作能力、問題解決能力，以及專題發表與成果展示。

  3. 思維邏輯與程式設計素養

    • 使用 HTML/JavaScript 實作數學概念，也是在培養「計算思維」。
    • 例如，如何透過條件判斷、迴圈、陣列處理多筆數據或繪製多個圖形，同時也訓練了學生對數學結構的理解。

  4. 適性發展

    • 讓對程式開發或資訊領域有興趣的學生有更多發揮空間，如自行研究更進階的可視化函式庫（p5.js、D3.js、Chart.js 等），或讓他們嘗試美化網頁（CSS）和優化互動設計（UI/UX）。

四、綜合建議

  1. 教案設計

    • 從簡單到進階：先讓學生熟悉 HTML 基本標籤與表單，再逐步加入 JavaScript、Canvas 等互動元素。
    • 善用專案／專題形式：讓學生自由選擇或發想一個「數學+生活」的主題，蒐集資料或測量，最後以網頁呈現。

  2. 評量方法

    • 以 歷程檔案 或 專題成果 的方式評估學生的學習成效，包含：
      • 在數學概念方面（正確應用公式、數據分析合理性等）。
      • 在資訊素養方面（程式碼的邏輯、網頁呈現清晰度等）。
    • 也可讓學生在班上相互發表成果、互動測試網頁，進行同儕回饋。

  3. 分組合作

    • 數學小組或跨班級的社團，一起創建「校園數據可視化」網站，如統計各班資源回收量、跑步運動量等等，增添真實情境與趣味性。

五、結語

利用 HTML（搭配 CSS 與 JavaScript）在數學課程中創建互動式學習素材，能讓學生以更直覺、生動的方式理解抽象的數學概念，也同時培養資訊素養與跨領域的思維能力，符合 108 課綱「素養為本」及「問題解決」的教學目標。透過靈活運用網頁技術，數學可以不再只停留在紙本或靜態的課本範例，而是更具體地與生活場景與數位工具結合，開啟學生更大的學習與創造空間。