<!DOCTYPE HTML>
<HTML LANG="ja">
<HEAD>
<META CHARSET="Shift_JIS">
<TITLE>万華鏡（スタイルシート版）</TITLE>
</HEAD>
<BODY onLoad="init()" STYLE="background-color:#CCFFFF">
<DIV STYLE="text-align:center">
<BR>
<B>万華鏡（スタイルシート版）</B>
<BR><BR>
<FORM>
<LABEL><INPUT TYPE=CHECKBOX ID="move" DISABLED onChange="move_change()">使用する画像の範囲を変化させる</LABEL>
</FORM>
<BR>
<DIV STYLE="position:relative; width:480px; height:480px; margin-left:auto; margin-right:auto; overflow:clip; clip-path:circle(240px)">
<DIV STYLE="position:absolute; left: 76px; top:-20px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:158px; top:-20px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:240px; top:-20px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:322px; top:-20px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:-47px; top: 51px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left: 35px; top: 51px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:117px; top: 51px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:199px; top: 51px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:281px; top: 51px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:363px; top: 51px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:445px; top: 51px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left: -6px; top:122px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left: 76px; top:122px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:158px; top:122px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:240px; top:122px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:322px; top:122px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:404px; top:122px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:-47px; top:193px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left: 35px; top:193px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:117px; top:193px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:199px; top:193px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:281px; top:193px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:363px; top:193px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:445px; top:193px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left: -6px; top:264px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left: 76px; top:264px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:158px; top:264px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:240px; top:264px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:322px; top:264px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:404px; top:264px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left: 35px; top:335px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:117px; top:335px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:199px; top:335px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:281px; top:335px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:363px; top:335px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left: 76px; top:406px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:158px; top:406px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:240px; top:406px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:322px; top:406px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:199px; top:477px; clip:rect(0 82px 71px 0)"><VIDEO CLASS="o0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:117px; top:-20px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:199px; top:-20px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:281px; top:-20px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left: -6px; top: 51px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left: 76px; top: 51px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:158px; top: 51px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:240px; top: 51px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:322px; top: 51px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:404px; top: 51px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:-47px; top:122px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left: 35px; top:122px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:117px; top:122px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:199px; top:122px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:281px; top:122px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:363px; top:122px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:445px; top:122px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left: -6px; top:193px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left: 76px; top:193px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:158px; top:193px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:240px; top:193px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:322px; top:193px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:404px; top:193px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:-47px; top:264px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left: 35px; top:264px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:117px; top:264px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:199px; top:264px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:281px; top:264px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:363px; top:264px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:445px; top:264px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left: -6px; top:335px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left: 76px; top:335px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:158px; top:335px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:240px; top:335px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:322px; top:335px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:404px; top:335px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left: 35px; top:406px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:117px; top:406px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:199px; top:406px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r0" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:281px; top:406px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:363px; top:406px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r1" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:158px; top:477px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r2" STYLE="transform-origin:0 0"></VIDEO></DIV>
<DIV STYLE="position:absolute; left:240px; top:477px; clip-path:polygon(0 0,41px 71px,82px 0)"><VIDEO CLASS="r1" STYLE="transform-origin:0 0"></VIDEO></DIV>
</DIV>
</DIV>
<SCRIPT TYPE="text/javascript">
<!--
async function init() {
var stream;
try {
stream = await navigator.mediaDevices.getUserMedia({video:true, audio:false});
}
catch(err) {
alert("カメラが使用できません");
return;
}
elem_video = elems_o0[0];
elem_video.addEventListener("canplay", wait, false);
var elems = document.getElementsByTagName("VIDEO")
for(var i = 0; i < elems.length; i++) {
with(elems[i]) {
srcObject = stream;
play();
}
}
}
function wait() {
if(elem_video.videoWidth) {
elem_video.removeEventListener("canplay", wait, false);
src_x = (elem_video.videoWidth >> 1) - 41;
src_y = (elem_video.videoHeight >> 1) - 47;
max_src_x = elem_video.videoWidth - 83
max_src_y = elem_video.videoHeight - 72
elem_move.disabled = false;
setup_view();
return;
}
setTimeout(wait, 50);
}
function move_change() {
if(elem_move.checked) {
move_cnt = 0;
int_id = setInterval(timer, 100);
}
else {
clearInterval(int_id);
src_x = (elem_video.videoWidth >> 1) - 41;
src_y = (elem_video.videoHeight >> 1) - 47;
setup_view();
}
}
function timer() {
if(move_cnt) {
move_cnt--;
}
else {
move_dir = Math.floor(Math.random() * 4);
move_cnt = 16;
}
switch(move_dir) {
case 0:
if(!--src_x) {
move_dir = 1;
src_x = 2;
}
break;
case 1:
if(++src_x > max_src_x) {
move_dir = 0;
src_x -= 2;
}
break;
case 2:
if(!--src_y) {
move_dir = 3;
src_y = 2;
}
break;
case 3:
if(++src_y > max_src_y) {
move_dir = 2;
src_y -= 2;
}
break;
}
setup_view();
}
function setup_view() {
var l = "-" + String(src_x) + "px";
var r = "-" + String(src_x + 82) + "px";
var b = "-" + String(src_y + 71) + "px";
var transform;
transform = "translate(" + l + ",-" + String(src_y) + "px)";
for(var i = 0; i < elems_o0.length; i++)
elems_o0[i].style.transform = transform;
transform = "translate(0,71px) rotate(120deg) translate(" + r + "," + b + ")";
for(var i = 0; i < elems_o1.length; i++)
elems_o1[i].style.transform = transform;
transform = "translate(41px,0) rotate(240deg) translate(" + r + "," + b + ")";
for(var i = 0; i < elems_o2.length; i++)
elems_o2[i].style.transform = transform;
transform = "scale(1,-1) translate(" + l + "," + b + ")";
for(var i = 0; i < elems_r0.length; i++)
elems_r0[i].style.transform = transform;
transform = "translate(41px,71px) rotate(120deg) scale(1,-1) translate(" + r + "," + b + ")";
for(var i = 0; i < elems_r1.length; i++)
elems_r1[i].style.transform = transform;
transform = "rotate(240deg) scale(1,-1) translate(" + r + "," + b + ")";
for(var i = 0; i < elems_r2.length; i++)
elems_r2[i].style.transform = transform;
}
elem_move = document.getElementById("move");
elems_o0 = document.getElementsByClassName("o0")
elems_o1 = document.getElementsByClassName("o1")
elems_o2 = document.getElementsByClassName("o2")
elems_r0 = document.getElementsByClassName("r0")
elems_r1 = document.getElementsByClassName("r1")
elems_r2 = document.getElementsByClassName("r2")
// Firefox でページを再ロードしたときのため
document.forms[0].reset();
elem_move.disabled = true;
//-->
</SCRIPT>
</BODY>
</HTML>
|
