Difference between revisions of "Team:SEU/tool"

(Created page with "<html> <head> <script> var DNAspace=3;//| | | | var DNAwid=10; var DNAstep=1; var arrowLen=4; var arrowHeadLen=5; var arrowAngle=Math.PI/8; var DNAseperate=45; var Font="10...")
 
 
(46 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
<head>
+
<!-- 解决官网bug的 CSS -->
  <script>
+
<style>
var DNAspace=3;//| | | |
+
        /*消除官网坑爹样式*/
var DNAwid=10;
+
        body {
var DNAstep=1;
+
            margin-top:-6px;
var arrowLen=4;
+
            height: 100%;
var arrowHeadLen=5;
+
            width: 100%;
var arrowAngle=Math.PI/8;
+
        }
var DNAseperate=45;
+
        #HQ_page p {
var Font="10px Arial";
+
            font-size:16px;
var FontDescription="14px Arial";
+
            font-family:"微软雅黑";
var fontSpace=3;
+
        }
var Black=[0,0,0];
+
        #globalWrapper{
var reacArrowLen=30;
+
            margin: 0;
var reacArrowHeadLen=10;
+
            padding: 0;
var longDNAlen=30;
+
        }
var shortDNAlen=25;
+
        #content{
function draw() {
+
            width: 100%;
var ctx = document.getElementById('canvas').getContext('2d');
+
            padding: 0;
// ctx.font = "18px Arial";
+
            /*margin: -12px 0 0;*/
// ctx.fillText("Da",20,65);
+
        }
var longDNAlen=20;
+
        #top_title{
var shortDNAlen=10;
+
            display: none;
ctx.lineWidth=2;
+
        }
drawNeuron(ctx,2,50,50);
+
        #sideMenu{
//arrowReac(ctx,200,50,[500,500]);
+
            display: none;
}
+
        }
function arrowReac(ctx,len,arrowReacLen,[x,y]){
+
      #content,
ctx.strokeStyle='rgb('+Black[0]+','+Black[0]+','+Black[0]+')';
+
      .vs-content,
ctx.beginPath();
+
      .vs-wrapper section {
ctx.moveTo(x,y);
+
        background-color: transparent !important;
ctx.lineTo(x+len,y);
+
      }
ctx.moveTo(x+len-arrowReacLen,y+arrowReacLen);
+
      .diagramWhole{
ctx.lineTo(x+len,y);
+
            width:100%;
ctx.moveTo(x+len-arrowReacLen,y-arrowReacLen);
+
            height:920px;
ctx.lineTo(x+len,y);
+
            border:1px solid #666;
ctx.stroke();
+
            background:#fff;
}
+
            margin:10px auto 0;
function revArrowReac(ctx,len,arrowReacLen,[x,y]){
+
            overflow:auto;
ctx.strokeStyle='rgb('+Black[0]+','+Black[0]+','+Black[0]+')';
+
            float: center;
ctx.beginPath();
+
           
ctx.moveTo(x,y);
+
        }
ctx.lineTo(x+len,y);
+
      .diagram{
ctx.moveTo(x+len-arrowReacLen,y+arrowReacLen);
+
            /*width:1320px;*/
ctx.lineTo(x+len,y);
+
            width:100%;
ctx.moveTo(x+len-arrowReacLen,y-arrowReacLen);
+
            height:920px;
ctx.lineTo(x+len,y);
+
            border:1px solid #666;
ctx.moveTo(x+arrowReacLen,y+arrowReacLen);
+
            background:#fff;
ctx.lineTo(x,y);
+
            margin:10px auto 0;
ctx.moveTo(x+arrowReacLen,y-arrowReacLen);
+
            overflow:auto;
ctx.lineTo(x,y);
+
            float: center;
ctx.stroke();
+
        }
}
+
        .sequence{
function horizontalLine(ctx,name,len,[x,y],[R,G,B]){
+
            /*width:1320px;*/
ctx.strokeStyle='rgb('+R+','+G+','+B+')';
+
            width:100%;
ctx.beginPath();
+
            height:620px;
ctx.moveTo(x,y);
+
            border:1px solid #666;
ctx.lineTo(x+len,y);
+
            background:#fff;
ctx.stroke();
+
            margin:10px auto 0;
ctx.fillStyle='rgb('+R+','+G+','+B+')';
+
            overflow:auto;
ctx.fillText(name,x,y-fontSpace);
+
            float: center;
}
+
           
 +
        }
 +
        .inputDiagram { 
 +
            border:0px;  
 +
            /*background-image:url(images/long-input.png);   */
 +
            background-repeat:no-repeat;  
 +
            background-position-x:right; 
 +
            padding-left:3px; 
 +
            padding-right:3px;  
 +
            height:18px;  
 +
            font-size:11px;  
 +
            width:70px; 
 +
        }  
 +
        .buttonBackpropagation{
 +
          border: 0;
 +
          width: 162.5px;
 +
          height: 155px;
 +
          background: url(https://static.igem.org/mediawiki/2019/d/d1/T--SEU--backpropagation.png);
 +
          background-repeat:no-repeat;
 +
          background-size: 100%;
 +
          border: 0px solid #4abe43;
 +
          font-size: 0px;
 +
          cursor: pointer;
 +
          /*border-radius: 50%;*/
 +
        }
 +
        .buttonBackpropagation:hover{
 +
        border: 9px;
 +
          background: none;
 +
          font-size: 20px;
 +
          color: #ffffff;
 +
      }
 +
        .buttonInputLayer{
 +
          border: 0;
 +
          width: 162.5px;
 +
          height: 155px;
 +
          background: url(https://static.igem.org/mediawiki/2019/7/79/T--SEU--inputLayer.png);
 +
          background-repeat:no-repeat;
 +
          font-size: 0px;
 +
          background-size: 100%;
 +
          border: 0px solid #4abe43;
 +
          cursor: pointer;
 +
          /*border-radius: 50%;*/
 +
        }
 +
        .buttonInputLayer:hover{
 +
        background: none;
 +
          font-size: 20px;
 +
          color: #ffffff;
 +
        }
 +
        .buttonActivation{
 +
          border: 0;
 +
          width: 162.5px;
 +
          height: 155px;
 +
          background: url(https://static.igem.org/mediawiki/2019/c/c7/T--SEU--activation.png);
 +
          background-repeat:no-repeat; 
 +
          font-size: 0px;
 +
          background-size: 100%;
 +
          border: 0px solid #4abe43;
 +
          cursor: pointer;
 +
          /*border-radius: 50%;*/
 +
        }
 +
        .buttonActivation:hover{
 +
          background: none;
 +
          font-size: 20px;
 +
          color: #ffffff;
 +
        }
 +
</style>
  
function verticalLine(ctx,len,[x,y],[R,G,B]){
+
    <meta charset="utf-8">
ctx.strokeStyle='rgb('+R+','+G+','+B+')';
+
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
ctx.beginPath();
+
    <meta name="description" content="">
ctx.moveTo(x,y);
+
    <meta name="author" content="">
ctx.lineTo(x,y+len);
+
    <link href="https://fonts.googleapis.com/css?family=Raleway:100,300,400,500,700,900" rel="stylesheet">
ctx.stroke();
+
    <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">
  
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]){
+
        <header id="header">
ctx.strokeStyle='rgb('+R+','+G+','+B+')';
+
            <div class="container-fluid"style="position:fixed;">
ctx.beginPath();
+
                <div class="navbar">
ctx.moveTo(x,y);
+
                    <a href="https://2019.igem.org/Team:SEU" id="logo" title="SEU">
ctx.lineTo(x-len,y-len);
+
                        SEU
ctx.stroke();
+
                    </a>
ctx.fillStyle='rgb('+R+','+G+','+B+')';
+
                    <div class="navigation-row">
ctx.fillText(name,x-len/2,y-len/2-fontSpace);
+
                        <nav id="navigation">
}
+
                            <button type="button" class="navbar-toggle"> <i class="fa fa-bars"></i> </button>
 +
                            <div class="nav-box navbar-collapse">
 +
                                <ul class="navigation-menu nav navbar-nav navbars" id="nav">
 +
                                    <li><a href="https://2019.igem.org/Team:SEU">  Home  </a></li>
 +
                                    <li><a href="https://2019.igem.org/Team:SEU/Team">    Team    </a>
 +
                                        <div class="popList">
 +
                                            <a href="https://2019.igem.org/Team:SEU/Team">Team Members</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Collaborations">Collaborations</a>
 +
                                        </div>
 +
                                    </li>
 +
                                    <li data-menuanchor="slide02" class="active"><a href="https://2019.igem.org/Team:SEU/Description">  Project  </a>
 +
                                        <div class="popList">
 +
                                            <a href="https://2019.igem.org/Team:SEU/Description">Description</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Design">Design</a>
 +
                                            <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>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Results">Results</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Demonstrate">Demonstrate</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Improve">Improve</a>
 +
                                            <a href="https://2019.igem.org/Team:SEU/Attributions">Attributions</a>
 +
                                        </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>
  
function up45DashedLeftLine(ctx,len,[x,y],[R,G,B],step){
+
        <!-- <video autoplay muted loop id="BGVideo"> 
ctx.strokeStyle='rgb('+R+','+G+','+B+')';
+
          <source src="https://static.igem.org/mediawiki/2019/b/bf/T--SEU--BGVideo.mp4" type="video/mp4">
ctx.beginPath();
+
        </video> -->     
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){
+
        <div id="fullpage" class="fullpage-default">
ctx.strokeStyle='rgb('+R+','+G+','+B+')';
+
            <div class="section animated-row" data-section="slide02">
ctx.beginPath();
+
                <div class="section-inner">
ctx.moveTo(x,y);
+
                    <div class="about-section">
ctx.lineTo(x+len,y);
+
                        <div class="row justify-content-center">
//right
+
                            <div class="col-md-10 wide-col-laptop">
ctx.moveTo(x+len-Math.floor(arrowLen*Math.cos(arrowAngle)),
+
                                <div class="row">
y-Math.floor(arrowLen*Math.sin(arrowAngle)));
+
                                    <div class="col-md-10">
ctx.lineTo(x+len,y);
+
                                        <br><br><br><br>
//left
+
                                        <h1>User Instruction</h1>
ctx.moveTo(x+len-Math.floor(arrowLen*Math.cos(arrowAngle)),
+
                                        <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>
y+Math.floor(arrowLen*Math.sin(arrowAngle)));
+
                                        <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>
ctx.lineTo(x+len,y);
+
                                        <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>
ctx.stroke();
+
                                        <img src="https://static.igem.org/mediawiki/2019/a/a8/T--SEU--tool.png" style="background-color: transparent;width:80%"><br><br>
ctx.fillStyle='rgb('+R+','+G+','+B+')';
+
                                        <center>
ctx.fillText(name,x+len/2,y-fontSpace);
+
                                        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>
  
function arrowHorizontalLeft(ctx,name,len,[x,y],[R,G,B],arrowLen,arrowAngle){
+
                                        <center>
ctx.strokeStyle='rgb('+R+','+G+','+B+')';
+
                                           
ctx.beginPath();
+
                                                <div class="diagram" id="words">
//right
+
                                                    <canvas id="canvas"  width="2500" height="25000"></canvas><br>
ctx.moveTo(x+Math.floor(arrowLen*Math.cos(arrowAngle)),
+
                                                    <!-- <script type="text/javascript">draw();</script> -->
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);
+
                                                </div>
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){
+
                                                <button onclick="windowSeq();">Download Sequences</button>
ctx.strokeStyle='rgb('+R+','+G+','+B+')';
+
                                                <div class="sequence" id="sequence">
ctx.beginPath();
+
                                                  <!--  <canvas id="seqCanvas"  width="200" height="20000"></canvas> -->
ctx.moveTo(x,y);
+
                                                    <!-- <script type="text/javascript">draw();</script> -->
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){
+
                                                </div>
ctx.strokeStyle='rgb('+R+','+G+','+B+')';
+
                                           
ctx.beginPath();
+
                                        </center>
//right
+
                                    </body>
ctx.moveTo(x+Math.floor(arrowLen*Math.cos(arrowAngle)),
+
                                   
y-Math.floor(arrowLen*Math.sin(arrowAngle)));
+
                                    </div>
ctx.lineTo(x,y);
+
                                   
//left
+
                                  </div>                     
ctx.moveTo(x+Math.floor(arrowLen*Math.cos(arrowAngle)),
+
                                </div>
y+Math.floor(arrowLen*Math.sin(arrowAngle)));
+
                            </div>
ctx.lineTo(x,y);
+
                        </div>
ctx.moveTo(x,y);
+
                    </div>
for(var i=0;i<=len-1;i+=2*step){
+
                </div>
ctx.moveTo(x+i,y);
+
            </div>
ctx.lineTo(x+i+step,y);
+
   
ctx.stroke();
+
    <!-- <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>
ctx.fillStyle='rgb('+R+','+G+','+B+')';
+
    <!-- <script src="mainMess.js" type="text/javascript"></script> -->
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=[];
+
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;
+
}
+
 
+
//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;
+
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;
+
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;
+
}
+
+
//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;
+
}
+
 
+
 
+
}
+
  </script>
+
</head>
+
<body onload="draw();">
+
  <canvas id="canvas" width="5000" height="10000"></canvas>
+
</body>
+
 
</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: