位置情報と連携するサイトを作っているが、ふとPokémon GOっぽくしたいと思ったもののUnityを覚えるのは大変。というわけでp5jsでどこまで近づけられるかを試してみる１回目。多分、10回ぐらいすれば色々と機能が揃うかも。

まず地図を作る

Pokémon GOはGoogleだと思いますが、ここはYahoo!JapanのYOLPのスタティックマップを使ってみます。

アプリケーションIDを取得して、こんな感じで施設名とか地名が入ってない地図を作ってみる。

<?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,
    'style' => 'base:yellowishgreen|off:address,landmark,line_name,station_name,symbol,area_name',
]);
$url = 'https://map.yahooapis.jp/map/V1/static?' . $query;
header("Access-Control-Allow-Origin: *");
header('Content-Type: image/png');
readfile( $url );
?>

p5jsで地図を平面に表示する

次にp5jsをダウンロードし、取得した地図を貼ってみる。

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

let img;
function preload() {
  img = loadImage('getmap.php');
}

function setup() {
  createCanvas(600, 600, WEBGL);
}

function draw() {
    background(0);

    rotateX(1);
    rotateZ(frameCount * 0.001);

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

</script>

こんな感じになりました。

See the Pen map like pokemon go by t.uehara (@usop4) on CodePen.

次回は中心に棒人間でも描いてみるか、それとも地図を回転させてみるか。気まぐれに書き足してみます。