收集地水火風空(五輪塔)、五行、煉金術、八卦、埃及聖書體的元素符號, 再用一條連續的線:先畫出第一個符號,然後流動變形成下一個,循環不息。 點選下方圖鑑中的 3 到 5 個符號,按播放。
這批是「一筆連續線條」版本:每個符號都被重繪成單一路徑,這是變形動畫的前提。點選順序就是變形順序。
引擎原理(零依賴 Vanilla JS):用 getPointAtLength 把每個符號路徑等距取樣成 240 個點;
變形前先做「起點與方向對齊」(在所有旋轉起點與正反方向中,挑總位移最小的那組),
避免變形時線條無謂打轉;再逐幀以緩動函式插值兩組點,餵給同一條 polyline。
任意形狀之間都能變,不受 SVG path 指令結構限制(這是 SMIL morph 做不到的)。
背景研究實抓驗證的碼位與對應關係。圖鑑中的一筆畫版本即從這些體系的幾何描述重繪而來。
日本五輪塔由下而上:地=方形、水=正圓、火=三角(尖朝上)、風=仰月(碗形、開口朝上)、空=宝珠(圓體頂端收尖)。五大皆無 Unicode 碼位,屬純幾何符號——反而最適合一筆畫。對應梵字種子字:地 a、水 va、火 ra、風 ha、空 kha(Siddham 為書法字形,靠填色不靠線條,不適合線條動畫)。
| 符號 | 五行 | 碼位 | 幾何 |
|---|---|---|---|
| ☿ | 水(水星) | U+263F | 新月+圓+十字 |
| ♀ | 金(金星) | U+2640 | 圓在上、十字在下 |
| ♂ | 火(火星) | U+2642 | 圓+右上斜箭頭 |
| ♃ | 木(木星) | U+2643 | 似「2」曲線加橫線 |
| ♄ | 土(土星) | U+2644 | 上橫、豎筆右彎成鉤 |
相生相剋圖畫法:五元素置於正五角形頂點,外圈順時針=相生(木→火→土→金→水),內部跨越連線=相剋,軌跡正好構成五芒星——圖鑑裡的五角形與五芒星就是取自這個結構。行星符號因圓與十字是分離部件、必須提筆,不做一筆畫版。
| 符號 | 元素 | 碼位 | 幾何 |
|---|---|---|---|
| 🜂 | 火 | U+1F702 | 正三角形,尖朝上 |
| 🜄 | 水 | U+1F704 | 倒三角形,尖朝下 |
| 🜁 | 風 | U+1F701 | 三角+橫線貫穿上半(提筆,不可一筆畫) |
| 🜃 | 土 | U+1F703 | 倒三角+橫線貫穿下半(提筆,不可一筆畫) |
| 字符 | 卦 | 象徵 | 碼位 |
|---|---|---|---|
| ☰ | 乾 | 天 | U+2630 |
| ☱ | 兌 | 澤 | U+2631 |
| ☲ | 離 | 火 | U+2632 |
| ☳ | 震 | 雷 | U+2633 |
| ☴ | 巽 | 風 | U+2634 |
| ☵ | 坎 | 水 | U+2635 |
| ☶ | 艮 | 山 | U+2636 |
| ☷ | 坤 | 地 | U+2637 |
卦是多段分離橫槓,不能一筆畫;但適合另一種節奏——「逐爻依序點亮」,列入後續實驗方向。
| 字符 | 意義 | Gardiner | 碼位 | 幾何 |
|---|---|---|---|---|
| 𓈖 | 水(漣漪) | N35 | U+13216 | 連續鋸齒折線,天生的一筆開放線條 |
| 𓇳 | 太陽 | N5 | U+131F3 | 同心雙圓(兩筆) |
| 𓈋 | 山 | N26 | U+1320B | 雙峰一谷、底邊封閉,一筆閉合 |
聖書體字符需系統字型支援才能顯示;圖鑑中的水波與山即依其幾何重繪。