フーノページ

フーノページ

contact

SVG、feTurbulenceでノイズ発生。

syntax。


<filter id = "「「５filtername」」">

    <feTurbulence 
        baseFrequency = "「「４num」」" 
        numOctaves = "「「４int」」" 
        type = "turbulence 「「２|」」 fractalNoise"
        seed = "「「４int」」" 
        stichTiles = "noStitch 「「２|」」 stitch"
        >
    </feTurbulence>
        
</filter>

質感を表現する「ノイズ」。

こんにちは、「ふ」です。
SVGのフィルターシリーズ、今回は<feTurbulence>を使ってノイズを発生させましょう。

CGにおけるノイズは、不規則な「乱れ」を画像や映像に与えるもので、テクスチャや手書き風、炎などの自然現象など、さまざまな質感の表現に利用されています。フォトショや動画編集ソフトを使っている方には馴染みがあることでしょう。
SVGの<feTurbulence>フィルターを使えば、コーディングだけで簡単にノイズ効果を楽しむことができます。

なお記事後半では、<feDisplacementMap>フィルターを使い、要素に対してノイズを乗せていく方法についても紹介します。
２つのフィルターの組み合わせは、テキストや画像、borderに利用するなど、webデザインの新たなツールにもなり得ます。

SVGをじっくり学びたい方へ⬇︎。

SVGコーディングブック

著者：ふ

Apple Booksでみる

このたびSVGの書籍を出版しました。
しっかりとしたSVGスキルが身に付く内容となっています。参考にしてください。

基本セット。


<feTurbulence 
    baseFrequency = "x/y | x y"     「「３..数値、初期値:0」」
/>

<feTurblence>はbaseFrequency属性を指定すれば、ノイズを発生させることができます。これが最小セットです。
baseFrequency。frequencyは「周波数」です。
値は数値で指定し、初期値は0となっています。周波数が大きくなるほど一定範囲におけるノイズの周期が増えていくので、細かいノイズになります。


<svg viewBox = "0 0 100 100">
        <rect x = "20" y = "20" width = "60" 
        height = "60" fill = "darkcyan"/>    
</svg>

フィルターを掛けるには先づ、その対象となるオブジェクトが必要です。
長方形⬆︎を１つ用意しました。


<svg class = "samp_svg" viewBox = "0 0 100 100">

    <filter id = "「「５turbulence01」」">
        <feTurbulence baseFrequency = "「「１0.1」」"/>   
    </filter>
    
    <rect x = "20" y = "20" width = "60" 
    height = "60" fill = "darkcyan" 
    filter = "url(「「５#turbulence01」」)"/>
    
</svg>

<filter>コンテナを定義し、その中に<feTurbulence>を記述します。baseFrequencyは「0.1」としました。
<filter>にはid名「turbulence01」を付けておき、<rect>側のfilter属性で呼び出します。

ノイズが掛かりました。
もっと周波数を増やしてみましょう。


    <filter id = "turbulence01">
        <feTurbulence baseFrequency = "「「１0.5」」"/>   
    </filter>

周波数を大きくすると、ノイズも細かくなります。
さらに増やしてみます。


    <filter id = "turbulence01">
        <feTurbulence baseFrequency = "「「１2」」"/>   
    </filter>

砂漠みたいになってしまいました。これはこれで使いどころがありそう。

xy個別にノイズ。

baseFrequency属性に数値を２つ指定することで、x/y方向個別にノイズを掛けることができます。


    <filter id = "turbulence01">
        <feTurbulence baseFrequency = "「「１0.5 0.1」」"/>   
    </filter>

縦長のノイズになっています。


    <filter id = "turbulence01">
        <feTurbulence baseFrequency = "「「１0.5 0」」"/>   
    </filter>

y方向を0にしてみました。

水平方向のみにノイズが掛かり、縦縞模様になっています。


    <filter id = "turbulence01">
        <feTurbulence baseFrequency = "「「１0 20」」"/>   
    </filter>

今度はx方向を0に。

今度は横縞に。
「0」にした方向と逆方向の縞模様になるのが面白いですね。

いろんな属性。

<feTurblence>の持つ、他の属性について紹介していきます。

type。


type = "turbulence"「「３(default)」」 | "fractalNoise"

<feTurblence>では２種類のノイズタイプを選択できます。初期値はturblentノイズになってますが、なめらかなフラクタルノイズを指定することもできます。


<filter id = "turbulence01">
    <feTurbulence baseFrequency = "0.1"/>   
</filter>

type属性を指定しないときは、初期値であるturbulenceノイズが採用されます。


<filter id = "turbulence01">
    <feTurbulence baseFrequency = "0.1"
    type = "「「１fractalNoise」」"/>   
</filter>

fractalNoiseにしてみました。
くっきりしたturbulenceノイズに比べ、マイルド..というかぼんやりしたものになりましたね。

numOctaves。


numOctaves = "int"「「３   ..1以上の整数、初期値:1」」

numOctave属性は、重ね合わせるノイズ関数の数を指定します。
値は１以上の整数で指定し、初期値は１となっています。数値を大きくするとノイズ処理が重ね掛けされるため、きめ細かなノイズとなります。


<filter id = "turbulence01">
    <feTurbulence baseFrequency = "0.1"/>   
</filter>

⬆︎はnumOctavesが、初期値の「1」のままのノイズ。


<filter id = "turbulence01">
    <feTurbulence baseFrequency = "0.1"
    numOctaves = "「「１5」」"/>   
</filter>

numOctavesを「5」としました。
ノイズ関数が重ねられて、複雑なものになっています。

seed。


seed = "int"「「３   ..1以上の整数、初期値:1」」

seedは「種」「元となるもの」といった意味です。
<feTurbulenct>は乱数ジェネレータを使って不規則なノイズを発生させているのですが、ジェネレータに入力される初期値によっても結果は変わってきます。その初期値を指定するのがseed属性です。

初期値は「1」となっており、1以上の整数で指定します。
他の属性と違い、「値が大きいほど/小さいほど〇〇になる」ということはありません。乱数のスタート値を変えることによって、生成されるノイズ形状に変化を与える役割をします。


<filter id = "turbulence01">
    <feTurbulence baseFrequency = "0.1"/>   
</filter>

seedを指定しない、初期値「1」のままのノイズ⬆︎。


<filter id = "turbulence01">
    <feTurbulence baseFrequency = "0.1"
    seed = "「「１5」」"/>   
</filter>

seedを「5」にすると、違う形状のノイズになりました。
seed属性は、他のパラメータは変化させずに、ノイズの形状だけを変えたいときに利用できます。

stitchTiles。


stitchTiles = "noStitch"「「３(default)」」 | "stitch"

stitchTiles属性はノイズを掛けた要素同士を並べたとき「継ぎ目の模様をスムーズにつなげるかどうか」を指定します。
stitchは「縫い目」などという意味です。初期値は「noStitch（繋ぎ合わせなし）」。「stitch（繋ぎ合わせる）」に指定すると、２つのノイズ模様をシームレスに繋ぎ合わせることができます。


<svg viewBox = "0 0 120 100">
    <rect x = "20" y = "20" width = "40" 
    height = "60" fill = "yellow"/> 
    <rect x = "60" y = "20" width = "40" 
    height = "60" fill = "yellowgreen"/> 
</svg>

長方形を２つ並べたもので、実際に試してみましょう。


<svg viewBox = "0 0 120 100">

<filter id = "「「５left_noise」」" width = "100%" x = "0">
<feTurbulence baseFrequency = "0.1"
stitchTiles = "「「１noStitch」」"/>     
</filter>
    
<filter id = "「「５right_noise」」" width = "100%" x = "0">
<feTurbulence baseFrequency = "0.1"
stitchTiles = "「「１stitch」」"/>     
</filter>

    <rect x = "20" y = "20" width = "40" 
    height = "60" fill = "yellow"
    filter = "url(「「５#left_noise」」)"/>
    
    <rect x = "60" y = "20" width = "40" 
    height = "60" fill = "yellowgreen"
    filter = "url(「「５#right_noise」」)"/> 
</svg>

２つのノイズフィルター「left_noise」と「right_noise」を定義しました。leftのほうのstitchTiles属性には初期値の「noStitch」、rightのほうは「stitch」を指定しています。
左右の長方形に、それぞれのフィルターを施してみます。

現在の状態⬆︎です。
２つのノイズ模様の継ぎ目をみると、うまくつながっていません。
「noStitch」と「stitch」の<feTurbulence>を並べると、それぞれのノイズ模様が独立した見た目になります。
両方のstitchTiles属性を「stitch」に揃えてみましょう。


<filter id = "left_noise" width = "100%" x = "0">
<feTurbulence baseFrequency = "0.1" 
stitchTiles="「「１stitch」」" />     
</filter>
    
<filter id = "right_noise" width = "100%" x = "0">
<feTurbulence baseFrequency = "0.1" 
stitchTiles="「「１stitch」」"/>     
</filter>

ノイズの模様がシームレスに繋がりました。ちなみに両方を「noStitch」に揃えたときも、シームレスになります。
お好みに応じて、stitchTiles属性を使ってみてください。

オブジェクトにノイズを適用。

扨（さて）いよいよ、オブジェクトにノイズを乗せていきます。


<svg viewBox="0 0 234.5 234.5">
    <g id = "fu">
        「「３<!-- 〜略〜 -->」」
    </g>
</svg>

「ふ」の顔にノイズを掛けてみましょう。
<feTurbulence>で作ったノイズにresult名を付け、<feDisplacemantMap>でSourceGraphic（元要素）と掛け合わせます。


<svg viewBox="0 0 234.5 234.5">

</filter id = "「「５fu_noise」」">「「１ ..@1@」」
    <feTurbulence width = "100%" height = "100%" 
    x = "0" y = "0" 
    baseFrequency="0.01" numOctaves="30"
    type="fractalNoise" seed = "5"
    result="「「４noise」」"/>「「１ ..@2@」」
    
    <feDisplacementMap 
    in="SourceGraphic" in2="「「４noise」」" 「「１ ..@3@」」
    scale="50"「「１ ..@4@」」
    />
</filter> 

    <g id = "fu" filter = "url(「「５#fu_noise」」)" >「「１ ..@5@」」
        「「３<!-- 〜略〜 -->」」
    </g>
    
</svg>

@1@ filterコンテナを定義し、id名を「fu_noise」としました。

@2@ <feTurbulence>のパラメータを色々いじって、好みのノイズになるように調整しました。<feDisplacementMap>に渡せるように、result名を「noise」としています。

@3@ <feDisplacementMap>フィルターは、元要素と与えられた波形をミックスして出力させるフィルターです。in属性には「SourceGraphic（元要素）」、in2属性にさっきのresult名を使い、ノイズ波形を渡しました。

@4@ <feDisplacementMap>のscale属性は、大きくするほど波形の変位も大きくなる..つまり、大きなノイズが掛かるようになります。
ここでは「50」としました。

@5@ 「ふ」のパスデータにフィルター名を渡します。

ぐんにゃり(笑)。
ノイズを渡すことで、人の手による「落書き」のような表現になりました。

最強のSVGフィルター。

最後までお読みくださり、　ありがとうございました。
今回はSVGでノイズを発生させる、<feTurbulence>について紹介してきました。

このフィルターはとても大きな可能性を持っています。工夫次第では、コーディングだけでPhotoshopやAfterEffectsに備わっているような、いろんな効果を作り出すことができそう。
面白いチュートリアルができたら、今後紹介していこうと思っています。お楽しみに。

ではまた〜 🎵

「ふ」です。

ベクターグラフィック、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。