位置情報と連携するサイトを作っているが、ふとPokémon GOっぽくしたいと思ったもののUnityを覚えるのは大変。というわけでp5jsでどこまで近づけられるかを試してみる1回目。多分、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.
次回は中心に棒人間でも描いてみるか、それとも地図を回転させてみるか。気まぐれに書き足してみます。