https://reurl.cc/R9QDRn

Gem的程式成果轉html檔

🔴 雲林數辦AI應用 x 程式碼打包工具

💡Gemini -雲林三個成果

一、Gemini storybook

雲林品德教育(有聲)繪本製作

(成果收集區1-品德教育)

二、Gemini Canvas

體感AR-十指的創思應用篇

(成果收集區2-體感AR)

三、NotebookLM

課本轉簡報(無聲繪本)製作

(成果收集區3-課本轉簡報)

國小國中課本文本區:

114-1-康軒國小課文文本(word)

114-1-康軒國中備課素材

說明:十指透過鏡頭的讀取，已經在掌控之中。掌控後，接下來可以做甚麼呢?讓ˇ我們發揮創意，來接龍創作吧!

使用說明:你是有創意的程式設計師，準備設計程式來應用靈活的手，隔空去操作各種互動活動，請好好用文字說明，有靈活的雙手後，接下來想做甚麼好玩有趣的互動呢?

預設工具:canvas

相關資訊:如下方附件的程式

GEM的成果:

🔴 體感AR-十指的應用篇

https://gemini.google.com/gem/18aMIuDstOl6uuPD24I1PZ0LXvk37gWGZ?usp=sharing

第一次使用技巧:

這個gem的精髓就是，反問。

反問GEM要它提供點子，然後將這個點子直接一個一個複製給我的gem,請他寫出程式，然後，一直微調，就可以完成喔！

範例1:

hi

範例2:

請給我五種可以應用的範例及說明。

範例1的敘述:

1-選擇如右側段落的五個範例，按下複製。

2-貼在文件區，選擇canvas，及寫上:

請寫出互動程式碼。

3-然後，一直微調，就可以完成喔！

4-按下:複製

5-貼到:

體感AR- Gem的程式成果轉html檔

🔴 雲林數辦AI應用 x 程式碼打包工具

6-存檔及按下檔案，開始互動。

親愛的師長您好：

感謝您熱情參與 1月5日舉辦的「Gemini 生成式 AI 教學應用研習」。為了彙整本次研習的豐碩成果，並利於後續教學資源共享，請協助配合以下說明繳交相關資料。

一、 繳交期限與方式

• 繳交期限： 2025年 1月 30日（星期五）中午 12:00 前

二、 資料夾建立與命名規則
為了避免檔案散亂，請各位老師務必依照所屬學校建立專屬資料夾，並依照下列格式命名：

1. 資料夾命名格式:(雲端硬碟上傳用)

編號_地區_校名_老師姓名

2. 編號對照表（範例)

      001-土庫鎮-越港國小-王小明

3.品德檔案名稱:

000-數辦國小-5年級-第1課-節儉不是小氣

4.padlet上傳用:

000-數辦國小-個人姓名-節儉不是小氣

1. 左手負責畫面左下方的藍色鼓面。

2. 右手負責畫面右下方的紅色鼓面。

3. 音符會從右邊出現並往左邊移動。

4. 當音符到達上方軌道的白色圈圈時，用力將對應的手向下敲。

5. 不需要碰到電腦，只要對著空氣中的虛擬鼓位置敲擊即可！

在這個互動中，你的十根手指不再只是計數器，而是變成了一對精準的鼓棒。我們會根據手指的動作軌跡、速度以及「擊發」的瞬間，來觸發不同的森巴樂器音效。

1. 專屬選單流程：

   • 遊戲開始時不會直接進入畫面，而是先看到一個 「三步驟設定選單」。

   • 步驟一：點選大圖示選擇場景（海底、太空、恐龍、糖果、動物）。

   • 步驟二：點選按鈕設定時間（30秒、1分鐘、1分半）。

   • 步驟三：選擇烏龜（慢）、兔子（中）、火箭（快）來決定難度。

2. 遊戲機制改變：

   • 現在是限時積分賽！

   • 上方會有明顯的倒數計時器，最後 10 秒會變紅色並閃爍，增加緊張感。

   • 時間歸零時，畫面會出現巨大的「時間到！」，然後自動進入結算。

3. AI 講評邏輯升級：

   • 我調整了傳給 Gemini 的提示詞 (Prompt)。現在 AI 會知道小朋友選了什麼速度（難度）。

   • 例如：如果小朋友選「超快」且分數很高，AI 會給予極高的評價（如「閃電俠」）；如果選「慢」且分數低，AI 則會溫柔鼓勵。

4. UI/UX 親和力設計：

   • 移除了所有需要打字的輸入框。

   • 所有選項都配有 Emoji 圖示，即使識字量不多的低年級生也能看圖操作。

   • 按鈕尺寸加大，方便點擊。

1. 場景設定：背景是廣闊的非洲草原，天空有白雲飄動。

2. 角色互動：

   • 獅子老師 (🦁)：負責出題（例如：「吼～ 3 + 2 等於多少？」）。

   • 長頸鹿、大象 (🦒🐘)：在旁邊當啦啦隊，答對時會跳動或噴水。

3. 玩法機制：

   • 螢幕中央出現加法題目（例如 4 + 3 = ?）。

   • 玩家需要在鏡頭前比出正確的「手指總數」。

   • 程式會即時偵測雙手手指數量。

   • 為了讓一個人也能挑戰 20 以內的加法，我們需要一點「魔法」！

     因為我們只有 10 隻手指頭，要怎麼比出 15 呢？ 我為您設計了一個**「分段記憶」**的新玩法：

     1. 超過 10 的題目（例如：答案是 15）。

     2. 先比出 10 隻手指頭，維持一下，獅子會幫您把這 10 記在心裡（畫面上會顯示「已暫存 10」）。

     3. 接著再比出剩下的 5 隻手指頭。

     4. 系統會自動計算：暫存(10) + 現在(5) = 15，挑戰成功！

     這樣一個人也能輕鬆玩 20 以內的加法囉！

1. 進入森林：程式啟動後，會要求取用攝像頭。建議讓孩子站在距離鏡頭約 1-1.5 公尺處，確保雙手都能進入畫面。

2. 小精靈任務：畫面上方的黃色卡片會顯示算術題（例如 2 + 3 = ?），小精靈會透過對話框鼓勵孩子作答。

3. 手指操控：

   • 孩子需要舉起雙手。

   • 計算答案（例如 5）。

   • 比出正確的手指數量（例如左手 5 指，或左手 2 指 + 右手 3 指）。

4. 穩定判定：為了防止誤判，程式設計了「穩定機制」。當手指數量正確並維持約 0.5 秒時，畫面會彈出「太棒了！」的特效，並且分數會增加。

5. 快問快答模式：卡片下方有綠色的時間條。如果時間條跑完還沒比出正確數字，題目會更換。

1. 啟動遊戲：等待 AI 模組載入完成（右上角會出現攝影機畫面），按下「開始駕駛」。

2. 握住方向盤：

   • 將雙手舉起在鏡頭前。

   • 右轉：抬高右手，降低左手。

   • 左轉：抬高左手，降低幼手。

3. 加速衝刺 (Nitro)：

   • 雙手張開 (十指全開)：車子會噴射藍色火焰，速度突破極限！

4. 煞車/甩尾 (Drift)：

   • 雙手握拳：車子會減速並變色，雖然速度慢但轉向更靈活，適合閃避障礙物。

遊戲核心玩法設計：

1. 紙網控制：你的食指尖就是魚網的中心。

2. 撈魚動作 (Pinch)：

   • 當你拇指與食指捏合時，代表魚網「進入水中」。

   • 在捏合狀態下移動到金魚上方。

   • 張開手指時，如果金魚在網內，就代表成功撈起！

3. 紙網耐用度：就像現實中一樣，魚網在水裡待太久、或是移動太快，紙面會逐漸破掉。

4. 視覺特效：會有水波紋跟隨你的手指，魚兒也會因為你的手靠近而逃跑。

1. 點擊「啟動召喚程式」：進入遊戲後會要求相機權限，請點擊允許。

2. 烈焰火球 (3指)：對著鏡頭伸出三根手指，會噴發橘色的火焰粒子。

3. 連鎖風暴 (5指)：張開五指，藍色的能量球會隨手掌移動。

4. 時空凍結 (10指 + 快速揮動)：雙手全開時，快速上下或左右揮動手掌。你會感覺到螢幕劇烈震動，背景畫面會變成黑白負片效果，這就是時空被你凍結了！

1. 點擊「啟動召喚程式」：進入遊戲後會要求相機權限，請點擊允許。

2. 烈焰火球 (3指)：對著鏡頭伸出三根手指，會噴發橘色的火焰粒子。

3. 連鎖風暴 (5指)：張開五指，藍色的能量球會隨手掌移動。

4. 時空凍結 (10指 + 快速揮動)：雙手全開時，快速上下或左右揮動手掌。你會感覺到螢幕劇烈震動，背景畫面會變成黑白負片效果，這就是時空被你凍結了！

這款應用程式將您的手勢轉化為即時的 3D 魔法效果：

1. 火球術 (Fireball)

   • 動作：張開手掌（5指全開），並在鏡頭前快速揮動。

   • 效果：畫面上會噴發出大量橘紅色火花，且粒子會受重力影響向上飄動，同時畫面會產生輕微震動。

2. 閃電鏈 (Lightning)

   • 動作：比出 "Rock" 手勢（食指與小指伸直，中間兩指收起，拇指自然收縮）。

   • 效果：會在您的指尖處產生極速噴射的黃色電光，具有極高的能量感。

3. 冰凍盾 (Ice Shield)

   • 動作：握拳（所有手指收起）。

   • 效果：在拳頭位置凝聚青藍色的寒冰氣息，粒子生命週期較長，呈現防禦狀態。

技術特點

• 魔力系統 (Mana System)：施法會消耗法力值，停止動作後會緩慢恢復，增加了遊戲的策略性。

• 動態反應 (Feedback)：施展強大魔法時，UI 會有震動特效（Shake），讓體感回饋更加真實。

• 粒子引擎優化：利用 Three.js 的粒子群組（Group）管理，確保大量特效下依然能維持 60 FPS 的流暢度。

請對準攝像頭，開始您的魔法學徒訓練吧！

1. 右手（畫筆）：

   • 伸出食指 (1 指)：進入繪畫模式，指尖會畫出霓虹線條。

   • 握拳或張開其他手指：停止繪畫，僅移動游標。

2. 左手（調色盤）：

   • 伸出 1 指：螢光紅

   • 伸出 2 指：螢光綠

   • 伸出 3 指：螢光藍

   • 伸出 4 指：雷電黃

   • 伸出 5 指：純淨白

3. 清除畫面：

   • 雙手同時張開（共 10 根手指），畫面會閃爍並清空重置。

1. 目標：畫面會同時出現一對對稱的圓圈節點（左藍右黃）。

2. 操作：你必須伸出雙手食指，同時移動到這兩個圓圈內。

3. 得分核心：

   • 同步觸碰：雙手必須同時進入節點。如果只有一隻手進入，節點不會被消除。

   • 精準度加成：觸碰時，你的雙手對稱率 (Sync %) 越高，獲得的分數越高。

   • 連擊 (Combo)：連續成功消除節點且不間斷，分數會加倍。

4. 挑戰升級：隨著分數提高，節點出現的速度會變快，且位置會變得更刁鑽。

1. 進入雕刻室：程式啟動後會開啟攝影機。請確保環境光線充足。

2. 捏合手勢 (The Pinch)：

   • 這不是算手指數量，而是偵測**「大拇指指尖」與「食指指尖」是否碰在一起**。

   • 當你做出「捏」的動作時，畫面上會出現黃色的發光指示點。

3. 單手雕刻 (Local Sculpting)：

   • 用單手「捏起」並靠近畫中央的藍色黏土球。

   • 你會發現黏土會隨著你捏的地方產生形變，像是被你拉扯或按壓一樣。

4. 雙手拉伸與旋轉 (Global Transformation)：

   • 雙手同時捏合。

   • 拉遠/靠近：雙手距離拉開時，球體會放大；縮小時，球體會變小。

   • 旋轉：像轉動方向盤一樣移動雙手，球體會跟著旋轉，讓你從不同角度觀察雕刻作品。

5. 重置：如果捏得太醜，可以點擊左上角的「重置黏土」按鈕。

程式設計亮點：

• Three.js 頂點操作：這段程式碼直接存取了 3D 模型的 attributes.position 陣列。當手勢靠近時，會根據距離計算影響力（Influence），即時改變模型形狀。

• 數學轉換：將 MediaPipe 的 2D 正規化座標（0到1）轉換為 3D 空間的渲染座標，實現精準的「隔空觸碰」。

• 視覺反饋：使用了發光的 Shader 風格材質，讓黏土看起來像是一個能量球，增加科幻感。

護盾術：雙手張開(10)且掌心相對

雷擊術：單手伸出食指中指(2)指向目標

功能亮點：

1. 指揮台模擬器 (The Podium)：核心互動區，移動滑鼠即可產生動態音效與粒子視覺回饋。

2. 實時數據儀表板：利用 Chart.js 顯示您的操作如何轉化為數據（振幅、頻率、聲道）。

3. 深度解析區：整合報告中的技術原理，說明 MediaPipe 與 Web Audio API 的運作機制。