完成三通高架橋動畫

圓心距是圓半徑的\sqrt{2}倍。

製作過程

我本來以為這個圖需要更久的時間,因為我目前有更急切的事情要做。但是有時做事也是講時機的,時機到了事情就必須要做了。

首先我用Inkscape打開了原圖,希望獲取到一些端點坐標以計算出圓心距與半徑的比值。研究了一會,得到了幾個坐標值。

之後我叫grok用js做了一個「通過三點坐標計算出圓的半徑以及圓心坐標」程式,再拿它來算出比值。

之後,我就在ejtile以半徑60的圓來製作單元,再把單元拼接完成。單元總共用了三層mask才實現。

但是因為單個密鋪單元過於複雜,所以它旋轉時非常卡頓。則我需要用另一種方式來製作單元,使單元只用一個path來描述。

這需要計算出兩個圓之間的交點,於是grok又幫我做了個能計算兩個圓的交點的程式。

我拿著這些交點坐標結果,用path:d中的A命令實現了簡單的路徑描述。

grok的程式

grok做的兩個程式都集合在了這個頁面,說不定以後還會用到。

功能是:

  1. 通過三個點的坐標得到圓心坐標以及圓的半徑
  2. 通過兩個圓的圓心坐標和半徑得到它們的交點

後來又搞了一個

Leave a Comment