effects2.htm

戻る

<!DOCTYPE HTML>
<HTML LANG="ja">

<HEAD>
<META CHARSET="Shift_JIS">
<TITLE>特殊効果ビデオ(スタイルシート版)</TITLE>
<STYLE TYPE="text/css">
<!--
@keyframes rotate {from {transform:rotate(0deg)} to {transform:rotate(360deg)}}
-->
</STYLE>
<svg id="svg" height=0 style="height:0">

<!-- ソラリゼーション -->
<filter id="solar" color-interpolation-filters="sRGB"
   filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feColorMatrix in="SourceGraphic" type="matrix"
   values="0.299 0.587 0.114 0 0
           0 0 0 0 0
           0 0 0 0 0
           0 0 0 0 1"
  ></feColorMatrix>
<feComponentTransfer>
<feFuncR id="solar-map" type="table"></feFuncR>
</feComponentTransfer>
<feColorMatrix type="matrix"
   values="1 0 0 0 0
           1 0 0 0 0
           1 0 0 0 0
           0 0 0 0 1"
  ></feColorMatrix>
</filter>

<!-- レリーフ -->
<filter id="relief" color-interpolation-filters="sRGB"
   filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feColorMatrix in="SourceGraphic" type="matrix"
   values="0.299 0.587 0.114 0 0
           0.299 0.587 0.114 0 0
           0.299 0.587 0.114 0 0
           0 0 0 0 1"
  ></feColorMatrix>
<feConvolveMatrix
   targetX="0" targetY="0" kernelMatrix="-1 0 0 0 0 0 0 0 1" divisor="1" bias="0.5" preserveAlpha="true"
   result="out"></feConvolveMatrix>
<feFlood id="relief-mask1" x="0" y="0" width="2" height="0" flood-color="gray" result="mask1"></feFlood>
<feFlood id="relief-mask2" x="0" y="0" width="0" height="2" flood-color="gray" result="mask2"></feFlood>
<feMerge>
<feMergeNode in="out"></feMergeNode>
<feMergeNode in="mask1"></feMergeNode>
<feMergeNode in="mask2"></feMergeNode>
</feMerge>
</filter>

<!-- ラプラシアン 1 -->
<filter id="laplacian-1" color-interpolation-filters="sRGB"
   filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feConvolveMatrix in="SourceGraphic"
   targetX="1" targetY="1" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1" divisor="1" preserveAlpha="true">
</feConvolveMatrix>
<feColorMatrix  type="matrix"
   values="-1 -1 -1 0 1
           -1 -1 -1 0 1
           -1 -1 -1 0 1
           0  0  0  0 1"
   result="out"></feColorMatrix>
<feFlood id="laplacian-1-mask1" x="0" y="0" width="0" height="1" flood-color="white" result="mask1"></feFlood>
<feFlood id="laplacian-1-mask2" x="0" y="0" width="1" height="0" flood-color="white" result="mask2"></feFlood>
<feFlood id="laplacian-1-mask3" x="0" y="0" width="1" height="0" flood-color="white" result="mask3"></feFlood>
<feFlood id="laplacian-1-mask4" x="0" y="0" width="0" height="1" flood-color="white" result="mask4"></feFlood>
<feMerge>
<feMergeNode in="out"></feMergeNode>
<feMergeNode in="mask1"></feMergeNode>
<feMergeNode in="mask2"></feMergeNode>
<feMergeNode in="mask3"></feMergeNode>
<feMergeNode in="mask4"></feMergeNode>
</feMerge>
</filter>

<!-- ラプラシアン 2 -->
<filter id="laplacian-2" color-interpolation-filters="sRGB"
   filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feConvolveMatrix in="SourceGraphic"
   targetX="1" targetY="1" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1" divisor="1" preserveAlpha="true">
</feConvolveMatrix>
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 1 1 1 1"></feFuncR>
<feFuncG type="discrete" tableValues="0 1 1 1 1"></feFuncG>
<feFuncB type="discrete" tableValues="0 1 1 1 1"></feFuncB>
</feComponentTransfer>
<feColorMatrix type="matrix"
   values="-1 -1 -1 0 1
           -1 -1 -1 0 1
           -1 -1 -1 0 1
           0  0  0  0 1"
   result="out"></feColorMatrix>
<feFlood id="laplacian-2-mask1" x="0" y="0" width="0" height="1" flood-color="white" result="mask1"></feFlood>
<feFlood id="laplacian-2-mask2" x="0" y="0" width="1" height="0" flood-color="white" result="mask2"></feFlood>
<feFlood id="laplacian-2-mask3" x="0" y="0" width="1" height="0" flood-color="white" result="mask3"></feFlood>
<feFlood id="laplacian-2-mask4" x="0" y="0" width="0" height="1" flood-color="white" result="mask4"></feFlood>
<feMerge>
<feMergeNode in="out"></feMergeNode>
<feMergeNode in="mask1"></feMergeNode>
<feMergeNode in="mask2"></feMergeNode>
<feMergeNode in="mask3"></feMergeNode>
<feMergeNode in="mask4"></feMergeNode>
</feMerge>
</filter>

<!-- ポスタリゼーション 1 -->
<filter id="poster_1" color-interpolation-filters="sRGB"
   filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feComponentTransfer in="SourceGraphic">
<feFuncR type="discrete" tableValues="0 0.33333 0.66667 1"></feFuncR>
<feFuncG type="discrete" tableValues="0 0.33333 0.66667 1"></feFuncG>
<feFuncB type="discrete" tableValues="0 0.33333 0.66667 1"></feFuncB>
</feComponentTransfer>
</filter>

<!-- ポスタリゼーション 2 -->
<filter id="poster_2" color-interpolation-filters="sRGB"
   filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feComponentTransfer in="SourceGraphic">
<feFuncR type="discrete" tableValues="0.18824 0.81569"></feFuncR>
<feFuncG type="discrete" tableValues="0.18824 0.81569"></feFuncG>
<feFuncB type="discrete" tableValues="0.18824 0.81569"></feFuncB>
</feComponentTransfer>
</filter>

<!-- ガラス -->
<filter id="glass" color-interpolation-filters="sRGB"
   filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<!-- ガウスぼかしだが,edgeMode を使いたいので feGaussianBlur は使わない. -->
<feConvolveMatrix in="SourceGraphic" order="7" targetX="3" targetY="3" divisor="1"
   edgeMode="duplicate" preserveAlpha="true"
   kernelMatrix="0.005084 0.009377 0.013539 0.015302 0.013539 0.009377 0.005084
                 0.009377 0.017296 0.024972 0.028224 0.024972 0.017296 0.009377
                 0.013539 0.024972 0.036054 0.040749 0.036054 0.024972 0.013539
                 0.015302 0.028224 0.040749 0.046056 0.040749 0.028224 0.015302
                 0.013539 0.024972 0.036054 0.040749 0.036054 0.024972 0.013539
                 0.009377 0.017296 0.024972 0.028224 0.024972 0.017296 0.009377
                 0.005084 0.009377 0.013539 0.015302 0.013539 0.009377 0.005084"
   result="blur"></feConvolveMatrix>
<feImage id="glass-map" href="" x="0%" y="0%" width="100%" height="100%"></feImage>
<feDisplacementMap in="blur" xChannelSelector="R" yChannelSelector="G" scale="255"></feDisplacementMap>
</filter>

<!-- スケッチ -->
<filter id="sketch" color-interpolation-filters="sRGB"
   filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feColorMatrix in="SourceGraphic" type="matrix"
   values="0.299 0.587 0.114 0 0
           0 0 0 0 0
           0 0 0 0 0
           0 0 0 0 1"
   result="tmp"></feColorMatrix>
<!-- ガウスぼかしだが,edgeMode を使いたいので feGaussianBlur は使わない. -->
<feConvolveMatrix in="tmp" order="7" targetX="3" targetY="3" divisor="1"
   edgeMode="duplicate" preserveAlpha="true"
   kernelMatrix="0.005084 0.009377 0.013539 0.015302 0.013539 0.009377 0.005084
                 0.009377 0.017296 0.024972 0.028224 0.024972 0.017296 0.009377
                 0.013539 0.024972 0.036054 0.040749 0.036054 0.024972 0.013539
                 0.015302 0.028224 0.040749 0.046056 0.040749 0.028224 0.015302
                 0.013539 0.024972 0.036054 0.040749 0.036054 0.024972 0.013539
                 0.009377 0.017296 0.024972 0.028224 0.024972 0.017296 0.009377
                 0.005084 0.009377 0.013539 0.015302 0.013539 0.009377 0.005084"
  ></feConvolveMatrix>
<feComponentTransfer>
<feFuncR type="linear" slope="-1" intercept="1"></feFuncR>
</feComponentTransfer>
<feBlend in2="tmp" mode="color-dodge"></feBlend>
<feColorMatrix type="matrix"
   values="2 0 0 0 -1
           2 0 0 0 -1
           2 0 0 0 -1
           0 0 0 0 1"
  ></feColorMatrix>
</filter>

<!-- ディザ 3 -->
<!-- feComposite の arithmetic 演算を使えば簡単にできると思うのだが,
     Firefox では現在のところ arithmetic が正しく動作しないようだ. -->
<filter id="dither-3" color-interpolation-filters="sRGB"
   filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feColorMatrix in="SourceGraphic" type="matrix"
   values="1 0 0 0 0
           0 1 0 0 0
           0 0 1 0 0
           0 0 0 0 0.5"
   result="in"></feColorMatrix>
<feImage
   href="data:image/png;base64,
         iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAFXRFWHRDcmVhdGlvbiBUaW1lAAfjCwID
         ORasyl/UAAAAB3RJTUUH4wsaBiMZyj/mdQAAAAlwSFlzAAAK8AAACvABQqw0mAAAAD1JREFUeNpj/vDh
         w////6dPnw5kMFhbW2/ZskVWVnbatGkMhw8f9vLyevjwYUZGBgMfH197e7uOjs7SpUsBF/4agKaF4tMA
         AAAASUVORK5CYIIA"
   x="0" y="0" width="4" height="4"></feImage>
<feColorMatrix type="matrix"
   values="1 0 0 0 0
           0 1 0 0 0
           0 0 1 0 0
           0 0 0 0 0.5"
  ></feColorMatrix>
<feTile x="0%" y="0%" width="100%" height="100%"></feTile>
<feComposite in="in" operator="atop"></feComposite>
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 1"></feFuncR>
<feFuncG type="discrete" tableValues="0 1"></feFuncG>
<feFuncB type="discrete" tableValues="0 1"></feFuncB>
<feFuncA type="linear" slope="0" intercept="1"></feFuncA>
</feComponentTransfer>
</filter>

<!-- 網点 -->
<filter id="halftone" color-interpolation-filters="sRGB"
   filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feConvolveMatrix in="SourceGraphic"
   targetX="1" targetY="1" kernelMatrix="1 1 1 1 1 1 1 1 1" divisor="9" preserveAlpha="true" result="mean">
</feConvolveMatrix>

<feFlood x="0" y="0" width="3" height="3" flood-color="rgba(0,0,0,0)" result="ext1"></feFlood>
<feFlood x="1" y="1" width="1" height="1" flood-color="rgba(255,255,255,1)" result="ext2"></feFlood>
<feMerge>
<feMergeNode in="ext1"></feMergeNode>
<feMergeNode in="ext2"></feMergeNode>
</feMerge>
<feTile id="halftone-ext" x="0" y="0" width="0" height="0" result="ext"></feTile>

<feComponentTransfer in="mean">
<feFuncR type="discrete"
   tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0.00537 0.11495 0.52876 1"
  ></feFuncR>
<feFuncG type="discrete"
   tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0.00537 0.11495 0.52876 1"
  ></feFuncG>
<feFuncB type="discrete"
   tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0.00537 0.11495 0.52876 1"
  ></feFuncB>
</feComponentTransfer>
<feComposite in2="ext" operator="in" result="b1"></feComposite>

<feComponentTransfer in="mean">
<feFuncR type="discrete"
   tableValues="0.02826 0.08015 0.13402 0.19010 0.24869 0.31018 0.37503 0.44388
                0.51756 0.59728 0.68484 0.78319 0.89523 0.98564 1 1"
  ></feFuncR>
<feFuncG type="discrete"
   tableValues="0.02826 0.08015 0.13402 0.19010 0.24869 0.31018 0.37503 0.44388
                0.51756 0.59728 0.68484 0.78319 0.89523 0.98564 1 1"
  ></feFuncG>
<feFuncB type="discrete"
   tableValues="0.02826 0.08015 0.13402 0.19010 0.24869 0.31018 0.37503 0.44388
                0.51756 0.59728 0.68484 0.78319 0.89523 0.98564 1 1"
  ></feFuncB>
</feComponentTransfer>
<feComposite in2="ext" operator="in" result="b2"></feComposite>

<feComponentTransfer in="mean">
<feFuncR type="discrete"
   tableValues="0.45459 0.52051 0.58446 0.64619 0.70540 0.76172 0.81468 0.86364
                0.90777 0.94586 0.97611 0.99557 1 1 1 1"
  ></feFuncR>
<feFuncG type="discrete"
   tableValues="0.45459 0.52051 0.58446 0.64619 0.70540 0.76172 0.81468 0.86364
                0.90777 0.94586 0.97611 0.99557 1 1 1 1"
  ></feFuncG>
<feFuncB type="discrete"
   tableValues="0.45459 0.52051 0.58446 0.64619 0.70540 0.76172 0.81468 0.86364
                0.90777 0.94586 0.97611 0.99557 1 1 1 1"
  ></feFuncB>
</feComponentTransfer>
<feComposite in2="ext" operator="in" result="b3"></feComposite>

<feColorMatrix in="b1" type="matrix"
   values="1 0 0 0 0
           0 0 0 0 0
           0 0 0 0 0
           0 0 0 1 0"
   result="r-b1"></feColorMatrix>
<feColorMatrix in="b1" type="matrix"
   values="0 0 0 0 0
           0 1 0 0 0
           0 0 0 0 0
           0 0 0 1 0"
   result="g-b1"></feColorMatrix>
<feColorMatrix in="b1" type="matrix"
   values="0 0 0 0 0
           0 0 0 0 0
           0 0 1 0 0
           0 0 0 1 0"
   result="b-b1"></feColorMatrix>

<feColorMatrix in="b2" type="matrix"
   values="1 0 0 0 0
           0 0 0 0 0
           0 0 0 0 0
           0 0 0 1 0"
   result="r-b2"></feColorMatrix>
<feColorMatrix in="b2" type="matrix"
   values="0 0 0 0 0
           0 1 0 0 0
           0 0 0 0 0
           0 0 0 1 0"
   result="g-b2"></feColorMatrix>
<feColorMatrix in="b2" type="matrix"
   values="0 0 0 0 0
           0 0 0 0 0
           0 0 1 0 0
           0 0 0 1 0"
   result="b-b2"></feColorMatrix>

<feColorMatrix in="b3" type="matrix"
   values="1 0 0 0 0
           0 0 0 0 0
           0 0 0 0 0
           0 0 0 1 0"
   result="r-b3"></feColorMatrix>
<feColorMatrix in="b3" type="matrix"
   values="0 0 0 0 0
           0 1 0 0 0
           0 0 0 0 0
           0 0 0 1 0"
   result="g-b3"></feColorMatrix>
<feColorMatrix in="b3" type="matrix"
   values="0 0 0 0 0
           0 0 0 0 0
           0 0 1 0 0
           0 0 0 1 0"
   result="b-b3"></feColorMatrix>

<feOffset x="0%" y="0%" width="100%" height="100%" in="r-b2" dx="0"  dy="-1" result="r-b2-1"></feOffset>
<feOffset x="0%" y="0%" width="100%" height="100%" in="r-b2" dx="-1" dy="0"  result="r-b2-2"></feOffset>
<feOffset x="0%" y="0%" width="100%" height="100%" in="r-b2" dx="1"  dy="0"  result="r-b2-3"></feOffset>
<feOffset x="0%" y="0%" width="100%" height="100%" in="r-b2" dx="0"  dy="1"  result="r-b2-4"></feOffset>
<feOffset x="0%" y="0%" width="100%" height="100%" in="r-b3" dx="-1" dy="-1" result="r-b3-1"></feOffset>
<feOffset x="0%" y="0%" width="100%" height="100%" in="r-b3" dx="1"  dy="-1" result="r-b3-2"></feOffset>
<feOffset x="0%" y="0%" width="100%" height="100%" in="r-b3" dx="-1" dy="1"  result="r-b3-3"></feOffset>
<feOffset x="0%" y="0%" width="100%" height="100%" in="r-b3" dx="1"  dy="1"  result="r-b3-4"></feOffset>
<feFlood id="halftone-xrem1" x="0" y="0" width="0" height="0" flood-color="white" result="xrem1"></feFlood>
<feFlood id="halftone-xrem2" x="0" y="0" width="1" height="0" flood-color="magenta" result="xrem2"></feFlood>
<feFlood id="halftone-yrem1" x="0" y="0" width="0" height="0" flood-color="white" result="yrem1"></feFlood>
<feFlood id="halftone-yrem2" x="0" y="0" width="0" height="1" flood-color="yellow" result="yrem2"></feFlood>
<feMerge result="r-rem">
<feMergeNode in="r-b1"></feMergeNode>
<feMergeNode in="r-b2-1"></feMergeNode>
<feMergeNode in="r-b2-2"></feMergeNode>
<feMergeNode in="r-b2-3"></feMergeNode>
<feMergeNode in="r-b2-4"></feMergeNode>
<feMergeNode in="r-b3-1"></feMergeNode>
<feMergeNode in="r-b3-2"></feMergeNode>
<feMergeNode in="r-b3-3"></feMergeNode>
<feMergeNode in="r-b3-4"></feMergeNode>
<feMergeNode in="xrem1"></feMergeNode>
<feMergeNode in="xrem2"></feMergeNode>
<feMergeNode in="yrem1"></feMergeNode>
<feMergeNode in="yrem2"></feMergeNode>
</feMerge>

<feFlood id="halftone-gfil" x="0" y="0" width="1" height="0" flood-color="lime" result="gfil"></feFlood>
<feOffset x="0%" y="0%" width="100%" height="100%" in="g-b1" dx="1" dy="0"  result="g-b1-0"></feOffset>
<feOffset x="0%" y="0%" width="100%" height="100%" in="g-b2" dx="1" dy="-1" result="g-b2-1"></feOffset>
<feOffset x="0%" y="0%" width="100%" height="100%" in="g-b2" dx="0" dy="0"  result="g-b2-2"></feOffset>
<feOffset x="0%" y="0%" width="100%" height="100%" in="g-b2" dx="2" dy="0"  result="g-b2-3"></feOffset>
<feOffset x="0%" y="0%" width="100%" height="100%" in="g-b2" dx="1" dy="1"  result="g-b2-4"></feOffset>
<feOffset x="0%" y="0%" width="100%" height="100%" in="g-b3" dx="0" dy="-1" result="g-b3-1"></feOffset>
<feOffset x="0%" y="0%" width="100%" height="100%" in="g-b3" dx="2" dy="-1" result="g-b3-2"></feOffset>
<feOffset x="0%" y="0%" width="100%" height="100%" in="g-b3" dx="0" dy="1"  result="g-b3-3"></feOffset>
<feOffset x="0%" y="0%" width="100%" height="100%" in="g-b3" dx="2" dy="1"  result="g-b3-4"></feOffset>
<feMerge result="g">
<feMergeNode in="gfil"></feMergeNode>
<feMergeNode in="g-b1-0"></feMergeNode>
<feMergeNode in="g-b2-1"></feMergeNode>
<feMergeNode in="g-b2-2"></feMergeNode>
<feMergeNode in="g-b2-3"></feMergeNode>
<feMergeNode in="g-b2-4"></feMergeNode>
<feMergeNode in="g-b3-1"></feMergeNode>
<feMergeNode in="g-b3-2"></feMergeNode>
<feMergeNode in="g-b3-3"></feMergeNode>
<feMergeNode in="g-b3-4"></feMergeNode>
</feMerge>

<feFlood id="halftone-bfil" x="0" y="0" width="0" height="1" flood-color="blue" result="bfil"></feFlood>
<feOffset x="0%" y="0%" width="100%" height="100%" in="b-b1" dx="0"  dy="1" result="b-b1-0"></feOffset>
<feOffset x="0%" y="0%" width="100%" height="100%" in="b-b2" dx="0"  dy="0" result="b-b2-1"></feOffset>
<feOffset x="0%" y="0%" width="100%" height="100%" in="b-b2" dx="-1" dy="1" result="b-b2-2"></feOffset>
<feOffset x="0%" y="0%" width="100%" height="100%" in="b-b2" dx="1"  dy="1" result="b-b2-3"></feOffset>
<feOffset x="0%" y="0%" width="100%" height="100%" in="b-b2" dx="0"  dy="2" result="b-b2-4"></feOffset>
<feOffset x="0%" y="0%" width="100%" height="100%" in="b-b3" dx="-1" dy="0" result="b-b3-1"></feOffset>
<feOffset x="0%" y="0%" width="100%" height="100%" in="b-b3" dx="1"  dy="0" result="b-b3-2"></feOffset>
<feOffset x="0%" y="0%" width="100%" height="100%" in="b-b3" dx="-1" dy="2" result="b-b3-3"></feOffset>
<feOffset x="0%" y="0%" width="100%" height="100%" in="b-b3" dx="1"  dy="2" result="b-b3-4"></feOffset>
<feMerge result="b">
<feMergeNode in="bfil"></feMergeNode>
<feMergeNode in="b-b1-0"></feMergeNode>
<feMergeNode in="b-b2-1"></feMergeNode>
<feMergeNode in="b-b2-2"></feMergeNode>
<feMergeNode in="b-b2-3"></feMergeNode>
<feMergeNode in="b-b2-4"></feMergeNode>
<feMergeNode in="b-b3-1"></feMergeNode>
<feMergeNode in="b-b3-2"></feMergeNode>
<feMergeNode in="b-b3-3"></feMergeNode>
<feMergeNode in="b-b3-4"></feMergeNode>
</feMerge>

<feBlend in="r-rem" in2="g" mode="lighten"></feBlend>
<feBlend in2="b" mode="lighten"></feBlend>
</filter>

<!-- 波紋 -->
<filter id="ripple" color-interpolation-filters="sRGB"
   filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feImage id="ripple-map" href="" x="0%" y="0%" width="100%" height="100%"></feImage>
<feDisplacementMap in="SourceGraphic" xChannelSelector="R" yChannelSelector="G" scale="255">
</feDisplacementMap>
</filter>

</svg>
</HEAD>

<BODY onLoad="init()" STYLE="background-color:#CCFFFF">

<DIV STYLE="text-align:center">
<B>特殊効果ビデオ(スタイルシート版)</B>
<BR><BR>

<FORM>
<SELECT ID="sel" DISABLED onChange="sel_chg(this.selectedIndex)">
<OPTION SELECTED>ソラリゼーション
<OPTION>レリーフ
<OPTION>ラプラシアン 1
<OPTION>ラプラシアン 2
<OPTION>ポスタリゼーション 1
<OPTION>ポスタリゼーション 2
<OPTION>ガラス
<OPTION>スケッチ
<OPTION>ディザ 3
<OPTION>網点
<OPTION>波紋
<OPTION>回転
</SELECT>
</FORM>
<BR>

<DIV ID="back" STYLE="display:inline-block; overflow:hidden">
<VIDEO ID="video"></VIDEO>
</DIV>
</DIV>

<SCRIPT TYPE="text/javascript">
<!--

function init() {
  if(navigator.mozGetUserMedia == undefined)
    navigator.getUserMedia({video:true, audio:false}, success, error);
  else
    navigator.mozGetUserMedia({video:true, audio:false}, success, error);
}

function success(stream) {
  elem_video.autoplay = true;
  elem_video.addEventListener("canplay", wait, false);
  if(elem_video.mozSrcObject === undefined) {
    if(elem_video.srcObject === undefined)
      elem_video.src = (window.URL == undefined || window.URL.createObjectURL == undefined)
                         ? stream : window.URL.createObjectURL(stream);
    else
      elem_video.srcObject = stream;
  }
  else {
    elem_video.mozSrcObject = stream;
  }
  elem_video.play();
}

function error(err) {
  alert("カメラが使用できません");
}

function wait() {
  if(elem_video.videoWidth) {
    video_width_h = (video_width = elem_video.videoWidth) >> 1;
    video_height_h = (video_height = elem_video.videoHeight) >> 1;

    // レリーフ
    with(document.getElementById("relief-mask1")) {
      x.baseVal.value = video_width - 2;
      height.baseVal.value = video_height;
    }
    with(document.getElementById("relief-mask2")) {
      y.baseVal.value = video_height - 2;
      width.baseVal.value = video_width;
    }

    // ラプラシアン 1
    document.getElementById("laplacian-1-mask1").width.baseVal.value = video_width;
    document.getElementById("laplacian-1-mask2").height.baseVal.value = video_height;
    with(document.getElementById("laplacian-1-mask3")) {
      x.baseVal.value = video_width - 1;
      height.baseVal.value = video_height;
    }
    with(document.getElementById("laplacian-1-mask4")) {
      y.baseVal.value = video_height - 1;
      width.baseVal.value = video_width;
    }

    // ラプラシアン 2
    document.getElementById("laplacian-2-mask1").width.baseVal.value = video_width;
    document.getElementById("laplacian-2-mask2").height.baseVal.value = video_height;
    with(document.getElementById("laplacian-2-mask3")) {
      x.baseVal.value = video_width - 1;
      height.baseVal.value = video_height;
    }
    with(document.getElementById("laplacian-2-mask4")) {
      y.baseVal.value = video_height - 1;
      width.baseVal.value = video_width;
    }

    // 網点
    var x_rem = video_width % 3;
    var y_rem = video_height % 3;
    with(document.getElementById("halftone-ext")) {
      width.baseVal.value = video_width - x_rem;
      height.baseVal.value = video_height - y_rem;
    }
    document.getElementById("halftone-gfil").height.baseVal.value = video_height - y_rem;
    document.getElementById("halftone-bfil").width.baseVal.value = video_width - x_rem;
    if(x_rem) {
      with(document.getElementById("halftone-xrem1")) {
        x.baseVal.value = video_width - x_rem;
        width.baseVal.value = x_rem;
        height.baseVal.value = video_height;
      }
      with(document.getElementById("halftone-xrem2")) {
        x.baseVal.value = video_width - x_rem;
        height.baseVal.value = video_height - y_rem;
      }
    }
    if(y_rem) {
      with(document.getElementById("halftone-yrem1")) {
        y.baseVal.value = video_height - y_rem;
        width.baseVal.value = video_width;
        height.baseVal.value = y_rem;
      }
      with(document.getElementById("halftone-yrem2")) {
        y.baseVal.value = video_height - y_rem;
        width.baseVal.value = video_width - x_rem;
      }
    }

    // 回転
    // 円の半径をセット
    style_tbl[11] = rotate_style.replace("@@R", String(((video_width < video_height)
                                                          ? video_width_h : video_height_h) - 10));

    // ガラス,波紋 用
    var video_size = video_width * video_height;
    var bits_size = video_size << 1;
    var i;

    // マップ画像 BMP ヘッダの項目をセット
    bmp_hdr = new Uint8Array(bmp_header_data).buffer;
    with(new DataView(bmp_hdr)) {
      setUint32(I_BFH_SIZE, 66 + bits_size, true);
      setInt32(I_BIH_WIDTH, video_width, true);
      setInt32(I_BIH_HEIGHT, - video_height, true);
      setUint32(I_BIH_SIZEIMAGE, bits_size, true);
    }

    var glass_bits_array = new Uint8Array(bits_size);
    var glass_bits = glass_bits_array.buffer;

    ripple_bits_array = new Uint8Array(bits_size);
    ripple_bits = ripple_bits_array.buffer;
    i = video_height_h * video_width + video_width_h;
    ripple_bits_array[i] = ripple_bits_array[i + 1] = 128;

    // feDisplacementMap の変位量指定の原点 0.5 は,8 ビット カラーの値では 127.5 に対応するようだ.
    // 整数で表せないので 127 か 128 のどちらかにすることになるが,どちらにしたとしても,どこかの
    // ピクセルが画像の範囲からはみ出してしまう.
    // そのため,画像の左半分/上半分と右半分/下半分のピクセルで原点を変えている.
    ripple_pha = new Uint8Array(video_size);
    ripple_att = new Float32Array(video_size);
    i = 0;
    for(var y = 0; y < video_height; y++) {
      var dist_y = y - video_height_h;
      dist_y *= dist_y;

      for(var x = 0; x < video_width; x++) {
        var rnd_x = x + (Math.floor(Math.random() * 41) - 20);
        if(rnd_x < 0)
          rnd_x = 0;
        else if(rnd_x >= video_width)
          rnd_x = video_width - 1;
        var rnd_y = y + (Math.floor(Math.random() * 41) - 20);
        if(rnd_y < 0)
          rnd_y = 0;
        else if(rnd_y >= video_height)
          rnd_y = video_height - 1;
        var i2 = i << 1;
        glass_bits_array[i2 + 1] = ((rnd_x < video_width_h)  ? 128 : 127) + (rnd_x - x);  // R
        glass_bits_array[i2]     = ((rnd_y < video_height_h) ? 128 : 127) + (rnd_y - y);  // G

        var dist = x - video_width_h;
        dist = Math.sqrt(dist * dist + dist_y);
        ripple_pha[i] = Math.round(dist * 8) & 0xff;
        ripple_att[i] = (dist < 32) ? dist : dist * Math.sqrt(dist / 32);

        i++;
      }
    }
    document.getElementById("glass-map").href.baseVal
      = URL.createObjectURL(new Blob([bmp_hdr, glass_bits], {type:"image/bmp"}));

    document.getElementById("sel").disabled = false;

    return;
  }

  setTimeout(wait, 50);
}

function sel_chg(index) {
  elem_video.style.cssText = style_tbl[index];

  // 回転のとき,背景にもビデオの画像を表示する.
  // (ビデオの画面をクリップするので)
  elem_back.style.background = (index == 11) ? "-moz-element(#video) no-repeat" : "";

  if(index == 10) {  // 波紋
    ripple_cont = true;
    ripple();
  }
  else {
    ripple_cont = false;
  }
}

// 波紋
// feDisplacementMap の変位量指定の原点 0.5 は,8 ビット カラーの値では 127.5 に対応するようだ.
// 整数で表せないので 127 か 128 のどちらかにすることになるが,どちらにしたとしても,どこかの
// ピクセルが画像の範囲からはみ出してしまう.
// そのため,画像の左半分/上半分と右半分/下半分のピクセルで原点を変えている.
function ripple() {
  var x_end = (video_width & 0x1) ? video_width_h + 1 : video_width_h;
  var y_end = (video_height & 0x1) ? video_height_h + 1 : video_height_h;
  var i = 0;
  for(var y = - video_height_h; y < y_end; y++) {
    for(var x = - video_width_h; x < x_end; x++) {
      var disp = ripple_sin[(ripple_pha[i] + ripple_time) & 0xff] / ripple_att[i];
      if(x | y) {
        var x2 = x + Math.round(x * disp);
        var y2 = y + Math.round(y * disp);
        var i2 = i << 1;
        if(x >= 0) {
          if     (x2 < 0)
            x2 = 0;
          else if(x2 >= x_end)
            x2 = x_end - 1;
          x2--;  // 原点を 127 にずらすため
        }
        else {
          if     (x2 >= 0)
            x2 = -1;
          else if(x2 < - video_width_h)
            x2 = - video_width_h;
        }
        if(y >= 0) {
          if     (y2 < 0)
            y2 = 0;
          else if(y2 >= y_end)
            y2 = y_end - 1;
          y2--;  // 原点を 127 にずらすため
        }
        else {
          if     (y2 >= 0)
            y2 = -1;
          else if(y2 < - video_height_h)
            y2 = - video_height_h;
        }
        var i2 = i << 1;
        ripple_bits_array[i2 + 1] = 128 + (x2 - x);  // R
        ripple_bits_array[i2]     = 128 + (y2 - y);  // G
      }

      i++;
    }
  }

  if(ripple_href.baseVal != "")
    URL.revokeObjectURL(ripple_href.baseVal);
  ripple_href.baseVal = URL.createObjectURL(new Blob([bmp_hdr, ripple_bits], {type:"image/bmp"}));

  ripple_time = (ripple_time - 40) & 0xff;
  if(ripple_cont)
    setTimeout(ripple, 200);
}

function cre_svgnum(val) {
  var num = elem_svg.createSVGNumber();
  num.value = val;
  return num;
}

  style_tbl = [
    "filter:url(#solar)",
    "filter:url(#relief)",
    "filter:url(#laplacian-1)",
    "filter:url(#laplacian-2)",
    "filter:url(#poster_1)",
    "filter:url(#poster_2)",
    "filter:url(#glass)",
    "filter:url(#sketch)",
    "filter:url(#dither-3)",
    "filter:url(#halftone)",
    "filter:url(#ripple)",
    undefined
  ];
  rotate_style = "clip-path:circle(@@Rpx); animation:rotate 5s linear infinite";

  // ガラス,波紋 用 BMP ヘッダ
  bmp_header_data = [
    // BITMAPFILEHEADER
    0x42, 0x4d,              // BM
    0x00, 0x00, 0x00, 0x00,  // Size
    0x00, 0x00, 0x00, 0x00,
    0x42, 0x00, 0x00, 0x00,  // OffBits  66
    // BITMAPINFOHEADER
    0x28, 0x00, 0x00, 0x00,  // Size  40
    0x00, 0x00, 0x00, 0x00,  // Width
    0x00, 0x00, 0x00, 0x00,  // Height
    0x01, 0x00,              // Planes  1
    0x10, 0x00,              // BitCount  16
    0x03, 0x00, 0x00, 0x00,  // Compression  BI_BITFIELDS
    0x00, 0x00, 0x00, 0x00,  // SizeImage
    0xc4, 0x0e, 0x00, 0x00,  // XPelsPerMeter  3780
    0xc4, 0x0e, 0x00, 0x00,  // YPelsPerMeter  3780
    0x00, 0x00, 0x00, 0x00,  // ClrUsed
    0x00, 0x00, 0x00, 0x00,  // ClrImportant
    // カラー マスク
    0x00, 0xff, 0x00, 0x00,  // R  8 ビット
    0xff, 0x00, 0x00, 0x00,  // G  8 ビット
    0x00, 0x00, 0x00, 0x00   // B  0 ビット
  ];
  I_BFH_SIZE = 2;
  I_BIH_WIDTH = 18;
  I_BIH_HEIGHT = 22;
  I_BIH_SIZEIMAGE = 34;

  elem_svg = document.getElementById("svg");
  elem_video = document.getElementById("video");
  elem_back = document.getElementById("back");
  ripple_href = document.getElementById("ripple-map").href;

  elem_video.style.cssText = style_tbl[0];

  // ソラリゼーション用変換マップ
  with(document.getElementById("solar-map").tableValues.baseVal) {
    for(i = 0; i < 50; i++)
      appendItem(cre_svgnum(i * 0.5 / 50));
    for(i = 0; i < 200; i++)
      appendItem(cre_svgnum(0.5 + Math.sin(i * Math.PI / 100) / Math.PI));
    for(i = 0; i < 50; i++)
      appendItem(cre_svgnum(0.5 + i * 0.5 / 50));
  }

  // 波紋用 sin テーブル
  ripple_sin = new Float32Array(256);
  for(i = 0; i < 256; i++)
    ripple_sin[i] = Math.sin(i * Math.PI / 128) * 40;
  ripple_time = 0;
  ripple_cont = false;

  // ページを再ロードしたときのため
  document.forms[0].reset();
  document.getElementById("sel").disabled = true;

//-->
</SCRIPT>

</BODY>

</HTML>