【量子アニーリング】地図塗り分け問題の本格的なアプリケーションをhtml/jsでつくる


はじめに

こちらは僕が総務省の異能vationの前に作ったアプリケーションです。2015年に総務省に選ばれる前にカナダのD-Wave社を訪れて、ハードウェア責任者のジェレミー氏から当時のD-Waveのパネルを前に説明を受け、現早稲田大学の田中宗先生方の協力の元で仕上がったシミュレータです。

一目でアニーリングのキメラグラフの挙動と、カナダの地図塗り分け問題の対応が見える上、ブラウザで誰でも見れるのでその後の内閣府ImPACTプロジェクトのクラウドシステムへと繋がっていきました。

仕組みは非常に簡単ですので内容を確認しながらコードを見ていきたいと思います。

31c6c114450656be9020d62a0dfec8d6-1024x537.png

画面構成は、一番左がコンソールで、現在行なっている動作を説明しています。実はこちらのコンソールもブラウザからコマンド打ち込みできるバージョンもあるのですが、難しくなりすぎるので今回は簡易版です。

上の4つのパラメータは左からコスト関数のコストの推移とグラフ。左から2番目が温度のパラメータ推移。3番目がメトロポリス法というビット反転の評価に使われる確率計算です。最後は計算時間です。

下の一番大きなエリアは実際にキメラグラフと呼ばれるD-Waveのチップレイアウトを再現しています。また、右側の地図は問題に対応し、カナダの色の塗り分け問題を実際の地図、その下にモデル化したテーブルがあります。そしてそれを実行するボタンです。


コード

コードはシンプルです。読み込んでるのはj-queryと表示の最適化用にbootstrapです。j-queryとbootstrapはCDNから拾っています。

これをメモ帳にコピペしてネットがつながるところであれば、そのまま動かすことができます。bootstrapとj-queryはダウンロードして手元に置いておけばローカルで動かすこともできます。

動作のデモサイトもあります。こちらです。こちらで見ることができます。

https://minatoyuichiro.github.io/graphcoloring/

コードはなんともないhtml/jsで動いています。

<!doctype html>

<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>

<script>

window.onload = function(){

var N = 512;
var rptN = N;
var kTinit =3;
var kT;
var clinit = 0.99;
var cl;
var kTF = 0.02;
var q = new Array(N);
var a = new Array(N);
var b = new Array(N*2);
var c = new Array(N/2);
var d = new Array(N/2);
var Einit=0;
var E;
var inter =0;
var start = $.now();
var timeinit = 0;
var time;
var sq = Math.floor(Math.sqrt(N/8));
var run = 0;
var rpt = 2000;

function initparam(){
kT = kTinit;
E = Einit;
cl = clinit;
time = timeinit;
};

function initarray(){

a=[0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,1.5,1.5,1.5,1.5,0.5,0.5,0.5,0.5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,1.5,1.5,1.5,1.5,0.5,0.5,0.5,0.5,1.5,1.5,1.5,1.5,0.5,0.5,0.5,0.5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,1.5,1.5,1.5,1.5,0.5,0.5,0.5,0.5,1.5,1.5,1.5,1.5,0.5,0.5,0.5,0.5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,1.5,1.5,1.5,1.5,0.5,0.5,0.5,0.5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];

b=[-2,1,1,1,1,-2,1,1,1,1,-2,1,1,1,1,-2,-2,1,1,1,1,-2,1,1,1,1,-2,1,1,1,1,-2,-2,1,1,1,1,-2,1,1,1,1,-2,1,1,1,1,-2,-2,1,1,1,1,-2,1,1,1,1,-2,1,1,1,1,-2,-2,1,1,1,1,-2,1,1,1,1,-2,1,1,1,1,-2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-2,1,1,1,1,-2,1,1,1,1,-2,1,1,1,1,-2,-2,1,1,1,1,-2,1,1,1,1,-2,1,1,1,1,-2,-2,1,1,1,1,-2,1,1,1,1,-2,1,1,1,1,-2,-2,1,1,1,1,-2,1,1,1,1,-2,1,1,1,1,-2,-2,1,1,1,1,-2,1,1,1,1,-2,1,1,1,1,-2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-2,1,1,1,1,-2,1,1,1,1,-2,1,1,1,1,-2,-2,1,1,1,1,-2,1,1,1,1,-2,1,1,1,1,-2,-2,1,1,1,1,-2,1,1,1,1,-2,1,1,1,1,-2,-2,1,1,1,1,-2,1,1,1,1,-2,1,1,1,1,-2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-2,1,1,1,1,-2,1,1,1,1,-2,1,1,1,1,-2,-2,1,1,1,1,-2,1,1,1,1,-2,1,1,1,1,-2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]

c=[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]

d=[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,-2,-2,-2,-2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,-2,-2,-2,-2,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,-2,-2,-2,-2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]

};

function inittable(){
$('#mx').empty();
for(var i=0;i<sq;i++){
for(var j=0;j<sq;j++){
$('#mx').append('<div class="unit" id="unit'+(j+i*sq)+'"><div class="ver on" id="'+(j*sq+i*sq*sq)+'" style="left:10px;"></div><div class="ver on" id="'+(1+j*8+i*64)+'" style="left:25px;"></div><div class="ver on" id="'+(2+j*8+i*64)+'" style="left:40px;"></div><div class="ver on" id="'+(3+j*8+i*64)+'" style="left:55px;"></div><div class="hor on" id="'+(4+j*8+i*64)+'" style="top:10px;"></div><div class="hor on" id="'+(5+j*8+i*64)+'" style="top:25px;"></div><div class="hor on" id="'+(6+j*8+i*64)+'" style="top:40px;"></div><div class="hor on" id="'+(7+j*8+i*64)+'" style="top:55px;"></div></div>')
};
$('#mx').append('<br style="clear:both;">');
};

for(var i=0;i<sq;i++){
for(var j=0;j<sq;j++){

for(var k=0;k<4;k++){
$('#unit'+(i*8+j)).append('<div class="lognum lognum-purple" style="top:-14px;left:'+(8+k*15)+'px;">'+a[k+j*8+i*64]+'</div>');
};

for(var k=4;k<8;k++){
$('#unit'+(i*8+j)).append('<div class="lognum lognum-purple" style="left:-10px;top:'+(3+(k-4)*15)+'px;">'+a[k+j*8+i*64]+'</div>');
};

for(var k=0;k<16;k++){
$('#unit'+(i*sq+j)).append('<div class="lognum lognum-blue" style="top:'+(5+15*(k%4))+'px;left:'+(8+15*(Math.floor(k/4)))+'px;">'+b[k+j*16+i*128]+'</div>');
};

if((i*sq+j)%8<7){
for(var k=0;k<4;k++){
$('#unit'+(i*sq+j)).append('<div class="lognum lognum-green" style="right:15px;top:'+(3+k*15)+'px;">'+c[k+j*4+i*4*sq]+'</div>');
};
};

if((i*sq+j)<56){
for(var k=0;k<4;k++){
$('#unit'+(i*8+j)).append('<div class="lognum lognum-green" style="bottom:-9px;left:'+(8+k*15)+'px;">'+d[k+j*4+i*32]+'</div>');
};
};

};
};

};

function qinit(){
for(var i=0;i<N;i++){
q[i] = 1;
};

for(var i=0;i<N;i++){
if((i<256 && i%64>39) || i>=256 || Math.floor(i/8)==16 || Math.floor(i/8) == 24 || Math.floor(i/8) == 25 || Math.floor(i/8) == 26){
q[i] = 0;
$('#'+i).toggleClass('on');
};
};

};

function loadtxt(txt){
$('#cd').append('<span style="color:#348fe2">#</span> <span style="color:#00acac;">'+txt+' loaded</span><br>');
};

function loadcanada(){
loadtxt('canada');
initarray();
inittable();
qinit();
};

function stcanada(){
$('#plot').empty();
initarray();
rptN=232;
if(run == 0){
initparam();
inittable();
qinit();
start = $.now();
startAnnealing();
var date = new Date($.now());
$('#cd').append('start at '+date+"<br>");
run = 1;
}else{
run = 1;
$('#cd').append('now running<br>');
}
};

initarray();
qinit();
inittable();
loadcanada();

function startAnnealing(){
annealing=setInterval(function(){
var stop = 0;

for(var i=0;i<rpt;i++){
var s = Math.floor(Math.random()*rptN);
var r = Math.floor(s/8);
if((s%64)>39 || r==16 || r==24 || r==25 || r==26){
}else{

if(s%8<4){
var dE = (a[s]+b[s*4-r*16]*q[r*8+4]+b[s*4-r*16+1]*q[r*8+5]+b[s*4-r*16+2]*q[r*8+6]+b[s*4-r*16+3]*q[r*8+7])*(q[s]-0.5)*(-2);
if(s<448){
dE += (d[s%4+r*4]*q[s+64])*(q[s]-0.5)*(-2);
};
if(s>63){
dE += (d[s%4+r*4-32]*q[s-64])*(q[s]-0.5)*(-2);
};
}else{
var dE = (a[s]+b[s-4+r*8]*q[r*8]+b[s+r*8]*q[r*8+1]+b[s+4+r*8]*q[r*8+2]+b[s+8+r*8]*q[r*8+3])*(q[s]-0.5)*(-2);
if(s%64<59){
dE += (c[s%4+r*4]*q[s+8])*(q[s]-0.5)*(-2);
};
if(s%64>8){
dE += (c[s%4+r*4-4]*q[s-8])*(q[s]-0.5)*(-2);
};
};

var p =Math.exp(-dE/kT);
if(p>1){p=1};
if(dE < 0 || p > Math.random()){
q[s] = -q[s]+1;
$('#'+s).toggleClass('on');
E=E+dE;
stop = 0;
};
};
stop++;
};

clring(0,"NL","CA-NL");
clring(8,"ON","CA-ON");
clring(16,"MB","CA-MB");
clring(24,"SK","CA-SK");
clring(32,"AB","CA-AB");
clring(64,"PE","CA-PE");
clring(72,"QC","CA-QC path");
clring(80,"NU","CA-NU path");
clring(88,"NT","CA-NT path");
clring(136,"NB","CA-NB");
clring(144,"NS","CA-NS path");
clring(160,"BC","CA-BC path");
clring(216,"YT","CA-YT");

kT=kT*cl;

if(kT<kTF){
var date = new Date($.now());
$('#cd').append("finish at "+date+" , E = "+E+"<br>");
stopAnnealing();
run = 0;
return false;
};

time = ($.now() - start)/1000;

$('#plot').append('<div class="dot bg-green" style="top:'+(-E/3-40)+'px;left:'+(time*10)+'px;"></div>');

$('#tstats').html(kT.toFixed(3));
$('#pstats').html(p.toFixed(6));
$('#cstats').html(E.toFixed(0));
$('#ttstats').html(time.toFixed(3)+"s");

if(inter%10 ==0){
$('#tprogress').css('width',kT*35+'%');
$('#pprogress').css('width',p*100+'%');
$('#cprogress').css('width',((E+1500)/15) +'%');
$('#ttprogress').css('width',time*4 +'%');
};

inter++;
if(stop >1000){
stopAnnealing();
run = 0;
}
},10);
};

function stopAnnealing(){
clearInterval(annealing);
};

$("#canadastart").click(function(){
stcanada();
});

function clring(a,tb,map){
var col = "#d3d3d3";
if((q[a]+q[a+1]+q[a+2]+q[a+3]+q[a+4]+q[a+5]+q[a+6]+q[a+7]) == 2){
if(q[a+0]+q[a+4]==2){
col = "red";
}else if(q[a+1]+q[a+5]==2){
col = "green";
}else if(q[a+2]+q[a+6]==2){
col = "blue";
}else if(q[a+3]+q[a+7]==2){
col = "yellow";
};
};
$('#'+tb).css('background',col);
$('#'+map).attr("fill",col);
};
};
</script>

<style>
body{
font-size:10px;
background:#efefef;
font-family:sans-serif;
margin-top:52px;
}

.on{
background:red!important;
}

.unit{
float:left;
width:12%;
height:70px;
position:relative;
margin:0 0 20px 0.4%;
}

.ver{
position:absolute;
height:68px;
width:4px;
background:#1a2229;
opacity:0.5;
}

.hor{
position:absolute;
height:4px;
width:68px;
background:#1a2229;
opacity:0.5;
}

#sidebar{
padding:10px;
padding-top:62px;
width:220px;
position:fixed;
height:100%;
background:#2d353c;
top:0;
left:0;
color:white;
overflow:auto;
}

#sidebar input:focus{
outline:none;
}

.panel{
border:0;
}

.panel-inverse>.panel-heading {
background: #242a30;
color:white;
}

.info{
height:100px;
overflow:hidden;
font-size:10px;
background:#2d353c;
color:white;
}

#pinfo,#tinfo{
position:absolute;
top:5px;
right:5px;
z-index:2;
opacity:0.3;
}

#plot,#plot2{
height:100px;
position:absolute;
left:50px;
top:0;
}

.widget{
border-radius:3px;
margin-bottom:10px;
color:#fff;
padding:15px;
overflow:hidden;
position:relative;
}

.stats-title{
color: #fff;
color: rgba(255,255,255,.6);
position: relative;
font-size: 12px;
line-height:24px;
float:left;
}

.stats-number{
font-size:24px;
font-weight:300;
float:right;
z-index:3
}

.stats-progress{
background:rgba(0,0,0,.2);
height:2px;
margin:0 -15px 2px;
z-index:4
}

.stats-progress .progress-bar{
background: #fff;
}

.bg-green{
background:#00acac!important;
}

.bg-blue{
background:#348fe2!important;
}

.bg-purple{
background:#727cb6!important;
}

.bg-black{
background:#2d353c!important;
}

#content{
margin-left:220px;
padding:10px;
}

#plot2{
opacity:0.4;
}

.lognum{
position:absolute;
color:white;
z-index:1000;
font-size:8px;
}

.lognum-green{
color:#00acac!important;
}

.lognum-blue{
color:#348fe2!important;
}

.lognum-purple{
color:#727cb6!important;
}

.dot{
height:2px;
width:2px;
border-radius:1px;
position:absolute;
z-index:200;
}

.navbar-header{
width:100%;
padding-right:15px;
}

.panel{
margin-bottom:10px;
}

#cd{
word-wrap:break-word;
}
</style>

</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="./qmpg.html">MDR-playground-beta</a>
</div>
</div>
</nav>

<div id="sidebar">
<div id="cd">
</div>
</div>

<div id="content">
<div class="container-fluid common-main" id="dashboard">
<div class="row" id="statsrow">

<div class="col-xs-3">
<div class="widget bg-black" id="plotfunc" style="position:relative">
<div class="stats-title">COST</div>
<div class="stats-number" id="cstats">0</div><br style="clear:both;">
<div id="plot"></div>
<div class="stats-progress progress">
<div class="progress-bar" style="width:100%;" id="cprogress"></div>
</div>
</div>
</div>

<div class="col-xs-3">
<div class="widget bg-blue">
<div class="stats-title">T</div>
<div class="stats-number" id="tstats">0</div><br style="clear:both;">
<div id="tinfo"></div>
<div class="stats-progress progress">
<div class="progress-bar" style="width:100%;" id="tprogress"></div>
</div>
</div>
</div>

<div class="col-xs-3">
<div class="widget bg-purple">
<div class="stats-title">FLIP</div>
<div class="stats-number" id="pstats">0</div><br style="clear:both;">
<div id="pinfo"></div>
<div class="stats-progress progress">
<div class="progress-bar" style="width:100%;" id="pprogress"></div>
</div>
</div>
</div>

<div class="col-xs-3">
<div class="widget bg-green" style="position:relative">
<div class="stats-title">TIME</div>
<div class="stats-number" id="ttstats">0</div><br style="clear:both;">
<div class="stats-progress progress">
<div class="progress-bar" style="width:0%;" id="ttprogress"></div>
</div>
</div>
</div>

</div>

<div class="row">
<div class="col-xs-9">
<div class="panel panel-inverse">
<div class="panel-heading">Ising Model</div>
<div class="panel-body main bg-black" id="mx"></div>
</div>
</div>

<div class="col-xs-3">

<div class="panel panel-inverse">
<div class=