以前用過不少秀圖程式，可以做很多濾鏡特效，當時並不曉得那些特效是怎麼算出來的，在 SVG 的濾鏡中有一個有趣的濾鏡 feConvolveMatrix 利用一個陣列，就可以做出很多種特效

參考資料：
[這裡](https://drafts.fxtf.org/filter-effects/#feConvolveMatrixElement) 
, [這裡](https://en.wikipedia.org/wiki/Kernel_(image_processing))
  
# 原理

<p>
`"color"_(x,y)=(陣列計算)/"divisor"+"bias"*"alpha"_(x,y)`
</p>

<p>  
以 3x3 為例，原來的值是 a,b,c,...,g,h,i 當使用陣列 `[[1,2,3],[4,5,6],[7,8,9]]` 去計算時，a 的值會等於
</p>

<font color="#f00">*注意，下圖 1~9 的排列和一開始的陣列相反</font>

而 b 的值會變成

# feConvolveMatrix 參數說明

```
order             設定陣列大小，建議用最小值 3 (預設)，不然很吃 cpu 資源
kernelMatrix      陣列設定
divisor           預設是陣列所有值加起來，也可以從這裡設定
bias              預設為 0
edgeMode          duplicate(預設),wrap,none
preserveAlpha     false(預設),true
targetX           目標像素的中心位置
targetY
kernelUnitLength  偏移

```

先來一個簡單範例

```
$mmcode(r1)
```

最後寫了一個自己設定矩陣參數的程式，做為這一篇的結束。

<div id="a122005_s5">
<style>
#a122005_set input
{
  width:3.5em;
  font-size:1em;
}
#a122005_s5 button
{
  font-size:1em;
}
#a122005_bb button
{
  width:3em;
}
#a122005_bb div
{
  display:inline-block;
  width:6em;
}
</style>
<svg width="300" height="230">
<defs>
<filter id="a122005_f5" >
  <feConvolveMatrix id="a122005_m5" in="SourceGraphic" color-interpolation-filters="sRGB" preserveAlpha="true" order="5" kernelMatrix=
   "0 0 0 0 0
    0 0 0 0 0 
    0 0 1 0 0 
    0 0 0 0 0 
    0 0 0 0 0"/>
</filter>
</defs>
<image href="https://yiharng.github.io/cat280.jpg" x=0 y=0 width=280 height=210 filter="url(#a122005_f5)"/>
</svg>
<br>
<div id="a122005_set" style="width:30em;">
<input type="text"/>
</div>
<br>
<div>
<button id="a122005_ini">init</button>
<button id="a122005_ini_blur">blur</button>
<button id="a122005_ini_sharpen">sharpen</button>
<button id="a122005_ini_edge">edge</button>
<button id="a122005_ini_emboss">emboss</button>
</div><br>
<div>
<div id="a122005_bb">
<div>c</div>
<button id="a122005_cadd">+</button>
<button id="a122005_csub">-</button><br>
<div>m</div>
<button id="a122005_madd">+</button>
<button id="a122005_msub">-</button><br>
<div>n</div>
<button id="a122005_nadd">+</button>
<button id="a122005_nsub">-</button><br>
</div>
</div>
</div>
  
<script>
$(()=>
{
  let ii='<input type="text"/>';
  let i;
  let hh="";
  let init    =[0   ,0   ,0   ,0   ,0,
                0   ,0   ,0   ,0   ,0,
                0   ,0   ,1   ,0   ,0,
                0   ,0   ,0   ,0   ,0,
                0   ,0   ,0   ,0   ,0   ];
  let blur    =[0   ,0   ,0   ,0   ,0,
                0   ,1   ,1   ,1   ,0,
                0   ,1   ,1   ,1   ,0,
                0   ,1   ,1   ,1   ,0,
                0   ,0   ,0   ,0   ,0   ];
  let sharpen =[0   ,0   ,0   ,0   ,0,
                0   ,0   ,-1  ,0   ,0,
                0   ,-1  ,5   ,-1  ,0,
                0   ,0   ,-1  ,0   ,0,
                0   ,0   ,0   ,0   ,0   ];
  let edge    =[0   ,0   ,0   ,0   ,0,
                0   ,-1  ,-1  ,-1  ,0,
                0   ,-1  ,8   ,-1  ,0,
                0   ,-1  ,-1  ,-1  ,0,
                0   ,0   ,0   ,0   ,0   ];
  let emboss  =[0   ,0   ,0   ,0   ,0,
                0   ,-2  ,-1  ,0   ,0,
                0   ,-1  ,1   ,1   ,0,
                0   ,0   ,1   ,2   ,0,
                0   ,0   ,0   ,0   ,0   ];
  for (i=0;i<25;i++)
  {
    hh+=ii;
    if((i+1)%5==0) hh+="<br>";
  }
  function putv(m)
  {
    let s=$("#a122005_set input");
    for (i=0;i<s.length;i++)
    {
      s[i].value=m[i].toFixed(0);
    }
  } 
  function getv()
  {
    let s=$("#a122005_set input");
    let r=[];
    for (i=0;i<s.length;i++)
    {
      let j=parseFloat(s[i].value);
      j=((j)?(j):(0));
      r.push(j);
    }
    return r;
  }
  function run()
  {
    let s=$("#a122005_set input");
    hh="";
    for (i=0;i<s.length;i++)
    {
      let j=parseFloat(s[i].value);
      hh+=((j)?(j):(0))+" ";
    }
    $("#a122005_m5").attr("kernelMatrix",hh);
  }
  $("#a122005_set").html(hh);
  putv(init);
  run();
  $("#a122005_set input").on("input",run);
  $("#a122005_ini").on("click",function()
  {
    putv(init);
    run();
  })
  $("#a122005_ini_blur").on("click",function()
  {
    putv(blur);
    run();
  })
  $("#a122005_ini_sharpen").on("click",function()
  {
    putv(sharpen);
    run();
  })
  $("#a122005_ini_edge").on("click",function()
  {
    putv(edge);
    run();
  })
  $("#a122005_ini_emboss").on("click",function()
  {
    putv(emboss);
    run();
  })
  $("#a122005_cadd").on("click",function()
  {
    let m=getv();
    m[12]+=1;
    putv(m);
    run();
  })
  $("#a122005_csub").on("click",function()
  {
    let m=getv();
    m[12]-=1;
    putv(m);
    run();
  })
  $("#a122005_madd").on("click",function()
  {
    let m=getv();
    let n=[7,11,13,17];
    for (i in n)
    {
      m[n[i]]+=1;
    }
    putv(m);
    run();
  })
  $("#a122005_msub").on("click",function()
  {
    let m=getv();
    let n=[7,11,13,17];
    for (i in n)
    {
      m[n[i]]-=1;
    }
    putv(m);
    run();
  })
  $("#a122005_nadd").on("click",function()
  {
    let m=getv();
    let n=[6,8,16,18];
    for (i in n)
    {
      m[n[i]]+=1;
    }
    putv(m);
    run();
  })
  $("#a122005_nsub").on("click",function()
  {
    let m=getv();
    let n=[6,8,16,18];
    for (i in n)
    {
      m[n[i]]-=1;
    }
    putv(m);
    run();
  })
  MathJax.typeset();
});
</script>

參考資料：這裡 , 這裡

原理

$陣列計算$

以 3x3 為例，原來的值是 a,b,c,...,g,h,i 當使用陣列去計算時，a 的值會等於

*注意，下圖 1~9 的排列和一開始的陣列相反

9	8	7
6	5	4
3	2	1

a	b	c
d	e	f
g	h	i

而 b 的值會變成

9	8	7
6	5	4
3	2	1

a	b	c
d	e	f
g	h	i

feConvolveMatrix 參數說明

order             設定陣列大小，建議用最小值 3 (預設)，不然很吃 cpu 資源
kernelMatrix      陣列設定
divisor           預設是陣列所有值加起來，也可以從這裡設定
bias              預設為 0
edgeMode          duplicate(預設),wrap,none
preserveAlpha     false(預設),true
targetX           目標像素的中心位置
targetY
kernelUnitLength  偏移

先來一個簡單範例


<svg width="300" height="500" style="background-color:#fff" color-interpolation-filters="sRGB">
<defs>
<filter id="a122001_f1" width="100%" height="100%" x="0" y="0">
  <feConvolveMatrix in="SourceGraphic" order="3" edgeMode="none" kernelMatrix="-2 -1   0
     -1  1   1
     0   1   2" preserveAlpha="true"></feConvolveMatrix>
</filter>
</defs>
<text x="10" y="20">原圖</text>
<image href="https://yiharng.github.io/cat280.jpg" x="10" y="30" width="280" height="210"></image>
<text x="10" y="270">濾鏡</text>
<image href="https://yiharng.github.io/cat280.jpg" x="10" y="280" width="280" height="210" style="filter:url(#a122001_f1);"></image>
</svg>

最後寫了一個自己設定矩陣參數的程式，做為這一篇的結束。

TP Notes

Translate

2020年12月20日星期日

有趣的 SVG filter - feConvolveMatrix

原理

feConvolveMatrix 參數說明

沒有留言:

張貼留言

Translate

2020年12月20日 星期日

有趣的 SVG filter - feConvolveMatrix

原理

feConvolveMatrix 參數說明

沒有留言:

張貼留言

2020年12月20日星期日