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

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

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

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

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

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

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

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

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

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

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

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

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