Difference between revisions of "Template:SEU/toolJS"

Latest revision as of 11:23, 19 October 2019

var DNAspace=9;//| | | | var DNAwid=18; var DNAstep=3; var arrowLen=6; var arrowHeadLen=12; var DNAseperate=36; var Font="0px Arial"; var FontDescription="20px Arial"; var fontSpace=3; var Black=[0,0,0]; var reacArrowLen=60; var reacArrowHeadLen=9; var longDNAlen=40; var shortDNAlen=32; var arrowSin=0.4; var arrowCos=Math.sqrt(1-arrowSin*arrowSin); var line45Angle=Math.asin(arrowSin); var arrowAngle=line45Angle*0.7; var longDNAlen=30; var shortDNAlen=15; var fontSpaceRatio=2; //color and name //name var d="d"; var xp="x+",xn="x-"; var y="y",yn="y-"; var waste="waste"; var wi0p=[],wi0n=[]; var wip=[],win=[]; var inputp=[],inputn=[]; var inputpBkp=[],inputnBkp=[]; //color var dColor=[]; var xpColor=[]; var xnColor=[]; var yColor=[]; var ynColor=[]; var wasteColor=[0,0,0]; var inputpColor=[],inputnColor=[]; var inputpBkpColor=[],inputnBkpColor=[]; var wi0pColor=[],wi0nColor=[]; var wipColor=[],winColor=[]; var state=0;//part of reaction to print var seqDict=[[]]; var lis=[]; var seqFile=[]; var weightNum=1;

function draw() {

weightNum=document.getElementById("number").value; if (weightNum>8) { alreadySubmit.innerHTML="Too many inputs for a single neuron!"; } else{ //alreadySubmit.innerHTML="Generating a neuron with "+weightNum+" inputs...
"; seqDict=[[]]; seqFile=[]; drawNeuron(weightNum); alreadySubmit.innerHTML="Successfully generated a neuron with "+weightNum+" inputs!
Click the three buttons below to see reactions corresponding to each step!
"; } }

function setCanvans(height){ var canv = document.getElementById("words"); canv.innerHTML="<canvas id=\"canvas\" width=\"1700\" height=\""+height+"\"></canvas>
" }

function showSeq(){

   var seqs = document.getElementById("sequence");

seqs.innerHTML=""; for(var i=0;i<lis.length;i++){ seqs.innerHTML=seqs.innerHTML+lis[i]+"
"; } } function windowSeq(){ var content=""; for(var i=0;i<seqFile.length;i++){ content+=seqFile[i]; } var eleLink = document.createElement('a');

   eleLink.download = "sequence.txt";
   eleLink.style.display = 'none';
   // 字符内容转变成blob地址
   var blob = new Blob([content]);
   eleLink.href = URL.createObjectURL(blob);
   // 触发点击
   document.body.appendChild(eleLink);
   eleLink.click();
   // 然后移除
   document.body.removeChild(eleLink);

}

function verticalLine(ctx,len,[x,y],[R,G,B]){ ctx.strokeStyle='rgb('+R+','+G+','+B+')'; ctx.beginPath(); ctx.moveTo(x,y); ctx.lineTo(x,y+len); ctx.stroke(); }

function horizontalDashedLine(ctx,name,len,[x,y],[R,G,B],step){ ctx.strokeStyle='rgb('+R+','+G+','+B+')'; ctx.beginPath(); for(var i=0;i<=len-1;i+=2*step){ ctx.moveTo(x+i,y); ctx.lineTo(x+i+step,y); ctx.stroke(); } ctx.font = Font; ctx.fillStyle='rgb('+R+','+G+','+B+')'; ctx.fillText(name,x,y-fontSpace); }

function up45RightLine(ctx,name,len,[x,y],[R,G,B]){ ctx.strokeStyle='rgb('+R+','+G+','+B+')'; ctx.beginPath(); ctx.moveTo(x,y); ctx.lineTo(x+arrowCos*len,y-arrowSin*len); ctx.stroke(); ctx.font = Font; ctx.fillStyle='rgb('+R+','+G+','+B+')'; ctx.fillText(name,x+len/2,y-fontSpace); }

function up45DashedRightLine(ctx,name,len,[x,y],[R,G,B],step){ ctx.strokeStyle='rgb('+R+','+G+','+B+')'; ctx.beginPath(); for(var i=0;i<=len-1;i+=2*step){ ctx.moveTo(x+arrowCos*i,y-arrowSin*i); ctx.lineTo(x+arrowCos*(i+step),y-arrowSin*(i+step)); ctx.stroke(); } ctx.font = Font; ctx.fillStyle='rgb('+R+','+G+','+B+')'; ctx.fillText(name,x+len/2,y-fontSpace); }

function up45LeftLine(ctx,name,len,[x,y],[R,G,B]){ ctx.strokeStyle='rgb('+R+','+G+','+B+')'; ctx.beginPath(); ctx.moveTo(x,y); ctx.lineTo(x-arrowCos*len,y-arrowSin*len); ctx.stroke(); ctx.font = Font; ctx.fillStyle='rgb('+R+','+G+','+B+')'; ctx.fillText(name,x-len/2,y-len/2-fontSpace); }

function up45DashedLeftLine(ctx,len,[x,y],[R,G,B],step){ ctx.strokeStyle='rgb('+R+','+G+','+B+')'; ctx.beginPath(); for(var i=0;i<=len-1;i+=2*step){ ctx.moveTo(x-arrowCos*i,y-arrowSin*i); ctx.lineTo(x-arrowCos*(i+step),y-arrowSin*(i+step)); ctx.stroke(); } }

function down45LeftLine(ctx,len,[x,y],[R,G,B]){ ctx.strokeStyle='rgb('+R+','+G+','+B+')'; ctx.beginPath(); ctx.moveTo(x,y); ctx.lineTo(x-arrowCos*len,y+arrowSin*len); ctx.stroke(); }

function down45DashedLeftLine(ctx,len,[x,y],[R,G,B],step){ ctx.strokeStyle='rgb('+R+','+G+','+B+')'; ctx.beginPath(); for(var i=0;i<=len-1;i+=2*step){ ctx.moveTo(x-arrowCos*i,y+arrowSin*i); ctx.lineTo(x-arrowCos*(i+step),y+arrowSin*(i+step)); ctx.stroke(); } }

function arrowHorizontalRight(ctx,name,len,[x,y],[R,G,B],arrowLen,arrowAngle){ ctx.strokeStyle='rgb('+R+','+G+','+B+')'; ctx.beginPath(); ctx.moveTo(x,y); ctx.lineTo(x+len,y); //right ctx.moveTo(x+len-Math.floor(arrowLen*Math.cos(arrowAngle)), y-Math.floor(arrowLen*Math.sin(arrowAngle))); ctx.lineTo(x+len,y); //left ctx.moveTo(x+len-Math.floor(arrowLen*Math.cos(arrowAngle)), y+Math.floor(arrowLen*Math.sin(arrowAngle))); ctx.lineTo(x+len,y); ctx.stroke(); ctx.font = Font; ctx.fillStyle='rgb('+R+','+G+','+B+')'; ctx.fillText(name,x+len/2,y-fontSpace); }

function arrowHorizontalLeft(ctx,name,len,[x,y],[R,G,B],arrowLen,arrowAngle){ ctx.strokeStyle='rgb('+R+','+G+','+B+')'; ctx.beginPath(); //right ctx.moveTo(x+Math.floor(arrowLen*Math.cos(arrowAngle)), y-Math.floor(arrowLen*Math.sin(arrowAngle))); ctx.lineTo(x+len,y); //left ctx.moveTo(x+Math.floor(arrowLen*Math.cos(arrowAngle)), y+Math.floor(arrowLen*Math.sin(arrowAngle)));

ctx.lineTo(x+len,y); ctx.moveTo(x,y); ctx.lineTo(x+len,y);

ctx.stroke();

ctx.font = Font; ctx.fillStyle='rgb('+R+','+G+','+B+')'; ctx.fillText(name,x+len/2,y-fontSpace); }

function arrowDashedHorizontalRight(ctx,name,len,[x,y],[R,G,B],arrowLen,arrowAngle,step){ ctx.strokeStyle='rgb('+R+','+G+','+B+')'; ctx.beginPath(); ctx.moveTo(x,y); for(var i=0;i<=len-1;i+=2*step){ ctx.moveTo(x+i,y); ctx.lineTo(x+i+step,y); ctx.stroke(); } //right ctx.moveTo(x+len-Math.floor(arrowLen*Math.cos(arrowAngle)), y-Math.floor(arrowLen*Math.sin(arrowAngle))); ctx.lineTo(x+len,y); //left ctx.moveTo(x+len-Math.floor(arrowLen*Math.cos(arrowAngle)), y+Math.floor(arrowLen*Math.sin(arrowAngle))); ctx.lineTo(x+len,y); ctx.stroke(); ctx.font = Font; ctx.fillStyle='rgb('+R+','+G+','+B+')'; ctx.fillText(name,x+len/2,y-fontSpace); }

function arrowDashedHorizontalLeft(ctx,name,len,[x,y],[R,G,B],arrowLen,arrowAngle,step){ ctx.strokeStyle='rgb('+R+','+G+','+B+')'; ctx.beginPath(); //right ctx.moveTo(x+Math.floor(arrowLen*Math.cos(arrowAngle)), y-Math.floor(arrowLen*Math.sin(arrowAngle))); ctx.lineTo(x,y); //left ctx.moveTo(x+Math.floor(arrowLen*Math.cos(arrowAngle)), y+Math.floor(arrowLen*Math.sin(arrowAngle))); ctx.lineTo(x,y); ctx.moveTo(x,y); for(var i=0;i<=len-1;i+=2*step){ ctx.moveTo(x+i,y); ctx.lineTo(x+i+step,y); ctx.stroke(); } ctx.font = Font; ctx.fillStyle='rgb('+R+','+G+','+B+')'; ctx.fillText(name,x+len/2,y-fontSpace); }

// function arrowUpRight45(ctx,lenInAxis,[x,y],[R,G,B],arrowLen,arrowAngle){//arrowAngle:theta,best:Math.PI/8 // ctx.strokeStyle='rgb('+R+','+G+','+B+')'; // ctx.beginPath(); // ctx.moveTo(x,y); // ctx.lineTo(x+arrowCos*lenInAxis,y-arrowSin*lenInAxis); // //right // ctx.moveTo(x+arrowCos*lenInAxis-Math.floor(arrowLen*Math.cos(Math.PI/2-arrowAngle)), // y-arrowSin*lenInAxis+Math.floor(arrowLen*Math.sin(Math.PI/2-arrowAngle))); // ctx.lineTo(x+arrowCos*lenInAxis,y-arrowSin*lenInAxis); // //left // ctx.moveTo(x+arrowCos*lenInAxis-Math.floor(arrowLen*Math.sin(Math.PI/2-arrowAngle)), // y-arrowSin*lenInAxis+Math.floor(arrowLen*Math.cos(Math.PI/2-arrowAngle))); // ctx.lineTo(x+arrowCos*lenInAxis,y-arrowSin*lenInAxis); // ctx.stroke(); // }

function arrowDashedUpRight45(ctx,name,lenInAxis,[x,y],[R,G,B],arrowLen,arrowAngle,stepInAxis){//arrowAngle:theta ctx.strokeStyle='rgb('+R+','+G+','+B+')'; ctx.beginPath(); for(var i=0;i<=lenInAxis-1;i+=2*stepInAxis){ ctx.moveTo(x+arrowCos*i,y-arrowSin*i); ctx.lineTo(x+arrowCos*(i+stepInAxis),y-arrowSin*(i+stepInAxis)); ctx.stroke(); } //right half arrow head ctx.moveTo(x+arrowCos*lenInAxis-Math.floor(arrowLen*Math.cos(arrowAngle-line45Angle)), y-arrowSin*lenInAxis+Math.floor(arrowLen*Math.sin(line45Angle-arrowAngle))); ctx.lineTo(x+arrowCos*lenInAxis,y-arrowSin*lenInAxis); //left half arrow head ctx.moveTo(x+arrowCos*lenInAxis-Math.floor(arrowLen*Math.sin(Math.PI/2-line45Angle-arrowAngle)), y-arrowSin*lenInAxis+Math.floor(arrowLen*Math.cos(Math.PI/2-line45Angle-arrowAngle))); ctx.lineTo(x+arrowCos*lenInAxis,y-arrowSin*lenInAxis); ctx.stroke(); ctx.font = Font; ctx.fillStyle='rgb('+R+','+G+','+B+')'; ctx.fillText(name,x+lenInAxis/2,y-fontSpace); }

// function arrowDownLeft45(ctx,lenInAxis,[x,y],[R,G,B],arrowLen,arrowAngle){//arrowAngle:theta,best:Math.PI/8 // ctx.strokeStyle='rgb('+R+','+G+','+B+')'; // ctx.beginPath(); // ctx.moveTo(x,y); // ctx.lineTo(x-arrowCos*lenInAxis,y+arrowSin*lenInAxis); // //right // ctx.moveTo(x-arrowCos*lenInAxis+Math.floor(arrowLen*Math.cos(Math.PI/2-arrowAngle)), // y+arrowSin*lenInAxis-Math.floor(arrowLen*Math.sin(Math.PI/2-arrowAngle))); // ctx.lineTo(x-arrowCos*lenInAxis,y+arrowSin*lenInAxis); // //left // ctx.moveTo(x-arrowCos*lenInAxis+Math.floor(arrowLen*Math.sin(Math.PI/2-arrowAngle)), // y+arrowSin*lenInAxis-Math.floor(arrowLen*Math.cos(Math.PI/2-arrowAngle))); // ctx.lineTo(x-arrowCos*lenInAxis,y+arrowSin*lenInAxis); // ctx.stroke(); // }

function arrowDashedDownLeft45(ctx,name,lenInAxis,[x,y],[R,G,B],arrowLen,arrowAngle,stepInAxis){//arrowAngle:theta ctx.strokeStyle='rgb('+R+','+G+','+B+')'; ctx.fillStyle='rgb('+R+','+G+','+B+')'; ctx.beginPath(); for(var i=0;i<=lenInAxis-1;i+=2*stepInAxis){ ctx.moveTo(x-arrowCos*i,y+arrowSin*i); ctx.lineTo(x-arrowCos*(i+stepInAxis),y+arrowSin*(i+stepInAxis)); ctx.stroke(); } //right ctx.moveTo(x-arrowCos*lenInAxis+Math.floor(arrowLen*Math.cos(line45Angle-arrowAngle)), y+arrowSin*lenInAxis-Math.floor(arrowLen*Math.sin(line45Angle-arrowAngle))); ctx.lineTo(x-arrowCos*lenInAxis,y+arrowSin*lenInAxis); //left half arrow head ctx.moveTo(x-arrowCos*lenInAxis+Math.floor(arrowLen*Math.sin(Math.PI/2-line45Angle-arrowAngle)), y+arrowSin*lenInAxis-Math.floor(arrowLen*Math.cos(Math.PI/2-line45Angle-arrowAngle))); ctx.lineTo(x-arrowCos*lenInAxis,y+arrowSin*lenInAxis); ctx.stroke();

ctx.font = Font; ctx.fillText(name,x-lenInAxis/2,y+lenInAxis/2+fontSpace); }

function drawDoubleDNAnoArrow(ctx,DNAname,DNAlen,[R,G,B],[posX,posY]){ horizontalLine(ctx,DNAname,DNAlen,[posX,posY],[R,G,B]); for(var i=DNAspace/2;i<=DNAlen;i+=DNAspace){ verticalLine(ctx,DNAwid,[posX+i,posY],[R,G,B]); } horizontalLine(ctx,' ',DNAlen,[posX,posY+DNAwid],[R,G,B]); }

function drawDoubleDNAwithArrowHorizontalRight(ctx,DNAname,DNAlen,[R,G,B],[posX,posY]){ arrowHorizontalRight(ctx,DNAname,DNAlen,[posX,posY],[R,G,B],arrowHeadLen,arrowAngle); for(var i=DNAspace/2;i<=DNAlen;i+=DNAspace){ verticalLine(ctx,DNAwid,[posX+i,posY],[R,G,B]); } horizontalLine(ctx,' ',DNAlen,[posX,posY+DNAwid],[R,G,B]); }

function drawDoubleDNAwithArrowHorizontalLeft(ctx,DNAname,DNAlen,[R,G,B],[posX,posY]){ horizontalLine(ctx,DNAname,DNAlen,[posX,posY+DNAwid],[R,G,B]); for(var i=DNAspace/2;i<=DNAlen;i+=DNAspace){ verticalLine(ctx,DNAwid,[posX+i,posY],[R,G,B]); } arrowHorizontalLeft(ctx,' ',DNAlen,[posX,posY-DNAwid],[R,G,B],arrowHeadLen,arrowAngle); }

function drawDoubleDNAwithArrow45(ctx,DNAname,DNAlen,[R,G,B],[posX,posY]){ horizontalLine(ctx,DNAlen,[posX,posY],[R,G,B]); for(var i=DNAspace/2;i<=DNAlen;i+=DNAspace){ verticalLine(ctx,DNAwid,[posX+i,posY],[R,G,B]); } horizontalLine(ctx,DNAlen,[posX,posY+DNAwid],[R,G,B]); arrow45(ctx,arrowLen,[posX+DNAlen,posY],[R,G,B],arrowHeadLen,arrowAngle); }

function drawDoubleDNADashednoArrow(ctx,DNAname,DNAlen,[R,G,B],[posX,posY]){ horizontalDashedLine(ctx,DNAname,DNAlen,[posX,posY],[R,G,B],DNAstep); for(var i=DNAspace/2;i<=DNAlen;i+=DNAspace){ verticalLine(ctx,DNAwid,[posX+i,posY],[R,G,B]); } horizontalDashedLine(ctx,' ',DNAlen,[posX,posY+DNAwid],[R,G,B],DNAstep); }

function drawDoubleDNADashedwithArrowHorizontalRight(ctx,DNAname,DNAlen,[R,G,B],[posX,posY]){ arrowDashedHorizontalRight(ctx,DNAname,DNAlen,[posX,posY],[R,G,B],arrowHeadLen,arrowAngle,DNAstep); for(var i=DNAspace/2;i<=DNAlen;i+=DNAspace){ verticalLine(ctx,DNAwid,[posX+i,posY],[R,G,B]); } horizontalDashedLine(ctx,' ',DNAlen,[posX,posY+DNAwid],[R,G,B],DNAstep); }

function drawDoubleDNADashedwithArrowHorizontalLeft(ctx,DNAname,DNAlen,[R,G,B],[posX,posY]){ horizontalDashedLine(ctx,DNAname,DNAlen,[posX,posY],[R,G,B],DNAstep); for(var i=DNAspace/2;i<=DNAlen;i+=DNAspace){ verticalLine(ctx,DNAwid,[posX+i,posY],[R,G,B]); } arrowDashedHorizontalLeft(ctx,' ',DNAlen,[posX,posY+DNAwid],[R,G,B],arrowHeadLen,arrowAngle,DNAstep); }

function drawDoubleDNADashedwithArrow45(ctx,DNAname,DNAlen,[R,G,B],[posX,posY]){ horizontalDashedLine(ctx,DNAlen,[posX,posY],[R,G,B],DNAstep); for(var i=DNAspace/2;i<=DNAlen;i+=DNAspace){ verticalLine(ctx,DNAwid,[posX+i,posY],[R,G,B]); } horizontalDashedLine(ctx,DNAlen,[posX,posY+DNAwid],[R,G,B],DNAstep); arrow45(ctx,arrowLen,[posX+DNAlen,posY],[R,G,B],arrowHeadLen,arrowAngle); }

function showSpeciesName(ctx,str,[X,Y],sep=DNAseperate){//use before showing a species Y+=DNAseperate; X+=sep; displayStr(ctx,str,[X,Y],Black); }

//According to Fig. 11 function drawMul(ctx,aName,bName,cName,aColor,bColor,cColor,[X0,Y0],longDNAlen,shortDNAlen){//c=a*b //rectangular var maxX=0,maxY=0; //exponential factor var Black=[0,0,0]; var X=X0; var Y=Y0; var Da="D"+aName; var al=aName+"l"; var a=aName; var ar=aName+"r"; var Db="D"+bName; var bl=bName+"l"; var b=bName; var br=bName+"r"; var Dc="D"+cName; var cl=cName+"l"; var c=cName; var cr=cName+"r";

displayStr(ctx,'input',[X,Y],Black); X+=DNAseperate*fontSpaceRatio; showSpeciesName(ctx,aName,[X,Y]); X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen); showSpeciesName(ctx,bName,[X,Y]); X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen);

displayStr(ctx,'output',[X,Y],Black); X+=DNAseperate*fontSpaceRatio; showSpeciesName(ctx,cName,[X,Y]); X=drawSig(ctx,cName,cColor,[X,Y],longDNAlen,shortDNAlen); Y0=Y0+4*DNAseperate; Y=Y0; X=X0; showSpeciesName(ctx,aName,[X,Y]); X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen); //Wi showSpeciesName(ctx,"Wi",[X,Y],DNAseperate/2); arrowDashedDownLeft45(ctx,al+"*",shortDNAlen,[X,Y+DNAwid],aColor,arrowHeadLen,arrowAngle,DNAstep); drawDoubleDNAnoArrow(ctx,a,longDNAlen,aColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashedwithArrowHorizontalRight(ctx,ar,shortDNAlen,aColor,[X,Y]);

X=X+shortDNAlen+DNAseperate*2; arrowReac(ctx,reacArrowLen,reacArrowHeadLen,[X,Y]);

//waste X=X+reacArrowLen+DNAseperate*2; showSpeciesName(ctx,"waste",[X,Y],DNAseperate/2); up45LeftLine(ctx,Da,longDNAlen,[X,Y],Black); drawDoubleDNADashedwithArrowHorizontalLeft(ctx,al,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,a,longDNAlen,aColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashedwithArrowHorizontalRight(ctx,ar,shortDNAlen,aColor,[X,Y]); //waste X=X+shortDNAlen+DNAseperate; showSpeciesName(ctx,"waste",[X,Y],DNAseperate/2); horizontalLine(ctx,a,longDNAlen,[X,Y],aColor); X=X+longDNAlen; arrowDashedHorizontalRight(ctx,ar,shortDNAlen,[X,Y],aColor,arrowLen,arrowAngle,DNAstep); if(X+shortDNAlen>maxX) maxX=X+shortDNAlen; //Multiplication //Line 1 X=X0; Y=Y0+4*DNAseperate; showSpeciesName(ctx,aName,[X,Y]); X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen); //Li showSpeciesName(ctx,"Li",[X,Y]); arrowDashedDownLeft45(ctx,al+"*",shortDNAlen,[X,Y+DNAwid],aColor,arrowHeadLen,arrowAngle,DNAstep); drawDoubleDNAnoArrow(ctx,a,longDNAlen,aColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,ar,shortDNAlen,aColor,[X,Y]); X=X+shortDNAlen; drawDoubleDNADashedwithArrowHorizontalRight(ctx,bl,shortDNAlen,bColor,[X,Y]); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,b,longDNAlen,bColor,[X,Y]); X=X+arrowCos*longDNAlen; drawDoubleDNADashednoArrow(ctx,br,shortDNAlen,bColor,[X,Y]); X=X+shortDNAlen; up45RightLine(ctx,Da,longDNAlen,[X,Y],Black); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; up45DashedRightLine(ctx,al,shortDNAlen,[X,Y],aColor,DNAstep); X=X+arrowCos*shortDNAlen; Y=Y-arrowSin*shortDNAlen; up45RightLine(ctx,Db,longDNAlen,[X,Y],Black); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; up45DashedRightLine(ctx,bl,shortDNAlen,[X,Y],bColor,DNAstep); X=X+arrowCos*shortDNAlen; Y=Y-arrowSin*shortDNAlen; up45RightLine(ctx,Dc,longDNAlen,[X,Y],Black); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; arrowDashedUpRight45(ctx,cl,shortDNAlen,[X,Y],cColor,arrowHeadLen,arrowAngle,DNAstep);

X=X+arrowCos*shortDNAlen+DNAseperate*2; Y=Y0+4*DNAseperate; revArrowReac(ctx,reacArrowLen,reacArrowHeadLen,[X,Y]);

X=X+reacArrowLen+2*DNAseperate; //Hi showSpeciesName(ctx,"Hi",[X,Y]); up45LeftLine(ctx,Da,longDNAlen,[X,Y],Black); drawDoubleDNADashedwithArrowHorizontalLeft(ctx,al,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,a,longDNAlen,aColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,ar,shortDNAlen,aColor,[X,Y]); X=X+shortDNAlen; horizontalDashedLine(ctx,bl+"*",shortDNAlen,[X,Y+DNAwid],bColor,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,b,longDNAlen,bColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,br,shortDNAlen,bColor,[X,Y]); X=X+shortDNAlen; up45RightLine(ctx,Da,longDNAlen,[X,Y],Black); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; up45DashedRightLine(ctx,al,shortDNAlen,[X,Y],aColor,DNAstep); X=X+arrowCos*shortDNAlen; Y=Y-arrowSin*shortDNAlen; up45RightLine(ctx,Db,longDNAlen,[X,Y],Black); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; up45DashedRightLine(ctx,bl,shortDNAlen,[X,Y],bColor,DNAstep); X=X+arrowCos*shortDNAlen; Y=Y-arrowSin*shortDNAlen; up45RightLine(ctx,Dc,longDNAlen,[X,Y],Black);

X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; arrowDashedUpRight45(ctx,cl,shortDNAlen,[X,Y],cColor,arrowHeadLen,arrowAngle,DNAstep); //Bi X=X+DNAseperate; Y=Y0+4*DNAseperate; showSpeciesName(ctx,"Bi",[X,Y]); horizontalLine(ctx,a,longDNAlen,[X,Y],aColor); X=X+longDNAlen; horizontalDashedLine(ctx,ar,shortDNAlen,[X,Y],aColor,DNAstep); X=X+shortDNAlen; arrowDashedHorizontalRight(ctx,bl,shortDNAlen,[X,Y],bColor,arrowHeadLen,arrowAngle,DNAstep); if(X+shortDNAlen>maxX) maxX=X+shortDNAlen; //Line 2 X=X0; Y=Y0+8*DNAseperate; showSpeciesName(ctx,bName,[X,Y]); X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen); //Hi showSpeciesName(ctx,"Hi",[X,Y]); up45LeftLine(ctx,Da,longDNAlen,[X,Y],Black); drawDoubleDNADashedwithArrowHorizontalLeft(ctx,al,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,a,longDNAlen,aColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,ar,shortDNAlen,aColor,[X,Y]); X=X+shortDNAlen; horizontalDashedLine(ctx,bl+"*",shortDNAlen,[X,Y+DNAwid],bColor,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,b,longDNAlen,bColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,br,shortDNAlen,bColor,[X,Y]); X=X+shortDNAlen; up45RightLine(ctx,Da,longDNAlen,[X,Y],Black); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; up45DashedRightLine(ctx,al,shortDNAlen,[X,Y],aColor,DNAstep); X=X+arrowCos*shortDNAlen; Y=Y-arrowSin*shortDNAlen; up45RightLine(ctx,Db,longDNAlen,[X,Y],Black); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; up45DashedRightLine(ctx,bl,shortDNAlen,[X,Y],bColor,DNAstep); X=X+arrowCos*shortDNAlen; Y=Y-arrowSin*shortDNAlen; up45RightLine(ctx,Dc,longDNAlen,[X,Y],Black); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; arrowDashedUpRight45(ctx,cl,shortDNAlen,[X,Y],cColor,arrowHeadLen,arrowAngle,DNAstep);

X=X+arrowCos*shortDNAlen+DNAseperate*2; Y=Y0+8*DNAseperate; arrowReac(ctx,reacArrowLen,reacArrowHeadLen,[X,Y]);

X=X+reacArrowLen+2*DNAseperate;

//waste showSpeciesName(ctx,"waste",[X,Y]); up45LeftLine(ctx,Da,longDNAlen,[X,Y],Black); drawDoubleDNADashedwithArrowHorizontalLeft(ctx,al,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,a,longDNAlen,aColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashedwithArrowHorizontalRight(ctx,ar,shortDNAlen,aColor,[X,Y]); X=X+shortDNAlen; up45LeftLine(ctx,Db,longDNAlen,[X,Y],Black); drawDoubleDNADashedwithArrowHorizontalLeft(ctx,bl,shortDNAlen,bColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,b,longDNAlen,bColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashedwithArrowHorizontalRight(ctx,br,shortDNAlen,bColor,[X,Y]);

X=X+shortDNAlen+DNAseperate;

//Oi showSpeciesName(ctx,"Oi",[X,Y]); horizontalLine(ctx,b,longDNAlen,[X,Y],bColor); X=X+longDNAlen; horizontalDashedLine(ctx,br,shortDNAlen,[X,Y],bColor,DNAstep); X=X+shortDNAlen; horizontalLine(ctx,Da,longDNAlen,[X,Y],Black); X=X+longDNAlen; horizontalDashedLine(ctx,al,shortDNAlen,[X,Y],aColor,DNAstep); X=X+shortDNAlen; horizontalLine(ctx,Db,longDNAlen,[X,Y],Black); X=X+longDNAlen; horizontalDashedLine(ctx,bl,shortDNAlen,[X,Y],bColor,DNAstep); X=X+shortDNAlen; horizontalLine(ctx,Dc,longDNAlen,[X,Y],Black); X=X+longDNAlen; arrowDashedHorizontalRight(ctx,cl,shortDNAlen,[X,Y],cColor,arrowHeadLen,arrowAngle,DNAstep); if(X+shortDNAlen>maxX) maxX=X+shortDNAlen; //Line 3 X=X0; Y=Y0+12*DNAseperate; //Oi showSpeciesName(ctx,"Oi",[X,Y]); horizontalLine(ctx,b,longDNAlen,[X,Y],bColor); X=X+longDNAlen; horizontalDashedLine(ctx,br,shortDNAlen,[X,Y],bColor,DNAstep); X=X+shortDNAlen; horizontalLine(ctx,Da,longDNAlen,[X,Y],Black); X=X+longDNAlen; horizontalDashedLine(ctx,al,shortDNAlen,[X,Y],aColor,DNAstep); X=X+shortDNAlen; horizontalLine(ctx,Db,longDNAlen,[X,Y],Black); X=X+longDNAlen; horizontalDashedLine(ctx,bl,shortDNAlen,[X,Y],bColor,DNAstep); X=X+shortDNAlen; horizontalLine(ctx,Dc,longDNAlen,[X,Y],Black); X=X+longDNAlen; arrowDashedHorizontalRight(ctx,cl,shortDNAlen,[X,Y],cColor,arrowHeadLen,arrowAngle,DNAstep);

X=X+DNAseperate; //Ti showSpeciesName(ctx,"Ti",[X,Y]); arrowDashedDownLeft45(ctx,br+"*",shortDNAlen,[X,Y+DNAwid],bColor,arrowHeadLen,arrowAngle,DNAstep); drawDoubleDNAnoArrow(ctx,Da,longDNAlen,Black,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,al,shortDNAlen,aColor,[X,Y]); X=X+shortDNAlen; up45RightLine(ctx,a,longDNAlen,[X,Y],aColor); arrowDashedUpRight45(ctx,ar,shortDNAlen,[X+arrowCos*longDNAlen,Y-arrowSin*longDNAlen],aColor,arrowHeadLen,arrowAngle,DNAstep); drawDoubleDNAnoArrow(ctx,Db,longDNAlen,Black,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,bl,shortDNAlen,bColor,[X,Y]); X=X+shortDNAlen; up45RightLine(ctx,b,longDNAlen,[X,Y],bColor); arrowDashedUpRight45(ctx,br,shortDNAlen,[X+arrowCos*longDNAlen,Y-arrowSin*longDNAlen],bColor,arrowHeadLen,arrowAngle,DNAstep); drawDoubleDNAnoArrow(ctx,Dc,longDNAlen,Black,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,cl,shortDNAlen,cColor,[X,Y]); X=X+shortDNAlen; up45RightLine(ctx,c,longDNAlen,[X,Y],cColor); arrowDashedUpRight45(ctx,cr,shortDNAlen,[X+arrowCos*longDNAlen,Y-arrowSin*longDNAlen],cColor,arrowHeadLen,arrowAngle,DNAstep);

X=X+arrowCos*shortDNAlen+DNAseperate*2; arrowReac(ctx,reacArrowLen,reacArrowHeadLen,[X,Y]); //waste X=X+reacArrowLen+2*DNAseperate; showSpeciesName(ctx,"waste",[X,Y]); up45LeftLine(ctx,b,longDNAlen,[X,Y],bColor); drawDoubleDNADashedwithArrowHorizontalLeft(ctx,br,shortDNAlen,bColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,Da,longDNAlen,Black,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,al,shortDNAlen,aColor,[X,Y]); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,Db,longDNAlen,Black,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,bl,shortDNAlen,bColor,[X,Y]); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,Dc,longDNAlen,Black,[X,Y]); X=X+longDNAlen; drawDoubleDNADashedwithArrowHorizontalRight(ctx,cl,shortDNAlen,cColor,[X,Y]);

X=X+shortDNAlen+DNAseperate; showSpeciesName(ctx,aName,[X,Y]); X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen); showSpeciesName(ctx,bName,[X,Y]); X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen); showSpeciesName(ctx,cName,[X,Y]); X=drawSig(ctx,cName,cColor,[X,Y],longDNAlen,shortDNAlen);

Y0-=4*DNAseperate; if(X+shortDNAlen>maxX) maxX=X+shortDNAlen; maxX+=2*DNAseperate; maxY=Y+2*DNAseperate; ctx.strokeStyle='rgb('+0+','+0+','+0+')'; ctx.moveTo(X0-DNAseperate,Y0-DNAseperate); ctx.lineTo(maxX,Y0-DNAseperate); ctx.moveTo(X0-DNAseperate,Y0-DNAseperate); ctx.lineTo(X0-DNAseperate,maxY); ctx.moveTo(maxX,maxY); ctx.lineTo(maxX,Y0-DNAseperate); ctx.moveTo(maxX,maxY); ctx.lineTo(X0-DNAseperate,maxY); ctx.stroke(); displayStr(ctx,"multiplication",[X0-DNAseperate,Y0-DNAseperate-fontSpace],Black); return Y; }

//ReLU weighted summation function drawMulReLU(ctx,aName,bName,cName,dName,aColor,bColor,cColor,dColor,[X0,Y0],longDNAlen,shortDNAlen){//c=a*b //rectangular var maxX=0,maxY=0; //exponential factor var X=X0; var Y=Y0; var Da="D"+aName; var al=aName+"l"; var a=aName; var ar=aName+"r"; var Db="D"+bName; var bl=bName+"l"; var b=bName; var br=bName+"r"; var Dc="D"+cName; var cl=cName+"l"; var c=cName; var cr=dName+"r"; var Dd="D"+dName; var dl=dName+"l"; var d=dName; var dr=dName+"r";

displayStr(ctx,'input',[X,Y],Black); X+=DNAseperate*fontSpaceRatio; showSpeciesName(ctx,aName,[X,Y]); X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen); showSpeciesName(ctx,bName,[X,Y]); X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen); displayStr(ctx,'output',[X,Y],Black); X+=DNAseperate*fontSpaceRatio; showSpeciesName(ctx,cName,[X,Y]); X=drawSig(ctx,cName,cColor,[X,Y],longDNAlen,shortDNAlen); showSpeciesName(ctx,dName,[X,Y]); X=drawSig(ctx,dName,dColor,[X,Y],longDNAlen,shortDNAlen); Y0=Y0+4*DNAseperate; Y=Y0; X=X0; showSpeciesName(ctx,aName,[X,Y]); X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen); //Wi showSpeciesName(ctx,"Wi",[X,Y],DNAseperate/2); arrowDashedDownLeft45(ctx,al+"*",shortDNAlen,[X,Y+DNAwid],aColor,arrowHeadLen,arrowAngle,DNAstep); drawDoubleDNAnoArrow(ctx,a,longDNAlen,aColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashedwithArrowHorizontalRight(ctx,ar,shortDNAlen,aColor,[X,Y]);

X=X+shortDNAlen+DNAseperate*2; arrowReac(ctx,reacArrowLen,reacArrowHeadLen,[X,Y]); //waste X=X+reacArrowLen+DNAseperate*2; showSpeciesName(ctx,"waste",[X,Y],DNAseperate/2); up45LeftLine(ctx,Da,longDNAlen,[X,Y],Black); drawDoubleDNADashedwithArrowHorizontalLeft(ctx,al,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,a,longDNAlen,aColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashedwithArrowHorizontalRight(ctx,ar,shortDNAlen,aColor,[X,Y]); //waste X=X+shortDNAlen+DNAseperate; showSpeciesName(ctx,"waste",[X,Y],DNAseperate/2); horizontalLine(ctx,a,longDNAlen,[X,Y],aColor); X=X+longDNAlen; arrowDashedHorizontalRight(ctx,ar,shortDNAlen,[X,Y],aColor,arrowLen,arrowAngle,DNAstep); if(X+shortDNAlen>maxX) maxX=X+shortDNAlen; //Multiplication //Line 1 X=X0; Y=Y0+4*DNAseperate;

showSpeciesName(ctx,aName,[X,Y]); X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen); //Li showSpeciesName(ctx,"Li",[X,Y]); arrowDashedDownLeft45(ctx,al+"*",shortDNAlen,[X,Y+DNAwid],aColor,arrowHeadLen,arrowAngle,DNAstep); drawDoubleDNAnoArrow(ctx,a,longDNAlen,aColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,ar,shortDNAlen,aColor,[X,Y]); X=X+shortDNAlen; drawDoubleDNADashedwithArrowHorizontalRight(ctx,bl,shortDNAlen,bColor,[X,Y]); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,b,longDNAlen,bColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,br,shortDNAlen,bColor,[X,Y]); X=X+shortDNAlen; up45RightLine(ctx,Da,longDNAlen,[X,Y],Black); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; up45DashedRightLine(ctx,al,shortDNAlen,[X,Y],aColor,DNAstep); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; up45RightLine(ctx,Db,longDNAlen,[X,Y],Black); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; up45DashedRightLine(ctx,bl,shortDNAlen,[X,Y],bColor,DNAstep); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; up45RightLine(ctx,Dc,longDNAlen,[X,Y],Black); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; up45DashedRightLine(ctx,cl,shortDNAlen,[X,Y],cColor,DNAstep); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; up45RightLine(ctx,Dd,longDNAlen,[X,Y],Black); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; arrowDashedUpRight45(ctx,dl,shortDNAlen,[X,Y],dColor,arrowHeadLen,arrowAngle,DNAstep);

X=X+arrowCos*shortDNAlen+DNAseperate*2; Y=Y0+4*DNAseperate; revArrowReac(ctx,reacArrowLen,reacArrowHeadLen,[X,Y]);

X=X+reacArrowLen+2*DNAseperate; //Hi showSpeciesName(ctx,"Hi",[X,Y]); up45LeftLine(ctx,Da,longDNAlen,[X,Y],Black); drawDoubleDNADashedwithArrowHorizontalLeft(ctx,al,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,a,longDNAlen,aColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,ar,shortDNAlen,aColor,[X,Y]); X=X+shortDNAlen; horizontalDashedLine(ctx,bl+"*",shortDNAlen,[X,Y+DNAwid],bColor,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,b,longDNAlen,bColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,br,shortDNAlen,bColor,[X,Y]); X=X+shortDNAlen; up45RightLine(ctx,Da,longDNAlen,[X,Y],Black); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; up45DashedRightLine(ctx,al,shortDNAlen,[X,Y],aColor,DNAstep); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; up45RightLine(ctx,Db,longDNAlen,[X,Y],Black); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; up45DashedRightLine(ctx,bl,shortDNAlen,[X,Y],bColor,DNAstep); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; up45RightLine(ctx,Dc,longDNAlen,[X,Y],Black); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; up45DashedRightLine(ctx,cl,shortDNAlen,[X,Y],cColor,DNAstep); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; up45RightLine(ctx,Dd,longDNAlen,[X,Y],Black); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; arrowDashedUpRight45(ctx,dl,shortDNAlen,[X,Y],dColor,arrowHeadLen,arrowAngle,DNAstep); //Bi X=X+arrowCos*shortDNAlen+DNAseperate; Y=Y0+4*DNAseperate; showSpeciesName(ctx,"Bi",[X,Y]); horizontalLine(ctx,a,longDNAlen,[X,Y],aColor); X=X+longDNAlen; horizontalDashedLine(ctx,ar,shortDNAlen,[X,Y],aColor,DNAstep); X=X+shortDNAlen; arrowDashedHorizontalRight(ctx,bl,shortDNAlen,[X,Y],bColor,arrowHeadLen,arrowAngle,DNAstep); if(X+shortDNAlen>maxX) maxX=X+shortDNAlen; //Line 2 X=X0; Y=Y0+8*DNAseperate; showSpeciesName(ctx,bName,[X,Y]); X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen); //Hi showSpeciesName(ctx,"Hi",[X,Y]); up45LeftLine(ctx,Da,longDNAlen,[X,Y],Black); drawDoubleDNADashedwithArrowHorizontalLeft(ctx,al,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,a,longDNAlen,aColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,ar,shortDNAlen,aColor,[X,Y]); X=X+shortDNAlen; horizontalDashedLine(ctx,bl+"*",shortDNAlen,[X,Y+DNAwid],bColor,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,b,longDNAlen,bColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,br,shortDNAlen,bColor,[X,Y]); X=X+shortDNAlen; up45RightLine(ctx,Da,longDNAlen,[X,Y],Black); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; up45DashedRightLine(ctx,al,shortDNAlen,[X,Y],aColor,DNAstep); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; up45RightLine(ctx,Db,longDNAlen,[X,Y],Black); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; up45DashedRightLine(ctx,bl,shortDNAlen,[X,Y],bColor,DNAstep); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; up45RightLine(ctx,Dc,longDNAlen,[X,Y],Black); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; up45DashedRightLine(ctx,cl,shortDNAlen,[X,Y],cColor,DNAstep); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; up45RightLine(ctx,Dd,longDNAlen,[X,Y],Black); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; arrowDashedUpRight45(ctx,dl,shortDNAlen,[X,Y],dColor,arrowHeadLen,arrowAngle,DNAstep);

X=X+arrowCos*shortDNAlen+DNAseperate*2; Y=Y0+8*DNAseperate; arrowReac(ctx,reacArrowLen,reacArrowHeadLen,[X,Y]);

X=X+reacArrowLen+2*DNAseperate; //waste showSpeciesName(ctx,"waste",[X,Y]); up45LeftLine(ctx,Da,longDNAlen,[X,Y],Black); drawDoubleDNADashedwithArrowHorizontalLeft(ctx,al,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,a,longDNAlen,aColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashedwithArrowHorizontalRight(ctx,ar,shortDNAlen,aColor,[X,Y]); X=X+shortDNAlen; up45LeftLine(ctx,Db,longDNAlen,[X,Y],Black); drawDoubleDNADashedwithArrowHorizontalLeft(ctx,bl,shortDNAlen,bColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,b,longDNAlen,bColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashedwithArrowHorizontalRight(ctx,br,shortDNAlen,bColor,[X,Y]);

X=X+shortDNAlen+DNAseperate;

//Oi showSpeciesName(ctx,"Oi",[X,Y]); horizontalLine(ctx,b,longDNAlen,[X,Y],bColor); X=X+longDNAlen; horizontalDashedLine(ctx,br,shortDNAlen,[X,Y],bColor,DNAstep); X=X+shortDNAlen; horizontalLine(ctx,Da,longDNAlen,[X,Y],Black); X=X+longDNAlen; horizontalDashedLine(ctx,al,shortDNAlen,[X,Y],aColor,DNAstep); X=X+shortDNAlen; horizontalLine(ctx,Db,longDNAlen,[X,Y],Black); X=X+longDNAlen; horizontalDashedLine(ctx,bl,shortDNAlen,[X,Y],bColor,DNAstep); X=X+shortDNAlen; horizontalLine(ctx,Dc,longDNAlen,[X,Y],Black); X=X+longDNAlen; horizontalDashedLine(ctx,cl,shortDNAlen,[X,Y],cColor,DNAstep); X=X+shortDNAlen; horizontalLine(ctx,Dd,longDNAlen,[X,Y],Black); X=X+longDNAlen; arrowDashedHorizontalRight(ctx,dl,shortDNAlen,[X,Y],dColor,arrowHeadLen,arrowAngle,DNAstep); if(X+shortDNAlen>maxX) maxX=X+shortDNAlen; //Line 3 X=X0; Y=Y0+12*DNAseperate; //Oi showSpeciesName(ctx,"Oi",[X,Y]); horizontalLine(ctx,b,longDNAlen,[X,Y],bColor); X=X+longDNAlen; horizontalDashedLine(ctx,br,shortDNAlen,[X,Y],bColor,DNAstep); X=X+shortDNAlen; horizontalLine(ctx,Da,longDNAlen,[X,Y],Black); X=X+longDNAlen; horizontalDashedLine(ctx,al,shortDNAlen,[X,Y],aColor,DNAstep); X=X+shortDNAlen; horizontalLine(ctx,Db,longDNAlen,[X,Y],Black); X=X+longDNAlen; horizontalDashedLine(ctx,bl,shortDNAlen,[X,Y],bColor,DNAstep); X=X+shortDNAlen; horizontalLine(ctx,Dc,longDNAlen,[X,Y],Black); X=X+longDNAlen; horizontalDashedLine(ctx,cl,shortDNAlen,[X,Y],cColor,DNAstep); X=X+shortDNAlen; horizontalLine(ctx,Dd,longDNAlen,[X,Y],Black); X=X+longDNAlen; arrowDashedHorizontalRight(ctx,dl,shortDNAlen,[X,Y],dColor,arrowHeadLen,arrowAngle,DNAstep);

X=X+DNAseperate; //Ti showSpeciesName(ctx,"Ti",[X,Y]); arrowDashedDownLeft45(ctx,br+"*",shortDNAlen,[X,Y+DNAwid],bColor,arrowHeadLen,arrowAngle,DNAstep); drawDoubleDNAnoArrow(ctx,Da,longDNAlen,Black,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,al,shortDNAlen,aColor,[X,Y]); X=X+shortDNAlen; up45RightLine(ctx,a,longDNAlen,[X,Y],aColor); arrowDashedUpRight45(ctx,ar,shortDNAlen,[X+arrowCos*longDNAlen,Y-arrowSin*longDNAlen],aColor,arrowHeadLen,arrowAngle,DNAstep); drawDoubleDNAnoArrow(ctx,Db,longDNAlen,Black,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,bl,shortDNAlen,bColor,[X,Y]); X=X+shortDNAlen; up45RightLine(ctx,b,longDNAlen,[X,Y],bColor); arrowDashedUpRight45(ctx,br,shortDNAlen,[X+arrowCos*longDNAlen,Y-arrowSin*longDNAlen],bColor,arrowHeadLen,arrowAngle,DNAstep); drawDoubleDNAnoArrow(ctx,Dc,longDNAlen,Black,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,cl,shortDNAlen,cColor,[X,Y]); X=X+shortDNAlen; up45RightLine(ctx,c,longDNAlen,[X,Y],cColor); arrowDashedUpRight45(ctx,cr,shortDNAlen,[X+arrowCos*longDNAlen,Y-arrowSin*longDNAlen],cColor,arrowHeadLen,arrowAngle,DNAstep); drawDoubleDNAnoArrow(ctx,Dd,longDNAlen,Black,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,dl,shortDNAlen,dColor,[X,Y]); X=X+shortDNAlen; up45RightLine(ctx,d,longDNAlen,[X,Y],dColor); arrowDashedUpRight45(ctx,dr,shortDNAlen,[X+arrowCos*longDNAlen,Y-arrowSin*longDNAlen],dColor,arrowHeadLen,arrowAngle,DNAstep);

X=X+arrowCos*shortDNAlen+DNAseperate*2; Y=Y0+12*DNAseperate; arrowReac(ctx,reacArrowLen,reacArrowHeadLen,[X,Y]);

X=X+reacArrowLen+2*DNAseperate;

//waste showSpeciesName(ctx,"waste",[X,Y]); up45LeftLine(ctx,b,longDNAlen,[X,Y],bColor); drawDoubleDNADashedwithArrowHorizontalLeft(ctx,br,shortDNAlen,bColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,Da,longDNAlen,Black,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,al,shortDNAlen,aColor,[X,Y]); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,Db,longDNAlen,Black,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,bl,shortDNAlen,bColor,[X,Y]); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,Dc,longDNAlen,Black,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,cl,shortDNAlen,cColor,[X,Y]); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,Dd,longDNAlen,Black,[X,Y]); X=X+longDNAlen; drawDoubleDNADashedwithArrowHorizontalRight(ctx,dl,shortDNAlen,dColor,[X,Y]);

X=X+shortDNAlen+DNAseperate; showSpeciesName(ctx,aName,[X,Y]); X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen); showSpeciesName(ctx,bName,[X,Y]); X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen); showSpeciesName(ctx,cName,[X,Y]); X=drawSig(ctx,cName,cColor,[X,Y],longDNAlen,shortDNAlen); showSpeciesName(ctx,dName,[X,Y]); X=drawSig(ctx,dName,dColor,[X,Y],longDNAlen,shortDNAlen);

Y0-=4*DNAseperate; if(X+shortDNAlen>maxX) maxX=X+shortDNAlen; maxX+=2*DNAseperate; maxY=Y+2*DNAseperate; ctx.strokeStyle='rgb('+0+','+0+','+0+')'; ctx.moveTo(X0-DNAseperate,Y0-DNAseperate); ctx.lineTo(maxX,Y0-DNAseperate); ctx.moveTo(X0-DNAseperate,Y0-DNAseperate); ctx.lineTo(X0-DNAseperate,maxY); ctx.moveTo(maxX,maxY); ctx.lineTo(maxX,Y0-DNAseperate); ctx.moveTo(maxX,maxY); ctx.lineTo(X0-DNAseperate,maxY); ctx.stroke(); displayStr(ctx,"multiplication",[X0-DNAseperate,Y0-DNAseperate-fontSpace],Black);

return Y; } //according to Fig. 9 function drawAdd(ctx,aName,bName,aColor,bColor,[X0,Y0],longDNAlen,shortDNAlen){//a->b //rectangular var maxX=0,maxY=0; //addition X=X0; Y=Y0; var Da="D"+aName; var al=aName+"l"; var a=aName; var ar=aName+"r"; var Db="D"+bName; var bl=bName+"l"; var b=bName; var br=bName+"r";

displayStr(ctx,'input',[X,Y],Black); X+=DNAseperate*fontSpaceRatio; showSpeciesName(ctx,aName,[X,Y]); X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen); displayStr(ctx,'output',[X,Y],Black); X+=DNAseperate*fontSpaceRatio; showSpeciesName(ctx,bName,[X,Y]); X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen); Y0=Y0+4*DNAseperate; Y=Y0; X=X0; //Line 1 showSpeciesName(ctx,aName,[X,Y]); X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen); //Gi showSpeciesName(ctx,"Gi",[X,Y],DNAseperate/2); arrowDashedDownLeft45(ctx,al+"*",shortDNAlen,[X,Y+DNAwid],aColor,arrowHeadLen,arrowAngle,DNAstep); drawDoubleDNAnoArrow(ctx,a,longDNAlen,aColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,ar,shortDNAlen,aColor,[X,Y]); X=X+shortDNAlen; up45RightLine(ctx,Db,longDNAlen,[X,Y],Black); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; arrowDashedUpRight45(ctx,bl,shortDNAlen,[X,Y],bColor,arrowHeadLen,arrowAngle,DNAstep);

X=X+shortDNAlen+DNAseperate*2; Y=Y0; arrowReac(ctx,reacArrowLen,reacArrowHeadLen,[X,Y]);

X=X+reacArrowLen+2*DNAseperate;

//Oi Y=Y0; showSpeciesName(ctx,"Oi",[X,Y]); horizontalLine(ctx,a,longDNAlen,[X,Y],aColor); X=X+longDNAlen; horizontalDashedLine(ctx,ar,shortDNAlen,[X,Y],aColor,DNAstep); X=X+shortDNAlen; horizontalLine(ctx,Db,longDNAlen,[X,Y],Black); X=X+longDNAlen; arrowDashedHorizontalRight(ctx,bl,shortDNAlen,[X,Y],bColor,arrowHeadLen,arrowAngle,DNAstep); //waste X=X+shortDNAlen+DNAseperate*2; showSpeciesName(ctx,"waste",[X,Y],DNAseperate/2); up45LeftLine(ctx,Da,longDNAlen,[X,Y],Black); drawDoubleDNADashedwithArrowHorizontalLeft(ctx,al,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,a,longDNAlen,aColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashedwithArrowHorizontalRight(ctx,ar,shortDNAlen,aColor,[X,Y]); if(X+shortDNAlen>maxX) maxX=X+shortDNAlen; //Line 2 X=X0; Y=Y0+4*DNAseperate; //Oi showSpeciesName(ctx,"Oi",[X,Y]); horizontalLine(ctx,a,longDNAlen,[X,Y],aColor); X=X+longDNAlen; horizontalDashedLine(ctx,ar,shortDNAlen,[X,Y],aColor,DNAstep); X=X+shortDNAlen; horizontalLine(ctx,Db,longDNAlen,[X,Y],Black); X=X+longDNAlen; arrowDashedHorizontalRight(ctx,bl,shortDNAlen,[X,Y],bColor,arrowHeadLen,arrowAngle,DNAstep);

X=X+DNAseperate; //Ti showSpeciesName(ctx,"Ti",[X,Y],DNAseperate/2); arrowDashedDownLeft45(ctx,al+"*",shortDNAlen,[X,Y+DNAwid],aColor,arrowHeadLen,arrowAngle,DNAstep); drawDoubleDNAnoArrow(ctx,Db,longDNAlen,Black,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,bl,shortDNAlen,bColor,[X,Y]); X=X+shortDNAlen; up45RightLine(ctx,b,longDNAlen,[X,Y],bColor); arrowDashedUpRight45(ctx,br,shortDNAlen,[X+arrowCos*longDNAlen,Y-arrowSin*longDNAlen],bColor,arrowHeadLen,arrowAngle,DNAstep);

X=X+arrowCos*shortDNAlen+DNAseperate*2; Y=Y0+4*DNAseperate; arrowReac(ctx,reacArrowLen,reacArrowHeadLen,[X,Y]);

X=X+reacArrowLen+2*DNAseperate;

//waste showSpeciesName(ctx,"waste",[X,Y],DNAseperate/2); up45LeftLine(ctx,a,longDNAlen,[X,Y],aColor); drawDoubleDNADashedwithArrowHorizontalLeft(ctx,ar,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,Db,longDNAlen,Black,[X,Y]); X=X+longDNAlen; drawDoubleDNADashedwithArrowHorizontalRight(ctx,bl,shortDNAlen,bColor,[X,Y]);

X=X+shortDNAlen+DNAseperate; showSpeciesName(ctx,bName,[X,Y]); X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen);

Y0-=4*DNAseperate; if(X+shortDNAlen>maxX) maxX=X+shortDNAlen; maxX+=2*DNAseperate; maxY=Y+2*DNAseperate; ctx.strokeStyle='rgb('+0+','+0+','+0+')'; ctx.moveTo(X0-DNAseperate,Y0-DNAseperate); ctx.lineTo(maxX,Y0-DNAseperate); ctx.moveTo(X0-DNAseperate,Y0-DNAseperate); ctx.lineTo(X0-DNAseperate,maxY); ctx.moveTo(maxX,maxY); ctx.lineTo(maxX,Y0-DNAseperate); ctx.moveTo(maxX,maxY); ctx.lineTo(X0-DNAseperate,maxY); ctx.stroke(); displayStr(ctx,"addition",[X0-DNAseperate,Y0-DNAseperate-fontSpace],Black); return Y;

}

function drawSub(ctx,aName,bName,cName,aColor,bColor,cColor,[X0,Y0],longDNAlen,shortDNAlen){//a+b->c //rectangular var maxX=0,maxY=0; //subtraction var Black=[0,0,0]; X=X0; Y=Y0; var Da="D"+aName; var al=aName+"l"; var a=aName; var ar=aName+"r"; var Db="D"+bName; var bl=bName+"l"; var b=bName; var br=bName+"r"; var Dc="D"+cName; var cl=cName+"l"; var c=cName; var cr=cName+"r";

displayStr(ctx,'input',[X,Y],Black); X+=DNAseperate*fontSpaceRatio; showSpeciesName(ctx,aName,[X,Y]); X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen); showSpeciesName(ctx,bName,[X,Y]); X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen); Y0=Y0+4*DNAseperate; Y=Y0; X=X0;

//Line 1 showSpeciesName(ctx,aName,[X,Y]); X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen); //Li showSpeciesName(ctx,"Li",[X,Y]); arrowDashedDownLeft45(ctx,al+"*",shortDNAlen,[X,Y+DNAwid],aColor,arrowHeadLen,arrowAngle,DNAstep); drawDoubleDNAnoArrow(ctx,a,longDNAlen,aColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,ar,shortDNAlen,aColor,[X,Y]); X=X+shortDNAlen; drawDoubleDNADashedwithArrowHorizontalRight(ctx,bl,shortDNAlen,bColor,[X,Y]); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,b,longDNAlen,bColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,br,shortDNAlen,bColor,[X,Y]); X=X+shortDNAlen; up45RightLine(ctx,Dc,longDNAlen,[X,Y],Black); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; arrowDashedUpRight45(ctx,cl,shortDNAlen,[X,Y],cColor,arrowHeadLen,arrowAngle,DNAstep);

X=X+arrowCos*shortDNAlen+DNAseperate*2; Y=Y0; revArrowReac(ctx,reacArrowLen,reacArrowHeadLen,[X,Y]);

X=X+reacArrowLen+2*DNAseperate; //Hi showSpeciesName(ctx,"Hi",[X,Y]); up45LeftLine(ctx,Da,longDNAlen,[X,Y],Black); drawDoubleDNADashedwithArrowHorizontalLeft(ctx,al,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,a,longDNAlen,aColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,ar,shortDNAlen,aColor,[X,Y]); X=X+shortDNAlen; horizontalDashedLine(ctx,bl+"*",shortDNAlen,[X,Y+DNAwid],bColor,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,b,longDNAlen,bColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,br,shortDNAlen,bColor,[X,Y]); X=X+shortDNAlen; up45RightLine(ctx,Dc,longDNAlen,[X,Y],Black); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; arrowDashedUpRight45(ctx,cl,shortDNAlen,[X,Y],cColor,arrowHeadLen,arrowAngle,DNAstep); X=X+arrowCos*shortDNAlen+DNAseperate; Y=Y0; //Bi showSpeciesName(ctx,"Bi",[X,Y]); horizontalLine(ctx,a,longDNAlen,[X,Y],aColor); X=X+longDNAlen; horizontalDashedLine(ctx,ar,longDNAlen,[X,Y],aColor,DNAstep); X=X+shortDNAlen; arrowDashedHorizontalRight(ctx,bl,shortDNAlen,[X,Y],bColor,arrowHeadLen,arrowAngle,DNAstep); if(X+shortDNAlen>maxX) maxX=X+shortDNAlen; X=X0; Y=Y0+4*DNAseperate; //Line 2 showSpeciesName(ctx,bName,[X,Y]); X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen); //Hi showSpeciesName(ctx,"Hi",[X,Y]); up45LeftLine(ctx,Da,longDNAlen,[X,Y],Black); drawDoubleDNADashedwithArrowHorizontalLeft(ctx,al,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,a,longDNAlen,aColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,ar,shortDNAlen,aColor,[X,Y]); X=X+shortDNAlen; horizontalDashedLine(ctx,bl+"*",shortDNAlen,[X,Y+DNAwid],bColor,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,b,longDNAlen,bColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,br,shortDNAlen,bColor,[X,Y]); X=X+shortDNAlen; up45RightLine(ctx,Dc,longDNAlen,[X,Y],Black); X=X+arrowCos*longDNAlen; Y=Y-arrowSin*longDNAlen; arrowDashedUpRight45(ctx,cl,shortDNAlen,[X,Y],cColor,arrowHeadLen,arrowAngle,DNAstep); X=X+arrowCos*shortDNAlen+DNAseperate*2; Y=Y0+4*DNAseperate; arrowReac(ctx,reacArrowLen,reacArrowHeadLen,[X,Y]);

X=X+reacArrowLen+2*DNAseperate; //waste showSpeciesName(ctx,"waste",[X,Y]); up45LeftLine(ctx,Da,longDNAlen,[X,Y],Black); drawDoubleDNADashedwithArrowHorizontalLeft(ctx,al,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,a,longDNAlen,aColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashedwithArrowHorizontalRight(ctx,ar,shortDNAlen,aColor,[X,Y]); X=X+shortDNAlen; up45LeftLine(ctx,Db,longDNAlen,[X,Y],Black); drawDoubleDNADashedwithArrowHorizontalLeft(ctx,bl,shortDNAlen,bColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,b,longDNAlen,bColor,[X,Y]); X=X+longDNAlen; drawDoubleDNADashedwithArrowHorizontalRight(ctx,br,shortDNAlen,bColor,[X,Y]);

X=X+shortDNAlen+DNAseperate; //Oi showSpeciesName(ctx,"Oi",[X,Y]); horizontalLine(ctx,b,longDNAlen,[X,Y],bColor); X=X+longDNAlen; horizontalDashedLine(ctx,br,shortDNAlen,[X,Y],bColor,DNAstep); X=X+shortDNAlen; horizontalLine(ctx,Dc,longDNAlen,[X,Y],Black); X=X+longDNAlen; arrowDashedHorizontalRight(ctx,cl,shortDNAlen,[X,Y],cColor,arrowHeadLen,arrowAngle,DNAstep); if(X+shortDNAlen>maxX) maxX=X+shortDNAlen; X=X0; Y=Y0+8*DNAseperate; //Line 3 //Oi showSpeciesName(ctx,"Oi",[X,Y]); horizontalLine(ctx,b,longDNAlen,[X,Y],bColor); X=X+longDNAlen; horizontalDashedLine(ctx,br,shortDNAlen,[X,Y],bColor,DNAstep); X=X+shortDNAlen; horizontalLine(ctx,Dc,longDNAlen,[X,Y],Black); X=X+longDNAlen; arrowDashedHorizontalRight(ctx,cl,shortDNAlen,[X,Y],cColor,arrowHeadLen,arrowAngle,DNAstep); X=X+shortDNAlen+DNAseperate; //Ti showSpeciesName(ctx,"Ti",[X,Y],DNAseperate/2); arrowDashedDownLeft45(ctx,br+"*",shortDNAlen,[X,Y+DNAwid],bColor,arrowHeadLen,arrowAngle,DNAstep); drawDoubleDNAnoArrow(ctx,Dc,longDNAlen,Black,[X,Y]); X=X+longDNAlen; drawDoubleDNADashednoArrow(ctx,cl,shortDNAlen,cColor,[X,Y]); X=X+shortDNAlen; up45RightLine(ctx,c,longDNAlen,[X,Y],cColor); arrowDashedUpRight45(ctx,cr,shortDNAlen,[X+arrowCos*longDNAlen,Y-arrowSin*longDNAlen],cColor,arrowHeadLen,arrowAngle,DNAstep); X=X+arrowCos*shortDNAlen+DNAseperate*2; Y=Y0+8*DNAseperate; arrowReac(ctx,reacArrowLen,reacArrowHeadLen,[X,Y]);

X=X+reacArrowLen+2*DNAseperate; //waste showSpeciesName(ctx,"waste",[X,Y],DNAseperate/2); up45LeftLine(ctx,b,longDNAlen,[X,Y],bColor); drawDoubleDNADashedwithArrowHorizontalLeft(ctx,br,shortDNAlen,bColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep); X=X+shortDNAlen; drawDoubleDNAnoArrow(ctx,Dc,longDNAlen,Black,[X,Y]); X=X+longDNAlen; drawDoubleDNADashedwithArrowHorizontalRight(ctx,cl,shortDNAlen,cColor,[X,Y]); X=X+shortDNAlen+DNAseperate; showSpeciesName(ctx,cName,[X,Y]); X=drawSig(ctx,cName,cColor,[X,Y],longDNAlen,shortDNAlen);

Y0-=4*DNAseperate; if(X+shortDNAlen>maxX) maxX=X+shortDNAlen; maxX+=2*DNAseperate; maxY=Y+2*DNAseperate; ctx.strokeStyle='rgb('+0+','+0+','+0+')'; ctx.moveTo(X0-DNAseperate,Y0-DNAseperate); ctx.lineTo(maxX,Y0-DNAseperate); ctx.moveTo(X0-DNAseperate,Y0-DNAseperate); ctx.lineTo(X0-DNAseperate,maxY); ctx.moveTo(maxX,maxY); ctx.lineTo(maxX,Y0-DNAseperate); ctx.moveTo(maxX,maxY); ctx.lineTo(X0-DNAseperate,maxY); ctx.stroke(); displayStr(ctx,"subtraction",[X0-DNAseperate,Y0-DNAseperate-fontSpace],Black);

return Y; }

function drawSig(ctx,name,color,[X,Y],longDNAlen,shortDNAlen){ ctx.font = Font; horizontalLine(ctx,"D"+name,longDNAlen,[X,Y],Black); X=X+longDNAlen; horizontalDashedLine(ctx,name+"l",shortDNAlen,[X,Y],color,DNAstep); X=X+shortDNAlen; horizontalLine(ctx,name,longDNAlen,[X,Y],color); X=X+longDNAlen; arrowDashedHorizontalRight(ctx,name+"r",shortDNAlen,[X,Y],color,arrowHeadLen,arrowAngle,DNAstep); X=X+shortDNAlen+DNAseperate; return X; }

function displayStr(ctx,str,[X,Y],[R,G,B]) { ctx.font = FontDescription; ctx.fillStyle='rgb('+R+','+G+','+B+')'; ctx.fillText(str,X,Y); return Y+20; } function drawNeuron(weightNum){ //name

//color dColor=[Math.random()*255,Math.random()*255,Math.random()*255]; xpColor=[Math.random()*255,Math.random()*255,Math.random()*255]; xnColor=[255-xpColor[0],255-xpColor[1],255-xpColor[2]]; yColor=[Math.random()*255,Math.random()*255,Math.random()*255]; ynColor=[255-yColor[0],255-yColor[1],255-yColor[2]]; wasteColor=[0,0,0]; inputpColor=[],inputnColor=[]; inputpBkpColor=[],inputnBkpColor=[]; wi0pColor=[],wi0nColor=[]; wipColor=[],winColor=[]; for(var i=1;i<=weightNum;i=i+1){ wi0p.push("w"+i+"0+"); wi0n.push("w"+i+"0-"); wip.push("w"+i+"+"); win.push("w"+i+"-");

wi0pColor.push([Math.random()*255,Math.random()*255,Math.random()*255]); wi0nColor.push([255-wi0pColor[i-1][0],255-wi0pColor[i-1][1],255-wi0pColor[i-1][2]]); wipColor.push([Math.random()*255,Math.random()*255,Math.random()*255]); winColor.push([255-wipColor[i-1][0],255-wipColor[i-1][1],255-wipColor[i-1][2]]);

inputp.push("i"+i+"+"); inputn.push("i"+i+"-"); inputpColor.push([Math.random()*255,Math.random()*255,Math.random()*255]); inputnColor.push([255-inputpColor[i-1][0],255-inputpColor[i-1][1],255-inputpColor[i-1][2]]);

inputpBkp.push("ib"+i+"+"); inputnBkp.push("ib"+i+"-"); inputpBkpColor.push([Math.random()*255,Math.random()*255,Math.random()*255]); inputnBkpColor.push([255-inputpBkpColor[i-1][0],255-inputpBkpColor[i-1][1],255-inputpBkpColor[i-1][2]]); } genSeq(weightNum); } function genSeq(weightNum){ //weighted sum for(var i=1;i<=weightNum;i=i+1){ seqDict=multiplicationReLU(seqDict,inputpBkp[i-1],wip[i-1],xp,y,inputpBkpColor[i-1],wipColor[i-1],xpColor,yColor); seqDict=multiplicationReLU(seqDict,inputnBkp[i-1],wip[i-1],xn,yn,inputnBkpColor[i-1],wipColor[i-1],xnColor,ynColor); seqDict=multiplicationReLU(seqDict,inputpBkp[i-1],win[i-1],xn,yn,inputpBkpColor[i-1],winColor[i-1],xnColor,ynColor); seqDict=multiplicationReLU(seqDict,inputnBkp[i-1],win[i-1],xp,y,inputnBkpColor[i-1],winColor[i-1],xpColor,yColor); } //subtraction seqDict=subtraction(seqDict,xp,xn,waste,xpColor,xnColor,wasteColor); seqDict=subtraction(seqDict,y,yn,waste,yColor,ynColor,wasteColor); //backpropagation for(var i=1;i<=weightNum;i=i+1){ seqDict=multiplication(seqDict,xp,inputp[i-1],wi0n[i-1],xpColor,inputpColor[i-1],wi0nColor[i-1]); seqDict=multiplication(seqDict,xp,inputn[i-1],wi0n[i-1],xpColor,inputnColor[i-1],wi0nColor[i-1]); } for(var i=1;i<=weightNum;i=i+1){ seqDict=add(seqDict,wi0p[i-1],wip[i-1],waste,wi0pColor[i-1],wipColor[i-1],wasteColor); seqDict=add(seqDict,wi0n[i-1],win[i-1],waste,wi0nColor[i-1],winColor[i-1],wasteColor); seqDict=add(seqDict,wip[i-1],win[i-1],waste,wipColor[i-1],winColor[i-1],wasteColor); } } function drawWeightedSum([X0,Y0]){ X=X0; Y=Y0; //Y=displayStr(ctx,"Weighted sum:",[X,Y],Black); //weighted sum //var weightNum=document.getElementById("number").value; setCanvans(Y0+weightNum*4*18*DNAseperate+weightNum*4*4*DNAseperate-2*DNAseperate); var ctx = document.getElementById('canvas').getContext('2d'); for(var i=1;i<=weightNum;i=i+1){ Y=drawMulReLU(ctx,inputpBkp[i-1],wip[i-1],xp,y,inputpBkpColor[i-1],wipColor[i-1],xpColor,yColor,[X,Y],longDNAlen,shortDNAlen)+4*DNAseperate; X=X0; Y=drawMulReLU(ctx,inputnBkp[i-1],wip[i-1],xn,yn,inputnBkpColor[i-1],wipColor[i-1],xnColor,ynColor,[X,Y],longDNAlen,shortDNAlen)+4*DNAseperate; X=X0; Y=drawMulReLU(ctx,inputpBkp[i-1],win[i-1],xn,yn,inputpBkpColor[i-1],winColor[i-1],xnColor,ynColor,[X,Y],longDNAlen,shortDNAlen)+4*DNAseperate; X=X0; Y=drawMulReLU(ctx,inputnBkp[i-1],win[i-1],xp,y,inputnBkpColor[i-1],winColor[i-1],xpColor,yColor,[X,Y],longDNAlen,shortDNAlen)+4*DNAseperate; X=X0; } // for(var i=1;i<=weightNum;i=i+1){ // seqDict=multiplicationReLU(seqDict,inputpBkp[i-1],wip[i-1],xp,y,inputpBkpColor[i-1],wipColor[i-1],xpColor,yColor); // seqDict=multiplicationReLU(seqDict,inputnBkp[i-1],wip[i-1],xn,yn,inputnBkpColor[i-1],wipColor[i-1],xnColor,ynColor); // seqDict=multiplicationReLU(seqDict,inputpBkp[i-1],win[i-1],xn,yn,inputpBkpColor[i-1],winColor[i-1],xnColor,ynColor); // seqDict=multiplicationReLU(seqDict,inputnBkp[i-1],win[i-1],xp,y,inputnBkpColor[i-1],winColor[i-1],xpColor,yColor); // } } function drawSubNeuron([X0,Y0]){ X=X0; Y=Y0; setCanvans(Y0+2*14*DNAseperate+2*4*DNAseperate-2*DNAseperate); var ctx = document.getElementById('canvas').getContext('2d'); Y=drawSub(ctx,xp,xn,waste,xpColor,xnColor,wasteColor,[X,Y],longDNAlen,shortDNAlen)+4*DNAseperate; // seqDict=subtraction(seqDict,xp,xn,waste,xpColor,xnColor,wasteColor); X=X0; //y + y^- -> \phi //Y=displayStr(ctx,"y + y- -> waste",[X,Y],Black); X=X0; Y=drawSub(ctx,y,yn,waste,yColor,ynColor,wasteColor,[X,Y],longDNAlen,shortDNAlen)+4*DNAseperate; // seqDict=subtraction(seqDict,y,yn,waste,yColor,ynColor,wasteColor); X=X0; }

function drawBackprop([X0,Y0]){ //backpropagation //var weightNum=document.getElementById("number").value; setCanvans(Y0+weightNum*2*18*DNAseperate+weightNum*2*4*DNAseperate+weightNum*34*DNAseperate+weightNum*3*4*DNAseperate-2*DNAseperate); var ctx = document.getElementById('canvas').getContext('2d'); X=X0; Y=Y0; for(var i=1;i<=weightNum;i=i+1){ Y=drawMul(ctx,xp,inputp[i-1],wi0n[i-1],xpColor,inputpColor[i-1],wi0nColor[i-1],[X,Y],longDNAlen,shortDNAlen)+4*DNAseperate; X=X0; Y=drawMul(ctx,xp,inputn[i-1],wi0n[i-1],xpColor,inputnColor[i-1],wi0pColor[i-1],[X,Y],longDNAlen,shortDNAlen)+4*DNAseperate; X=X0; } // for(var i=1;i<=weightNum;i=i+1){ // seqDict=multiplication(seqDict,xp,inputp[i-1],wi0n[i-1],xpColor,inputpColor[i-1],wi0nColor[i-1]); // seqDict=multiplication(seqDict,xp,inputn[i-1],wi0n[i-1],xpColor,inputnColor[i-1],wi0nColor[i-1]); // }

//wi0p->wip, wi0n->win, wip + win -> \phi for(var i=1;i<=weightNum;i=i+1){ Y=drawAdd(ctx,wi0p[i-1],wip[i-1],wi0pColor[i-1],wipColor[i-1],[X,Y],longDNAlen,shortDNAlen)+4*DNAseperate; X=X0; Y=drawAdd(ctx,wi0n[i-1],win[i-1],wi0nColor[i-1],winColor[i-1],[X,Y],longDNAlen,shortDNAlen)+4*DNAseperate; X=X0; Y=drawSub(ctx,wip[i-1],win[i-1],waste,wipColor[i-1],winColor[i-1],wasteColor,[X,Y],longDNAlen,shortDNAlen)+4*DNAseperate; X=X0; } // for(var i=1;i<=weightNum;i=i+1){ // seqDict=add(seqDict,wi0p[i-1],wip[i-1],waste,wi0pColor[i-1],wipColor[i-1],wasteColor); // seqDict=add(seqDict,wi0n[i-1],win[i-1],waste,wi0nColor[i-1],winColor[i-1],wasteColor); // seqDict=add(seqDict,wip[i-1],win[i-1],waste,wipColor[i-1],winColor[i-1],wasteColor); // } }

// return seqDict;

///////////////////////////////sequence design////////////////////////////////////////////////////// function zeros(num){ var z=[]; for (var i = 0; i < num; i++) { z.push(0); } return z; }

function change(a){ var chain=; for(var i=0;i<a.length;i++){ if(a[i]==0) chain+=; if(a[i]==1) chain+='A'; if(a[i]==2) chain+='T'; if(a[i]==3) chain+='C'; if(a[i]==4) chain+='G'; } return chain; }

function creatComplementary(Original0){ var Complementary0=[]; for(var i=0;i<Original0.length;i++){ if(Original0[i]==1)

       	Complementary0.push(2);

if(Original0[i]==2) Complementary0.push(1); if(Original0[i]==3) Complementary0.push(4); } return Complementary0; }

function randsrc(entry,prob){ var r=Math.random(); var totalP=prob[0]; var i; for(i=1;i<entry.length;i++){ if(r<=totalP) return entry[i-1]; totalP+=prob[i]; } return entry[i-1]; }

function creatlongchain(a){ var longchain0=[],longchain0_=[]; var i; for(i=0;i<a;i++){ longchain0.push(randsrc([1,2,3],[0.15,0.15,0.7])); } longchain0[0]=1; longchain0[1]=3; longchain0[a-2]=1; longchain0[a-1]=3; longchain0=check(longchain0,1); longchain0_=creatComplementary(longchain0); return [longchain0,longchain0_]; }

function creatshortchain(){ var core=[],t=randsrc([0,1,2],[1/3,1/3,1/3]),clamp=[1,3]; var shortchain_l=[0,0,0,0,0],shortchain_l_=[0,0,0,0,0],shortchain_r=[0,0,0,0,0],shortchain_r_=[0,0,0,0,0]; var i; for(i=0;i<3;i++){ core.push(randsrc([1,2],[0.5,0.5])); } core[t]=3; shortchain_l[0]=clamp[0]; shortchain_l[1]=clamp[1]; shortchain_l[2]=core[0]; shortchain_l[3]=core[1]; shortchain_l[4]=core[2];

shortchain_r[0]=core[0]; shortchain_r[1]=core[1]; shortchain_r[2]=core[2]; shortchain_r[3]=clamp[0]; shortchain_r[4]=clamp[1];

shortchain_l_=creatComplementary(shortchain_l); shortchain_r_=creatComplementary(shortchain_r); return [shortchain_l,shortchain_l_,shortchain_r,shortchain_r_]; }

////////////////////////////////////// function rgb2hex(color){

   //var arr=rgb;
   var hexStr="#"+num2hex(color[0])+num2hex(color[1])+num2hex(color[2]);
   return hexStr.toUpperCase();

} function num2hex(x){

       return ("0" + parseInt(x).toString(16)).slice(-2);

} function add(dict,aName,bName,cName,aColor,bColor,cColor){//dict:[[<species name>s],[Da,al,a,ar,Da*,al*,a*,ar*],[...],...] var Da,Da_,Db,Db_,Dc,Dc_,a,a_,b,b_,c,c_;//long chain var al,al_,ar,ar_,bl,bl_,br,br_,cl,cl_,cr,cr_;//short chain [Da,Da_]=creatlongchain(15); [Db,Db_]=creatlongchain(15); [Dc,Dc_]=creatlongchain(15); [a,a_]=creatlongchain(15); [b,b_]=creatlongchain(15); [c,c_]=creatlongchain(15); [al,al_,ar,ar_]=creatshortchain(); [bl,bl_,br,br_]=creatshortchain(); [cl,cl_,cr,cr_]=creatshortchain(); if(!findNameinDict(aName,dict[0])){ dict[0].push(aName); dict.push([Da,al,a,ar,Da_,al_,a_,ar_]); } else{ Da=dict[getIndex(aName,dict[0])+1][0]; al=dict[getIndex(aName,dict[0])+1][1]; a=dict[getIndex(aName,dict[0])+1][2]; ar=dict[getIndex(aName,dict[0])+1][3]; Da_=dict[getIndex(aName,dict[0])+1][4]; al_=dict[getIndex(aName,dict[0])+1][5]; a_=dict[getIndex(aName,dict[0])+1][6]; ar_=dict[getIndex(aName,dict[0])+1][7]; } if(!findNameinDict(bName,dict[0])){ dict[0].push(bName); dict.push([Db,bl,b,br,Db_,bl_,b_,br_]); } else{ Db=dict[getIndex(bName,dict[0])+1][0]; bl=dict[getIndex(bName,dict[0])+1][1]; b=dict[getIndex(bName,dict[0])+1][2]; br=dict[getIndex(bName,dict[0])+1][3]; Db_=dict[getIndex(bName,dict[0])+1][4]; bl_=dict[getIndex(bName,dict[0])+1][5]; b_=dict[getIndex(bName,dict[0])+1][6]; br_=dict[getIndex(bName,dict[0])+1][7]; } if(!findNameinDict(cName,dict[0])){ dict[0].push(cName); dict.push([Dc,cl,c,cr,Dc_,cl_,c_,cr_]); } else{ Dc=dict[getIndex(cName,dict[0])+1][0]; cl=dict[getIndex(cName,dict[0])+1][1]; c=dict[getIndex(cName,dict[0])+1][2]; cr=dict[getIndex(cName,dict[0])+1][3]; Dc_=dict[getIndex(cName,dict[0])+1][4]; cl_=dict[getIndex(cName,dict[0])+1][5]; c_=dict[getIndex(cName,dict[0])+1][6]; cr_=dict[getIndex(cName,dict[0])+1][7]; } /////////////////////////////////////////////////////// /// seqFile.push("*************************addition*************************\n"); seqFile.push("************input signal************\n") seqFile.push("ai: " +change(Da) + change(al) + change(a) + change(ar) +"\n"); seqFile.push("************double stranded DNA************\n"); seqFile.push("Gi_up: " + change(a) + change(ar) + change(Db) + change(bl) + change(Dc) + change(cl) +"\n"); seqFile.push("Gi_down: " + (change(al_) + change(a_) + change(ar_)).split().reverse().join() +"\n"); seqFile.push("************double stranded DNA************\n") seqFile.push("Ti_up1: " + change(Db) + change(bl) + change(b) + change(br) +"\n"); seqFile.push("Ti_up2: " + change(Dc) + change(cl) + change(c) + change(cr) +"\n"); seqFile.push("Ti_down: " + (change(al_) + change(Db_) + change(bl_) + change(Dc_) + change(cl_)).split().reverse().join() + "\n");

lis.push("

" + "*************************addition*************************" + "

"); lis.push("

" + "************input signal************" + "

"); lis.push("

" + "ai: " + "

"+"

" +change(Da) + "

" + change(al) + "

" + change(a) + "

" + change(ar) +"

"); lis.push("

" + "************double stranded DNA************" + "

"); lis.push("

" + "Gi_up: " + "

"+"

" + change(a) + "

" + change(ar) + "

" + change(Db) + "

" + change(bl) + "

" + change(Dc) + "

" + change(cl) +"

"); lis.push("

" + "Gi_down: " + "

"+"

" + change(ar_).split().reverse().join() + "

" + change(a_).split().reverse().join() + "

" + change(al_).split().reverse().join() +"

"); lis.push("

" + "************double stranded DNA************" + "

"); lis.push("

" + "Ti_up1: " + "

"+"

" + change(Db) + "

" + change(bl) + "

" + change(b) + "

" + change(br) +"

"); lis.push("

" + "Ti_up2: " + "

"+"

" + change(Dc) + "

" + change(cl) + "

" + change(c) + "

" + change(cr) +"

"); lis.push("

" + "Ti_down: " + "

"+"

" + change(cl_).split().reverse().join() + "

" + change(Dc_).split().reverse().join() + "

" + change(bl_).split().reverse().join() + "

" + change(Db_).split().reverse().join() + "

" + change(al_).split().reverse().join() +"

");

return dict; }

seqFile.push("************double stranded DNA************\n"); seqFile.push("Wi_up:" + change(a) + change(ar) +"\n"); seqFile.push("Wi_down:" + change(ar_).split().reverse().join() + change(a_).split().reverse().join() + change(al_).split().reverse().join() +"\n");

seqFile.push("************double stranded DNA************\n"); seqFile.push("Li_up1: " + change(a) + change(ar) + change(bl) +"\n"); seqFile.push("Li_up2: " + change(b) + change(br) + change(Da) + change(al) + change(Db) + change(bl) + change(Dc) + change(cl) +"\n"); seqFile.push("Li_down: " + (change(al_) + change(a_) + change(ar_) + change(bl_) + change(b_) + change(br_)).split().reverse().join() +"\n");

seqFile.push("************auxiliary single stranded DNA************\n"); seqFile.push("Bi: " + change(a) + change(ar) + change(bl) +"\n");

seqFile.push("************double stranded DNA************\n"); seqFile.push("Ti_up1: " + change(Da) + change(al) + change(a) + change(ar) +"\n"); seqFile.push("Ti_up2: " + change(Db) + change(bl) + change(b) + change(br) +"\n"); seqFile.push("Ti_up3: " + change(Dc) + change(cl) + change(c) + change(cr) +"\n"); seqFile.push("Ti_down: " + (change(br_) + change(Da_) + change(al_) + change(Db_) + change(bl_) + change(Dc_) + change(cl_)).split().reverse().join() + "\n");

lis.push("

" + "*************************multiplication*************************" + "

"); lis.push("

" + "************input signal************" + "

"); lis.push("

" + "ai: " + "

"+"

" + change(Da) + "

" + change(al) + "

" + change(a) + "

" + change(ar) +"

"); lis.push("

" + "bi: " + "

"+"

" + change(Db) + "

" + change(bl) + "

" + change(b) +"

" +change(br) +"

"); lis.push("

" + "************double stranded DNA************" + "

"); lis.push("

" + "Wi_up:" + "

"+"

" + change(a) + "

" + change(ar) +"

"); lis.push("

" + "Wi_down:" + "

"+"

" + change(ar_).split().reverse().join() + "

" + change(a_).split().reverse().join()+ "

" + change(al_).split().reverse().join() +"

"); lis.push("

" + "************double stranded DNA************" + "

"); lis.push("

" + "Li_up1: " + "

"+"

" + change(a) + "

" + change(ar) + "

" + change(bl) + "

"); lis.push("

" + "Li_up2: " + "

"+"

" + change(b) + "

" + change(br) +"

" + change(Da) + "

" + change(al) +"

" + change(Db) + "

" + change(bl) +"

" + change(Dc) + "

" + change(cl) + "

"); lis.push("

" + "Li_down: " + "

"+"

" + change(br_).split().reverse().join() + "

" + change(b_).split().reverse().join() + "

" + change(bl_).split().reverse().join() +"

" + change(ar_).split().reverse().join() + "

" + change(a_).split().reverse().join() + "

" + change(al_).split().reverse().join() +"

"); lis.push("

" + "************auxiliary single stranded DNA************" + "

"); lis.push("

" + "Bi: " + "

"+"

" + change(a) + "

" + change(ar) + "

" + change(bl) +"

"); lis.push("

" + "************double stranded DNA************" + "

"); lis.push("

" + "Ti_up1: " + "

"+"

" + change(Da) + "

" + change(al) + "

" + change(a) + "

" + change(ar) +"

"); lis.push("

" + "Ti_up2: " + "

"+"

" + change(Db) + "

" + change(bl) + "

" + change(b) + "

" + change(br) +"

"); lis.push("

" + "Ti_up3: " + "

"+"

" + change(Dc) + "

" + change(cl) + "

" + change(c) + "

" + change(cr) +"

"); lis.push("

" + "Ti_down: " + "

"+"

" + change(cl_).split().reverse().join() + "

" + change(Dc_).split().reverse().join() + "

" + change(bl_).split().reverse().join() + "

" + change(Db_).split().reverse().join() + "

" + change(al_).split().reverse().join() + "

" + change(Da_).split().reverse().join() + "

" + change(br_).split().reverse().join() +"

");

return dict; }

	seqFile.push("Li_up1: " + change(a) + change(ar) + change(bl) +"\n");
	seqFile.push("Li_up2: "	+ change(b) + change(br) + change(Dc) + change(cl) +"\n");

seqFile.push("Li_down:" + (change(al_) + change(a_) + change(ar_) + change(bl_) + change(b_) + change(br_)).split().reverse().join() +"\n"); seqFile.push("************auxiliary single stranded DNA************\n"); seqFile.push("Bi:" + change(a) + change(ar) + change(bl) +"\n"); seqFile.push("************double stranded DNA************\n"); seqFile.push("Ti_up: " + change(Dc) + change(cl) + change(c) + change(cr) +"\n"); seqFile.push("Ti_down: " + (change(br_) + change(Dc_) + change(cl_)).split().reverse().join() + "\n");

lis.push("

" + "*************************subtraction*************************" + "

"); lis.push("

" + "************input signal************" + "

"); lis.push("

" + "ai: " + "

"+"

" + change(Da) + "

" + change(al) + "

" + change(a) + "

" + change(ar) +"

"); lis.push("

" + "bi: " + "

"+"

" + change(Db) + "

" + change(bl) + "

" + change(b) + "

" +change(br) +"

"); lis.push("

" + "************double stranded DNA************" + "

"); lis.push("

" + "Li_up1: " + "

"+"

" + change(a) + "

" + change(ar) + "

" + change(bl) + "

"); lis.push("

" + "Li_up2: " + "

"+"

" + change(b) + "

" + change(br) +"

" + change(Da) + "

" + change(al) +"

" + change(Db) + "

" + change(bl) +"

" + change(Dc) + "

" + change(cl) +"

"); lis.push("

" + "Li_down: " + "

"+"

" + change(br_).split().reverse().join() + "

" + change(b_).split().reverse().join() + "

" + change(bl_).split().reverse().join() +"

" + change(ar_).split().reverse().join() + "

" + change(a_).split().reverse().join() + "

" + change(al_).split().reverse().join() +"

"); lis.push("

" + "************auxiliary single stranded DNA************" + "

"); lis.push("

" + "Bi: " + "

"+"

" + change(a) + "

" + change(ar) + "

" + change(bl) +"

"); lis.push("

" + "************double stranded DNA************" + "

"); lis.push("

" + "Ti_up: "+ "

"+"

" + change(Dc) + "

" + change(cl) +"

" + change(c) + "

" + change(cr) +"

"); lis.push("

" + "Ti_down: " + "

"+"

" + change(cl_).split().reverse().join() + "

" + change(Dc_).split().reverse().join() + "

" + change(br_).split().reverse().join()+"

");

return dict; }

seqFile.push("************double stranded DNA************\n"); seqFile.push("Wi_up:" + change(a) + change(ar) +"\n"); seqFile.push("Wi_down:" + change(ar_).split().reverse().join() + change(a_).split().reverse().join() + change(al_).split().reverse().join() + "\n");

seqFile.push("************double stranded DNA************\n"); seqFile.push("Li_up1: " + change(a) + change(ar) + change(bl) + "\n"); seqFile.push("Li_up2: " + change(b) + change(br) + change(Da) + change(al) + change(Db) + change(bl) + change(Dc) + change(cl) + change(Dd) + change(dl) + "\n"); seqFile.push("Li_down: " + (change(al_) + change(a_) + change(ar_) + change(bl_) + change(b_) + change(br_)).split().reverse().join() +"\n");

seqFile.push("************auxiliary single stranded DNA************\n"); seqFile.push("Bi: " + change(a) + change(ar) + change(bl) +"\n");

seqFile.push("************double stranded DNA************\n"); seqFile.push("Ti_up1: " + change(Da) + change(al) + change(a) + change(ar) +"\n"); seqFile.push("Ti_up2: " + change(Db) + change(bl) + change(b) + change(br) +"\n"); seqFile.push("Ti_up3: " + change(Dc) + change(cl) + change(c) + change(cr) +"\n"); seqFile.push("Ti_up4: " + change(Dd) + change(dl) + change(d) + change(dr) +"\n"); seqFile.push("Ti_down: " + (change(br_) + change(Da_) + change(al_) + change(Db_) + change(bl_) + change(Dc_) + change(cl_) + change(Dd_) + change(dl_)).split().reverse().join() + "\n");

lis.push("

*************************multiplication*************************

"); lis.push("

************input signal************

"); lis.push("

" + "ai: " + "

"+"

" + change(Da) + "

" + change(al) + "

" + change(a) + "

" + change(ar) +"

"); lis.push("

" + "bi: " + "

"+"

" + change(Db) + "

" + change(bl) + "

" + change(b) + "

" + change(br) +"

"); lis.push("

" + "************double stranded DNA************" + "

"); lis.push("

" + "Wi_up: " + "

"+"

" + change(a) + "

" + change(ar) +"

"); lis.push("

" + "Wi_down: " + "

"+"

" + change(ar_).split().reverse().join() + "

" + change(a_).split().reverse().join()+ "

" + change(al_).split().reverse().join() +"

"); lis.push("

" + "************double stranded DNA************" + "

"); lis.push("

" + "Li_up1: " + "

"+"

" + change(a) + "

" + change(ar) + "

" + change(bl) + "

"); lis.push("

" + "Li_up2: " + "

"+"

" + change(b) + "

" + change(br) + "

" + change(Da) + "

" + change(al) +"

" + change(Db) + "

" + change(bl) +"

" + change(Dc) + "

" + change(cl) + "

" + change(Dd) + "

" + change(dl) + "

"); lis.push("

" + "Li_down: " + "

"+"

" + change(br_).split().reverse().join() + "

" + change(b_).split().reverse().join() + "

" + change(bl_).split().reverse().join() +"

" + change(ar_).split().reverse().join() + "

" + change(a_).split().reverse().join() + "

" + change(al_).split().reverse().join() +"

"); lis.push("

" + "************auxiliary single stranded DNA************" + "

"); lis.push("

" + "Bi: " + "

"+"

" + change(a) + "

" + change(ar) + "

" + change(bl) +"

"); lis.push("

" + "************double stranded DNA************" + "

"); lis.push("

" + "Ti_up1: " + "

"+"

" + change(Da) + "

" + change(al) + "

" + change(a) + "

" + change(ar) +"

"); lis.push("

" + "Ti_up2: " + "

"+"

" + change(Db) + "

" + change(bl) + "

" + change(b) + "

" + change(br) +"

"); lis.push("

" + "Ti_up3: " + "

"+"

" + change(Dc) + "

" + change(cl) + "

" + change(c) + "

" + change(cr) +"

"); lis.push("

" + "Ti_up4: " + "

"+"

" + change(Dd) + "

" + change(dl) + "

" + change(d) + "

" + change(dr) +"

"); lis.push("

" + "Ti_down: " + "

"+"

" + change(dl_).split().reverse().join() + "

" + change(Dd_).split().reverse().join() + "

" + change(cl_).split().reverse().join() + "

" + change(Dc_).split().reverse().join() + "

" + change(bl_).split().reverse().join() + "

" + change(Db_).split().reverse().join() + "

" + change(al_).split().reverse().join() + "

" + change(Da_).split().reverse().join() + "

" + change(br_).split().reverse().join() +"

");

return dict; } ////////////////////tools///////////////////////////////////////////////// function findNameinDict(name,dict0){ for(var i=0;i<dict0.length;i=i+1){

     	//console.log(dict0[i]);

if(dict0[i]==name) return true; } return false; } function getIndex(element,lis){ for(var i=0;i<lis.length;i=i+1){ if(element==lis[i]) return i; } return -1; }

@@ Line 5: / Line 5: @@
 var arrowHeadLen=12;
 var DNAseperate=36;
-var Font="10px Arial";
+var Font="0px Arial";
-var FontDescription="14px Arial";
+var FontDescription="20px Arial";
 var fontSpace=3;
 var Black=[0,0,0];
 var reacArrowLen=60;
 var reacArrowHeadLen=9;
-var longDNAlen=30;
+var longDNAlen=40;
-var shortDNAlen=24;
+var shortDNAlen=32;
 var arrowSin=0.4;
 var arrowCos=Math.sqrt(1-arrowSin*arrowSin);
@@ Line 19: / Line 19: @@
 var longDNAlen=30;
 var shortDNAlen=15;
+var fontSpaceRatio=2;
 //color and name
 //name
@@ Line 24: / Line 25: @@
 var xp="x+",xn="x-";
 var y="y",yn="y-";
-var waste="_w_";
+var waste="waste";
 var wi0p=[],wi0n=[];
 var wip=[],win=[];
@@ Line 44: / Line 45: @@
 var lis=[];
 var seqFile=[];
+var weightNum=1;
 function draw() {
-	var weightNum=document.getElementById("number").value;
+	weightNum=document.getElementById("number").value;
-	// ctx.font = "18px Arial";
+	if (weightNum>8) {
-	// ctx.fillText("Da",20,65);
+		alreadySubmit.innerHTML="Too many inputs for a single neuron!";
-	seqDict=[[]];
+	}
-	seqFile=[];
+	else{
-	drawNeuron(weightNum);
+		//alreadySubmit.innerHTML="Generating a neuron with "+weightNum+" inputs...<br>";
+		seqDict=[[]];
-	//showSeq(seqDict,[10,10]);
+		seqFile=[];
+		drawNeuron(weightNum);
+		alreadySubmit.innerHTML="Successfully generated a neuron with "+weightNum+" inputs!<br>Click the three buttons below to see reactions corresponding to each step!<br>";
+	}
 }
+function setCanvans(height){
+	var canv = document.getElementById("words");
+	canv.innerHTML="<canvas id=\"canvas\"  width=\"1700\" height=\""+height+"\"></canvas><br>"
+}
 function showSeq(){
      var seqs = document.getElementById("sequence");
- //    for(var i=0;i<seqDict[0].length;i++){
- //    	seqs.innerHTML=seqs.innerHTML+"***************"+seqDict[0][i]+"***************"+":<br>"
-	// 	for(var j in seqDict[i+1]){
-	// 		seqs.innerHTML = seqs.innerHTML + change(seqDict[i+1][j]) +"<br>";
-	// 	}
-	// }
 	seqs.innerHTML="";
 	for(var i=0;i<lis.length;i++){
@@ Line 71: / Line 76: @@
 function windowSeq(){
 	var content="";
- //    for(var i=0;i<seqDict[0].length;i++){
-	// 	content+="***************"+seqDict[0][i]+"***************"+":\n";
-	// 	for(var j in seqDict[i+1]){
-	// 		content+=change(seqDict[i+1][j]) +"\n";
-	// 	}
-	// }
 	for(var i=0;i<seqFile.length;i++){
 		content+=seqFile[i];
@@ Line 136: / Line 135: @@
 	ctx.lineTo(x+len,y);
 	ctx.stroke();
+	ctx.font = Font;
 	ctx.fillStyle='rgb('+R+','+G+','+B+')';
 	ctx.fillText(name,x,y-fontSpace);
@@ Line 156: / Line 156: @@
 		ctx.stroke();
 	}
+	ctx.font = Font;
 	ctx.fillStyle='rgb('+R+','+G+','+B+')';
 	ctx.fillText(name,x,y-fontSpace);
@@ Line 166: / Line 167: @@
 	ctx.lineTo(x+arrowCos*len,y-arrowSin*len);
 	ctx.stroke();
+	ctx.font = Font;
 	ctx.fillStyle='rgb('+R+','+G+','+B+')';
 	ctx.fillText(name,x+len/2,y-fontSpace);
@@ Line 178: / Line 180: @@
 		ctx.stroke();
 	}
+	ctx.font = Font;
 	ctx.fillStyle='rgb('+R+','+G+','+B+')';
 	ctx.fillText(name,x+len/2,y-fontSpace);
@@ Line 188: / Line 191: @@
 	ctx.lineTo(x-arrowCos*len,y-arrowSin*len);
 	ctx.stroke();
+	ctx.font = Font;
 	ctx.fillStyle='rgb('+R+','+G+','+B+')';
 	ctx.fillText(name,x-len/2,y-len/2-fontSpace);
@@ Line 234: / Line 238: @@
 	ctx.lineTo(x+len,y);
 	ctx.stroke();
+	ctx.font = Font;
 	ctx.fillStyle='rgb('+R+','+G+','+B+')';
 	ctx.fillText(name,x+len/2,y-fontSpace);
@@ Line 254: / Line 259: @@
 	ctx.stroke();
+	ctx.font = Font;
 	ctx.fillStyle='rgb('+R+','+G+','+B+')';
 	ctx.fillText(name,x+len/2,y-fontSpace);
@@ Line 276: / Line 283: @@
 	ctx.lineTo(x+len,y);
 	ctx.stroke();
+	ctx.font = Font;
 	ctx.fillStyle='rgb('+R+','+G+','+B+')';
 	ctx.fillText(name,x+len/2,y-fontSpace);
@@ Line 297: / Line 305: @@
 		ctx.stroke();
 	}
+	ctx.font = Font;
 	ctx.fillStyle='rgb('+R+','+G+','+B+')';
 	ctx.fillText(name,x+len/2,y-fontSpace);
 }
-function arrowUpRight45(ctx,lenInAxis,[x,y],[R,G,B],arrowLen,arrowAngle){//arrowAngle:theta,best:Math.PI/8
+// function arrowUpRight45(ctx,lenInAxis,[x,y],[R,G,B],arrowLen,arrowAngle){//arrowAngle:theta,best:Math.PI/8
-	ctx.strokeStyle='rgb('+R+','+G+','+B+')';
+// 	ctx.strokeStyle='rgb('+R+','+G+','+B+')';
-	ctx.beginPath();
+// 	ctx.beginPath();
-	ctx.moveTo(x,y);
+// 	ctx.moveTo(x,y);
-	ctx.lineTo(x+arrowCos*lenInAxis,y-arrowSin*lenInAxis);
+// 	ctx.lineTo(x+arrowCos*lenInAxis,y-arrowSin*lenInAxis);
-	//right
+// 	//right
-	ctx.moveTo(x+arrowCos*lenInAxis-Math.floor(arrowLen*Math.cos(Math.PI/2-arrowAngle)),
+// 	ctx.moveTo(x+arrowCos*lenInAxis-Math.floor(arrowLen*Math.cos(Math.PI/2-arrowAngle)),
-		y-arrowSin*lenInAxis+Math.floor(arrowLen*Math.sin(Math.PI/2-arrowAngle)));
+// 		y-arrowSin*lenInAxis+Math.floor(arrowLen*Math.sin(Math.PI/2-arrowAngle)));
-	ctx.lineTo(x+arrowCos*lenInAxis,y-arrowSin*lenInAxis);
+// 	ctx.lineTo(x+arrowCos*lenInAxis,y-arrowSin*lenInAxis);
-	//left
+// 	//left
-	ctx.moveTo(x+arrowCos*lenInAxis-Math.floor(arrowLen*Math.sin(Math.PI/2-arrowAngle)),
+// 	ctx.moveTo(x+arrowCos*lenInAxis-Math.floor(arrowLen*Math.sin(Math.PI/2-arrowAngle)),
-		y-arrowSin*lenInAxis+Math.floor(arrowLen*Math.cos(Math.PI/2-arrowAngle)));
+// 		y-arrowSin*lenInAxis+Math.floor(arrowLen*Math.cos(Math.PI/2-arrowAngle)));
-	ctx.lineTo(x+arrowCos*lenInAxis,y-arrowSin*lenInAxis);
+// 	ctx.lineTo(x+arrowCos*lenInAxis,y-arrowSin*lenInAxis);
-	ctx.stroke();
+// 	ctx.stroke();
-}
+// }
 function arrowDashedUpRight45(ctx,name,lenInAxis,[x,y],[R,G,B],arrowLen,arrowAngle,stepInAxis){//arrowAngle:theta
@@ Line 327: / Line 336: @@
 	//right half arrow head
 	ctx.moveTo(x+arrowCos*lenInAxis-Math.floor(arrowLen*Math.cos(arrowAngle-line45Angle)),
-		y-arrowSin*lenInAxis+Math.floor(arrowLen*Math.sin(arrowAngle-line45Angle)));
+		y-arrowSin*lenInAxis+Math.floor(arrowLen*Math.sin(line45Angle-arrowAngle)));
 	ctx.lineTo(x+arrowCos*lenInAxis,y-arrowSin*lenInAxis);
 	//left half arrow head
-	ctx.moveTo(x+arrowCos*lenInAxis-Math.floor(arrowLen*Math.sin(arrowAngle-line45Angle)),
+	ctx.moveTo(x+arrowCos*lenInAxis-Math.floor(arrowLen*Math.sin(Math.PI/2-line45Angle-arrowAngle)),
-		y-arrowSin*lenInAxis+Math.floor(arrowLen*Math.cos(arrowAngle-line45Angle)));
+		y-arrowSin*lenInAxis+Math.floor(arrowLen*Math.cos(Math.PI/2-line45Angle-arrowAngle)));
 	ctx.lineTo(x+arrowCos*lenInAxis,y-arrowSin*lenInAxis);
 	ctx.stroke();
+	ctx.font = Font;
 	ctx.fillStyle='rgb('+R+','+G+','+B+')';
 	ctx.fillText(name,x+lenInAxis/2,y-fontSpace);
 }
-function arrowDownLeft45(ctx,lenInAxis,[x,y],[R,G,B],arrowLen,arrowAngle){//arrowAngle:theta,best:Math.PI/8
+// function arrowDownLeft45(ctx,lenInAxis,[x,y],[R,G,B],arrowLen,arrowAngle){//arrowAngle:theta,best:Math.PI/8
-	ctx.strokeStyle='rgb('+R+','+G+','+B+')';
+// 	ctx.strokeStyle='rgb('+R+','+G+','+B+')';
-	ctx.beginPath();
+// 	ctx.beginPath();
-	ctx.moveTo(x,y);
+// 	ctx.moveTo(x,y);
-	ctx.lineTo(x-arrowCos*lenInAxis,y+arrowSin*lenInAxis);
+// 	ctx.lineTo(x-arrowCos*lenInAxis,y+arrowSin*lenInAxis);
-	//right
+// 	//right
-	ctx.moveTo(x-arrowCos*lenInAxis+Math.floor(arrowLen*Math.cos(Math.PI/2-arrowAngle)),
+// 	ctx.moveTo(x-arrowCos*lenInAxis+Math.floor(arrowLen*Math.cos(Math.PI/2-arrowAngle)),
-		y+arrowSin*lenInAxis-Math.floor(arrowLen*Math.sin(Math.PI/2-arrowAngle)));
+// 		y+arrowSin*lenInAxis-Math.floor(arrowLen*Math.sin(Math.PI/2-arrowAngle)));
-	ctx.lineTo(x-arrowCos*lenInAxis,y+arrowSin*lenInAxis);
+// 	ctx.lineTo(x-arrowCos*lenInAxis,y+arrowSin*lenInAxis);
-	//left
+// 	//left
-	ctx.moveTo(x-arrowCos*lenInAxis+Math.floor(arrowLen*Math.sin(Math.PI/2-arrowAngle)),
+// 	ctx.moveTo(x-arrowCos*lenInAxis+Math.floor(arrowLen*Math.sin(Math.PI/2-arrowAngle)),
-		y+arrowSin*lenInAxis-Math.floor(arrowLen*Math.cos(Math.PI/2-arrowAngle)));
+// 		y+arrowSin*lenInAxis-Math.floor(arrowLen*Math.cos(Math.PI/2-arrowAngle)));
-	ctx.lineTo(x-arrowCos*lenInAxis,y+arrowSin*lenInAxis);
+// 	ctx.lineTo(x-arrowCos*lenInAxis,y+arrowSin*lenInAxis);
-	ctx.stroke();
+// 	ctx.stroke();
-}
+// }
 function arrowDashedDownLeft45(ctx,name,lenInAxis,[x,y],[R,G,B],arrowLen,arrowAngle,stepInAxis){//arrowAngle:theta
@@ Line 364: / Line 374: @@
 	}
 	//right
-	ctx.moveTo(x-lenInAxis+Math.floor(arrowLen*Math.cos(Math.PI/2-arrowAngle)),
+	ctx.moveTo(x-arrowCos*lenInAxis+Math.floor(arrowLen*Math.cos(line45Angle-arrowAngle)),
-		y+arrowSin*lenInAxis-Math.floor(arrowLen*Math.sin(Math.PI/2-arrowAngle)));
+		y+arrowSin*lenInAxis-Math.floor(arrowLen*Math.sin(line45Angle-arrowAngle)));
 	ctx.lineTo(x-arrowCos*lenInAxis,y+arrowSin*lenInAxis);
-	//left
+	//left half arrow head
-	ctx.moveTo(x-arrowCos*lenInAxis+Math.floor(arrowLen*Math.sin(Math.PI/2-arrowAngle)),
+	ctx.moveTo(x-arrowCos*lenInAxis+Math.floor(arrowLen*Math.sin(Math.PI/2-line45Angle-arrowAngle)),
-		y+arrowSin*lenInAxis-Math.floor(arrowLen*Math.cos(Math.PI/2-arrowAngle)));
+		y+arrowSin*lenInAxis-Math.floor(arrowLen*Math.cos(Math.PI/2-line45Angle-arrowAngle)));
 	ctx.lineTo(x-arrowCos*lenInAxis,y+arrowSin*lenInAxis);
 	ctx.stroke();
+	ctx.font = Font;
 	ctx.fillText(name,x-lenInAxis/2,y+lenInAxis/2+fontSpace);
 }
@@ Line 447: / Line 459: @@
+function showSpeciesName(ctx,str,[X,Y],sep=DNAseperate){//use before showing a species
+	Y+=DNAseperate;
+	X+=sep;
+	displayStr(ctx,str,[X,Y],Black);
+}
@@ Line 470: / Line 486: @@
 	var c=cName;
 	var cr=cName+"r";
+	displayStr(ctx,'input',[X,Y],Black);
+	X+=DNAseperate*fontSpaceRatio;
+	showSpeciesName(ctx,aName,[X,Y]);
 	X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen);
+	showSpeciesName(ctx,bName,[X,Y]);
 	X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen);
+	displayStr(ctx,'output',[X,Y],Black);
+	X+=DNAseperate*fontSpaceRatio;
+	showSpeciesName(ctx,cName,[X,Y]);
 	X=drawSig(ctx,cName,cColor,[X,Y],longDNAlen,shortDNAlen);
 	Y0=Y0+4*DNAseperate;
+	Y=Y0;
+	X=X0;
+	showSpeciesName(ctx,aName,[X,Y]);
 	X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen);
 	//Wi
+	showSpeciesName(ctx,"Wi",[X,Y],DNAseperate/2);
 	arrowDashedDownLeft45(ctx,al+"*",shortDNAlen,[X,Y+DNAwid],aColor,arrowHeadLen,arrowAngle,DNAstep);
 	drawDoubleDNAnoArrow(ctx,a,longDNAlen,aColor,[X,Y]);
@@ Line 486: / Line 515: @@
 	//waste
 	X=X+reacArrowLen+DNAseperate*2;
+	showSpeciesName(ctx,"waste",[X,Y],DNAseperate/2);
 	up45LeftLine(ctx,Da,longDNAlen,[X,Y],Black);
 	drawDoubleDNADashedwithArrowHorizontalLeft(ctx,al,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep);
@@ Line 494: / Line 524: @@
 	//waste
 	X=X+shortDNAlen+DNAseperate;
+	showSpeciesName(ctx,"waste",[X,Y],DNAseperate/2);
 	horizontalLine(ctx,a,longDNAlen,[X,Y],aColor);
 	X=X+longDNAlen;
@@ Line 502: / Line 533: @@
 	X=X0;
 	Y=Y0+4*DNAseperate;
+	showSpeciesName(ctx,aName,[X,Y]);
 	X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen);
 	//Li
+	showSpeciesName(ctx,"Li",[X,Y]);
 	arrowDashedDownLeft45(ctx,al+"*",shortDNAlen,[X,Y+DNAwid],aColor,arrowHeadLen,arrowAngle,DNAstep);
 	drawDoubleDNAnoArrow(ctx,a,longDNAlen,aColor,[X,Y]);
@@ Line 539: / Line 571: @@
 	X=X+reacArrowLen+2*DNAseperate;
 	//Hi
+	showSpeciesName(ctx,"Hi",[X,Y]);
 	up45LeftLine(ctx,Da,longDNAlen,[X,Y],Black);
 	drawDoubleDNADashedwithArrowHorizontalLeft(ctx,al,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep);
@@ Line 572: / Line 605: @@
 	X=X+DNAseperate;
 	Y=Y0+4*DNAseperate;
+	showSpeciesName(ctx,"Bi",[X,Y]);
 	horizontalLine(ctx,a,longDNAlen,[X,Y],aColor);
 	X=X+longDNAlen;
@@ Line 581: / Line 615: @@
 	X=X0;
 	Y=Y0+8*DNAseperate;
+	showSpeciesName(ctx,bName,[X,Y]);
 	X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen);
 	//Hi
+	showSpeciesName(ctx,"Hi",[X,Y]);
 	up45LeftLine(ctx,Da,longDNAlen,[X,Y],Black);
 	drawDoubleDNADashedwithArrowHorizontalLeft(ctx,al,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep);
@@ Line 620: / Line 656: @@
 	//waste
+	showSpeciesName(ctx,"waste",[X,Y]);
 	up45LeftLine(ctx,Da,longDNAlen,[X,Y],Black);
 	drawDoubleDNADashedwithArrowHorizontalLeft(ctx,al,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep);
@@ Line 637: / Line 674: @@
 	//Oi
+	showSpeciesName(ctx,"Oi",[X,Y]);
 	horizontalLine(ctx,b,longDNAlen,[X,Y],bColor);
 	X=X+longDNAlen;
@@ Line 657: / Line 695: @@
 	Y=Y0+12*DNAseperate;
 	//Oi
+	showSpeciesName(ctx,"Oi",[X,Y]);
 	horizontalLine(ctx,b,longDNAlen,[X,Y],bColor);
 	X=X+longDNAlen;
@@ Line 675: / Line 714: @@
 	X=X+DNAseperate;
 	//Ti
+	showSpeciesName(ctx,"Ti",[X,Y]);
 	arrowDashedDownLeft45(ctx,br+"*",shortDNAlen,[X,Y+DNAwid],bColor,arrowHeadLen,arrowAngle,DNAstep);
 	drawDoubleDNAnoArrow(ctx,Da,longDNAlen,Black,[X,Y]);
@@ Line 699: / Line 739: @@
 	//waste
 	X=X+reacArrowLen+2*DNAseperate;
+	showSpeciesName(ctx,"waste",[X,Y]);
 	up45LeftLine(ctx,b,longDNAlen,[X,Y],bColor);
 	drawDoubleDNADashedwithArrowHorizontalLeft(ctx,br,shortDNAlen,bColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep);
@@ Line 715: / Line 756: @@
 	X=X+shortDNAlen+DNAseperate;
+	showSpeciesName(ctx,aName,[X,Y]);
 	X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen);
+	showSpeciesName(ctx,bName,[X,Y]);
 	X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen);
+	showSpeciesName(ctx,cName,[X,Y]);
 	X=drawSig(ctx,cName,cColor,[X,Y],longDNAlen,shortDNAlen);
+	Y0-=4*DNAseperate;
 	if(X+shortDNAlen>maxX) maxX=X+shortDNAlen;
-	maxX+=DNAseperate;
+	maxX+=2*DNAseperate;
-	maxY=Y+DNAseperate;
+	maxY=Y+2*DNAseperate;
 	ctx.strokeStyle='rgb('+0+','+0+','+0+')';
 	ctx.moveTo(X0-DNAseperate,Y0-DNAseperate);
@@ Line 759: / Line 804: @@
 	var d=dName;
 	var dr=dName+"r";
+	displayStr(ctx,'input',[X,Y],Black);
+	X+=DNAseperate*fontSpaceRatio;
+	showSpeciesName(ctx,aName,[X,Y]);
+	X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen);
+	showSpeciesName(ctx,bName,[X,Y]);
+	X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen);
+	displayStr(ctx,'output',[X,Y],Black);
+	X+=DNAseperate*fontSpaceRatio;
+	showSpeciesName(ctx,cName,[X,Y]);
+	X=drawSig(ctx,cName,cColor,[X,Y],longDNAlen,shortDNAlen);
+	showSpeciesName(ctx,dName,[X,Y]);
+	X=drawSig(ctx,dName,dColor,[X,Y],longDNAlen,shortDNAlen);
+	Y0=Y0+4*DNAseperate;
+	Y=Y0;
+	X=X0;
+	showSpeciesName(ctx,aName,[X,Y]);
 	X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen);
 	//Wi
+	showSpeciesName(ctx,"Wi",[X,Y],DNAseperate/2);
 	arrowDashedDownLeft45(ctx,al+"*",shortDNAlen,[X,Y+DNAwid],aColor,arrowHeadLen,arrowAngle,DNAstep);
 	drawDoubleDNAnoArrow(ctx,a,longDNAlen,aColor,[X,Y]);
@@ Line 770: / Line 833: @@
 	//waste
 	X=X+reacArrowLen+DNAseperate*2;
+	showSpeciesName(ctx,"waste",[X,Y],DNAseperate/2);
 	up45LeftLine(ctx,Da,longDNAlen,[X,Y],Black);
 	drawDoubleDNADashedwithArrowHorizontalLeft(ctx,al,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep);
@@ Line 778: / Line 842: @@
 	//waste
 	X=X+shortDNAlen+DNAseperate;
+	showSpeciesName(ctx,"waste",[X,Y],DNAseperate/2);
 	horizontalLine(ctx,a,longDNAlen,[X,Y],aColor);
 	X=X+longDNAlen;
@@ Line 787: / Line 852: @@
 	Y=Y0+4*DNAseperate;
+	showSpeciesName(ctx,aName,[X,Y]);
 	X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen);
 	//Li
+	showSpeciesName(ctx,"Li",[X,Y]);
 	arrowDashedDownLeft45(ctx,al+"*",shortDNAlen,[X,Y+DNAwid],aColor,arrowHeadLen,arrowAngle,DNAstep);
 	drawDoubleDNAnoArrow(ctx,a,longDNAlen,aColor,[X,Y]);
@@ Line 829: / Line 896: @@
 	X=X+reacArrowLen+2*DNAseperate;
 	//Hi
+	showSpeciesName(ctx,"Hi",[X,Y]);
 	up45LeftLine(ctx,Da,longDNAlen,[X,Y],Black);
 	drawDoubleDNADashedwithArrowHorizontalLeft(ctx,al,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep);
@@ Line 867: / Line 935: @@
 	X=X+arrowCos*shortDNAlen+DNAseperate;
 	Y=Y0+4*DNAseperate;
+	showSpeciesName(ctx,"Bi",[X,Y]);
 	horizontalLine(ctx,a,longDNAlen,[X,Y],aColor);
 	X=X+longDNAlen;
@@ Line 876: / Line 945: @@
 	X=X0;
 	Y=Y0+8*DNAseperate;
+	showSpeciesName(ctx,bName,[X,Y]);
 	X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen);
 	//Hi
+	showSpeciesName(ctx,"Hi",[X,Y]);
 	up45LeftLine(ctx,Da,longDNAlen,[X,Y],Black);
 	drawDoubleDNADashedwithArrowHorizontalLeft(ctx,al,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep);
@@ Line 920: / Line 991: @@
 	X=X+reacArrowLen+2*DNAseperate;
 	//waste
+	showSpeciesName(ctx,"waste",[X,Y]);
 	up45LeftLine(ctx,Da,longDNAlen,[X,Y],Black);
 	drawDoubleDNADashedwithArrowHorizontalLeft(ctx,al,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep);
@@ Line 937: / Line 1,009: @@
 	//Oi
+	showSpeciesName(ctx,"Oi",[X,Y]);
 	horizontalLine(ctx,b,longDNAlen,[X,Y],bColor);
 	X=X+longDNAlen;
@@ Line 961: / Line 1,034: @@
 	Y=Y0+12*DNAseperate;
 	//Oi
+	showSpeciesName(ctx,"Oi",[X,Y]);
 	horizontalLine(ctx,b,longDNAlen,[X,Y],bColor);
 	X=X+longDNAlen;
@@ Line 984: / Line 1,058: @@
 	X=X+DNAseperate;
 	//Ti
+	showSpeciesName(ctx,"Ti",[X,Y]);
 	arrowDashedDownLeft45(ctx,br+"*",shortDNAlen,[X,Y+DNAwid],bColor,arrowHeadLen,arrowAngle,DNAstep);
 	drawDoubleDNAnoArrow(ctx,Da,longDNAlen,Black,[X,Y]);
@@ Line 1,017: / Line 1,092: @@
 	//waste
+	showSpeciesName(ctx,"waste",[X,Y]);
 	up45LeftLine(ctx,b,longDNAlen,[X,Y],bColor);
 	drawDoubleDNADashedwithArrowHorizontalLeft(ctx,br,shortDNAlen,bColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep);
@@ Line 1,037: / Line 1,113: @@
 	X=X+shortDNAlen+DNAseperate;
+	showSpeciesName(ctx,aName,[X,Y]);
 	X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen);
+	showSpeciesName(ctx,bName,[X,Y]);
 	X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen);
+	showSpeciesName(ctx,cName,[X,Y]);
 	X=drawSig(ctx,cName,cColor,[X,Y],longDNAlen,shortDNAlen);
+	showSpeciesName(ctx,dName,[X,Y]);
 	X=drawSig(ctx,dName,dColor,[X,Y],longDNAlen,shortDNAlen);
+	Y0-=4*DNAseperate;
 	if(X+shortDNAlen>maxX) maxX=X+shortDNAlen;
-	maxX+=DNAseperate;
+	maxX+=2*DNAseperate;
-	maxY=Y+DNAseperate;
+	maxY=Y+2*DNAseperate;
 	ctx.strokeStyle='rgb('+0+','+0+','+0+')';
 	ctx.moveTo(X0-DNAseperate,Y0-DNAseperate);
@@ Line 1,074: / Line 1,155: @@
 	var b=bName;
 	var br=bName+"r";
+	displayStr(ctx,'input',[X,Y],Black);
+	X+=DNAseperate*fontSpaceRatio;
+	showSpeciesName(ctx,aName,[X,Y]);
+	X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen);
+	displayStr(ctx,'output',[X,Y],Black);
+	X+=DNAseperate*fontSpaceRatio;
+	showSpeciesName(ctx,bName,[X,Y]);
+	X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen);
+	Y0=Y0+4*DNAseperate;
+	Y=Y0;
+	X=X0;
 	//Line 1
+	showSpeciesName(ctx,aName,[X,Y]);
 	X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen);
 	//Gi
+	showSpeciesName(ctx,"Gi",[X,Y],DNAseperate/2);
 	arrowDashedDownLeft45(ctx,al+"*",shortDNAlen,[X,Y+DNAwid],aColor,arrowHeadLen,arrowAngle,DNAstep);
 	drawDoubleDNAnoArrow(ctx,a,longDNAlen,aColor,[X,Y]);
@@ Line 1,096: / Line 1,191: @@
 	//Oi
 	Y=Y0;
+	showSpeciesName(ctx,"Oi",[X,Y]);
 	horizontalLine(ctx,a,longDNAlen,[X,Y],aColor);
 	X=X+longDNAlen;
@@ Line 1,105: / Line 1,201: @@
 	//waste
 	X=X+shortDNAlen+DNAseperate*2;
+	showSpeciesName(ctx,"waste",[X,Y],DNAseperate/2);
 	up45LeftLine(ctx,Da,longDNAlen,[X,Y],Black);
 	drawDoubleDNADashedwithArrowHorizontalLeft(ctx,al,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep);
@@ Line 1,116: / Line 1,213: @@
 	Y=Y0+4*DNAseperate;
 	//Oi
+	showSpeciesName(ctx,"Oi",[X,Y]);
 	horizontalLine(ctx,a,longDNAlen,[X,Y],aColor);
 	X=X+longDNAlen;
@@ Line 1,126: / Line 1,224: @@
 	X=X+DNAseperate;
 	//Ti
+	showSpeciesName(ctx,"Ti",[X,Y],DNAseperate/2);
 	arrowDashedDownLeft45(ctx,al+"*",shortDNAlen,[X,Y+DNAwid],aColor,arrowHeadLen,arrowAngle,DNAstep);
 	drawDoubleDNAnoArrow(ctx,Db,longDNAlen,Black,[X,Y]);
@@ Line 1,141: / Line 1,240: @@
 	//waste
+	showSpeciesName(ctx,"waste",[X,Y],DNAseperate/2);
 	up45LeftLine(ctx,a,longDNAlen,[X,Y],aColor);
 	drawDoubleDNADashedwithArrowHorizontalLeft(ctx,ar,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep);
@@ Line 1,149: / Line 1,249: @@
 	X=X+shortDNAlen+DNAseperate;
+	showSpeciesName(ctx,bName,[X,Y]);
 	X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen);
+	Y0-=4*DNAseperate;
 	if(X+shortDNAlen>maxX) maxX=X+shortDNAlen;
-	maxX+=DNAseperate;
+	maxX+=2*DNAseperate;
-	maxY=Y+DNAseperate;
+	maxY=Y+2*DNAseperate;
 	ctx.strokeStyle='rgb('+0+','+0+','+0+')';
 	ctx.moveTo(X0-DNAseperate,Y0-DNAseperate);
@@ Line 1,188: / Line 1,290: @@
 	var c=cName;
 	var cr=cName+"r";
+	displayStr(ctx,'input',[X,Y],Black);
+	X+=DNAseperate*fontSpaceRatio;
+	showSpeciesName(ctx,aName,[X,Y]);
+	X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen);
+	showSpeciesName(ctx,bName,[X,Y]);
+	X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen);
+	Y0=Y0+4*DNAseperate;
+	Y=Y0;
+	X=X0;
 	//Line 1
+	showSpeciesName(ctx,aName,[X,Y]);
 	X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen);
 	//Li
+	showSpeciesName(ctx,"Li",[X,Y]);
 	arrowDashedDownLeft45(ctx,al+"*",shortDNAlen,[X,Y+DNAwid],aColor,arrowHeadLen,arrowAngle,DNAstep);
 	drawDoubleDNAnoArrow(ctx,a,longDNAlen,aColor,[X,Y]);
@@ Line 1,213: / Line 1,328: @@
 	X=X+reacArrowLen+2*DNAseperate;
 	//Hi
+	showSpeciesName(ctx,"Hi",[X,Y]);
 	up45LeftLine(ctx,Da,longDNAlen,[X,Y],Black);
 	drawDoubleDNADashedwithArrowHorizontalLeft(ctx,al,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep);
@@ Line 1,233: / Line 1,349: @@
 	Y=Y0;
 	//Bi
+	showSpeciesName(ctx,"Bi",[X,Y]);
 	horizontalLine(ctx,a,longDNAlen,[X,Y],aColor);
 	X=X+longDNAlen;
@@ Line 1,242: / Line 1,359: @@
 	Y=Y0+4*DNAseperate;
 	//Line 2
+	showSpeciesName(ctx,bName,[X,Y]);
 	X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen);
 	//Hi
+	showSpeciesName(ctx,"Hi",[X,Y]);
 	up45LeftLine(ctx,Da,longDNAlen,[X,Y],Black);
 	drawDoubleDNADashedwithArrowHorizontalLeft(ctx,al,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep);
@@ Line 1,267: / Line 1,386: @@
 	X=X+reacArrowLen+2*DNAseperate;
 	//waste
+	showSpeciesName(ctx,"waste",[X,Y]);
 	up45LeftLine(ctx,Da,longDNAlen,[X,Y],Black);
 	drawDoubleDNADashedwithArrowHorizontalLeft(ctx,al,shortDNAlen,aColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep);
@@ Line 1,283: / Line 1,403: @@
 	X=X+shortDNAlen+DNAseperate;
 	//Oi
+	showSpeciesName(ctx,"Oi",[X,Y]);
 	horizontalLine(ctx,b,longDNAlen,[X,Y],bColor);
 	X=X+longDNAlen;
@@ Line 1,295: / Line 1,416: @@
 	//Line 3
 	//Oi
+	showSpeciesName(ctx,"Oi",[X,Y]);
 	horizontalLine(ctx,b,longDNAlen,[X,Y],bColor);
 	X=X+longDNAlen;
@@ Line 1,304: / Line 1,426: @@
 	X=X+shortDNAlen+DNAseperate;
 	//Ti
+	showSpeciesName(ctx,"Ti",[X,Y],DNAseperate/2);
 	arrowDashedDownLeft45(ctx,br+"*",shortDNAlen,[X,Y+DNAwid],bColor,arrowHeadLen,arrowAngle,DNAstep);
 	drawDoubleDNAnoArrow(ctx,Dc,longDNAlen,Black,[X,Y]);
@@ Line 1,317: / Line 1,440: @@
 	X=X+reacArrowLen+2*DNAseperate;
 	//waste
+	showSpeciesName(ctx,"waste",[X,Y],DNAseperate/2);
 	up45LeftLine(ctx,b,longDNAlen,[X,Y],bColor);
 	drawDoubleDNADashedwithArrowHorizontalLeft(ctx,br,shortDNAlen,bColor,[X,Y],arrowHeadLen,arrowAngle,DNAstep);
@@ Line 1,324: / Line 1,448: @@
 	drawDoubleDNADashedwithArrowHorizontalRight(ctx,cl,shortDNAlen,cColor,[X,Y]);
 	X=X+shortDNAlen+DNAseperate;
+	showSpeciesName(ctx,cName,[X,Y]);
 	X=drawSig(ctx,cName,cColor,[X,Y],longDNAlen,shortDNAlen);
+	Y0-=4*DNAseperate;
 	if(X+shortDNAlen>maxX) maxX=X+shortDNAlen;
-	maxX+=DNAseperate;
+	maxX+=2*DNAseperate;
-	maxY=Y+DNAseperate;
+	maxY=Y+2*DNAseperate;
 	ctx.strokeStyle='rgb('+0+','+0+','+0+')';
 	ctx.moveTo(X0-DNAseperate,Y0-DNAseperate);
@@ Line 1,423: / Line 1,549: @@
 }
 function drawWeightedSum([X0,Y0]){
-	var ctx = document.getElementById('canvas').getContext('2d');
 	X=X0;
 	Y=Y0;
 	//Y=displayStr(ctx,"Weighted sum:",[X,Y],Black);
 	//weighted sum
-	var weightNum=document.getElementById("number").value;
+	//var weightNum=document.getElementById("number").value;
+	setCanvans(Y0+weightNum*4*18*DNAseperate+weightNum*4*4*DNAseperate-2*DNAseperate);
+	var ctx = document.getElementById('canvas').getContext('2d');
 	for(var i=1;i<=weightNum;i=i+1){
 		Y=drawMulReLU(ctx,inputpBkp[i-1],wip[i-1],xp,y,inputpBkpColor[i-1],wipColor[i-1],xpColor,yColor,[X,Y],longDNAlen,shortDNAlen)+4*DNAseperate;
@@ Line 1,447: / Line 1,574: @@
 }
 function drawSubNeuron([X0,Y0]){
-	//x^+ + x^- -> \phi
-	//Y=displayStr(ctx,"x+ + x- -> waste",[X,Y],Black);
-	var ctx = document.getElementById('canvas').getContext('2d');
 	X=X0;
 	Y=Y0;
+	setCanvans(Y0+2*14*DNAseperate+2*4*DNAseperate-2*DNAseperate);
+	var ctx = document.getElementById('canvas').getContext('2d');
 	Y=drawSub(ctx,xp,xn,waste,xpColor,xnColor,wasteColor,[X,Y],longDNAlen,shortDNAlen)+4*DNAseperate;
 	// seqDict=subtraction(seqDict,xp,xn,waste,xpColor,xnColor,wasteColor);
@@ Line 1,465: / Line 1,591: @@
 function drawBackprop([X0,Y0]){
 	//backpropagation
+	//var weightNum=document.getElementById("number").value;
+	setCanvans(Y0+weightNum*2*18*DNAseperate+weightNum*2*4*DNAseperate+weightNum*34*DNAseperate+weightNum*3*4*DNAseperate-2*DNAseperate);
 	var ctx = document.getElementById('canvas').getContext('2d');
-	var weightNum=document.getElementById("number").value;
 	X=X0;
 	Y=Y0;
@@ Line 1,899: / Line 2,026: @@
 	lis.push("<div style=\"color:#000000;float:left\">" + "************input signal************" + "</div>");
   	lis.push("<div style=\"color:#000000;float:left\">" + "ai: " + "</div>"+"<div style=\"color:#000000;float:left\">" + change(Da) + "</div><div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(al) + "</div><div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(a) + "</div><div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(ar) +"</div>");
-  	lis.push("<div style=\"color:#000000;float:left\">" + "bi: " + "</div>"+"<div style=\"color:#000000;float:left\">" + change(Db) + "</div><div style=\"color:"+rgb2hex(bColor)+";float:left\">" + change(bl) + "</div><div style=\"color:"+rgb2hex(bColor)+";float:left\">" + change(b) +"</div><div style=\"color:"+rgb2hex(bColor)+";float:left\">" +change(br) +"</div>");
+  	lis.push("<div style=\"color:#000000;float:left\">" + "bi: " + "</div>"+"<div style=\"color:#000000;float:left\">" + change(Db) + "</div><div style=\"color:"+rgb2hex(bColor)+";float:left\">" + change(bl) + "</div><div style=\"color:"+rgb2hex(bColor)+";float:left\">" + change(b) + "</div><div style=\"color:"+rgb2hex(bColor)+";float:left\">" +change(br) +"</div>");
 	lis.push("<div style=\"color:#000000;float:left\">" + "************double stranded DNA************" + "</div>");
   	lis.push("<div style=\"color:#000000;float:left\">" + "Li_up1: " + "</div>"+"<div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(a) + "</div><div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(ar) + "</div><div style=\"color:"+rgb2hex(bColor)+";float:left\">" + change(bl) + "</div>");
@@ Line 2,009: / Line 2,136: @@
 	lis.push("<div style=\"color:#000000;float:left\">*************************multiplication*************************</div>");
-	lis.push("\n");
 	lis.push("<div style=\"color:#000000;float:left\">************input signal************</div>");
    	lis.push("<div style=\"color:#000000;float:left\">" + "ai: " + "</div>"+"<div style=\"color:#000000;float:left\">" + change(Da) + "</div><div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(al) + "</div><div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(a) + "</div><div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(ar) +"</div>");
-	lis.push("<div style=\"color:#000000;float:left\">" + "bi: " + "</div>"+"<div style=\"color:#000000;float:left\">" + change(Db) + "</div><div style=\"color:"+rgb2hex(bColor)+";float:left\">" + change(bl) + "</div><div style=\"color:"+rgb2hex(bColor)+";float:left\">" + change(b) +"</div><div style=\"color:"+rgb2hex(bColor)+";float:left\">" +change(br) +"</div>");
+	lis.push("<div style=\"color:#000000;float:left\">" + "bi: " + "</div>"+"<div style=\"color:#000000;float:left\">" + change(Db) + "</div><div style=\"color:"+rgb2hex(bColor)+";float:left\">" + change(bl) + "</div><div style=\"color:"+rgb2hex(bColor)+";float:left\">" + change(b) + "</div><div style=\"color:"+rgb2hex(bColor)+";float:left\">" + change(br) +"</div>");
 	lis.push("<div style=\"color:#000000;float:left\">" + "************double stranded DNA************" + "</div>");
-	lis.push("<div style=\"color:#000000;float:left\">" + "Wi_up:" + "</div>"+"<div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(a) + "</div><div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(ar) +"</div>");
+	lis.push("<div style=\"color:#000000;float:left\">" + "Wi_up: " + "</div>"+"<div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(a) + "</div><div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(ar) +"</div>");
-	lis.push("<div style=\"color:#000000;float:left\">" + "Wi_down:" + "</div>"+"<div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(ar_).split('').reverse().join('') + "</div><div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(a_).split('').reverse().join('')+ "</div><div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(al_).split('').reverse().join('') +"</div>");
+	lis.push("<div style=\"color:#000000;float:left\">" + "Wi_down: " + "</div>"+"<div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(ar_).split('').reverse().join('') + "</div><div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(a_).split('').reverse().join('')+ "</div><div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(al_).split('').reverse().join('') +"</div>");
 	lis.push("<div style=\"color:#000000;float:left\">" + "************double stranded DNA************" + "</div>");
 	lis.push("<div style=\"color:#000000;float:left\">" + "Li_up1: " + "</div>"+"<div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(a) + "</div><div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(ar) + "</div><div style=\"color:"+rgb2hex(bColor)+";float:left\">" + change(bl) + "</div>");
-	lis.push("<div style=\"color:#000000;float:left\">" + "Li_up2: " + "</div>"+"<div style=\"color:"+rgb2hex(bColor)+";float:left\">" + change(b) + "</div><div style=\"color:"+rgb2hex(bColor)+";float:left\">" + change(br) +"</div><div style=\"color:#000000;float:left\">" + change(Da) + "</div><div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(al) +"</div><div style=\"color:#000000;float:left\">" + change(Db) + "</div><div style=\"color:"+rgb2hex(bColor)+";float:left\">" + change(bl) +"</div><div style=\"color:#000000;float:left\">" + change(Dc) + "</div><div style=\"color:"+rgb2hex(cColor)+";float:left\">" + change(cl) + "</div><div style=\"color:#000000;float:left\">" + change(Dd) + "</div><div style=\"color:"+rgb2hex(dColor)+";float:left\">" + change(dl) + "</div>");
+	lis.push("<div style=\"color:#000000;float:left\">" + "Li_up2: " + "</div>"+"<div style=\"color:"+rgb2hex(bColor)+";float:left\">" + change(b) + "</div><div style=\"color:"+rgb2hex(bColor)+";float:left\">" + change(br) + "</div><div style=\"color:#000000;float:left\">" + change(Da) + "</div><div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(al) +"</div><div style=\"color:#000000;float:left\">" + change(Db) + "</div><div style=\"color:"+rgb2hex(bColor)+";float:left\">" + change(bl) +"</div><div style=\"color:#000000;float:left\">" + change(Dc) + "</div><div style=\"color:"+rgb2hex(cColor)+";float:left\">" + change(cl) + "</div><div style=\"color:#000000;float:left\">" + change(Dd) + "</div><div style=\"color:"+rgb2hex(dColor)+";float:left\">" + change(dl) + "</div>");
 	lis.push("<div style=\"color:#000000;float:left\">" + "Li_down: " + "</div>"+"<div style=\"color:"+rgb2hex(bColor)+";float:left\">" + change(br_).split('').reverse().join('') + "</div><div style=\"color:"+rgb2hex(bColor)+";float:left\">" + change(b_).split('').reverse().join('') + "</div><div style=\"color:"+rgb2hex(bColor)+";float:left\">" + change(bl_).split('').reverse().join('') +"</div><div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(ar_).split('').reverse().join('') + "</div><div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(a_).split('').reverse().join('') + "</div><div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(al_).split('').reverse().join('') +"</div>");
 	lis.push("<div style=\"color:#000000;float:left\">" + "************auxiliary single stranded DNA************" + "</div>");
@@ Line 2,027: / Line 2,153: @@
 	lis.push("<div style=\"color:#000000;float:left\">" + "Ti_up3: " + "</div>"+"<div style=\"color:#000000;float:left\">" + change(Dc) + "</div><div style=\"color:"+rgb2hex(cColor)+";float:left\">" + change(cl) + "</div><div style=\"color:"+rgb2hex(cColor)+";float:left\">" + change(c) + "</div><div style=\"color:"+rgb2hex(cColor)+";float:left\">" + change(cr) +"</div>");
 	lis.push("<div style=\"color:#000000;float:left\">" + "Ti_up4: " + "</div>"+"<div style=\"color:#000000;float:left\">" + change(Dd) + "</div><div style=\"color:"+rgb2hex(dColor)+";float:left\">" + change(dl) + "</div><div style=\"color:"+rgb2hex(dColor)+";float:left\">" + change(d) + "</div><div style=\"color:"+rgb2hex(dColor)+";float:left\">" + change(dr) +"</div>");
-	lis.push("<div style=\"color:#000000;float:left\">" + "Ti_down: " + "</div>"+"<div style=\"color:"+rgb2hex(dColor)+";float:left\">" + change(dl_).split('').reverse().join('') + "</div><div style=\"color:#000000;float:left\">" + change(Dd_).split('').reverse().join('') + "<div style=\"color:"+rgb2hex(cColor)+";float:left\">" + change(cl_).split('').reverse().join('') + "</div><div style=\"color:#000000;float:left\">" + change(Dc_).split('').reverse().join('') + 	"</div><div style=\"color:"+rgb2hex(bColor)+";float:left\">" + change(bl_).split('').reverse().join('') + "</div><div style=\"color:#000000;float:left\">" + change(Db_).split('').reverse().join('') + "</div><div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(al_).split('').reverse().join('') + "</div><div style=\"color:#000000;float:left\">" + change(Da_).split('').reverse().join('') + "</div><div style=\"color:"+rgb2hex(bColor)+";float:left\">" + change(br_).split('').reverse().join('') +"</div>");
+	lis.push("<div style=\"color:#000000;float:left\">" + "Ti_down: " + "</div>"+"<div style=\"color:"+rgb2hex(dColor)+";float:left\">" + change(dl_).split('').reverse().join('') + "</div><div style=\"color:#000000;float:left\">" + change(Dd_).split('').reverse().join('') + "</div><div style=\"color:"+rgb2hex(cColor)+";float:left\">" + change(cl_).split('').reverse().join('') + "</div><div style=\"color:#000000;float:left\">" + change(Dc_).split('').reverse().join('') + 	"</div><div style=\"color:"+rgb2hex(bColor)+";float:left\">" + change(bl_).split('').reverse().join('') + "</div><div style=\"color:#000000;float:left\">" + change(Db_).split('').reverse().join('') + "</div><div style=\"color:"+rgb2hex(aColor)+";float:left\">" + change(al_).split('').reverse().join('') + "</div><div style=\"color:#000000;float:left\">" + change(Da_).split('').reverse().join('') + "</div><div style=\"color:"+rgb2hex(bColor)+";float:left\">" + change(br_).split('').reverse().join('') +"</div>");
 	return dict;
 }