<!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 onClick="move_scope()">使用する画像の範囲を変化させる</LABEL>
</FORM>
<BR>
<CANVAS ID="view" WIDTH=480 HEIGHT=480></CANVAS>
</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 = document.createElement("VIDEO");
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) {
src_x = (elem_video.videoWidth >> 1) - 42;
src_y = (elem_video.videoHeight >> 1) - 48;
max_src_x = elem_video.videoWidth - 84
max_src_y = elem_video.videoHeight - 73
elem_move.disabled = false;
setInterval(frame, 200);
return;
}
setTimeout(wait, 50);
}
function move_scope() {
if(elem_move.checked) {
move_cnt = 0;
}
else {
move_cnt = -1;
src_x = (elem_video.videoWidth >> 1) - 42;
src_y = (elem_video.videoHeight >> 1) - 48;
}
}
function frame() {
ctx_src.drawImage(elem_video, src_x, src_y, 84, 73, 0, 0, 84, 73);
ctx_view.clearRect(0, 0, 480, 480);
ctx_view.save();
ctx_view.clip();
for(var y = -20; y <= 477; ) {
ctx_view.drawImage(elem_src, 1, 1, 82, 71, 76, y, 82, 71);
ctx_view.drawImage(elem_src, 1, 1, 82, 71, 322, y, 82, 71);
y += 71;
ctx_view.drawImage(elem_src, 1, 1, 82, 71, -47, y, 82, 71);
ctx_view.drawImage(elem_src, 1, 1, 82, 71, 199, y, 82, 71);
ctx_view.drawImage(elem_src, 1, 1, 82, 71, 445, y, 82, 71);
y += 71;
}
ctx_work.save();
// translate(0, 71)
// rotate(120°)
// translate(-82, -71)
ctx_work.setTransform(-0.5, SIN120, - SIN120, -0.5, 102.48780366869515, 35.485916889676031);
ctx_work.drawImage(elem_src, 0, 0, 84, 73, -1, -1, 84, 73);
ctx_work.restore();
for(var y = -20; y <= 477; ) {
ctx_view.drawImage(elem_work, 158, y);
ctx_view.drawImage(elem_work, 404, y);
y += 71;
ctx_view.drawImage(elem_work, 35, y);
ctx_view.drawImage(elem_work, 281, y);
y += 71;
}
ctx_work.save();
// translate(41, 0)
// rotate(240°)
// translate(-82, -71)
ctx_work.setTransform(-0.5, - SIN120, SIN120, -0.5, 20.512196331304856, 106.51408311032397);
ctx_work.drawImage(elem_src, 0, 0, 84, 73, -1, -1, 84, 73);
ctx_work.restore();
for(var y = -20; y <= 477; ) {
ctx_view.drawImage(elem_work, -6, y);
ctx_view.drawImage(elem_work, 240, y);
y += 71;
ctx_view.drawImage(elem_work, 117, y);
ctx_view.drawImage(elem_work, 363, y);
y += 71;
}
ctx_work.clearRect(0, 0, 82, 71);
ctx_work.save();
ctx_work.clip();
// scale(1, -1)
ctx_work.setTransform(1, 0, 0, -1, 0, 0);
ctx_work.drawImage(elem_src, 1, 1, 82, 71, 0, -71, 82, 71);
ctx_work.restore();
for(var y = -20; y <= 477; ) {
ctx_view.drawImage(elem_work, -47, y);
ctx_view.drawImage(elem_work, 199, y);
ctx_view.drawImage(elem_work, 445, y);
y += 71;
ctx_view.drawImage(elem_work, 76, y);
ctx_view.drawImage(elem_work, 322, y);
y += 71;
}
ctx_work.clearRect(0, 0, 82, 71);
ctx_work.save();
ctx_work.clip();
// translate(41, 71)
// rotate(120°)
// translate(-82, 0)
// scale(1, -1)
ctx_work.setTransform(-0.5, SIN120, SIN120, 0.5, 82, -0.014083110323969035);
ctx_work.drawImage(elem_src, 0, 0, 84, 73, -1, -72, 84, 73);
ctx_work.restore();
for(var y = -20; y <= 477; ) {
ctx_view.drawImage(elem_work, 117, y);
ctx_view.drawImage(elem_work, 363, y);
y += 71;
ctx_view.drawImage(elem_work, -6, y);
ctx_view.drawImage(elem_work, 240, y);
y += 71;
}
ctx_work.clearRect(0, 0, 82, 71);
ctx_work.save();
ctx_work.clip();
// rotate(240°)
// translate(-82, 0)
// scale(1, -1)
ctx_work.setTransform(-0.5, - SIN120, - SIN120, 0.5, 41, 71.01408311032397);
ctx_work.drawImage(elem_src, 0, 0, 84, 73, -1, -72, 84, 73);
ctx_work.restore();
for(var y = -20; y <= 477; ) {
ctx_view.drawImage(elem_work, 35, y);
ctx_view.drawImage(elem_work, 281, y);
y += 71;
ctx_view.drawImage(elem_work, 158, y);
ctx_view.drawImage(elem_work, 404, y);
y += 71;
}
ctx_view.restore();
if(move_cnt >= 0) { // 使用する画像の範囲を変化させる
if(move_cnt) {
move_cnt--;
}
else {
move_dir = Math.floor(Math.random() * 4);
move_cnt = 8;
}
switch(move_dir) {
case 0:
if((src_x -= 2) < 0) {
move_dir = 1;
src_x += 4;
}
break;
case 1:
if((src_x += 2) > max_src_x) {
move_dir = 0;
src_x -= 4;
}
break;
case 2:
if((src_y -= 2) < 0) {
move_dir = 3;
src_y += 4;
}
break;
case 3:
if((src_y += 2) > max_src_y) {
move_dir = 2;
src_y -= 4;
}
break;
}
}
}
ctx_view = document.getElementById("view").getContext("2d");
ctx_view.beginPath();
ctx_view.arc(240, 240, 240, 0, Math.PI * 2, false);
ctx_view.closePath();
// 作業用 Canvas
elem_src = document.createElement("CANVAS");
elem_src.width = 84;
elem_src.height = 73;
ctx_src = elem_src.getContext("2d");
elem_work = document.createElement("CANVAS");
elem_work.width = 82;
elem_work.height = 71;
ctx_work = elem_work.getContext("2d");
ctx_work.beginPath();
ctx_work.moveTo(0, 0);
ctx_work.lineTo(82, 0);
ctx_work.lineTo(41, 71);
ctx_work.closePath();
elem_move = document.getElementById("move");
move_cnt = -1;
SIN120 = 0.8660254037844386; // sin(120°)
// ページを再ロードしたときのため
document.forms[0].reset();
elem_move.disabled = true;
//-->
</SCRIPT>
</BODY>
</HTML>
|
