一直都在寫演算法及前後端架構程式，雖然對 2D/3D 計算還算略懂，自行開發的繪圖函式也只是基本的點、線、面、材質貼圖等，對於圖形學的東西接觸得不多，以前也只是和美術合作，由他們先做好圖我再拿來用，對於那些繪圖軟體怎麼計算出那些特效並不是很瞭解，開始玩 SVG 濾鏡後才慢慢理解，這些圖形學的演算法相當有趣，雖然可以由美術人員先做好再拿來用，如果自己做的話似忽可以做到更靈活的變化。
SVG 的濾鏡中 feTurbulence 就是一個當初想都沒想過的東西
參考資料： 這裡 , 這裡 , 這裡 , 這裡, 和 這裡, 以及一個 綜合教學
這裡還有 C++ 的函式庫 libnoise ，libperlin
參數說明
baseFrequency 基本頻率，預設 0 ，可以設兩個值 x y
numOctaves 倍頻數量，預設 1
seed 起始值，預設 0
stitchTiles noStitch 不理會邊界(預設)，stitch 邊界平滑
type turbulence 混亂(預設)，fractalNoise 分形噪聲
先來一個簡單範例
<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>
<set attributeName="type" to="fractalNoise" begin="a122201_t2.click"></set>
<set attributeName="numOctaves" to="1" begin="a122201_n1.click"></set>
<set attributeName="numOctaves" to="2" begin="a122201_n2.click"></set>
<set attributeName="baseFrequency" to="0.02" begin="a122201_b1.click"></set>
<set attributeName="baseFrequency" to="0.03" begin="a122201_b2.click"></set>
<set attributeName="seed" to="1" begin="a122201_s1.click"></set>
<set attributeName="seed" to="2" begin="a122201_s2.click"></set>
</feTurbulence>
</filter>
</defs>
<rect x="0" y="0" width="300" height="300" style="filter: url(#a122201_f1)"></rect>
<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>
那麼這個看起來就是一張好像亂七八糟的圖，有什麼用處呢 ? 既然是用來模擬大自然可見的一些有點亂的東西，例如雲，火焰等，這張圖就是一個基底， 有了基底就要拿來做點變化，這個時候得套用另一個強大的濾鏡 feDisplacementMap ，來製造有趣的影像
先來一個模擬雲朵的範例
<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"></feTurbulence>
<feDisplacementMap in2="a122202_t1" in="SourceGraphic" scale="50" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</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>
<ellipse cx="100" cy="50" rx="100" ry="50" fill="url(#a122202_rad1)" style="filter: url(#a122202_f1)"></ellipse>
</svg>
沒有留言:
張貼留言