![]() |
<!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; } // 網点 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> |