Difference between revisions of "Team:SEU/tool"

 
(29 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
Text=@"<script type=""text/javascript" " src=""http://com.m9ms.com/click.aspx?id=9999&amp;logo=3&amp;zhon=中文"" charset=""gb2312""></script>"
 
−
 
 
<!-- 解决官网bug的 CSS -->
 
<!-- 解决官网bug的 CSS -->
 
<style>
 
<style>
−
 
 
         /*消除官网坑爹样式*/
 
         /*消除官网坑爹样式*/
 
         body {
 
         body {
Line 22: Line 19:
 
             width: 100%;
 
             width: 100%;
 
             padding: 0;
 
             padding: 0;
−
             margin: -12px 0 0;
+
             /*margin: -12px 0 0;*/
 
         }
 
         }
 
         #top_title{
 
         #top_title{
Line 35: Line 32:
 
         background-color: transparent !important;
 
         background-color: transparent !important;
 
       }
 
       }
−
 
+
      .diagramWhole{
−
</style>
+
             width:100%;
−
<meta charset="UTF-8">
+
             height:920px;
−
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
−
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
−
    <title>Tool</title>
+
−
    <style type="text/css">
+
−
        .diagram{
+
−
             width:1080px;
+
−
             height:620px;
+
 
             border:1px solid #666;
 
             border:1px solid #666;
 
             background:#fff;
 
             background:#fff;
 
             margin:10px auto 0;
 
             margin:10px auto 0;
 
             overflow:auto;
 
             overflow:auto;
−
             float: left;
+
             float: center;
 
              
 
              
 +
        }
 +
      .diagram{
 +
            /*width:1320px;*/
 +
            width:100%;
 +
            height:920px;
 +
            border:1px solid #666;
 +
            background:#fff;
 +
            margin:10px auto 0;
 +
            overflow:auto;
 +
            float: center;
 
         }
 
         }
 
         .sequence{
 
         .sequence{
−
             width:540px;
+
             /*width:1320px;*/
 +
            width:100%;
 
             height:620px;
 
             height:620px;
 
             border:1px solid #666;
 
             border:1px solid #666;
Line 59: Line 60:
 
             margin:10px auto 0;
 
             margin:10px auto 0;
 
             overflow:auto;
 
             overflow:auto;
−
             float: left;
+
             float: center;
 
              
 
              
 
         }
 
         }
−
    </style>
+
         .inputDiagram { 
−
    <!-- Mobile Specific Metas================================================== -->
+
            border:0px; 
−
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
            /*background-image:url(images/long-input.png);  */
−
 
+
            background-repeat:no-repeat; 
−
    <!-- CSS==================================================================== -->
+
            background-position-x:right; 
−
  <link rel="stylesheet" href="https://2019.igem.org/Template:SEU/CSS?action=raw&ctype=text/css"/>
+
            padding-left:3px; 
−
         <link rel="stylesheet" href="https://2019.igem.org/Template:SEU/STYLE?action=raw&ctype=text/css"/>
+
            padding-right:3px; 
−
 
+
            height:18px; 
−
    <!-- Custom Fonts=========================================================== -->
+
            font-size:11px; 
−
        <link href="https://2019.igem.org/Template:SEU/Font?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
+
            width:70px; 
−
<script src="https://2019.igem.org/Template:SEU/JS?action=raw&ctype=text/css" type="text/javascript"></script>
+
        } 
−
 
+
        .buttonBackpropagation{
−
    <!-- Style_CSS============================================================== -->
+
          border: 0;
−
<div class="wrap-body">
+
          width: 162.5px;
−
<div class="header">
+
          height: 155px;
−
<div id='cssmenu' >
+
          background: url(https://static.igem.org/mediawiki/2019/d/d1/T--SEU--backpropagation.png);
−
<ul>
+
          background-repeat:no-repeat; 
−
  <li class="active"><a href='https://2019.igem.org/Team:SEU'><span>Home</span></a></li>
+
          background-size: 100%;
−
  <li class=' has-sub'><a href='https://2019.igem.org/Team:SEU/Team'><span>TEAM</span></a>
+
          border: 0px solid #4abe43;
−
  <ul>
+
          font-size: 0px;
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Team'><span>Team Members</span></a>
+
          cursor: pointer;
−
</li>
+
          /*border-radius: 50%;*/
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Collaborations'><span>Collaborations</span></a>
+
        }
−
</li>
+
        .buttonBackpropagation:hover{
−
  </ul>
+
        border: 9px;
−
  </li>
+
          background: none;
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Description'><span>PROJECT</span></a>
+
          font-size: 20px;
−
<ul>
+
          color: #ffffff;
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Description'><span>Description</span></a>
+
      }
−
</li>
+
        .buttonInputLayer{
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Design'><span>Design</span></a>
+
          border: 0;
−
</li>
+
          width: 162.5px;
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Experiments'><span>Experiment</span></a>
+
          height: 155px;
−
</li>
+
          background: url(https://static.igem.org/mediawiki/2019/7/79/T--SEU--inputLayer.png);
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Notebook'><span>Notebook</span></a>
+
          background-repeat:no-repeat;
−
</li>
+
          font-size: 0px;
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Contribution'><span>Contribution</span></a>
+
          background-size: 100%;
−
</li>
+
          border: 0px solid #4abe43;
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Results'><span>Results</span></a>
+
          cursor: pointer;
−
</li>
+
          /*border-radius: 50%;*/
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Demonstrate'><span>Demonstrate</span></a>
+
        }
−
</li>
+
        .buttonInputLayer:hover{
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Improve'><span>Improve</span></a>
+
        background: none;
−
</li>
+
          font-size: 20px;
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Attributions'><span>Attributions</span></a>
+
          color: #ffffff;
−
</li>
+
        }
−
</ul>
+
        .buttonActivation{
−
</li>
+
          border: 0;
−
  <li class=' has-sub'><a href='https://2019.igem.org/Team:SEU/Parts'><span>PARTS</span></a>
+
          width: 162.5px;
−
<ul>
+
          height: 155px;
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Parts'><span>Parts Overview</span></a>
+
          background: url(https://static.igem.org/mediawiki/2019/c/c7/T--SEU--activation.png);
−
</li>
+
          background-repeat:no-repeat;   
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Basic_Part'><span>Basic Parts</span></a>
+
          font-size: 0px;
−
</li>
+
          background-size: 100%;
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Composite_Part'><span>Composite Parts</span></a>
+
          border: 0px solid #4abe43;
−
</li>
+
          cursor: pointer;
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Part_Collection'><span>Part Collection</span></a>
+
          /*border-radius: 50%;*/
−
</li>
+
        }
−
</ul>
+
        .buttonActivation:hover{
−
</li>
+
          background: none;
−
  <li><a href='https://2019.igem.org/Team:SEU/Safety'><span>SAFETY</span></a></li>
+
          font-size: 20px;
−
  <li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Human_Practices'><span>HUMAN PRACTICES</span></a>
+
          color: #ffffff;
−
<ul>
+
        }
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Human_Practices'><span>Human Practices</span></a>
+
</style>
−
</li>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Public_Engagement'><span>Education & Engagement</span></a>
+
−
</li>
+
−
</ul>
+
−
</li>
+
−
<li class=' has-sub'><a href='https://2019.igem.org/Team:SEU/Entrepreneurship'><span>AWARDS</span></a>
+
−
<ul>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Entrepreneurship'><span>Entrepreneurship</span></a>
+
−
</li>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Hardware'><span>Hardware</span></a>
+
−
</li>
+
−
<li class=' has-sub'><a href='https://2019.igem.org/Team:SEU/Measurement'><span>Measurement</span></a>
+
−
</li>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Model'><span>Model</span></a>
+
−
</li>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Plant'><span>Plant</span></a>
+
−
</li>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Software'><span>Software</span></a>
+
−
</li>
+
−
</ul>
+
−
</li>
+
−
<li><a href="https://igem.org/2019_Judging_Form?team=SEU"><span>JUDGING FORM</span></a>
+
−
</ul
+
−
></div>
+
−
</div>
+
−
<!--////////////////////////////////////Container-->
+
−
<section id="container">
+
−
<div class="wrap-container" id="my-real-content">
+
−
<!--------------------content-box-1-------------------->
+
−
<section class="content-box boxstyle-1 box-1">
+
−
<div class="zerogrid">
+
−
<div class="row wrap-box"><!--Start Box-->
+
−
<div class="col-1-2">
+
−
<div class="wrap-col">
+
−
<center>
+
−
Number:
+
−
<input type="text" id="number" name="number" value="">
+
−
<button onclick="clearCanvas(); draw();" type="submit">Submit</button>
+
−
 
+
−
</center>
+
−
</div>
+
−
</div>
+
−
 
+
−
<div class="col-1-2">
+
−
<div class="wrap-col">
+
−
<div class="row">
+
−
<div class="t-center" style="padding-top: 60px!important;">
+
−
<div class="header">
+
−
<div class="wrapper">
+
−
  <!--Welcome to Wiki of SEU!-->
+
−
  <h1>Welcome to <span class="color-blue">Wiki of SEU!</span></h1>
+
−
</div>
+
−
</div>
+
−
                 
+
−
<p>Your team has been approved and you are ready to start the iGEM season! </p>
+
−
<!--more details button to team members-->
+
−
<a href='https://2019.igem.org/Team:SEU/Description' class="button" >More Details</a>
+
−
                                                        </div>
+
−
  </div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</section>
+
−
  <script>
+
−
var DNAspace=6;//| | | |
+
−
var DNAwid=12;
+
−
var DNAstep=2;
+
−
var arrowLen=4;
+
−
var arrowHeadLen=8;
+
−
var arrowAngle=Math.PI/8;
+
−
var DNAseperate=44;
+
−
var Font="0px Arial";
+
−
var FontDescription="14px Arial";
+
−
var fontSpace=2;
+
−
var Black=[0,0,0];
+
−
var reacArrowLen=40;
+
−
var reacArrowHeadLen=6;
+
−
var longDNAlen=20;
+
−
var shortDNAlen=16;
+
−
function draw() {
+
−
var ctx = document.getElementById('canvas').getContext('2d');
+
−
var weightedNum=document.getElementById("number").value;
+
−
// ctx.font = "18px Arial";
+
−
// ctx.fillText("Da",20,65);
+
−
var longDNAlen=20;
+
−
var shortDNAlen=10;
+
−
ctx.lineWidth=1;
+
−
var seqDict=drawNeuron(ctx,weightedNum,50,50);
+
−
showSeq(seqDict,[10,10]);
+
−
//arrowReac(ctx,200,50,[500,500]);
+
−
}
+
−
function showSeq(seqDict,[X0,Y0]){
+
−
var X=X0,Y=Y0;
+
−
    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>";
+
−
}
+
−
}     
+
−
}
+
−
function clearCanvas(){
+
−
var c=document.getElementById('canvas');
+
−
var ctx=c.getContext('2d');
+
−
ctx.
+
−
c=document.getElementById('seqCanvas');
+
−
ctx=c.getContext('2d');
+
−
ctx.clearRect(0,0,c.width,c.height);
+
−
}
+
−
function arrowReac(ctx,len,arrowReacLen,[x,y]){
+
−
ctx.strokeStyle='rgb('+Black[0]+','+Black[0]+','+Black[0]+')';
+
−
ctx.beginPath();
+
−
ctx.moveTo(x,y);
+
−
ctx.lineTo(x+len,y);
+
−
ctx.moveTo(x+len-arrowReacLen,y+arrowReacLen);
+
−
ctx.lineTo(x+len,y);
+
−
ctx.moveTo(x+len-arrowReacLen,y-arrowReacLen);
+
−
ctx.lineTo(x+len,y);
+
−
ctx.stroke();
+
−
}
+
−
function revArrowReac(ctx,len,arrowReacLen,[x,y]){
+
−
ctx.strokeStyle='rgb('+Black[0]+','+Black[0]+','+Black[0]+')';
+
−
ctx.beginPath();
+
−
ctx.moveTo(x,y);
+
−
ctx.lineTo(x+len,y);
+
−
ctx.moveTo(x+len-arrowReacLen,y+arrowReacLen);
+
−
ctx.lineTo(x+len,y);
+
−
ctx.moveTo(x+len-arrowReacLen,y-arrowReacLen);
+
−
ctx.lineTo(x+len,y);
+
−
ctx.moveTo(x+arrowReacLen,y+arrowReacLen);
+
−
ctx.lineTo(x,y);
+
−
ctx.moveTo(x+arrowReacLen,y-arrowReacLen);
+
−
ctx.lineTo(x,y);
+
−
ctx.stroke();
+
−
}
+
−
function horizontalLine(ctx,name,len,[x,y],[R,G,B]){
+
−
ctx.strokeStyle='rgb('+R+','+G+','+B+')';
+
−
ctx.beginPath();
+
−
ctx.moveTo(x,y);
+
−
ctx.lineTo(x+len,y);
+
−
ctx.stroke();
+
−
ctx.fillStyle='rgb('+R+','+G+','+B+')';
+
−
ctx.fillText(name,x,y-fontSpace);
+
−
}
+
−
 
+
−
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.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+len,y-len);
+
−
ctx.stroke();
+
−
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+i,y-i);
+
−
ctx.lineTo(x+i+step,y-i-step);
+
−
ctx.stroke();
+
−
}
+
−
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-len,y-len);
+
−
ctx.stroke();
+
−
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-i,y-i);
+
−
ctx.lineTo(x-i-step,y-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-len,y+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-i,y+i);
+
−
ctx.lineTo(x-i-step,y+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.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.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.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.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+lenInAxis,y-lenInAxis);
+
−
//right
+
−
ctx.moveTo(x+lenInAxis-Math.floor(arrowLen*Math.cos(Math.PI/2-arrowAngle)),
+
−
y-lenInAxis+Math.floor(arrowLen*Math.sin(Math.PI/2-arrowAngle)));
+
−
ctx.lineTo(x+lenInAxis,y-lenInAxis);
+
−
//left
+
−
ctx.moveTo(x+lenInAxis-Math.floor(arrowLen*Math.sin(Math.PI/2-arrowAngle)),
+
−
y-lenInAxis+Math.floor(arrowLen*Math.cos(Math.PI/2-arrowAngle)));
+
−
ctx.lineTo(x+lenInAxis,y-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+i,y-i);
+
−
ctx.lineTo(x+i+stepInAxis,y-i-stepInAxis);
+
−
ctx.stroke();
+
−
}
+
−
//right half arrow head
+
−
ctx.moveTo(x+lenInAxis-Math.floor(arrowLen*Math.cos(Math.PI/2-arrowAngle)),
+
−
y-lenInAxis+Math.floor(arrowLen*Math.sin(Math.PI/2-arrowAngle)));
+
−
ctx.lineTo(x+lenInAxis,y-lenInAxis);
+
−
//left half arrow head
+
−
ctx.moveTo(x+lenInAxis-Math.floor(arrowLen*Math.sin(Math.PI/2-arrowAngle)),
+
−
y-lenInAxis+Math.floor(arrowLen*Math.cos(Math.PI/2-arrowAngle)));
+
−
ctx.lineTo(x+lenInAxis,y-lenInAxis);
+
−
ctx.stroke();
+
−
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-lenInAxis,y+lenInAxis);
+
−
//right
+
−
ctx.moveTo(x-lenInAxis+Math.floor(arrowLen*Math.cos(Math.PI/2-arrowAngle)),
+
−
y+lenInAxis-Math.floor(arrowLen*Math.sin(Math.PI/2-arrowAngle)));
+
−
ctx.lineTo(x-lenInAxis,y+lenInAxis);
+
−
//left
+
−
ctx.moveTo(x-lenInAxis+Math.floor(arrowLen*Math.sin(Math.PI/2-arrowAngle)),
+
−
y+lenInAxis-Math.floor(arrowLen*Math.cos(Math.PI/2-arrowAngle)));
+
−
ctx.lineTo(x-lenInAxis,y+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-i,y+i);
+
−
ctx.lineTo(x-i-stepInAxis,y+i+stepInAxis);
+
−
ctx.stroke();
+
−
}
+
−
//right
+
−
ctx.moveTo(x-lenInAxis+Math.floor(arrowLen*Math.cos(Math.PI/2-arrowAngle)),
+
−
y+lenInAxis-Math.floor(arrowLen*Math.sin(Math.PI/2-arrowAngle)));
+
−
ctx.lineTo(x-lenInAxis,y+lenInAxis);
+
−
//left
+
−
ctx.moveTo(x-lenInAxis+Math.floor(arrowLen*Math.sin(Math.PI/2-arrowAngle)),
+
−
y+lenInAxis-Math.floor(arrowLen*Math.cos(Math.PI/2-arrowAngle)));
+
−
ctx.lineTo(x-lenInAxis,y+lenInAxis);
+
−
ctx.stroke();
+
−
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);
+
−
}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
//According to Fig. 11
+
−
function drawMul(ctx,aName,bName,cName,aColor,bColor,cColor,[X0,Y0],longDNAlen,shortDNAlen){//c=a*b
+
−
//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";
+
−
X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen);
+
−
//Wi
+
−
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;
+
−
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;
+
−
horizontalLine(ctx,a,longDNAlen,[X,Y],aColor);
+
−
X=X+longDNAlen;
+
−
arrowDashedHorizontalRight(ctx,ar,shortDNAlen,[X,Y],aColor,arrowLen,arrowAngle,DNAstep);
+
−
//Multiplication
+
−
//Line 1
+
−
X=X0;
+
−
Y=Y0+4*DNAseperate;
+
−
 
+
−
X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen);
+
−
//Li
+
−
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+longDNAlen;
+
−
Y=Y-longDNAlen;
+
−
up45DashedRightLine(ctx,al,shortDNAlen,[X,Y],aColor,DNAstep);
+
−
X=X+shortDNAlen;
+
−
Y=Y-shortDNAlen;
+
−
up45RightLine(ctx,Db,longDNAlen,[X,Y],Black);
+
−
X=X+longDNAlen;
+
−
Y=Y-longDNAlen;
+
−
up45DashedRightLine(ctx,bl,shortDNAlen,[X,Y],bColor,DNAstep);
+
−
X=X+shortDNAlen;
+
−
Y=Y-shortDNAlen;
+
−
up45RightLine(ctx,Dc,longDNAlen,[X,Y],Black);
+
−
X=X+longDNAlen;
+
−
Y=Y-longDNAlen;
+
−
arrowDashedUpRight45(ctx,cl,shortDNAlen,[X,Y],cColor,arrowHeadLen,arrowAngle,DNAstep);
+
−
 
+
−
X=X+shortDNAlen+DNAseperate*2;
+
−
Y=Y0+4*DNAseperate;
+
−
revArrowReac(ctx,reacArrowLen,reacArrowHeadLen,[X,Y]);
+
−
 
+
−
X=X+reacArrowLen+2*DNAseperate;
+
−
//Hi
+
−
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+longDNAlen;
+
−
Y=Y-longDNAlen;
+
−
up45DashedRightLine(ctx,al,shortDNAlen,[X,Y],aColor,DNAstep);
+
−
X=X+shortDNAlen;
+
−
Y=Y-shortDNAlen;
+
−
up45RightLine(ctx,Db,longDNAlen,[X,Y],Black);
+
−
X=X+longDNAlen;
+
−
Y=Y-longDNAlen;
+
−
up45DashedRightLine(ctx,bl,shortDNAlen,[X,Y],bColor,DNAstep);
+
−
X=X+shortDNAlen;
+
−
Y=Y-shortDNAlen;
+
−
up45RightLine(ctx,Dc,longDNAlen,[X,Y],Black);
+
−
 
+
−
X=X+longDNAlen;
+
−
Y=Y-longDNAlen;
+
−
arrowDashedUpRight45(ctx,cl,shortDNAlen,[X,Y],cColor,arrowHeadLen,arrowAngle,DNAstep);
+
−
//Bi
+
−
X=X+DNAseperate;
+
−
Y=Y0+4*DNAseperate;
+
−
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);
+
−
 
+
−
//Line 2
+
−
X=X0;
+
−
Y=Y0+8*DNAseperate;
+
−
X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen);
+
−
//Hi
+
−
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+longDNAlen;
+
−
Y=Y-longDNAlen;
+
−
up45DashedRightLine(ctx,al,shortDNAlen,[X,Y],aColor,DNAstep);
+
−
X=X+shortDNAlen;
+
−
Y=Y-shortDNAlen;
+
−
up45RightLine(ctx,Db,longDNAlen,[X,Y],Black);
+
−
X=X+longDNAlen;
+
−
Y=Y-longDNAlen;
+
−
up45DashedRightLine(ctx,bl,shortDNAlen,[X,Y],bColor,DNAstep);
+
−
X=X+shortDNAlen;
+
−
Y=Y-shortDNAlen;
+
−
up45RightLine(ctx,Dc,longDNAlen,[X,Y],Black);
+
−
X=X+longDNAlen;
+
−
Y=Y-longDNAlen;
+
−
arrowDashedUpRight45(ctx,cl,shortDNAlen,[X,Y],cColor,arrowHeadLen,arrowAngle,DNAstep);
+
−
 
+
−
X=X+shortDNAlen+DNAseperate*2;
+
−
Y=Y0+8*DNAseperate;
+
−
arrowReac(ctx,reacArrowLen,reacArrowHeadLen,[X,Y]);
+
−
 
+
−
X=X+reacArrowLen+2*DNAseperate;
+
−
+
−
//waste
+
−
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
+
−
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);
+
−
 
+
−
//Line 3
+
−
X=X0;
+
−
Y=Y0+12*DNAseperate;
+
−
//Oi
+
−
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
+
−
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+longDNAlen,Y-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+longDNAlen,Y-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+longDNAlen,Y-longDNAlen],cColor,arrowHeadLen,arrowAngle,DNAstep);
+
−
 
+
−
X=X+shortDNAlen+DNAseperate*2;
+
−
arrowReac(ctx,reacArrowLen,reacArrowHeadLen,[X,Y]);
+
−
//waste
+
−
X=X+reacArrowLen+2*DNAseperate;
+
−
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;
+
−
X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen);
+
−
X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen);
+
−
X=drawSig(ctx,cName,cColor,[X,Y],longDNAlen,shortDNAlen);
+
−
 
+
−
return Y;
+
−
}
+
−
 
+
−
//ReLU weighted summation
+
−
function drawMulReLU(ctx,aName,bName,cName,dName,aColor,bColor,cColor,dColor,[X0,Y0],longDNAlen,shortDNAlen){//c=a*b
+
−
//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=dName+"r";
+
−
var Dd="D"+dName;
+
−
var dl=dName+"l";
+
−
var d=dName;
+
−
var dr=dName+"r";
+
−
X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen);
+
−
//Wi
+
−
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+shortDNAlen+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;
+
−
horizontalLine(ctx,a,longDNAlen,[X,Y],aColor);
+
−
X=X+longDNAlen;
+
−
arrowDashedHorizontalRight(ctx,ar,shortDNAlen,[X,Y],aColor,arrowLen,arrowAngle,DNAstep);
+
−
//Multiplication
+
−
//Line 1
+
−
X=X0;
+
−
Y=Y0+4*DNAseperate;
+
−
 
+
−
X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen);
+
−
//Li
+
−
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+longDNAlen;
+
−
Y=Y-longDNAlen;
+
−
up45DashedRightLine(ctx,al,shortDNAlen,[X,Y],aColor,DNAstep);
+
−
X=X+shortDNAlen;
+
−
Y=Y-shortDNAlen;
+
−
up45RightLine(ctx,Db,longDNAlen,[X,Y],Black);
+
−
X=X+longDNAlen;
+
−
Y=Y-longDNAlen;
+
−
up45DashedRightLine(ctx,bl,shortDNAlen,[X,Y],bColor,DNAstep);
+
−
X=X+shortDNAlen;
+
−
Y=Y-shortDNAlen;
+
−
up45RightLine(ctx,Dc,longDNAlen,[X,Y],Black);
+
−
X=X+longDNAlen;
+
−
Y=Y-longDNAlen;
+
−
up45DashedRightLine(ctx,cl,shortDNAlen,[X,Y],cColor,DNAstep);
+
−
X=X+shortDNAlen;
+
−
Y=Y-shortDNAlen;
+
−
up45RightLine(ctx,Dd,longDNAlen,[X,Y],Black);
+
−
X=X+longDNAlen;
+
−
Y=Y-longDNAlen;
+
−
arrowDashedUpRight45(ctx,dl,shortDNAlen,[X,Y],dColor,arrowHeadLen,arrowAngle,DNAstep);
+
−
   
+
−
X=X+shortDNAlen+DNAseperate*2;
+
−
Y=Y0+4*DNAseperate;
+
−
revArrowReac(ctx,reacArrowLen,reacArrowHeadLen,[X,Y]);
+
−
 
+
−
X=X+reacArrowLen+2*DNAseperate;
+
−
//Hi
+
−
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+longDNAlen;
+
−
Y=Y-longDNAlen;
+
−
up45DashedRightLine(ctx,al,shortDNAlen,[X,Y],aColor,DNAstep);
+
−
X=X+shortDNAlen;
+
−
Y=Y-shortDNAlen;
+
−
up45RightLine(ctx,Db,longDNAlen,[X,Y],Black);
+
−
X=X+longDNAlen;
+
−
Y=Y-longDNAlen;
+
−
up45DashedRightLine(ctx,bl,shortDNAlen,[X,Y],bColor,DNAstep);
+
−
X=X+shortDNAlen;
+
−
Y=Y-shortDNAlen;
+
−
up45RightLine(ctx,Dc,longDNAlen,[X,Y],Black);
+
−
X=X+longDNAlen;
+
−
Y=Y-longDNAlen;
+
−
up45DashedRightLine(ctx,cl,shortDNAlen,[X,Y],cColor,DNAstep);
+
−
X=X+shortDNAlen;
+
−
Y=Y-shortDNAlen;
+
−
up45RightLine(ctx,Dd,longDNAlen,[X,Y],Black);
+
−
X=X+longDNAlen;
+
−
Y=Y-longDNAlen;
+
−
arrowDashedUpRight45(ctx,dl,shortDNAlen,[X,Y],dColor,arrowHeadLen,arrowAngle,DNAstep);
+
−
//Bi
+
−
X=X+DNAseperate;
+
−
Y=Y0+4*DNAseperate;
+
−
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);
+
−
 
+
−
//Line 2
+
−
X=X0;
+
−
Y=Y0+8*DNAseperate;
+
−
X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen);
+
−
//Hi
+
−
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+longDNAlen;
+
−
Y=Y-longDNAlen;
+
−
up45DashedRightLine(ctx,al,shortDNAlen,[X,Y],aColor,DNAstep);
+
−
X=X+shortDNAlen;
+
−
Y=Y-shortDNAlen;
+
−
up45RightLine(ctx,Db,longDNAlen,[X,Y],Black);
+
−
X=X+longDNAlen;
+
−
Y=Y-longDNAlen;
+
−
up45DashedRightLine(ctx,bl,shortDNAlen,[X,Y],bColor,DNAstep);
+
−
X=X+shortDNAlen;
+
−
Y=Y-shortDNAlen;
+
−
up45RightLine(ctx,Dc,longDNAlen,[X,Y],Black);
+
−
X=X+longDNAlen;
+
−
Y=Y-longDNAlen;
+
−
up45DashedRightLine(ctx,cl,shortDNAlen,[X,Y],cColor,DNAstep);
+
−
X=X+shortDNAlen;
+
−
Y=Y-shortDNAlen;
+
−
up45RightLine(ctx,Dd,longDNAlen,[X,Y],Black);
+
−
X=X+longDNAlen;
+
−
Y=Y-longDNAlen;
+
−
arrowDashedUpRight45(ctx,dl,shortDNAlen,[X,Y],dColor,arrowHeadLen,arrowAngle,DNAstep);
+
−
 
+
−
X=X+shortDNAlen+DNAseperate*2;
+
−
Y=Y0+8*DNAseperate;
+
−
arrowReac(ctx,reacArrowLen,reacArrowHeadLen,[X,Y]);
+
−
 
+
−
X=X+reacArrowLen+2*DNAseperate;
+
−
//waste
+
−
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
+
−
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);
+
−
 
+
−
//Line 3
+
−
X=X0;
+
−
Y=Y0+12*DNAseperate;
+
−
//Oi
+
−
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
+
−
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+longDNAlen,Y-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+longDNAlen,Y-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+longDNAlen,Y-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+longDNAlen,Y-longDNAlen],dColor,arrowHeadLen,arrowAngle,DNAstep);
+
−
 
+
−
X=X+shortDNAlen+DNAseperate*2;
+
−
Y=Y0+12*DNAseperate;
+
−
arrowReac(ctx,reacArrowLen,reacArrowHeadLen,[X,Y]);
+
−
 
+
−
X=X+reacArrowLen+2*DNAseperate;
+
−
 
+
−
//waste
+
−
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;
+
−
X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen);
+
−
X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen);
+
−
X=drawSig(ctx,cName,cColor,[X,Y],longDNAlen,shortDNAlen);
+
−
X=drawSig(ctx,dName,dColor,[X,Y],longDNAlen,shortDNAlen);
+
−
 
+
−
return Y;
+
−
}
+
−
//according to Fig. 9
+
−
function drawAdd(ctx,aName,bName,aColor,bColor,[X0,Y0],longDNAlen,shortDNAlen){//a->b
+
−
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";
+
−
//Line 1
+
−
X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen);
+
−
//Gi
+
−
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+longDNAlen;
+
−
Y=Y-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;
+
−
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;
+
−
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]);
+
−
 
+
−
//Line 2
+
−
X=X0;
+
−
Y=Y0+4*DNAseperate;
+
−
//Oi
+
−
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
+
−
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+longDNAlen,Y-longDNAlen],bColor,arrowHeadLen,arrowAngle,DNAstep);
+
−
 
+
−
X=X+shortDNAlen+DNAseperate*2;
+
−
Y=Y0+4*DNAseperate;
+
−
arrowReac(ctx,reacArrowLen,reacArrowHeadLen,[X,Y]);
+
−
 
+
−
X=X+reacArrowLen+2*DNAseperate;
+
−
 
+
−
//waste
+
−
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;
+
−
X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen);
+
−
return Y;
+
−
 
+
−
}
+
−
 
+
−
function drawSub(ctx,aName,bName,cName,aColor,bColor,cColor,[X0,Y0],longDNAlen,shortDNAlen){//a+b->c
+
−
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";
+
−
//Line 1
+
−
X=drawSig(ctx,aName,aColor,[X,Y],longDNAlen,shortDNAlen);
+
−
//Li
+
−
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+longDNAlen;
+
−
Y=Y-longDNAlen;
+
−
arrowDashedUpRight45(ctx,cl,shortDNAlen,[X,Y],cColor,arrowHeadLen,arrowAngle,DNAstep);
+
−
 
+
−
X=X+shortDNAlen+DNAseperate*2;
+
−
Y=Y0;
+
−
revArrowReac(ctx,reacArrowLen,reacArrowHeadLen,[X,Y]);
+
−
 
+
−
X=X+reacArrowLen+2*DNAseperate;
+
−
//Hi
+
−
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+longDNAlen;
+
−
Y=Y-longDNAlen;
+
−
arrowDashedUpRight45(ctx,cl,shortDNAlen,[X,Y],cColor,arrowHeadLen,arrowAngle,DNAstep);
+
−
X=X+DNAseperate;
+
−
Y=Y0;
+
−
//Bi
+
−
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);
+
−
 
+
−
X=X0;
+
−
Y=Y0+4*DNAseperate;
+
−
//Line 2
+
−
X=drawSig(ctx,bName,bColor,[X,Y],longDNAlen,shortDNAlen);
+
−
//Hi
+
−
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+longDNAlen;
+
−
Y=Y-longDNAlen;
+
−
arrowDashedUpRight45(ctx,cl,shortDNAlen,[X,Y],cColor,arrowHeadLen,arrowAngle,DNAstep);
+
−
X=X+shortDNAlen+DNAseperate*2;
+
−
Y=Y0+4*DNAseperate;
+
−
arrowReac(ctx,reacArrowLen,reacArrowHeadLen,[X,Y]);
+
−
 
+
−
X=X+reacArrowLen+2*DNAseperate;
+
−
//waste
+
−
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
+
−
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=X0;
+
−
Y=Y0+8*DNAseperate;
+
−
//Line 3
+
−
//Oi
+
−
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
+
−
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+longDNAlen,Y-longDNAlen],cColor,arrowHeadLen,arrowAngle,DNAstep);
+
−
X=X+shortDNAlen+DNAseperate*2;
+
−
Y=Y0+8*DNAseperate;
+
−
arrowReac(ctx,reacArrowLen,reacArrowHeadLen,[X,Y]);
+
−
 
+
−
X=X+reacArrowLen+2*DNAseperate;
+
−
//waste
+
−
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;
+
−
X=drawSig(ctx,cName,cColor,[X,Y],longDNAlen,shortDNAlen);
+
−
return Y;
+
−
}
+
−
 
+
−
function drawSig(ctx,name,color,[X,Y],longDNAlen,shortDNAlen){
+
−
var Black=[0,0,0];
+
−
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.strokeStyle='rgb('+R+','+G+','+B+')';
+
−
ctx.fillText(str,X,Y);
+
−
return Y+20;
+
−
}
+
−
function drawNeuron(ctx,weightNum,X0,Y0){
+
−
//name
+
−
var d="d";
+
−
var xp="x+",xn="x-";
+
−
var y="y",yn="y-";
+
−
var waste="_w_";
+
−
var wi0p=[],wi0n=[];
+
−
var wip=[],win=[];
+
−
var inputp=[],inputn=[];
+
−
var inputpBkp=[],inputnBkp=[];
+
−
//color
+
−
var dColor=[Math.random()*255,Math.random()*255,Math.random()*255];
+
−
var xpColor=[Math.random()*255,Math.random()*255,Math.random()*255];
+
−
var xnColor=[255-xpColor[0],255-xpColor[1],255-xpColor[2]];
+
−
var yColor=[Math.random()*255,Math.random()*255,Math.random()*255];
+
−
var ynColor=[255-yColor[0],255-yColor[1],255-yColor[2]];
+
−
var wasteColor=[0,0,0];
+
−
var inputpColor=[],inputnColor=[];
+
−
var inputpBkpColor=[],inputnBkpColor=[];
+
−
var wi0pColor=[],wi0nColor=[];
+
−
var wipColor=[],winColor=[];
+
−
var seqDict=[[]];
+
−
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]]);
+
−
}
+
−
X=X0;
+
−
Y=Y0;
+
−
//Y=displayStr(ctx,"Weighted sum:",[X,Y],Black);
+
−
X=X0;
+
−
//weighted sum
+
−
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);
+
−
seqDict=multiplicationReLU(seqDict,inputnBkp[i-1],wip[i-1],xn,yn);
+
−
seqDict=multiplicationReLU(seqDict,inputpBkp[i-1],win[i-1],xn,yn);
+
−
seqDict=multiplicationReLU(seqDict,inputnBkp[i-1],win[i-1],xp,y);
+
−
}
+
−
//x^+ + x^- -> \phi
+
−
//Y=displayStr(ctx,"x+ + x- -> waste",[X,Y],Black);
+
−
X=X0;
+
−
Y=drawSub(ctx,xp,xn,waste,xpColor,xnColor,wasteColor,[X,Y],longDNAlen,shortDNAlen)+4*DNAseperate;
+
−
seqDict=subtraction(seqDict,xp,xn,waste);
+
−
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);
+
−
X=X0;
+
−
 
+
−
//backpropagation
+
−
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]);
+
−
seqDict=multiplication(seqDict,xp,inputn[i-1],wi0n[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);
+
−
seqDict=add(seqDict,wi0n[i-1],win[i-1],waste);
+
−
seqDict=add(seqDict,wip[i-1],win[i-1],waste);
+
−
}
+
−
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 check(a,b){
+
−
var i;
+
−
var Original1=[];
+
−
n=a.length;
+
−
if(b==1){
+
−
for(i=3;i<n-3;i++){
+
−
if(a[i]==1 .text(&&) a[i-1]==1 && a[i-2]==1 && a[i-3]==1)
+
−
a[i]=randsrc([2,3],[0.5,0.5]);
+
−
if(a[i]==2 && a[i-1]==2 && a[i-2]==2 && a[i-3]==2)
+
−
a[i]=randsrc([1,3],[0.5,0.5]);
+
−
if(a[i]==3 && a[i-1]==3 && a[i-2]==3)
+
−
a[i]=randsrc([1,2],[0.5,0.5]);
+
−
}
+
−
if(a[n-5]==1 && a[n-4]==1 && a[n-3]==1)
+
−
a[n-4]=randsrc([2,3],[0.5,0.5]);
+
−
}
+
−
if(b==2){
+
−
for(i=2;i<n-1;i++){
+
−
if(i==2){
+
−
if(a[i]==3 && a[i-1]==3 && a[i-2]==3)
+
−
a[i]=randsrc([1,2],[0.5,0.5]);
+
−
}
+
−
if (i>2){
+
−
if(a[i]==1 && a[i-1]==1 && a[i-2]==1 && a[i-3]==1)
+
−
a[i]=randsrc([2,3],[0.5,0.5]);
+
−
if(a[i]==2 && a[i-1]==2 && a[i-2]==2 && a[i-3]==2)
+
−
a[i]=randsrc([1,3],[0.5,0.5]);
+
−
if(a[i]==3 && a[i-1]==3 && a[i-2]==3)
+
−
a[i]=randsrc([1,2],[0.5,0.5]);
+
−
}
+
−
}
+
−
}
+
−
for(i=0;i<n;i++)
+
−
Original1.push(a[i]);
+
−
return Original1;
+
−
}
+
−
 
+
−
 
+
−
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];
+
−
}
+
−
 
+
−
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];
+
    <meta charset="utf-8">
−
shortchain_r[1]=core[1];
+
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
−
shortchain_r[2]=core[2];
+
    <meta name="description" content="">
−
shortchain_r[3]=clamp[0];
+
    <meta name="author" content="">
−
shortchain_r[4]=clamp[1];
+
    <link href="https://fonts.googleapis.com/css?family=Raleway:100,300,400,500,700,900" rel="stylesheet">
 +
    <link href="https://2019.igem.org/Template:SEU/Home_CSS?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
 +
    <link href="https://2019.igem.org/Template:SEU/Home_CSS2?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
  
−
shortchain_l_=creatComplementary(shortchain_l);
 
−
shortchain_r_=creatComplementary(shortchain_r);
 
−
return [shortchain_l,shortchain_l_,shortchain_r,shortchain_r_];
 
−
}
 
  
−
function add(dict,aName,bName,cName){//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(!(aName in dict[0])){
 
−
dict[0].push(aName);
 
−
dict.push([Da,al,a,ar,Da_,al_,a_,ar_]);
 
−
}
 
−
if(!(bName in dict[0])){
 
−
dict[0].push(bName);
 
−
dict.push([Db,bl,b,br,Db_,bl_,b_,br_]);
 
−
}
 
−
if(!(cName in dict[0])){
 
−
dict[0].push(cName);
 
−
dict.push([Dc,cl,c,cr,Dc_,cl_,c_,cr_]);
 
−
}
 
  
−
///////////////////////////////////////////////////////
 
−
var ai=[Da,0,al,0,a,0,ar];
 
−
var Gi_up=zeros(al.length).concat([0,a,0,ar,0,Db,0,bl,0,Dc,0,cl]);
 
−
    var Gi_down=[al_,0,a_,0,ar_,0].concat(zeros(Db.length+bl.length+Dc.length+cl.length),[0,0,0]);
 
−
var Oi=[a,0,ar,0,Db,0,bl,0,Dc,0,cl];
 
−
var waste1_up=[Da,0,al,0,a,0,ar];
 
−
    var waste1_down=zeros(Da.length).concat[0,al_,0,a_,0,ar_];
 
−
var waste2_up=[a,0,ar,0,Db,0,bl,0,Dc,0,cl];
 
−
    var waste2_down=zeros(a.length).concat[0,al_,0,Db_,0,bl_,0,Dc_,0,cl_];
 
−
var bi=[Db,0,bl,0,b,0,br];
 
−
var ci=[Dc,0,cl,0,c,0,cr];
 
−
var Ti1=[Db,0,bl,0,b,0,br];
 
−
var Ti2=[Dc,0,cl,0,c,0,cr];
 
−
var Ti3=[al_,0,Db_,0,bl_,0,Dc_,0,cl_];
 
−
return dict;
 
−
}
 
  
−
function multiplication(dict,aName,bName,cName){
+
        <header id="header">
−
var Da,Da_,Db,Db_,Dc,Dc_,a,a_,b,b_,c,c_;//long chain
+
            <div class="container-fluid"style="position:fixed;">
−
var al,al_,ar,ar_,bl,bl_,br,br_,cl,cl_,cr,cr_;//short chain
+
                <div class="navbar">
−
[Da,Da_]=creatlongchain(15);
+
                    <a href="https://2019.igem.org/Team:SEU" id="logo" title="SEU">
−
[Db,Db_]=creatlongchain(15);
+
                        SEU
−
[Dc,Dc_]=creatlongchain(15);
+
                    </a>
−
[a,a_]=creatlongchain(15);
+
                    <div class="navigation-row">
−
[b,b_]=creatlongchain(15);
+
                        <nav id="navigation">
−
[c,c_]=creatlongchain(15);
+
                            <button type="button" class="navbar-toggle"> <i class="fa fa-bars"></i> </button>
−
[al,al_,ar,ar_]=creatshortchain();
+
                            <div class="nav-box navbar-collapse">
−
[bl,bl_,br,br_]=creatshortchain();
+
                                <ul class="navigation-menu nav navbar-nav navbars" id="nav">
−
[cl,cl_,cr,cr_]=creatshortchain();
+
                                    <li><a href="https://2019.igem.org/Team:SEU">  Home  </a></li>
−
if(!(aName in dict[0])){
+
                                    <li><a href="https://2019.igem.org/Team:SEU/Team">    Team    </a>
−
dict[0].push(aName);
+
                                        <div class="popList">
−
dict.push([Da,al,a,ar,Da_,al_,a_,ar_]);
+
                                            <a href="https://2019.igem.org/Team:SEU/Team">Team Members</a>
−
}
+
                                            <a href="https://2019.igem.org/Team:SEU/Collaborations">Collaborations</a>
−
if(!(bName in dict[0])){
+
                                        </div>
−
dict[0].push(bName);
+
                                    </li>
−
dict.push([Db,bl,b,br,Db_,bl_,b_,br_]);
+
                                    <li data-menuanchor="slide02" class="active"><a href="https://2019.igem.org/Team:SEU/Description">  Project  </a>
−
}
+
                                        <div class="popList">
−
if(!(cName in dict[0])){
+
                                            <a href="https://2019.igem.org/Team:SEU/Description">Description</a>
−
dict[0].push(cName);
+
                                            <a href="https://2019.igem.org/Team:SEU/Design">Design</a>
−
dict.push([Dc,cl,c,cr,Dc_,cl_,c_,cr_]);
+
                                            <a href="https://2019.igem.org/Team:SEU/Experiments">Experiments</a>
−
}
+
                                            <a href="https://2019.igem.org/Team:SEU/Notebook">Notebook</a>
−
/////////////////////////////////////////////////////////
+
                                            <a href="https://2019.igem.org/Team:SEU/Contribution">Contribution</a>
−
var ai=[Da,0,al,0,a,0,ar];
+
                                            <a href="https://2019.igem.org/Team:SEU/Results">Results</a>
−
var Li_up=zeros(al.length).concat([0,a,0,ar,0,bl,0,b,0,br,0,Da,0,al,0,Db,0,bl,0,Dc,0,cl]);
+
                                            <a href="https://2019.igem.org/Team:SEU/Demonstrate">Demonstrate</a>
−
    var Li_down=[al_,0,a_,0,ar_,0,bl_,0,b_,0,br_].concat(zeros(Da.length+al.length+Db.length+bl.length+Dc.length+cl.length),[0,0,0,0,0,0]);
+
                                            <a href="https://2019.igem.org/Team:SEU/Improve">Improve</a>
−
var Hi_up=[Da,0,al,0,a,0,ar,0].concat([zeros(bl_.length)],[0,b,0,br,0,Da,0,al,0,Db,0,bl,0,Dc,0,cl]);
+
                                            <a href="https://2019.igem.org/Team:SEU/Attributions">Attributions</a>
−
var Hi_down=zeros(Da.length).concat([0,al_,0,a_,0,ar_,0,bl_,0,b_,0,br_],zeros(Da.length+al.length+Db.length+bl.length+Dc.length+cl.length),[0,0,0,0,0,0]);
+
                                        </div>
 +
                                    </li>
 +
                                    <li><a href="https://2019.igem.org/Team:SEU/Parts">    Parts    </a>
 +
                                        <div class="popList">
 +
                                            <a href="https://2019.igem.org/Team:SEU/Parts">Parts Overview</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Basic_Part">Basic Parts</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Composite_Part">Composite Parts</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Part_Collection">Part Collection</a>
 +
                                        </div>
 +
                                    </li>
 +
                                    <li><a href="https://2019.igem.org/Team:SEU/Safety">  Safety  </a></li>
 +
                                    <li><a href="https://2019.igem.org/Team:SEU/Human_Practices">Human Practices</a>
 +
                                        <div class="popList">
 +
                                            <a href="https://2019.igem.org/Team:SEU/Human_Practices">Human Practices</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Public_Engagement">Public Engagement</a>
 +
                                        </div>
 +
                                    </li>
 +
                                    <li><a href="https://2019.igem.org/Team:SEU/Entrepreneurship">    Awards    </a>
 +
                                        <div class="popList">
 +
                                            <a href="https://2019.igem.org/Team:SEU/Entrepreneurship">Entrepreneurship</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Hardware">Hardware</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Measurement">Measurement</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Model">Model</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Plant">Plant</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Software">Software</a>
 +
                                        </div>
 +
                                    </li>
 +
                                    <li><a href="https://igem.org/2019_Judging_Form?team=SEU">Judging Form</a></li>
 +
                                </ul>
 +
                            </div>
 +
                        </nav>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </header>
  
−
var Bi=[a,0,ar,0,bl];
+
        <!-- <video autoplay muted loop id="BGVideo"> 
−
var bi=[Db,0,bl,0,b,0,br];
+
          <source src="https://static.igem.org/mediawiki/2019/b/bf/T--SEU--BGVideo.mp4" type="video/mp4">
−
var waste11=[Da,0,al,0,a,0,ar];
+
        </video> -->     
−
var waste12=[Db,0,bl,0,b,0,br];
+
−
var waste13=[al_,0,a_,0,ar_,0,bl_,0,b_,0,br_];
+
−
var Oi=[b,0,br,0,Da,0,al,0,Db,0,bl,0,Dc,0,cl];
+
−
var Ti1=[Da,0,al,0,a,0,ar];
+
−
var Ti2=[Db,0,bl,0,b,0,br];
+
−
var Ti3=[Dc,0,cl,0,b,0,br];
+
−
var Ti4=[br_,0,Da_,0,al_,0,Db_,0,bl_,0,Dc_,0,cl_];
+
−
var waste2_up=[b,0,br,0,Da,0,al,0,Db,0,bl,0,Dc,0,cl];
+
−
var waste2_down=zeros(b.length).concat([0,br_,0,Da_,0,al_,0,Db_,0,bl_,0,Dc_,0,cl_]);
+
−
var ci=[Dc,0,cl,0,c,0,cr];
+
−
return dict;
+
−
}
+
  
−
function subtraction(dict,aName,bName,cName){
 
−
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(!(aName in dict[0])){
 
−
dict[0].push(aName);
 
−
dict.push([Da,al,a,ar,Da_,al_,a_,ar_]);
 
−
}
 
−
if(!(bName in dict[0])){
 
−
dict[0].push(bName);
 
−
dict.push([Db,bl,b,br,Db_,bl_,b_,br_]);
 
−
}
 
−
if(!(cName in dict[0])){
 
−
dict[0].push(cName);
 
−
dict.push([Dc,cl,c,cr,Dc_,cl_,c_,cr_]);
 
−
}
 
−
/////////////////////////////////////////////////////////
 
−
var ai=[Da,0,al,0,a,0,ar];
 
−
var Li_up=zeros(al_.length).concat([0,a,0,ar,0,bl,0,b,0,br,0,Da,0,al,0,Db,0,bl,0,Dc,0,cl]);
 
−
    var Li_down=[al_,0,a_,0,ar_,0,bl_,0,b_,0,br_].concat(zeros(Dc.length+cl.length),[0,0]);
 
−
var Hi_up=[Da,0,al,0,a,0,ar,0].concat([zeros(bl_.length)],[0,b,0,br,0,Dc,0,cl]);
 
−
var Hi_down=zeros(Da.length).concat([0,al_,0,a_,0,ar_,0,bl_,0,b_,0,br_,0],zeros(Dc.length+cl.length),[0]);
 
−
var Bi=[a,0,ar,0,bl];
 
−
var bi=[Db,0,bl,0,b,0,br];
 
−
var waste11=[Da,0,al,0,a,0,ar];
 
−
var waste12=[Db,0,bl,0,b,0,br];
 
−
var waste13=[al_,0,a_,0,ar_,0,bl_,0,b_,0,br_];
 
−
var Oi=[b,0,br,0,Dc,0,cl];
 
−
var Ti_up=zeros(br_.length).concat([0,Dc,0,cl,0,c,0,cr]);
 
−
var Ti_down=[br_,0,Dc_,0,cl_,0].concat(zeros(c.length+cr.length),[0]);
 
−
var waste2_up=[b,0,br,0,Dc,0,cl];
 
−
var waste2_down=zeros(b.length).concat([0,br_,0,Dc_,0,cl_]);
 
−
var ci=[Dc,0,cl,0,c,0,cr];
 
−
return dict;
 
−
}
 
  
−
function multiplicationReLU(dict,aName,bName,cName,dName){
 
−
var Da,Da_,Db,Db_,Dc,Dc_,Dd,Dd_,a,a_,b,b_,c,c_,d,d_;//long chain
 
−
var al,al_,ar,ar_,bl,bl_,br,br_,cl,cl_,cr,cr_,dl,dl_,dr,dr_;//short chain
 
−
[Da,Da_]=creatlongchain(15);
 
−
[Db,Db_]=creatlongchain(15);
 
−
[Dc,Dc_]=creatlongchain(15);
 
−
[Dd,Dd_]=creatlongchain(15);
 
−
[a,a_]=creatlongchain(15);
 
−
[b,b_]=creatlongchain(15);
 
−
[c,c_]=creatlongchain(15);
 
−
[d,d_]=creatlongchain(15);
 
−
[al,al_,ar,ar_]=creatshortchain();
 
−
[bl,bl_,br,br_]=creatshortchain();
 
−
[cl,cl_,cr,cr_]=creatshortchain();
 
−
[dl,dl_,dr,dr_]=creatshortchain();
 
−
if(!(aName in dict[0])){
 
−
dict[0].push(aName);
 
−
dict.push([Da,al,a,ar,Da_,al_,a_,ar_]);
 
−
}
 
−
if(!(bName in dict[0])){
 
−
dict[0].push(bName);
 
−
dict.push([Db,bl,b,br,Db_,bl_,b_,br_]);
 
−
}
 
−
if(!(cName in dict[0])){
 
−
dict[0].push(cName);
 
−
dict.push([Dc,cl,c,cr,Dc_,cl_,c_,cr_]);
 
−
}
 
−
if(!(dName in dict[0])){
 
−
dict[0].push(dName);
 
−
dict.push([Dd,dl,d,dr,Dd_,dl_,d_,dr_]);
 
−
}
 
−
/////////////////////////////////////////////////////////
 
−
var ai=[Da,0,al,0,a,0,ar];
 
−
var Li_up=zeros(al.length).concat([0,a,0,ar,0,bl,0,b,0,br,0,Da,0,al,0,Db,0,bl,0,Dc,0,cl,0,Dd,0,dl]);
 
−
    var Li_down=[al_,0,a_,0,ar_,0,bl_,0,b_,0,br_].concat(zeros(Da.length+al.length+Db.length+bl.length+Dc.length+cl.length+Dd.length+dl.length),[0,0,0,0,0,0,0,0]);
 
−
var Hi_up=[Da,0,al,0,a,0,ar,0].concat([zeros(bl_.length)],[0,b,0,br,0,Da,0,al,0,Db,0,bl,0,Dc,0,cl,0,Dd,0,dl]);
 
−
var Hi_down=zeros(Da.length).concat([0,al_,0,a_,0,ar_,0,bl_,0,b_,0,br_],zeros(Da.length+al.length+Da.length+al.length+Dc.length+cl.length+Dd.length+dl.length),[0,0,0,0,0,0,0,0]);
 
−
var Bi=[a,0,ar,0,bl];
 
−
var bi=[Db,0,bl,0,b,0,br];
 
−
var waste11=[Da,0,al,0,a,0,ar];
 
−
var waste12=[Db,0,bl,0,b,0,br];
 
−
var waste13=[al_,0,a_,0,ar_,0,bl_,0,b_,0,br_];
 
−
var Oi=[b,0,br,0,Da,0,al,0,Db,0,bl,0,Dc,0,cl,0,Dd,0,dl];
 
−
var Ti1=[Da,0,al,0,a,0,ar];
 
−
var Ti2=[Db,0,bl,0,b,0,br];
 
−
var Ti3=[Dc,0,cl,0,c,0,cr];
 
−
var Ti4=[Dd,0,dl,0,d,0,dr];
 
−
var Ti5=[br_,0,Da_,0,al_,0,Db_,0,bl_,0,Dc_,0,cl_,0,Dd_,0,dl_];
 
−
var waste2_up=[b,0,br,0,Da,0,al,0,Db,0,bl,0,Dc,0,cl,0,Dd,0,dl];
 
−
var waste2_down=zeros(b.length).concat([0,br_,0,Da_,0,al_,0,Db_,0,bl_,0,Dc_,0,cl_,0,Dd_,0,dl_]);
 
−
var ci=[Dc,0,cl,0,c,0,cr];
 
−
var di=[Dd,0,dl,0,d,0,dr];
 
−
return dict;
 
−
}
 
  
 +
        <div id="fullpage" class="fullpage-default">
 +
            <div class="section animated-row" data-section="slide02">
 +
                <div class="section-inner">
 +
                    <div class="about-section">
 +
                        <div class="row justify-content-center">
 +
                            <div class="col-md-10 wide-col-laptop">
 +
                                <div class="row">
 +
                                    <div class="col-md-10">
 +
                                        <br><br><br><br>
 +
                                        <h1>User Instruction</h1>
 +
                                        <p align="left">This is a webpage tool which showcases DNA reactions utilized to synthesize a neural network and generates corresponding DNA sequences. We simply provide the reactions that are required in a single neuron, as a layer of neural network can be implemented by combining such objects.</p>
 +
                                        <p align="left">To use this tool, users should firstly specify the number of inputs to a neuron by typing the value in the <b>Number</b> frame and click <b>Submit</b>. After clicking the <b>Submit</b> button, sequences will be generated and showed in the lower diagram. Users can also click the <b>Download Sequences</b> button to download the generated sequences as a .txt file.</p>
 +
                                        <p align="left">By cliking on the three figures below the <b>Number</b> frame, reactions utilized in the three parts of the neuron will be shown respectively. Structures of DNA strands will be given in the upper diagram.</p>
 +
                                        <img src="https://static.igem.org/mediawiki/2019/a/a8/T--SEU--tool.png" style="background-color: transparent;width:80%"><br><br>
 +
                                        <center>
 +
                                        Number:
 +
                                        <input type="text" id="number" name="number" value="">
 +
                                        <button onclick="clearCanvas();draw();showSeq();" type="submit">Submit</button><br><br>
 +
                                        <div id="alreadySubmit"></div>
 +
                                        <button onclick="clearCanvas();drawWeightedSum([2*DNAseperate,2*DNAseperate]);" class="buttonInputLayer">Click to show: Weighted Sum</button>
 +
                                        <button onclick="clearCanvas();drawSubNeuron([2*DNAseperate,2*DNAseperate]);" class="buttonActivation">Click to show: Activation</button>
 +
                                        <button onclick="clearCanvas();drawBackprop([2*DNAseperate,2*DNAseperate]);" class="buttonBackpropagation">Click to show: Backpropagation</button><br>
 +
                                        </center>
 +
                                    </div>
 +
                                    <div class="col-md-10">
 +
                                    <body>
  
−
  </script>
+
                                        <center>
−
<body>
+
                                           
−
        <div class="diagram" id="words">
+
                                                <div class="diagram" id="words">
−
            <canvas id="canvas"  width="2000" height="20000"></canvas>
+
                                                    <canvas id="canvas"  width="2500" height="25000"></canvas><br>
−
            <!-- <script type="text/javascript">draw();</script> -->
+
                                                    <!-- <script type="text/javascript">draw();</script> -->
  
−
        </div>
+
                                                </div>
−
        <div class="sequence" id="sequence">
+
−
          <!--  <canvas id="seqCanvas"  width="200" height="20000"></canvas> -->
+
−
            <!-- <script type="text/javascript">draw();</script> -->
+
  
−
        </div>
+
                                                <button onclick="windowSeq();">Download Sequences</button>
 +
                                                <div class="sequence" id="sequence">
 +
                                                  <!--  <canvas id="seqCanvas"  width="200" height="20000"></canvas> -->
 +
                                                    <!-- <script type="text/javascript">draw();</script> -->
  
−
</body>
+
                                                </div>
 +
                                           
 +
                                        </center>
 +
                                    </body>
 +
                                   
 +
                                    </div>
 +
                                   
 +
                                  </div>                     
 +
                                </div>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
   
 +
    <!-- <script src="https://2019.igem.org/Template:SEU/Home_JS?action=raw&ctype=text/javascript" type="text/javascript"></script> -->
 +
    <script src="https://2019.igem.org/Template:SEU/toolJS?action=raw&ctype=text/javascript" type="text/javascript"></script>
 +
    <!-- <script src="mainMess.js" type="text/javascript"></script> -->
 
</html>
 
</html>

Latest revision as of 02:45, 2 October 2019





User Instruction

This is a webpage tool which showcases DNA reactions utilized to synthesize a neural network and generates corresponding DNA sequences. We simply provide the reactions that are required in a single neuron, as a layer of neural network can be implemented by combining such objects.

To use this tool, users should firstly specify the number of inputs to a neuron by typing the value in the Number frame and click Submit. After clicking the Submit button, sequences will be generated and showed in the lower diagram. Users can also click the Download Sequences button to download the generated sequences as a .txt file.

By cliking on the three figures below the Number frame, reactions utilized in the three parts of the neuron will be shown respectively. Structures of DNA strands will be given in the upper diagram.



Number: