p5jsでPokémon GOっぽいUIを作る(5) #p5.js

さて、5回目です。これまでcreateCanvas(600,600,WEBGL)と画面サイズを決め打ちしてましたが、スマートフォンの画像サイズを取得してキャンバスサイズを指定するのと、touchMovedを使って、画面をスワイプすると地図が動くようにします。

まず、今回からJavaScriptが長くなるのでhtmlから分離します。また、キャンバスの上と左に余計なマージンができるので、CSSでpadding:0; margin:0にしています。

<!-- index.html -->
<!doctype html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, viewport-fit=cover" />
<title>Pokanpo Here</title>
<style>
*{
  padding: 0;
  margin: 0;
  background: black;
}

canvas{
  display:block;
}
</style>
<script src="p5.min.js"></script>
<script src="p5.geolocation.js"></script>
<script src="here.js"></script>
</head>
<body>
</body>
</html>

次にJavaScript。スマートフォン上でスワイプしたときにスクロールされてしまわないためsetup()の中でaddEventListner()を呼び出してます。このあたりの黒魔術、下記のサイトが充実してます。

p5.jsとスマートフォンでインタラクティブアートを作る - WGGの活動log

今回のキモはtouchEvent()で、スワイプした距離を取得して、draw()の中で角度を指定しているところ。これをスワイプする都度、呼び出すことで、ヌルヌルと地図を回転できます。縦にも横にも回転できるようにしてみましたが、グラグラしてます。そういえばPokémon GOは横方向だけスワイプで、縦方向はダブルタップしないと変えられないようにしてますね。

let rotX = 1.0;
let rotZ = 0.0;

let img;
let locationData;

function preload() {
    locationData =  getCurrentPosition();
    notoSans = loadFont('NotoSans-Regular.ttf');
}

function setup() {
    let lat = locationData.latitude;
    let lon = locationData.longitude;
    let url = 'https://example.com/getmap.php'
    url = url +'?lat='+lat+'&lon='+lon;
    img = loadImage(url);

    window.addEventListener("touchstart", function (event) { event.preventDefault(); }, { passive: false });
    window.addEventListener("touchmove", function (event) { event.preventDefault(); }, { passive: false });

    createCanvas(windowWidth, windowHeight, WEBGL);
    textSize(12);
    textAlign(CENTER, CENTER);
    textFont(notoSans);
}

function draw() {
    background(0);

    rotateX(rotX);
    rotateZ(rotZ);

    push();
    texture(img);
    plane(1000, 1000);
    pop();
}

function touchMoved(){
    let dx = pmouseX - mouseX;
    let dy = pmouseY - mouseY;
    rotX = rotX + dy * 0.01
    rotZ = rotZ + dx * 0.01
}