地図をグリッチさせる

やること

• WEB地図でグリッチアートする

利用ライブラリー

• Maplibre GL JS

• VFX-JS

グリッチアートとは

方法

• Maplibre GL JSで地図を描画
• MaplibreのgetCanvasメソッドでCanvasにアクセス
• VFX-JSでCanvasにエフェクトをかける

import {VFX} from '@vfx-js/core';
import {Map} from 'maplibre-gl';

let mapContainer: HTMLDivElement;
const map = new Map({
			container: mapContainer,
			style: `https://api.maptiler.com/maps/jp-mierune-dark/style.json?key=${MAPTILER_KEY}`,
			center: [139.767125, 35.681236],
			zoom: 12,
			hash: true,
			attributionControl: false
});

const vfx = new VFX();
const canvas = map.getCanvas();
function drawCanvas() {
	vfx.update(canvas);
	requestAnimationFrame(drawCanvas);
}
drawCanvas();

vfx.add(canvas, { shader: 'glitch', overflow: 100 });

結果

このまま地図をグリグリ動かせます

注意点

• プリセットのエフェクトは、かけると地図のコントローラーなどの要素が見えなくなってしまうものが多い（ノーマルなグリッチは大丈夫だった）

感想

• お手軽にエフェクトをかけることができるVFX-JSは最高です
• グリッチ好きな私としては、10数分でこの効果が出せたので、満足度が高いです