Gooey Effectについて

Contents

Gooey Effectとは SVGフィルターを使って実装する SVGフィルターの中身の説明ところでガウス分布って何？ガウシアンブラーの仕組み

ちょっと前に作成する機会があったので、備忘録として、、

Gooey Effectとは

物体が液体の様に融合した感じになる表現方法。

SVGフィルターを使って実装する

まずGooey Effectを効かせたい要素を準備して、その要素に対して、SVGフィルターを適用します。
SVG フィルターの中を簡単に説明すると、
①ぼかしの効果を与える
②透過度の領域に対してコントラストを上げる
です！詳しい説明は後ほど、、

index.html

<div class="gooey-items">
  //Gooey Effectを効かせたい要素
</div>

<svg>
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
    </filter>
  </defs>
</svg>

.gooey-items {
  filter: url(#goo);
}

SVGフィルターの中身の説明

①ぼかしの効果を与える

feGaussianBlur について
- ガウス分布の式を使ったぼかし
- stdDeviation：standard deviation（標準偏差）ガウス分布の式のx,yの値
  - 標準偏差＝データのバラツキ、数値が大きいほどボカシが強くなる
  - stdDeviation="x,y"
    - stdDeviation="5,10"
    - stdDeviation="10" 値1つの場合、x, yが同値。

②アルファチャンネル（透過度の領域）に対してコントラストを上げる

feColorMatrixについて
- valuesの値
- RGBAの行列になっている。5列目はMultiplier value
デフォルト↓ （何も変わらない）
元々のRGBAに1をかけているだけ
```
　　　　　　　　　　R G B A M  ↓結果
R' | 1 0 0 0 0 | 1 
G' | 0 1 0 0 0 | 1
B' | 0 0 1 0 0 | 1
A' | 0 0 0 1 0 | 1
```
緑色にフィルターする時↓
```
     R G B A M  ↓結果
R' | 0 0 0 0 0 | 0
G' | 0 1 0 0 0 | 1
B' | 0 0 0 0 0 | 0
A' | 0 0 0 1 0 | 1
```
今回のフィルターでは以下のような感じでAlphaのコントラストだけ上げています。
（正直 -7 することの意味がきちんと分かっていないです。）
```
     R G B A   M  ↓結果
R' | 0 0 0 0 　0 | 0
G' | 0 1 0 0 　0 | 1
B' | 0 0 0 0 　0 | 0
A' | 0 0 0 18 -7 | 1
```
参考↓
https://observablehq.com/@pstuffa/svg-filters-fecolormatrix

ところでガウス分布って何？

ガウス分布＝正規分布のこと
正規分布とは・・normal distribution
参考↓
https://best-biostatistics.com/summary/normal_dist.html

ガウシアンブラーの仕組み

https://qiita.com/UWATechnology/items/9a92f3c1430d5fb5f280
https://craft-gogo.com/gauss-fillter/

処理したい画像やオブジェクトの各ピクセル（行列）に対して、畳み込みカーネルの計算をして新しい行列を作る・・みたいな感じでしょうか。

畳み込みカーネルってなんだろう。。

畳み込み（convolution）とは、画像処理でよく利用される手法で、カーネル（またはフィルター）と呼ばれる格子状の数値データと、カーネルと同サイズの部分画像（ウィンドウと呼ぶ）の数値データについて、要素ごとの積の和を計算することで、1つの数値に変換する処理のことである*1。この変換処理を、ウィンドウを少しずつずらして処理を行うことで、小さい格子状の数値データ（すなわちテンソル）に変換する。
参考：https://atmarkit.itmedia.co.jp/ait/articles/1804/23/news138.html

ちょっと難しかったです。。いつの日かわかる時が来ることでしょう。。
https://css-tricks.com/gooey-effect/
https://tympanus.net/codrops/2015/03/10/creative-gooey-effects/