有趣的 SVG filter - feTurbulence

一直都在寫演算法及前後端架構程式，雖然對 2D/3D 計算還算略懂，自行開發的繪圖函式也只是基本的點、線、面、材質貼圖等，對於圖形學的東西接觸得不多，以前也只是和美術合作，由他們先做好圖我再拿來用，對於那些繪圖軟體怎麼計算出那些特效並不是很瞭解，開始玩 SVG 濾鏡後才慢慢理解，這些圖形學的演算法相當有趣，雖然可以由美術人員先做好再拿來用，如果自己做的話似忽可以做到更靈活的變化。 SVG 的濾鏡中 feTurbulence 就是一個當初想都沒想過的東西 參考資料： [這裡](https://drafts.fxtf.org/filter-effects/#feTurbulenceElement) , [這裡](https://cdc.tencent.com/2019/07/18/%E9%9A%8F%E6%9C%BA%E4%B8%8D%E5%8F%AA%E6%98%AF-math-random-%E5%89%8D%E7%AB%AF%E5%99%AA%E5%A3%B0%E5%BA%94%E7%94%A8/) , [這裡](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence) , [這裡](https://www.zhangxinxu.com/wordpress/2020/10/svg-feturbulence/), 和 [這裡](https://zh.wikipedia.org/wiki/Perlin%E5%99%AA%E5%A3%B0), 以及一個 [綜合教學](https://www.oxxostudio.tw/articles/201410/svg-tutorial.html) 這裡還有 C++ 的函式庫 [libnoise](http://libnoise.sourceforge.net/index.html) ，[libperlin](https://github.com/copperwater/libperlin) 參數說明 ``` baseFrequency 基本頻率，預設 0 ，可以設兩個值 x y numOctaves 倍頻數量，預設 1 seed 起始值，預設 0 stitchTiles noStitch 不理會邊界(預設)，stitch 邊界平滑 type turbulence 混亂(預設)，fractalNoise 分形噪聲 ``` 先來一個簡單範例 ``` $mmcode(r1) ``` <div class="mmresult r1"> <svg width="300" height="440" xmlns="http://www.w3.org/2000/svg" style="background-color:#fff"> <defs> <filter id="a122201_f1" x=0 y=0 width=100% height=100%> <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="1" seed="1"> <set attributeName="type" to="turbulence" begin="a122201_t1.click"/> <set attributeName="type" to="fractalNoise" begin="a122201_t2.click"/> <set attributeName="numOctaves" to="1" begin="a122201_n1.click"/> <set attributeName="numOctaves" to="2" begin="a122201_n2.click"/> <set attributeName="baseFrequency" to="0.02" begin="a122201_b1.click"/> <set attributeName="baseFrequency" to="0.03" begin="a122201_b2.click"/> <set attributeName="seed" to="1" begin="a122201_s1.click"/> <set attributeName="seed" to="2" begin="a122201_s2.click"/> </feTurbulence> </filter> </defs> <rect x="0" y="0" width=300 height=300 style="filter: url(#a122201_f1)"/> <text x=10 y=330 style="fill:#00f">type</text> <text id="a122201_t1" x=110 y=330>turbulence</text> <text id="a122201_t2" x=200 y=330>fractalNoise</text> <text x=10 y=360 style="fill:#00f">numOctaves</text> <text id="a122201_n1" x=110 y=360>　　1　　</text> <text id="a122201_n2" x=200 y=360>　　2　　</text> <text x=10 y=390 style="fill:#00f">baseFrequency</text> <text id="a122201_b1" x=110 y=390>　　0.02　　</text> <text id="a122201_b2" x=200 y=390>　　0.03　　</text> <text x=10 y=420 style="fill:#00f">seed</text> <text id="a122201_s1" x=110 y=420>　　1　　</text> <text id="a122201_s2" x=200 y=420>　　2　　</text> </svg> </div> 那麼這個看起來就是一張好像亂七八糟的圖，有什麼用處呢 ? 既然是用來模擬大自然可見的一些有點亂的東西，例如雲，火焰等，這張圖就是一個基底， 有了基底就要拿來做點變化，這個時候得套用另一個強大的濾鏡 feDisplacementMap ，來製造有趣的影像 先來一個模擬雲朵的範例 ``` $mmcode(r2) ``` <div class="mmresult r2"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" style="background-color:#5af"> <defs> <filter id="a122202_f1" filterUnits="userSpaceOnUse"> <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="2" result="a122202_t1" seed="1"/> <feDisplacementMap in2="a122202_t1" in="SourceGraphic" scale="50" xChannelSelector="R" yChannelSelector="G"/> </filter> <radialGradient id="a122202_rad1"> <stop offset="0%" stop-color="#ffff"></stop> <stop offset="100%" stop-color="#fff0"></stop> </radialGradient> </defs> <ellipse cx="100" cy="50" rx="100" ry="50" fill="url(#a122202_rad1)" style="filter: url(#a122202_f1)"/> <ellipse cx="100" cy="50" rx="100" ry="50" fill="url(#a122202_rad1)" style="filter: url(#a122202_f1)"/> </svg> </div>