# Quantum Annealing on Javascript

### Introduction

We cannot usually use the actual quantum computer or quantum machines. This time we introduce Quantum Annealing simulator on Javascript easy to use for website or web application combining your useful interface.

### Codes

Let’s see the codes.

Below we show the quantum annealing code with 150qubits and 50 trotters (number of parallel processes). The interactions between qubits are fixed to 1 this time.

The basic step for simulation is,

1. Initialize all the qubits. In quantum annealing all the qubits are initialized randomly. This time we have 150qubits with 50trotters, so we initialize totally 150*50qubits to +1 or -1
2. We use quantum monte carlo for this simulation. We initialize G=10 and reducing G with multiply 0.999 on every update of magnetic field 2000 times. On every G we calculate 50000 times for the state.
3. For each simulation we first select “trotter” and “qubit”. We calculate both the classical ising model Energy difference and Energy interaction between trotters.
4. Evaluating the Energy difference using Metropolis method, we decide to flip the qubit value.
5. We calculate step 2 to 4 until the state to stabilize.
``//Parameters var N = 150; var kT = 0.02; var G = 10; var q = []; var m = 50 ; var jij = 1; var loop = 50000;``
`` //Initialize qubits for(var j=0;j<m;j++){  q[j] = [];  for(var i=0;i<N;i++){   q[j][i] = Math.floor(Math.random()-0.5)*2+1;  }; };``
`` //Quantum Monte Carlo for(var l=0;l<2000;l++){  for(var k=0;k<loop;k++){   var y = Math.floor(Math.random()*m); //Randomly select trotter   var x = Math.floor(Math.random()*N); //Randomly select qubits   var dE = (jij*2*q[y][x]*q[y][(N+x-1)%N] + jij*2*q[y][x]*q[y][(x+1)%N])/m; //calc energy   var kk = G/kT/m;   var kk1 = Math.exp(kk);   var kk2 = Math.exp(-kk);   dE += q[y][x]*(q[(m+y-1)%m][x]+q[(y+1)%m][x])*Math.log((kk1+kk2)/(kk1-kk2))/kT;   if(dE<0 || Math.exp(-dE/kT)>Math.random()){ //Metropolis method    q[y][x] = -q[y][x]; //flip the qubit   };  };``
``  G = G*0.999; };``

### Implementation of Chimera graph

If you want to implement chimera graph which is the specific connection of qubits, you can realize it by limiting the connection of the ising model.

``var N = 512; var kT = 0.02; var G = 10; var q = []; var m = 256; var jij = 1; var hcell = 8; var hq = hcell*8;``
`` for(var j=0;j<m;j++){  q[j] = [];  for(var i=0;i<N;i++){   q[j][i] = Math.floor(Math.random()-0.5)*2+1;  }; };``
`` for(var l=0;l<600;l++){  for(var k=0;k<N*m;k++){   var x = Math.floor(Math.random()*N);   var y = Math.floor(Math.random()*m);   var xcell = Math.floor(x/8)*8;   if(x%8<4){    var dE = jij*2*q[y][x]*(q[y][xcell+4]+q[y][xcell+5]+q[y][xcell+6]+q[y][xcell+7]);    if(x<N-hq){     dE += jij*2*q[y][x]*(q[y][x+hq]);    }    if(x>hq-1){     dE += jij*2*q[y][x]*(q[y][x-hq]);    }   }else{    var dE = jij*2*q[y][x]*(q[y][xcell+0]+q[y][xcell+1]+q[y][xcell+2]+q[y][xcell+3]);    if(x%hq>7){     dE += jij*2*q[y][x]*q[y][x-8];    }    if(x%hq<hq-8){     dE += jij*2*q[y][x]*q[y][x+8];    }   }``
``   dE = dE/m;   var kk = G/kT/m;   var kk1 = Math.exp(kk);   var kk2 = Math.exp(-kk);   dE += q[y][x]*(q[(m+y-1)%m][x]+q[(y+1)%m][x])*Math.log((kk1+kk2)/(kk1-kk2))/kT;   if(dE<0 || Math.exp(-dE/kT)>Math.random()){    q[y][x] = -q[y][x];   };  };``
``  G = G*0.99; };``

### Implementation of Simulated annealing with chimera graph

You can also implement the simulated annealing algorithm similar to quantum annealing easily.

``var N = 2048;var kT = 5;var q = [];var jij = -1;var hcell = 16;var hq = hcell*8;``
``for(var i=0;i<N;i++){ q[i] = Math.floor(Math.random()-0.5)*2+1;};``
``for(var i=0;i<550;i++){ for(var k=0;k<N;k++){  var x = Math.floor(Math.random()*N);  var xcell = Math.floor(x/8)*8;  if(x%8<4){   var dE = jij*2*q[x]*(q[xcell+4]+q[xcell+5]+q[xcell+6]+q[xcell+7]);   if(x<N-hq){    dE += jij*2*q[x]*(q[x+hq]);   }   if(x>hq-1){    dE += jij*2*q[x]*(q[x-hq]);   }  }else{   var dE = jij*2*q[x]*(q[xcell+0]+q[xcell+1]+q[xcell+2]+q[xcell+3]);   if(x%hq>7){    dE += jij*2*q[x]*q[x-8];   }   if(x%hq<hq-8){    dE += jij*2*q[x]*q[x+8];   }  }  if(dE<0 || Math.exp(-dE/kT)>Math.random()){   q[x] = -q[x];  }; }``
`` kT= kT*0.99;};``

It’s quite easy and short.

### Visualization of Quantum Annealing

It html and javascript code, so you can visualize the process of calculation by using html canvas.

``<!doctype html><html><head> <style>body{font-size:10px;}</style></head><body>kT=0.02<br>G=<span id="GG"></span><br><br><canvas id="main" width="2000" height="900"></canvas><script> //parameters var N = 150; var kT = 0.02; var G = 10; var q = []; var m = 50 ; var jij = 1; var loop = 50000; //qbit initialize for(var j=0;j<m;j++){  q[j] = [];  for(var i=0;i<N;i++){   q[j][i] = Math.floor(Math.random()-0.5)*2+1;  }; }; //html5 canvas var canvas = document.getElementById('main'); var ctx = canvas.getContext('2d'); var anneal = setInterval(function(){  //monte carlo loop start  for(var k=0;k<loop;k++){   var y = Math.floor(Math.random()*m); //select random trotter   var x = Math.floor(Math.random()*N); //select random qbit   var dE = (jij*2*q[y][x]*q[y][(N+x-1)%N] + jij*2*q[y][x]*q[y][(x+1)%N])/m; //Energy difference calc   var kk = G/kT/m;   var kk1 = Math.exp(kk);   var kk2 = Math.exp(-kk);   dE += q[y][x]*(q[(m+y-1)%m][x]+q[(y+1)%m][x])*Math.log((kk1+kk2)/(kk1-kk2))/kT; //Quantum flactuation calc   if(dE<0 || Math.exp(-dE/kT)>Math.random()){ // Metropolis    q[y][x] = -q[y][x]; //flipping qbit   };  };  //updating drawing  ctx.clearRect(0,0,2000,900);  ctx.beginPath();  for(var j=0;j<m;j++){   for(var i=0;i<N;i++){    if(q[j][i]==1){     ctx.fillStyle = 'rgb(255,0,0)';    }else{     ctx.fillStyle = 'rgb(255,255,255)';    }    ctx.fillRect(i*7,j*8,5,5);   };  };  G = G*0.999;  if(G<0.1){ //finishing   clearInterval(anneal);  };  document.getElementById('GG').innerHTML = G; },1);</script></body></html>``

To watch the movement of qubits, it’s quite interesting. Please try see this on your computer.

### Visualization of Chimera graph

The visualization of chimera graph is also easy to implement using html canvas.

``<!doctype html><html><head><style>body{font-size:10px;}</style></head><body>G=<span id="GG"></span><br><br><canvas id="main" width="2000" height="900"></canvas><script> var N = 512; var kT = 0.02; var G = 10; var q = []; var m = 256; var jij = 1; var hcell = 8; var hq = hcell*8; var drawtrotter = 10; var alpha = 1/drawtrotter; for(var j=0;j<m;j++){  q[j] = [];  for(var i=0;i<N;i++){   q[j][i] = Math.floor(Math.random()-0.5)*2+1;  }; }; var canvas = document.getElementById('main'); var ctx = canvas.getContext('2d'); var anneal = setInterval(function(){  for(var k=0;k<N*m;k++){   var x = Math.floor(Math.random()*N);   var y = Math.floor(Math.random()*m);   var xcell = Math.floor(x/8)*8;   if(x%8<4){    var dE = jij*2*q[y][x]*(q[y][xcell+4]+q[y][xcell+5]+q[y][xcell+6]+q[y][xcell+7]);    if(x<N-hq){     dE += jij*2*q[y][x]*(q[y][x+hq]);    }    if(x>hq-1){     dE += jij*2*q[y][x]*(q[y][x-hq]);    }   }else{    var dE = jij*2*q[y][x]*(q[y][xcell+0]+q[y][xcell+1]+q[y][xcell+2]+q[y][xcell+3]);    if(x%hq>7){     dE += jij*2*q[y][x]*q[y][x-8];    }    if(x%hq<hq-8){     dE += jij*2*q[y][x]*q[y][x+8];    }   }   dE = dE/m;   var kk = G/kT/m;   var kk1 = Math.exp(kk);   var kk2 = Math.exp(-kk);   dE += q[y][x]*(q[(m+y-1)%m][x]+q[(y+1)%m][x])*Math.log((kk1+kk2)/(kk1-kk2))/kT;   if(dE<0 || Math.exp(-dE/kT)>Math.random()){    q[y][x] = -q[y][x];   };  };  ctx.clearRect(0,0,2000,900);  for(var j=0;j<10;j++){   for(var i=0;i<N;i++){    if(q[j][i]==1){     ctx.fillStyle = 'rgba(255,0,0,'+alpha+')';    }else{     ctx.fillStyle = 'rgba(0,0,0,0)';    }    if(i%8<4){     ctx.fillRect(3+i%8*7+Math.floor(i%hq/8)*40,Math.floor(i/hq)*40,3,30);    }else{     ctx.fillRect(Math.floor(i%hq/8)*40,i%8*7-25+Math.floor(i/hq)*40,30,3);    }   };  };  G = G*0.999;  document.getElementById('GG').innerHTML = G;  if(G<0.05){   clearInterval(anneal);  } },1);</script></body></html>``

### Result

It’s very useful to check the process of calculation on quantum annealing using javascript.