スマホのパノラマ写真をマウスで動かして見る。JavaScript, p5.js
このホームページではサイズの大きな写真が表示できないので、IBM Cloud (Bluemix)で動かしました。
http://panoramaichy.mybluemix.net/
マウスヘリコプターを動かすと画像が左右上下に動きます。
// 以下は index.html ファイルです。
<html><head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
<script language="javascript" type="text/javascript" src="Panorama.js"></script>
</head><body></body></html>
// 以下は Panorama.js ファイルです
// http://p5js.org/examples/examples/Image_Transparency.php を一部変更しました。
var img;
var offsetX = 0, offsetY=0;
var easing = 0.05;
function setup() {
createCanvas(700, 300);
img = loadImage("IMG_20160830_155051.jpg");
}
function draw() {
var dx = -(mouseX*2.8+280 -img.width/10) - offsetX;
offsetX += dx * easing; offsetY=0-mouseY/1;
if(offsetX<-2100){offsetX=-2100;};
if(offsetY<-400){offsetY=-400;}
image(img, offsetX, offsetY);
fill(200,200,50); line(mouseX, mouseY,mouseX-10, mouseY+20);
line(mouseX, mouseY,mouseX+10, mouseY+20);
ellipse(mouseX, mouseY-10, 5, 30); ellipse(mouseX, mouseY-20, 100, 3);
ellipse(mouseX, mouseY, 30, 30); ellipse(mouseX-10, mouseY+20, 5, 5);
ellipse(mouseX+10, mouseY+20, 5, 5);
}