スマホのパノラマ写真をマウスで動かして見る。JavaScript, p5.js

このホームページではサイズの大きな写真が表示できないので、IBM 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);   
}