p5jsでPokémon GOっぽいUIを作る(4)

前回までに地図、人、ボタンを雑に表示しましたが、今回は少し趣向を変えて現在地を取得することにします。

まず、地図から。位置情報をURLで渡すとYahoo地図の情報を取得して表示するスクリプトを用意します。

<?php
$appid = "YOUR_APP_ID";
$lat = @$_GET["lat"] ?: "35.66521320007564";
$lon = @$_GET["lon"] ?: "139.7300114513391";
$query = http_build_query([
    'lat' => $lat,
    'lon' => $lon,
    'z' => '16',
    'appid' => $appid,
'base:red|off:address,landmark,line_name,station_name,symbol,area_name',
    'style' => 'off:address,landmark,line_name,station_name,symbol,area_name',
]);
$url = 'https://map.yahooapis.jp/map/V1/static?' . $query;
header('Content-Type: image/png');
readfile( $url );

次に、これを呼び出すわけですが、素のgeolocation APIは非同期なのでp5jsのスタイルと合いません。p5jsっぽく位置情報取得できるp5.geolocation.jsというライブラリがあるので、これを使ってみます。

<script src="p5.min.js"></script>
<script src="p5.geolocation.js"></script>
<script>

let img;
let locationData;
function preload() {
  locationData =  getCurrentPosition();
}

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

  createCanvas(600, 600, WEBGL);
}

function draw() {
  background(0);
  rotateX(1);

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

}
</script>

ちゃんと動きますね。今回は自宅の周辺を表示しちゃうので画面キャプチャは省略です。