|
|
(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> |