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

## はじめに

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

## コード

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

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

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

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

```<!doctype html>
<html>
<!-- Latest compiled and minified CSS -->

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

<script>

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');
};
};

};

};

initarray();
inittable();
qinit();
};

\$('#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();

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);
};

});

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{
width:220px;
position:fixed;
height:100%;
background:#2d353c;
top:0;
left:0;
color:white;
overflow:auto;
}

#sidebar input:focus{
outline:none;
}

.panel{
border:0;
}

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{
margin-bottom:10px;
color:#fff;
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;
}

#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;
position:absolute;
z-index:200;
}

width:100%;
}

.panel{
margin-bottom:10px;
}

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

<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<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">