人體血液循環的視覺化互動程式

講全身血液循環時，我需要一個互動的介面可以讓我用來解說，要能呈現全身血液流動的過程。先講結論，我做出來了。底下是截圖

這是操作過程的影片，預設有幾百個血球在血管內流動，擺著不動一陣子會看到經過組織微血管(上下三區)的血球會變成暗紅色，並且釋放出代表氧氣的藍色圓形。而這些暗紅色的血球經過左右兩邊的肺部微血管時，會從外而內進入獲得氧氣，使暗紅色的血球變成鮮紅色。

你可以按下[血球淡化]的開關，使所有血球都變淡，然後點畫面很多血球的位置，例如心房心室，每次點擊都會在點擊處附近隨機標註一顆血球，你就可以追蹤它的流動。

此外，也可以將心房心室的動畫關閉或打開。

目前實作是做了全身血液循環，未來有時間會完成肺部和組織細胞之間的交換

程式在此 https://chihhsiangchien.github.io/circulation/index.html

接下來要說的是如何完成這樣的程式，血球需要循著特定的路徑往前移動，不能逆向，在交叉口又必須隨機。`所以我需要一個有很多節點的「有向圖」，節點之間有方向性的「邊」相連，每一個節點有id，有xyt座標，而每一個邊的資料包括起點和終點的節點。因此對有些節點來說，可能是多個邊的起點，也可能是多個邊的終點。

我先在draw.io上放一張底圖，然後用circle當節點，Directional Connector當作邊，把完整的循環路徑畫出來。最後的結果export 出xml。檔案連結

有了xml之後，再用js parse這些資料，就可以做出一個有向圖。建立資料時，可以指定某些connector的寬度，這可以用來畫出血管的寬度，而circle內的文字可以標註目前所在的位置，例如肺靜脈、肺動脈等。

對於血球的行為，其實就是不斷地從一個節點移動到另一個節點，而下一個節點的決定就看這個節點有幾個出口，隨機選一個就是了。經過特殊節點如肺動脈時，就讓血球進入一個可接受氧氣的狀態，有一定的機率可以得到氧氣。而到了肺靜脈時，可接受氧氣的狀態就被關閉了。而進入組織微血管或離開，也是一樣的方法，所以這就是一個狀態機的變化。

此外，動靜脈的流速不同，是利用節點的數量來控制，在一個動畫週期中的固定長度內，如果有越多節點，那麼血球就會越慢，如微血管內的行為，而如果節點越少，就會產生移動速度很快的視覺效果。

雖然節點和節點之間是直線相連，但血球在血管內的移動則是會以邊寬度為基礎，做左右偏移累積的移動，所以就可以產生彷彿在血管內移動的視覺效果。

酵素作用的互動教學工具

最近做了「酵素模擬器」的網頁工具，可以互動操，產生即時圖表與自動化實驗。

https://chihhsiangchien.github.io/enzyme-tutorial/

主要功能

1. 拖曳與新增分子、酵素

使用者可以用拖曳或點擊的方式，將不同種類的酵素與分子加入主畫面。每種分子和酵素都以圖示呈現，並可一次新增多個或快速移除。

2. 模擬布朗運動

所有分子在畫面上會隨機移動，模擬布朗運動，進而觸發酵素反應。

3. 酵素-受質結合與產物生成

當受質分子靠近酵素的活化位時，若符合反應規則，會自動吸附並進行反應，產生對應的產物。反應過程中，分子會有動畫效果。

4. 溫度調整與酵素變性

可透過滑桿調整環境溫度。溫度會影響分子的運動速度與酵素的活性，並可模擬高溫導致酵素變性的情境，每種酵素有不同的變性溫度。

5. 即時濃度變化圖表

畫面右側提供即時的分子與酵素數量變化圖表。每秒自動更新，方便觀察反應進行過程中各物種的濃度變化。

6. 實驗模式與自動化實驗

除了自由操作外還有「實驗模式」可進行實驗。可選擇酵素種類、設定溫度與觀察時間，並自動重複多組實驗，繪製「溫度-反應速率」關係圖，協助分析酵素活性與環境的關聯。

課堂教學工具：排序、配對、表格

這是課堂上用來做教學的幾個工具，分別是用來做排序、表格和配對的工具，可以當教學用，也可用來做形成性評量。因為特別作了模組化，所以後續我要新增資料也是容易很多，有興趣可以使用。

https://chihhsiangchien.github.io/sorting/index.html

https://chihhsiangchien.github.io/table/index.html?mode=teach

https://chihhsiangchien.github.io/matching/index.html?data=cells.json

【哪個機器人最快？】互動式科學實驗教學工具

最近做了用來做實驗設計的互動程式，有四種機器人零件可以組成機器人，目的是要找出哪種組合可以跑得最快。

程式：https://chihhsiangchien.github.io/fast-robot/index.html

速度裏頭有加上系統的不確定性，所以就用同樣條件一直跑同一個機器人，也會得到些許的不同，所以就是要重複實驗。

實驗底下會有歷史紀錄，呈現每次使用的變因和結果。明年再上科學方法會拿來用，這個需要團隊合作，然後進行筆記才能得到答案。 

操作過程如下

1. 認識變因卡片：左側有各種「變因卡片」，每張卡片代表一種機器人比賽的條件（如：機器人型號、輪胎種類、包裹重量等）。
2. 拖曳卡片到實驗槽：將每一種變因卡片拖曳到「第一組」和「第二組」的實驗槽中。每個槽都要放滿所有類型的卡片，才能開始實驗。
3. 開始實驗：當兩組都配置好後，「開始實驗」按鈕會亮起。點擊後，兩台機器人會開始比賽，並顯示各自完成任務所需的時間。
4. 觀察與比較：實驗結果下方會顯示每組的完成時間，並自動記錄到下方的「實驗歷史記錄」中，方便學生比較不同組合的結果。
5. 重設實驗：點擊「重設實驗」可以清空所有配置，重新開始設計新的實驗。

教學應用建議單一變因控制教學：請學生設計兩組只差一個變因的實驗，觀察結果差異，體會「只有改變一個變因，才能確定因果關係」的道理。

討論與推理

1. 利用「實驗歷史記錄」功能，讓學生比較多組實驗，討論哪些變因影響最大，哪些沒有影響。
2. 小組合作：學生可以分組設計不同的實驗，輪流操作，並在全班分享各組的發現。
3. 老師可以引導學生思考：如果同時改變多個變因，會遇到什麼困難？如何設計更嚴謹的實驗？

其他

• 點擊已放入實驗槽的卡片，可以將其移除，方便調整組合。
• 支援電腦滑鼠拖曳，也支援平板觸控操作。

Gemini的圖像生成測試經驗

Gemini的圖像生成模型nano banana廣受注目，我也測試了一些使用情境。透過圖像理解轉換上，可以做出非常強的應用。

我做了很多圖片生成的測試，對於那些古籍插畫，像是天工開物或是番社采風圖的圖片，如果想要產生立體的渲染圖片，但沒有辦法直接做出的話，我會繞點路來完成。

以下建議不是必要，但可以試試。

先增加圖片的脈絡，就是那張圖到底是畫什麼，你可以先試試讓AI讀圖解釋再來修正，或是自己就先輸入詳細說明。

增加描述之後如果還是不行，就再做去脈絡的事，就是生成黑白線稿，如果是建築就是平面設計圖，如果是立體物件就是wireframe 。

在前幾天的分享圖片中，我都會經過中間這個圖。

如果成功產生線稿之後，就可以做各種轉型，像是填色上色、3D渲染或render，真實場景...等具體描述。

剩下就是角度或方向描述而已，像是side view, bird's eye view, worm's eye view, wide angle....

以下就是大量圖片，目前提供的prompt都非常簡單，像是：

• 說明這張圖的細節
• 轉黑白線稿
• 轉三視圖
• 做3
• 3D渲染
• 移除導引線
• 移除標記文字
• ...

利用AI多模態模型生成程式的一些經驗分享

最近剛結束一個AI應用在科學的演講分享，來分享幾個多模態AI可以怎麼用。例如輸入影片做為prompt的UI參考，然後生成程式。

提供影片，生成程式

影片來源就是書商電子教科書提供的範例程式操作影片，不提供也可試試。prompt：「html+css+js in a single file互動模擬程式，使用three.js，一群質點排列在立體網格上，使用者可選擇質點排列成一條線，或是一個平面，或是多面形成的立體結構。使用者可以按鈕選擇縱波和橫波，控制頻率和振幅以及波長，使用者可以用滑鼠轉換視角或放大縮小畫面」如果不知道怎麼下prompt，你也可以先讀取其他的程式操作錄影或截圖，讓AI理解後，由AI來生成給AI的 prompt。

成果請見此網頁
https://chihhsiangchien.github.io/wave/index.html

書商的程式錄影到轉成程式的過程，可見此影片

插圖轉程式

提供課本插圖作為prompt一部分，以此生成教學程式

結果見此網頁

https://chihhsiangchien.github.io/neutralization/index.html

剪貼課本截圖組成版面來生成程式

程式見此 https://chihhsiangchien.github.io/molecules-compose/index.html

給設計圖，產生OpenScad程式碼進行建模

給予顯微鏡照片，生成三視圖後，生成OpenScad程式生成stl檔，再匯入js，做成互動顯微鏡。

以下設計圖是給顯微鏡照片，用Gemini生成的三視圖

目前的程式碼我還在修整，只是半成品，未來會做出更適合在課堂上使用的

https://chihhsiangchien.github.io/microscope/

在一年多前，多數 AI 還是「單模態」的設計：

處理文字的就是純文字模型。

處理圖片的就是純影像模型。

因此像「文字生成圖片」的流程，其實是文字模型先把輸入轉成結構化提示，再交給影像生成模型；而「語音對話」在當時則是語音辨識（ASR 系統）→ 傳給文字模型 → 再把文字輸出轉回語音（TTS 系統）。

後來開始出現「多模態模型」，也就是單一模型可以同時處理文字、圖片，甚至聲音與影片，能在同一個架構下理解並跨模態運算，而不是單純「模型接力」。

前幾篇我提到的案例，例如透過影片、插圖或手繪圖直接生成程式，就是多模態模型的應用。

實際應用上也可以這樣做：直接提供互動程式的程式碼，讓 AI 生成操作步驟說明、學習單，甚至考卷。

聰明的你應該也能想到反向應用：即使沒有程式碼，只要有一份學習單、一個虛擬的操作流程，或是一份考卷，也可以把它們作為 prompt 的一部分，來生成對應的程式。

2025生物物理中學教師營上課筆記

最近參加中興大學舉辦的生物物理教師研習營，邊聽邊打關鍵字筆記，隨後用AI協作完成筆記紀錄。

紀凱容 中興物理 

【打開生物力學的魔法盒】以及【自然界中的武俠高手】

一、生物力學的日常

• 從起床到走路：每個動作都涉及力學。
  

• 走路與跑步的差異：
  
  

• 走路：任何時刻至少有一隻腳著地，重心的支撐不會完全中斷 → 步幅受到「一腳固定」的限制。
  

• 跑步：存在「騰空期」，兩腳同時離地 → 步幅鬆綁，可透過增加步頻或彈性儲能提升速度。
  
  

• 大象會跑步嗎？
  
  

• 大象雖然體型龐大，但在高速移動時，展現「跑步型態」的動力學特徵。
  
  

• 能量消耗：
  
  

• 走路 vs 跑步：在低速時，走路較省能；速度增加到一定程度後，跑步反而能有效率地利用能量。
  

• 超慢跑（Jogging）：人類刻意選擇一種「耗能」的移動方式，不完全符合自然設計的節能原則。
  
  

• 力學原因：
  
  

• 移動速度與「距離／時間」相關。
  

• 步頻（每秒幾步）與身體結構有關，決定移動極限。
  

• 彈簧效應：跑步時，肌腱與肌肉像彈簧，儲存並釋放能量。
  
  

---

二、生物力學與其他學科

1. 生物力學（Biomechanics）
   

• 研究力的產生與傳遞：肌肉、骨骼、軟組織、外骨骼。
  

• 解釋運動、移動、飛行、游泳等行為。
  
  

2. 生理學（Physiology）
   

• 力學造成的長期效應：
  

• 例：抓握東西會產生摩擦與壓力 → 皮膚形成繭，作為保護。
  

• 能量代謝：不同運動模式對呼吸與能量消耗的影響。
  
  

3. 形態學（Morphology）
   

• 形態與力學之間的關係：
  

• Size（大小）：影響質量、慣性、重力效應。
  

• Shape（形狀）：決定流體阻力或接觸面的分布。
  

• Structures（結構）：骨架排列、關節位置，影響力傳遞。
  

• Materials（材料）：骨骼、肌腱、外殼的強度與彈性。
  

• Surfaces（表面）：粗糙度、摩擦係數，影響抓地與抓握能力。
  
  

---

以力學為視角，生命現象不再只是「看起來的形態」或「觀察到的行為」，而是：

• 力的來源 → 力的傳遞 → 行為與能量表現
  

• 短期適應（生理） → 長期塑造（形態、演化） → 技術應用（仿生）

why and how

• 為何生物力學？
  

• 生物力學提供理解生物形態、行為與功能的物理機制。
  

• 從力的產生、傳遞到能量消耗，解釋為什麼生物會這樣動。
  
  

• 如何結合生物與力學？
  

• 將生物觀察與力學理論結合，使用模型或實驗量化。
  

• 比較不同物種、不同環境下的力學策略，理解自然設計。
  
  

---

nature’s challenges and solutions

• 生物力學幫助理解自然挑戰與解決方案：
  

• 例如，如何應對速度限制、負重、流體阻力或摩擦力等。
  

• 自然演化出節能、高效率或特殊結構以解決這些力學挑戰。
  
  

---

生物力學和力學假說

• 觀察現象 → 提出假說 → 驗證力學影響。
  

• 使用實體或計算模型檢驗：
  

• 如果不是這樣，會怎樣？
  

• 力學解釋是否對應生物真實行為？
  
  

---

食物裡的力學挑戰

過程與挑戰

1. 覓食：
   
   

• 生物如何感知與搜尋食物？
  

• 靠近食物時，如何克服阻力或流體干擾。
  
  

2. 突破食物的物理防禦：
   
   

• 咀嚼、抓握或用嘴巴改變食物形態。
  

• 例：鳥嘴的尺寸與形狀決定牠能吃的食物種類。
  
  

3. 鳥類例子：
   
   

• Spoonbill：頭左右搖擺覓食，主要捕食浮游生物；嘴型圓上扁下，利用流體力學將食物帶到嘴邊。
  

• 參考 Vogel, Comparative Biomechanics：連續體原理與柏努力原理解釋流體中捕食行為。
  
  

4. 蝦蛄高速槌擊：
   
   

• Mantis shrimp 發出高達 1000 牛頓的撞擊力。
  

• 出現兩道撞擊力：第一道來自肌肉收縮，第二道與氣泡消失同步，利用彈性位能回復（elastic energy return）。
  

• 參考 Patek et al., Nature 2004：卡榫與收縮機制突破肌肉極限。
  
  

5. 魚類吸食：
   
   

• 伸口魚利用複雜頭骨與嘴部骨骼機構主動將食物吸入口中。
  

• 骨骼可旋轉、改變嘴形，產生相對運動以捕獲食物。
  
  

---

為什麼人要穿衣服

• 功能：保暖、社會溝通與吸引力。
  

• 從力學角度：衣物提供熱絕緣、減少熱量散失，屬於生物對環境挑戰的力學解決方案。
  
  

---

壁虎附著力原理

1. 附著力來源
   
   

• 排除法分析：不是吸盤、鉤子或宏觀凡德瓦力。
  

• SEM 觀察壁虎腳末端分叉結構，柔軟且能貼近表面，形似花椰菜。
  

• 理論上，每隻壁虎可產生 1300 N 附著力。
  
  

2. 附著力的應用問題
   
   

• 如何拔開？利用微小結構分布控制力。
  

• 弄髒怎麼辦？微結構可自潔，確保附著功能持久。

草原犬鼠穴道通風

• 野外觀察發現，穴道能產生單一方向通風。
  

• Vogel et al., J. Comp. Physiol., 1973：管口、管徑與高起峰的設計，可產生低壓，讓平地風流入穴道。
  

• 生物利用地形與結構調控環境，展示簡單物理原理的應用（壓力差與流體動力）。
  
  

---

走路與跑步的力學差異

• 走路：重心隨步伐變化，類似倒立單擺運動；每時刻至少有一腳著地。
  

• 跑步：增加肌腱與肌肉的彈性回彈（儲能-釋能），形成步態的「彈簧機制」。
  

• 力隨時間與空間變化，受介質與步態影響（Vogel, Science, 7 April 2000, VCL 288）。
  
  

---

流體力學與動物特化結構

• 蛾的濃密觸角能透氣，但透氣效果由翅膀拍動主動控制。
  

• Loudon & Koehl, J. Exp. Biol., 2000：翅膀拍動在觸角後方形成低壓，將前方空氣吸入，改善氣味或訊號傳輸。
  

• 典型「運動-流體-結構」交互案例。
  
  

---

龍蝦褪殼與聲學力學

• Patek, Nature, 2001：褪殼龍蝦發出聲音，類似小提琴弦的振動。
  

• 透過測量材料變形時間與聲音產生時間的同步性，可分析振動與聲波生成機制。
  

• 涉及運動、流體、材料與聲學，並受尺度影響。
  
  

---

跳蛛的跳躍與絲線策略

• 跳蛛利用絲線捲作支撐，即使沒有完全落下，也能控制運動。
  

• 結合尺度、材料與行為策略，確保安全與捕食精準。
  

• 展示力學、材料與行為交互的生態應用。
  
  

---

生物力學研究方法

• 從觀察現象到提出假說，再透過模型或實驗驗證。
  

• 範例：穴道通風 → 模擬低壓氣流；跑步動力學 → 測量重心與步態力；觸角氣流 → 流體動力測試。
  

• 循環流程：觀察 → 建模 → 假說驗證 → 再回到生物本身驗證。
  
  

---

綜合概念

• 生物力學整合：形態、行為、材料、流體、聲學。
  

• 自然挑戰 → 生物適應 → 力學解釋 → 仿生啟發。
  

• 從穴道通風、運動到捕食策略，展示自然界如何利用力學原理應對環境挑戰。

國立自然科學博物館生物學組助理研究員 廖鎮磐

材料力學簡介與實作

1. 材料力學實驗目的

• 了解不同材料的力學性質：纖維材料、軟性平面結構、黏性物質。
  

• 學生可獨立完成測試，培養實驗設計與操作能力。
  

• 評估材料在不同力作用下的變形與破壞行為。
  
  

---

2. 纖維材料的機械性質

(1) 基本概念

• 抵抗變形能力：材料在外力作用下保持形狀的能力。
  

• 斷裂抵抗能力：材料抵抗破壞或斷裂的能力。
  

• 受力類型：
  
  

• 拉伸 (Tension)
  

• 壓縮 (Compression)
  

• 剪切 (Shear)
  

• 彎曲 (Bending)
  
  

(2) 標準化力與應力

• 力的標準化：不同截面或尺寸的樣品，需要以單位面積力比較。
  

• 應力（Stress）：
  σ = \frac{F}{A}

  其中 FFF 為作用力，AAA 為截面積。
  
  

• 例：兩種化學纖維內部結構相同但直徑不同，必須用應力比較抗拉性。
  
  

(3) 形變與應變

• 工程應變（Engineering strain）：
  e=ΔLL0e = \frac{\Delta L}{L_0}e=L0​ΔL​
  假設截面積在變形過程保持不變，適用於小變形。
  
  

• 真實應變（True strain）：
  ε=ln⁡LtL0=ln⁡(1+e)\varepsilon = \ln\frac{L_t}{L_0} = \ln(1 + e)ε=lnL0​Lt​​=ln(1+e)
  考慮變形過程中瞬時長度，適用於大變形。
  
  

(4) 彈性區域與楊氏模數

• 線性彈性區：應力對應應變呈線性，符合虎克定律（Hooke’s law）。
  

• 楊氏模數（Young’s modulus）：
  E=σεE = \frac{\sigma}{\varepsilon}E=εσ​
  衡量材料在單位應變下所需的標準化力。
  

• 回復模數（Modulus of resilience）：
  材料在彈性區儲存的能量。
  
  

(5) 強度、延展與韌度

• 強度（Strength）：材料斷裂前的最大應力。
  

• 延展度（Extensibility）：材料斷裂前的最大應變。
  

• 韌度（Toughness）：
  U=∫0εfσ dεU = \int_0^{\varepsilon_f} \sigma \, d\varepsilonU=∫0εf​​σdε
  單位體積材料抵抗破壞所需能量。
  
  

---

3. 軟性平面結構與彎曲測試

• 三點彎曲測試：測量材料的彎曲應變、彎曲應力、彎曲楊氏模數。
  

• 彎曲韌度需考慮材料形狀與厚度。
  

• 例：比較不同棲地蜘蛛網的張力與剛性，可用框架與垂直變化高度測量。
  
  

---

4. 黏性物質測試

• 系統簡單：可視為拉伸測試。
  

• 系統複雜：測整體黏性並標準化，常用指標：
  

• 最大黏性
  

• 最大延展
  

• 作功大小
  
  

• 微小尺度測試：
  

• 原子力顯微鏡（AFM）測量局部黏性與表面力。
  

• 可測正向壓力與側向摩擦力。
  
  

• 黏性模型：
  

• 參考經典黏性力學模型或 JKR Adhesion Model。
  
  

---

5. 流體阻力測試

• 風阻測量：
  

• 風洞實驗，將樣品掛在秤上測量力。
  

• 流體阻力公式：
  Fd=12ρv2CdAF_d = \frac{1}{2} \rho v^2 C_d AFd​=21​ρv2Cd​A
  其中 CdC_dCd​ 為阻力係數。
  
  

• 可用於測試生物或材料在流體中的表現。
  

---

6. 測試設計與精度提升

• 拉伸精確度：
  

• 樣品大一些、長一些，便於測量。
  

• 使用微控移動機構。
  

• 受力精確度：
  

• 高精度秤，快速穩定讀值。
  
  

• 結構穩定性：
  

• 善用重力方向，減少水平測量誤差。
  
  

• 結論：
  

• 材料測試需同時觀察瞬時變形與受力。
  

• 根據材料性質與受力方向選擇適當模型（彈性、黏性、流體阻力等）。
  

• 整體結構表現與單一材料性質同樣重要，例如蜘蛛網整體張力與韌性。