閱讀約 5 分鐘tech

一天畫出一台會動的咖啡機:我怎麼用程式畫零件,又怎麼用四條公式模擬一杯濃縮

洛可可油畫風格封面:一間粉彩色調的華麗工坊裡,一位工匠在雕花木桌上把一台黃銅咖啡機拆成一件件零件攤開,旁邊一只瓷杯正冒著熱氣

2026 年 10 月 14 日,我把部落格的濃縮咖啡實驗室換成一台 110 個零件、會跟著滑桿動的咖啡機。這篇照時間順序講它怎麼畫出來、畫完怎麼讓程式自己找錯,再把背後的萃取模擬拆成四條公式,連同它哪裡不準一起交代。技術學習分享。

  • 濃縮咖啡
  • 互動圖
  • SVG
  • 模擬
  • 軸測投影
  • 做中學
目錄
  1. 早上 11 點:先有滑桿,才有機器
  2. 中午 1 點半:把機器拆成零件,用程式描述
  3. 畫完,讓程式自己找錯
  4. 三種畫法放在一起比
  5. 下午 3 點到 5 點半:讓機器動起來
  6. 傍晚 5 點 47 分:點了沒反應
  7. 模擬怎麼算:四條公式
  8. 少有人注意到:壓力不是越大越好
  9. 我照著調了,為什麼還是不對?
  10. 帶得走的一件事

洛可可油畫風格封面:一間粉彩色調的華麗工坊裡,一位工匠在雕花木桌上把一台黃銅咖啡機拆成一件件零件攤開,旁邊一只瓷杯正冒著熱氣

所有模型都是錯的,但有些是有用的。
—— George E. P. Box《Empirical Model-Building and Response Surfaces》(1987;中譯為筆者自譯)

2026 年 10 月 14 日,我花了一天把部落格的濃縮咖啡實驗室從幾條滑桿和兩張折線圖,換成一台打開機殼、看得到鍋爐和管線的咖啡機:110 個實體零件、11 條管子,畫完由程式自己檢查,零件互相穿過、管子沒接好、東西懸空這幾類錯誤都是零才上線。機器背後的萃取模擬只有四條簡化公式,標準設定(18 克粉、93°C、9 bar)跑出來是 28.7 秒萃到 36 克、萃取率 20.2%。它適合拿來抓「往哪個方向調」,不能拿來預測你家那台機器的下一杯。

早上 11 點:先有滑桿,才有機器

第一版很陽春:三條滑桿(研磨度、水溫、壓力)、一張萃取率曲線、一張流速曲線,旁邊放一張平面示意圖。數字會動,但畫面是死的,拉滑桿的人很難把「研磨調細」和「水流變慢」連在一起。

我想要的是:拉一下研磨度,看得到磨豆機的刻度環轉;調一下壓力,壓力錶的指針跟著擺。這代表圖不能是一張畫好的圖片,而要是一個「知道自己每個零件在哪裡」的東西,才有辦法讓某個零件單獨動。

中午 1 點半:把機器拆成零件,用程式描述

所以我寫程式「描述」咖啡機,讓程式去畫。每個零件都是一個立體形狀,放在同一個三維座標裡:

  • 機身、底座、滴水盤是帶圓角的方塊;
  • 把手、杯子、鍋爐是圓柱;
  • 旋鈕、磨豆機蓋子、杯底這種有弧度的東西,先畫一條側面輪廓,再讓它繞軸轉一圈,跟陶藝拉坯是同一個道理;
  • 水管就是一串座標點,沿著點拉出一條有粗細的管子。

描述完,再用一個固定的觀看角度把三維座標「投影」成平面:水平轉 54 度、往下俯看 29 度。常有人把這種圖叫等角圖,但嚴格的等角圖三條軸要互相差 120 度,我這個角度不是,比較準確的說法是一般的軸測投影。我也考慮過讓讀者自己轉動機器,最後決定固定角度:角度一動,前後遮擋、文字標籤的位置全都要重算,換來的好處不多。

零件的畫法和檢查工具,我用的是一套開源的工具包(wheresryan22/anatomy,MIT 授權),程式則是我跟 AI 寫程式助手一起寫的。畫本身很快,真正花時間的是畫完之後的檢查。

畫完,讓程式自己找錯

人眼看圖很容易被騙。兩根管子在畫面上交叉,你分不出它是從前面繞過去,還是直接穿過鍋爐。所以每次重畫完,程式都會跑一輪稽核,逐項檢查:

  • 零件有沒有互相穿過;
  • 每一條管子的兩端,是不是都接在某個零件上,沒有一端懸在半空;
  • 有沒有零件沒被任何東西撐著,浮在空中;
  • 誰在前、誰在後的遮擋順序對不對(這台機器有 837 條這種前後規則);
  • 零件的輪廓在畫面上有沒有自己打結。

最後上線那版的結果是:110 個實體、1,064 條線段,所有項目都是 0,跑一輪 7.8 秒。這一步是我覺得最值得學的地方:圖好不好看要靠人,但圖對不對可以交給程式。

第 2 步磨粉:磨豆機調整環與落粉

三種畫法放在一起比

做法改一個零件能不能讓零件單獨動會不會自己發現錯
請 AI 生一張圖整張重生,細節每次都不一樣不行,它只是一張圖片不會,管子接錯也看不出來
手畫 SVG 向量圖改得動,但前後遮擋要自己顧可以,但每個動作都要手調不會,全靠眼睛
用程式描述零件再投影改一個數字就好,遮擋自動重排可以,零件本來就分開會,每次重畫都跑稽核

第三種最慢上手,前期要先把每個零件的尺寸和位置想清楚。但只要你打算改第二次,它就會開始划算。

下午 3 點到 5 點半:讓機器動起來

零件分開之後,動畫就是「改某個零件的位置或角度」。拉研磨度,刻度環轉;調水溫,鍋爐旁的數字跟著變;按萃取,沖煮頭的拉桿往下壓 40 度,兩道咖啡從把手流進杯子,秤上的數字一路跳到 36 克。如果你把粉磨太細、壓力又開太大,粉餅上會浮出幾道裂痕,那是下面會講的「通道效應」。

第 4 步萃取:壓力錶、溫度與秤同步顯示

傍晚我又把流程補完整,從落豆、磨粉、填粉、萃取、打奶泡、拉花到完成,一共七步,按一下機器就從頭播一次。坦白說,最後兩步的牛奶壺還是一個平面的線稿,倒奶的動作看得出來,但不夠立體,這是目前最弱的一塊。

第 6 步拉花:牛奶壺目前還是平面線稿

傍晚 5 點 47 分:點了沒反應

上線之後我自己去點,機器一動也不動。查了一輪才發現程式沒壞,是瀏覽器還在用四個小時前的舊版程式:網址一樣,瀏覽器就認定內容沒變,直接拿快取。解法是在程式網址後面加一段「內容版本號」,內容一改,網址就跟著變,瀏覽器只好重新下載。

這次讓我學到:以為壞掉的東西,有時候只是根本沒被換上去。

模擬怎麼算:四條公式

機器是外殼,真正回答「這杯會太酸還是太苦」的是底下的模擬。它只有四條公式,我用白話講:

  1. 流速跟研磨度的平方成正比,跟壓力成正比。 這來自流體穿過顆粒堆的物理:理論上顆粒越細,縫隙越小,水越難過,阻力大約跟顆粒大小的平方有關。真實的粉餅細粉會堵、還會被壓縮,所以這只是個約略的關係。
  2. 萃取率隨時間爬升,但越爬越慢,最高 28%。 一開始水碰到的都是好溶的東西,溶得很快;後來剩下難溶的,就慢下來。研磨越細、水越熱,爬得越快。
  3. 通道效應。 粉太細、壓力又超過 8.5 bar 時,水可能在粉餅裡鑽出裂縫,從裂縫快速穿過。結果同一杯裡,裂縫旁的粉被萃過頭,其他地方又沒萃到,喝起來又酸又苦。模型用一個 0 到 1 的分數表示風險。
  4. 味道。 萃取率在 20% 附近甜感最高,往下偏酸、往上偏苦,通道效應會把酸和苦一起往上推。

萃取率的換算是業界通用的:萃取率 = 濃度 × 萃取液重量 ÷ 粉重。18 克粉萃出 36 克、萃取率 20.2%,濃度大約是 10.1%。

拿實驗室的四個預設實際跑一次:

設定研磨 / 水溫 / 壓力萃到 36 克萃取率怎麼樣
太酸380 µm / 89°C / 9 bar21.1 秒13.0%太快、萃不夠
平衡300 µm / 93°C / 9 bar28.7 秒20.2%在甜蜜點
太苦210 µm / 95.5°C / 10.5 bar45.4 秒25.3%過萃,通道風險 0.40
快萃420 µm / 93°C / 6 bar24.0 秒15.0%偏酸

常被拿來參考的萃取率區間是 18% 到 22%。這個範圍是咖啡圈的慣例。沒有哪個組織替濃縮咖啡訂過這個標準,精品咖啡協會(SCA)那張有名的「金杯」表,原本講的是滴濾咖啡。同樣的,18 克萃 36 克、25 到 30 秒也只是常見的起點;義大利濃縮咖啡協會的認證規格是 7 克粉、約 25 毫升、88°C、9 bar 左右,比例和我們熟悉的不一樣。

少有人注意到:壓力不是越大越好

很多人覺得「壓力開大一點,萃得比較出來」。模型裡我刻意放了一個設計:超過 9 bar 的部分,只有三成五會變成推水的力氣,因為粉餅被壓得更密,多出來的力氣大多被吃掉了。

實際跑一次:研磨和水溫不動,壓力從 9 bar 加到 11 bar,流速只從每秒 1.45 克變成 1.56 克,多了不到 8%。更反直覺的是萃取率:9 bar 是 20.2%,11 bar 反而降到 19.7%。因為水流快了一點,萃到 36 克的時間從 28.7 秒縮到 27.3 秒,水跟粉相處的時間變短,帶走的東西就少了。

所以咖啡偏酸時,我會先動研磨度,壓力留到最後:同樣其他不變,把研磨從 300 調到 270,萃取率就從 20.2% 走到 22.6%,效果比加壓明顯得多。

我照著調了,為什麼還是不對?

這是我最想先講清楚的。模型會錯,而且錯在哪裡我心裡有數:

  • 它不知道你的豆子。產地、烘焙深淺、放了幾天,都會讓同一個研磨度跑出差很多的流速。
  • 它不知道你的機器。我用 µm 標研磨度,但你家磨豆機的刻度沒有單位,兩台的「15 格」可能差很多。
  • 它把通道效應簡化成一個分數,真實的粉餅是不平均的,布粉、壓粉都會影響。

我的用法是把它當指南針:它告訴你「太酸先調細、太苦先調粗、壓力最後才碰」,方向是對的;但要調幾格,還是得靠你喝一口、記下來、再調一次。

帶得走的一件事

做出一個東西之後,先寫下它會怎麼錯,再寫一個能抓到這種錯的檢查。 我的咖啡機能撐住,靠的是每次重畫都有程式幫我數「有幾根管子沒接好」,我自己的眼睛常常看漏。你今天可以挑一個自己做的東西,一張預算表、一份旅行計畫、一段程式都行,寫下一個「如果它錯了,會長什麼樣」的具體例子,然後實際檢查一次,看它有沒有中。

留言

載入留言中…

送出前需用 Google 登入,只顯示你的名字與頭像