<!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>
</HEAD>
<BODY onLoad="init()" STYLE="background-color:#CCFFFF">
<DIV STYLE="height:0">
<svg id="svg">
<!-- ソラリゼーション -->
<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
AAAASUVORK5CYII="
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>
</DIV>
<DIV STYLE="text-align:center">
<BR>
<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;
}
// 網点
let x_rem = video_width % 3;
let 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));
// ガラス，波紋 用
let video_size = video_width * video_height;
let bits_size = video_size << 1;
let 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);
}
let glass_bits_array = new Uint8Array(bits_size);
let 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(let y = 0; y < video_height; y++) {
let dist_y = (y - video_height_h) ** 2;
for(let x = 0; x < video_width; x++) {
let 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;
let 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;
let 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
let dist = Math.sqrt((x - video_width_h) ** 2 + 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() {
let x_end = (video_width & 0x1) ? video_width_h + 1 : video_width_h;
let y_end = (video_height & 0x1) ? video_height_h + 1 : video_height_h;
let i = 0;
for(let y = - video_height_h; y < y_end; y++) {
for(let x = - video_width_h; x < x_end; x++) {
let disp = ripple_sin[(ripple_pha[i] + ripple_time) & 0xff] / ripple_att[i];
if(x | y) {
let x2 = x + Math.round(x * disp);
let y2 = y + Math.round(y * disp);
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;
}
let 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) {
let num = elem_svg.createSVGNumber();
num.value = val;
return num;
}
const 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
];
const rotate_style = "clip-path:circle(@@Rpx); animation:rotate 5s linear infinite";
// ガラス，波紋 用 BMP ヘッダ
const 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 ビット
];
const I_BFH_SIZE = 2;
const I_BIH_WIDTH = 18;
const I_BIH_HEIGHT = 22;
const I_BIH_SIZEIMAGE = 34;
let bmp_hdr;
const elem_svg = document.getElementById("svg");
const elem_video = document.getElementById("video");
const elem_back = document.getElementById("back");
const ripple_href = document.getElementById("ripple-map").href;
elem_video.style.cssText = style_tbl[0];
// ソラリゼーション用変換マップ
with(document.getElementById("solar-map").tableValues.baseVal) {
let i;
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 テーブル
const ripple_sin = new Float32Array(256);
for(let i = 0; i < 256; i++)
ripple_sin[i] = Math.sin(i * Math.PI / 128) * 40;
let ripple_time = 0;
let ripple_cont = false;
let ripple_bits_array;
let ripple_bits;
let ripple_pha;
let ripple_att;
let video_width;
let video_height;
let video_width_h;
let video_height_h;
// ページを再ロードしたときのため
document.forms[0].reset();
document.getElementById("sel").disabled = true;
//-->
</SCRIPT>
</BODY>
</HTML>
|
