【教學】距離場教學 第四章 - 距離辨識

標準化空間，大小為 10、距離場上色

繪製距離環
我們為距離場的內外繪製上了不同的顏色用於辨識，但除了形狀自身之外，我們也想知道他位置的距離值，以便我們判斷函數計算正不正確。

因此，我們可以每隔一段距離就畫出一線條，來告訴我們那裏的距離。我們透過取小數函數 frac ，每隔一段距離就畫出重複的圖形。


將函數套用到距離計算上，請注意這裡輸入給函數的 distance 沒有進行無條件進位 :D


呈現這個結果的原因是 frac 會將輸入值取小數，這讓整個距離的範圍在由 0 到 1 之間不斷重複。

雖然它達到了顯示距離的目的，但看起來實在有夠醜的，我們只需要每一段距離畫一條線即可。添加一項屬性作為線條厚度，我們根據厚度繪製適當的線條即可。



而畫線的部分，我們使用閥值函數 step 從原本 0 到 1 的數值中過濾出想要的部分，只有每段的當距離小於厚度閥值時才會畫出線段。


好看多了，每隔一段距離畫一圈線段，第幾圈就表示當前的位置是多少。

最後，我們只需要將原本距離場的顏色乘回去就大功告成。


這章教會了你們如何繪製距離環，距離環可以用來檢視函數計算是否正確，後面將會省略重複的部分。