Annealing algorithms fall outside the middle-school curriculum, so we chose to let students play first and explain the principles afterward. The actions and visual changes in the game would give us a shared reference for that discussion. The course also draws on annealing in materials science to explain where the term comes from.考量退火演算法超出國中課程範圍，我們決定先讓學生玩，再介紹原理。遊戲中的操作與視覺變化成為後續說明的共同參照。課程也借用材料科學中的退火，協助說明這個詞如何進入演算法。
User Research · Visualization Design · 2025使用者研究 · 視覺化設計 · 2025
Prototype原型
Maze Solver 退火迷宮退火迷宮
A maze-based learning game for a science summer camp, designed to introduce middle-school students to annealing algorithms through play before moving into theory. I built the first version with Claude in half a day, then refined it after our meeting the following day.為科學夏令營設計的迷宮教材，讓國中生先透過遊戲接觸退火演算法，再進入理論說明。我與 Claude 協作半天完成初稿，第二天依會議討論繼續修改。
My role角色
Built the quantum-annealing game myself, working with Claude.與 Claude 協作，獨立完成量子退火遊戲的開發。
Methods方法
Built in Pygame as visual teaching material for the algorithm.以 Pygame 製作協助演算法教學的視覺化教材。
Outcome結果
A scenario-based interactive lesson, playable straight in the browser.完成情境式互動教材，可直接在瀏覽器遊玩。
01 · What Is Annealing01 · 什麼是退火
The same word, in different fields同一個詞，在不同領域
PhysicsMaterial annealing物理材料退火
Bending and rolling leave deformation and internal stresses in metal. Annealing uses heat, time and controlled cooling to change its internal structure, reduce hardness and restore ductility. The metal stays solid throughout the process.金屬經過彎折、壓延等加工後，內部會累積變形與應力。退火透過加熱、保溫與適當冷卻，讓內部結構有機會調整，降低硬度、恢復延展性。材料仍是固體，並不是把它熔化後重做。
AlgorithmSimulated annealing演算法模擬退火
Simulated annealing uses a virtual temperature to control how often the search accepts a worse answer. Hot, it takes more random chances and stays out of local optima; as it cools it converges on the global best. That suits problems with many candidate answers, such as route planning. Here the maze search runs on screen, so students can see what each temperature does.模擬退火以「虛擬溫度」控制接受較差解法的機率。高溫時允許更多隨機嘗試，避免困在局部最佳解；降溫後逐漸收斂，集中尋找全局最佳解。這項技術適合探索多種候選解，例如路徑規劃。本教材將迷宮尋路視覺化，讓學生比較不同溫度設定對尋路結果的影響。
Teammate’s module隊友製作的
Classical annealing古典退火
This teaching module shows a heating phase followed by a cooling phase. Students watch the maze walls open and close with the simulated state, until a breadth-first search (BFS) picks out the shortest path. Their job here is mostly to watch and to turn the temperature up or down, following from the side as the algorithm finds the goal inside a maze that keeps changing.教材呈現先升溫、再降溫的過程，讓學生觀察迷宮牆面如何隨著模擬狀態開合，最後由廣度優先搜尋（BFS）找出最短路徑。學生以觀看與控制溫度為主，從旁觀察演算法如何在持續變化的迷宮中找到終點。
My module我製作的
Quantum annealing量子退火
In my version, students control a marker and explore the maze with dice and shovels. A limited field of view forces decisions with incomplete information, while the floor’s color gradient provides clues to the goal. These mechanics serve as analogies when we later discuss search and convergence.我製作的版本讓學生親自控制指示物，用骰子與鏟子探索迷宮。有限視野讓玩家必須在資訊不完整時做選擇，地板漸層則提供終點方向的線索。這些機制是後續解釋搜尋與收斂時的譬喻。
02 · Play It02 · 玩玩看
Try the game yourself親手試試這個教材
Best of five, first to three. Watch one full round, then take over Player 1.五戰三勝。先看完一輪對戰，再接手 Player 1。
Player 2 plays by the same rules you do. Before it spends a shovel on a wall, though, it simulates what the dig would open up, and it commits only once the tunnel is sure to shorten the path by enough. There is no pre-training behind it. It reads what the environment gives it and picks its next move.Player 2 遵守和玩家相同的遊戲規則，但每次用掉鏟子打通牆壁前，會先模擬挖掘後的結果，只有確定隧道能讓路徑縮短到一定程度時才會出手。它沒有受過任何預訓練，只是根據環境提供的資訊決定下一步。
Demo · AI vs AI示範 · AI 對 AI
P1 00
··
P2 00
PUBLIC INFO The goal is the cell furthest from the start.公開資訊 終點在離起點最遠的那一格。
Round 1 · demo mode running第 1 回合 · 示範模式進行中
03 · What These Mechanics Mean03 · 這些機制的意義
Connecting the game to the concepts從遊戲操作回看抽象概念
Students play a round first, then read the table below against what they just did. The concepts land more easily that way.學生先玩過一輪，再用下表對照剛才的操作，比較容易理解這些概念。
| Abstract concept抽象概念 | Game mechanic遊戲機制 | What the player learns by playing it玩家在玩的過程中學到什麼 |
|---|---|---|
| Quantum tunneling量子穿隧 | A shovel that breaks a wall.可以破牆的鏟子。 | Quantum tunneling means a particle has some chance of passing through an energy barrier without first gaining the energy it would take to cross it. In the game, digging through a wall with the shovel stands in for that idea.量子穿隧是指粒子有機會穿過能障，不必先取得跨越能障所需的能量。遊戲用鏟子挖穿牆面，作為這個概念的示意。 |
| Starting temperature起始溫度 | Maze size + shovel count.迷宮規模 + 鏟子數量。 | Maze size and shovel count together stand for the temperature setting in the game. The bigger the space and the more walls a player can break, the more chances to try a different path.迷宮規模和鏟子數量共同對應遊戲中的溫度設定。空間越大、能破牆的次數越多，玩家就有更多探索不同路徑的機會。 |
| Cooling process降溫過程 | Color shows the remaining path distance to the goal.用顏色呈現路徑與終點的距離。 | Paths near the goal run cool blue, and the further away they are, the warmer the red. Color carries the “energy” of the game, so a player can read how close the goal is.道路越靠近終點越偏冷藍，距離越遠則越偏暖紅，用色彩呈現遊戲中的「能量」，讓玩家判斷自己是否接近終點。 |
| Local minimum區域最小值 | A vision radius of 3.5 cells.3.5 格的視野半徑。 | Players see only a limited range, so they judge as they go. Show the whole map from the start and nobody would feel how hard a search gets when information runs short.玩家只能看見有限範圍，必須邊走邊判斷。如果一開始就能看見整張地圖，就不容易體會到資訊不足時的搜尋困難。 |
04 · VIBE Coding Workflow04 · VIBE Coding 工作流
How the work went with an AI partner與 AI 協作的過程
Across the two days of building, my strategy was this: settle the spec first, add features in stages, fix bugs with small contained tests. Here are the problems that came up and what I did about them.在兩天的開發過程中，我採取的策略是先釐清規格、分階段增加功能，並透過小規模測試修復錯誤。以下是當時遇到的問題與處理方式。
01 · Set a clear spec first, then let the AI challenge it01 · 先定義明確規格，再交由 AI 質疑
WenyuWenyu
I want to build a simulated-annealing algorithm game in the form of a maze, aimed at middle-school students. Read the spec below carefully first … then tell me which definitions are still vague, which parts could be read more than one way, and anything that could cause trouble later in development. Go back and forth with me until they are settled, and only then start writing code.我要製作一個迷宮形式的模擬退火演算法遊戲，目標對象是國中生。請先仔細閱讀以下規格……並找出尚未明確的定義、可能有不同解讀的模糊地帶，以及可能影響後續開發的要素。反覆與我確認後再開始寫程式。
ClaudeClaude
Three things to settle first. How tight should the field of view be for exploring to stay difficult enough? How should the random maze generator be planned? And what should the AI do when it cannot find the exit? All three shape the structure of the program, so it is worth defining them before development starts.有三個要素需要先釐清。視野要約束到什麼程度才能保留探索難度？迷宮的隨機生成演算法該如何規劃？AI 找不到終點時的應對策略為何？這些選擇會影響程式架構，建議開發前先明確定義。
Before coding, I asked Claude to identify ambiguities in the specification. We clarified the field of view, maze generation, and what should happen when pathfinding failed. This was a way of working I figured out at the time.開發前，我先請 Claude 找出規格中的模糊之處，確認視野範圍、迷宮生成與尋路失敗時的處理，再開始寫程式。這是我當時摸索出的合作方式。
02 · Narrow the test scope to find the cause02 · 縮小測試範圍，確立 Debug 方向
WenyuWenyu
The map generation has a bug: it sometimes opens a shortcut straight to the exit. Mask the other features for now. I want to hunt the cause down in a small area and work out where the problem actually sits.目前的地圖生成有 Bug，有機率產生直達終點的捷徑。請先暫時遮蔽其他功能，我需要在小範圍內找出可能成因，判斷問題出在哪裡。
ClaudeClaude
This build keeps only the working area, opens up the full view, and adds a temporary reset button for testing. Please record exactly what happens in the runs that pass and the runs that fail, so I have something to work from when I fix the bug.此版本僅保留工作區域，提供全景視野，並設置臨時重置按鈕以利測試。請記錄測試成功與失敗的具體情況，作為我修復錯誤的依據。
The maze would occasionally generate a shortcut straight to the goal. I temporarily disabled the other features to focus on maze generation, then added them back once the underlying problem was resolved.地圖偶爾會出現直達終點的捷徑。我先暫時遮蔽其他功能，只檢查迷宮生成，等核心問題解決後，再把功能逐一加回。
03 · Bring in automated testing03 · 導入自動化測試
WenyuWenyu
Sometimes the AI suddenly starts moving back and forth. I cannot tell yet whether the pathfinding is at fault or the maze generator is. Run repeated tests in a sandbox, and let the results say whether to check the maze generator or the AI’s movement logic.AI 有時會突然觸發來回往返的移動。目前不確定是尋路機制有誤，還是迷宮生成演算法出錯。請在沙盒環境中反覆測試，並依據結果檢查迷宮生成器或 AI 的行動邏輯。
ClaudeClaude
Repeated runs on a fixed maze put it at two pathfinding failures in twenty tests. The original maze generator was carving separate regions with no direct link between them, so the start and the exit could land in different blocks. A connectivity check before the maze is output solved it.用固定迷宮反覆測試後，AI 在二十次測試中出現兩次尋路錯誤。經查，原有的迷宮生成演算法會產生不直接相連的獨立區域，導致起點與終點可能落在不同區塊。加入迷宮輸出前的連通性檢查後，問題已解決。
When a character kept moving back and forth, I could not tell whether the problem lay in pathfinding or maze generation. Repeated tests helped separate the possible causes. Once we found that the generator could create disconnected areas, we added a connectivity check before releasing each maze.角色來回往返時，我還無法判斷問題出在尋路或地圖生成，便改用反覆測試來區分可能原因。後來確認迷宮會產生不相連的區域，才把連通性檢查加入輸出流程。
05 · Insight05 · 洞察
Facing the other side: a practice in understanding面對他者，關於「理解」的練習
This project involved two very different kinds of communication: introducing an algorithm to middle-school students and working with Claude to build the teaching tool. In each case, I needed to consider what the other side already knew.這件作品有兩種溝通對象：要學習演算法的國中生，以及協助我寫程式的 Claude。我需要分別考慮他們手上已有什麼資訊。
For students, I left unfamiliar terminology until after the game. Rolling dice, digging tunnels, and following the floor colors gave them an experience to refer back to when we discussed the theory. 對學生，我把陌生的名詞放到遊戲之後。先有擲骰子、挖隧道與看地板顏色找路的經驗，再回頭對照理論；With Claude, I clarified the specification before adding features in stages. When something went wrong, I narrowed the scope, examined the output, and used automated tests where needed to decide what to do next.對 Claude，我先確認規格，再逐步加入功能。出錯時則縮小範圍、檢查結果，必要時改用自動化測試，讓下一步有具體依據。
Both situations reminded me to locate the gap in understanding before adding more explanation. That has become one way I check how well I’m communicating.兩種情境都提醒我，增加說明之前，要先找出理解卡住的地方。這也成了我檢視自己溝通方式的一個習慣。