グリフを眺めるだけで覚えられそうなツール

一覧表だと頭に入ってこないのでグリフパターンを画像に加工してスライドショー的に表示させているけど、新しいパターンが出てくると困る。。。そこでテキストベースのデータにして、Webで表示させる手法を思いつく。

HTMLからGoogle APIと外部Javascriptを呼び出す

おまじない

<head>
	<meta charset="UTF-8">
	<title>Ingressのglypheを覚える</title>
        <link href="base.css" rel="stylesheet" type="text/css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="base.js"></script>
	</head>

base.jsにアレコレ書く

jsonデータを呼び出す

json形式のデータを呼び出すところ
$(function(){
	$.ajax({
		url:'glyph.json',
		type:'GET',
		dataType:'json',
		timeout:1000,
		error:function() {
			alert("ロード失敗");
		},
		success:function(glyph){
			/*成功したとき*/
		}
	});
});

XMLでもできるけど、グリフが200以上あるのでjsonを選択した。

どんなjsonデータ？

nameは英語、jpは日本語、glyphは書き順、slangは方言（未設定あり）を入れてみた。

[
{"name":"BODY/SHELL","jp":"体/砲弾、貝殻","glyph":"4/6/0/4","slang":"パンツ"},
{"name":"BREATHE/LIVE","jp":"息/生","glyph":"10/4/0/6/12"},

{"name":"CAPTURE","jp":"捉える","glyph":"8/9/3/0/1/12"},
]

書き順ですが、
中心点が０
内側の４時が１、６時が２、８時が３、１０時が４、１２時が５、２時が６
外側の４時が７、６時が２、８時が８、１０時が１０、１２時が１１、２時が１２
合計１３点で構成されています。

成功したとき

canvasのパラメータ集め
位置集め
初期の１３点描画
無限ループでグリフ描画

こんな感じで分けます

canvasのパラメータ集め

HTMLのCanvasに六角形を描くを参考にしています。

//変数の定義
	var centerX = 0,	centerY = 0,
	points = [], //線を描くためのx値とy値のための配列
	degs = [30,90,150,210,270,330], //図形の中心位置(o)からの各点の角度
	dis = 200,//点の半径
	dot = [],//XY座標配列
	canvas_size = 550;//描画領域の縦横
			
	var theCanvas = document.getElementById("viewArea");
	var glyphCanvas = document.getElementById("glyph");
	
	//Canvasの中心座標を取得
	//centerX: Canvasタグの横幅の1/2を取得
	var offsetX = (theCanvas.currentStyle || document.defaultView.getComputedStyle(theCanvas,'')).width;
	offsetX = Number(offsetX.replace('px',''));
	centerX =  offsetX / 2;
	
	//centerY: Canvasタグの高さの1/2を取得
	var offsetY = (theCanvas.currentStyle || document.defaultView.getComputedStyle(theCanvas,'')).height;
	offsetY = Number(offsetY.replace('px',''));
	centerY =  offsetY / 2 - 5;

位置集め

	//各頂点のそれぞれのx値, y値を計算して、配列に格納します
	for (var i = 0; i < degs.length; i++)
	{
		var x = Math.cos(degs[i] * Math.PI / 180) * dis; //距離(dis[i])と角度(deg)からxの位置を求める方程式
		var y = Math.sin(degs[i] * Math.PI / 180) * dis; //距離(dis[i])と角度(deg)からyの位置を求める方程式
		points[i] = {x:x, y:y}; //求めたx,yを配列に格納する
	}

六角形の外側の６点の位置を集める

初期の１３点描画

	//Canvasタグで2次元描画を行ないます		
	var maru = theCanvas.getContext("2d");
	var ctx = glyphCanvas.getContext("2d");
	
	//グラフィックの描画関数
	maru.fillStyle = "#ffffff";
	maru.radius = 5;//半径の距離
	maru.start = 0;//円弧の開始角度
	maru.end = Math.PI*2;//円弧の終了角度
	
	maru.beginPath();
	maru.arc(centerX, centerY, maru.radius, maru.start, maru.end, false);
	maru.fill();
	
	dot[0] = {x: centerX, y:centerY};//0番が中心点
	for(var i=1; i<=degs.length; i++){
		dot[i] = {x: points[i-1].x/2 + centerX, y: points[i-1].y/2 + centerY};
		dot[i+6]={x: points[i-1].x + centerX, y: points[i-1].y + centerY};
		maru.beginPath();
		maru.arc(dot[i].x, dot[i].y, maru.radius, maru.start, maru.end, false);
		maru.arc(dot[i+6].x, dot[i+6].y, maru.radius, maru.start, maru.end, false);
		maru.fill();
	}

maruで書いていく。dotは無限ループで再利用します。

無限ループ

setInterval(function(){
//キャンバスの初期化
	ctx.fillStyle="#000000";
	ctx.fillRect(0,0,canvas_size, canvas_size);

//点を描画
	ctx.fillStyle="#ffffff";
	ctx.beginPath();
	ctx.arc(centerX, centerY, maru.radius, maru.start, maru.end, false);//12番
	ctx.fill();
	
	dot[0] = {x: centerX, y:centerY};
	for(var i=1; i<=degs.length; i++){
		ctx.beginPath();
		ctx.arc(dot[i].x, dot[i].y, maru.radius, maru.start, maru.end, false);
		ctx.arc(dot[i+6].x, dot[i+6].y, maru.radius, maru.start, maru.end, false);
		ctx.fill();
	}
	 
//グリフをランダムで取得
	var ran = Math.floor(Math.random() * glyph.length);
	var lines = glyph[ran].glyph.split("/");
	
	for(var i=0; i<lines.length-1; i++){
		ctx.strokeStyle = "#ffffff"; //線のカラー設定
    	ctx.lineWidth = 5; //線の太さ
		ctx.beginPath(); //パスの描画を始める
		ctx.moveTo(dot[lines[i]].x, dot[lines[i]].y);
		ctx.lineTo(dot[lines[i+1]].x, dot[lines[i+1]].y);
		ctx.stroke();
		//console.log(i, lines[i], dot[lines[i]]);
	}
	var note = glyph[ran].name;
	var note_jp = glyph[ran].jp;
	if(glyph[ran].slang){
		note_jp += " (" + glyph[ran].slang+")";
	}
	$(function(){
		$("#output").text(note);
		$("#note_jp").text(note_jp);
		$("#viewArea").removeClass("front");
		$("#glyph").addClass("front");
	});
}, 2000);