Template:Fudan China/JS/animation

//JavaScript goes here //animation canvas drawing var eAnimation1 = [document.getElementById('animation11'),

   document.getElementById('animation12'),
   document.getElementById('animation13'),
   document.getElementById('animation14')];

var eAnimation2 = [document.getElementById('animation21'),

   document.getElementById('animation22'),
   document.getElementById('animation23'),
   document.getElementById('animation24')];

var context11 = eAnimation1[0].getContext('2d'); context11.strokeStyle='#fff0e6'; context11.beginPath(); context11.moveTo(0,30); context11.lineTo(8,30); context11.stroke(); context11.beginPath(); context11.moveTo(0,120); context11.lineTo(8,120); context11.stroke(); context11.font = '15px Futura'; context11.fillStyle='#fff0e6'; context11.fillText('1',10,25); context11.fillText('0',10,115);

var context12 = eAnimation1[1].getContext('2d'); var context13 = eAnimation1[2].getContext('2d'); var context14 = eAnimation1[3].getContext('2d');

var context21 = eAnimation2[0].getContext('2d'); context21.strokeStyle="#fff0e6"; context21.beginPath(); context21.moveTo(0,30); context21.lineTo(8,30); context21.stroke(); context21.beginPath(); context21.moveTo(0,120); context21.lineTo(8,120); context21.stroke(); context21.font = '15px Futura'; context21.fillStyle='#fff0e6'; context21.fillText('1',10,25); context21.fillText('0',10,115);

var context22 = eAnimation2[1].getContext('2d'); var context23 = eAnimation2[2].getContext('2d'); var context24 = eAnimation2[3].getContext('2d');

//animation circuit part var eAnimationCircuit = document.getElementById('animationCircuit'); var contextCircuit = eAnimationCircuit.getContext('2d'); contextCircuit.strokeStyle='#fff0e6'; contextCircuit.beginPath(); contextCircuit.moveTo(0,95); contextCircuit.lineTo(646,95); contextCircuit.stroke();

var drawLeft=-9; function drawCDS(context,direction,width,height,x,y,color) {

   context.fillStyle = color;
   x=x+drawLeft;
   if (direction){
       context.beginPath();
       context.moveTo(x,y-height);
       context.lineTo(x+width,y-height);
       context.lineTo(x+width+height,y);
       context.lineTo(x+width,y+height);
       context.lineTo(x,y+height);
       context.closePath();
       context.fill();
   }
   else{
       context.beginPath();
       context.moveTo(x+height,y-height);
       context.lineTo(x+height+width,y-height);
       context.lineTo(x+width+height,y+height);
       context.lineTo(x+height,y+height);
       context.lineTo(x,y);
       context.closePath();
       context.fill();
   }

}

function drawAtt(context,direction,a,x,y,color) {

   context.fillStyle = color;
   x=x+drawLeft;
   if (direction){
       context.beginPath();
       context.moveTo(x,y-a);
       context.lineTo(x+1.7*a,y);
       context.lineTo(x,y+a);
       context.closePath();
       context.fill();
   }
   else{
       context.beginPath();
       context.moveTo(x,y);
       context.lineTo(x+1.7*a,y-a);
       context.lineTo(x+1.7*a,y+a);
       context.closePath();
       context.fill();
   }

}

function drawPromoter(context,direction,a,x,y,color) {

   context.strokeStyle = color;
   x=x+drawLeft;
   if (direction){
       context.beginPath();
       context.moveTo(x,y);
       context.lineTo(x,y-a);
       context.lineTo(x+a,y-a);
       context.stroke();
       context.beginPath();
       context.moveTo(x+0.75*a,y-1.25*a);
       context.lineTo(x+a,y-a);
       context.lineTo(x+0.75*a,y-0.75*a);
       context.stroke();
   }
   else{
       context.beginPath();
       context.moveTo(x,y+a);
       context.lineTo(x+a,y+a);
       context.lineTo(x+a,y);
       context.stroke();
       context.beginPath();
       context.moveTo(x+0.25*a,y+1.25*a);
       context.lineTo(x,y+a);
       context.lineTo(x+0.25*a,y+0.75*a);
       context.stroke();
   }

}

function drawTerminator(context,direction,a,x,y,color) {

   context.strokeStyle = color;
   x=x+drawLeft;
   if (direction){
       context.beginPath();
       context.moveTo(x,y-a);
       context.lineTo(x+a,y-a);
       context.stroke();
       context.beginPath();
       context.moveTo(x+0.5*a,y);
       context.lineTo(x+0.5*a,y-a);
       context.stroke();
   }
   else{
       context.beginPath();
       context.moveTo(x,y+a);
       context.lineTo(x+a,y+a);
       context.stroke();
       context.beginPath();
       context.moveTo(x+0.5*a,y);
       context.lineTo(x+0.5*a,y+a);
       context.stroke();
   }

}

var colorRange=[0,0,0]; function animationColorChange(i,initialColorR,initialColorG,initialColorB,finalColorR,finalColorG,finalColorB) {

   colorRange[0] = initialColorR - finalColorR;
   colorRange[1] = initialColorG - finalColorG;
   colorRange[2] = initialColorB - finalColorB;
   return '#' + (initialColorR - Math.floor(i * colorRange[0])).toString(16) +  + (initialColorG - Math.floor(animationIndex * colorRange[1])).toString(16) +  + (initialColorB - Math.floor(animationIndex * colorRange[2])).toString(16)

}

//drawing icons var drawHeight=95; drawPromoter(contextCircuit,1,30,20,drawHeight,'#fff0e6'); drawCDS(contextCircuit,1,40,15,50,drawHeight,'#fff0e6'); drawTerminator(contextCircuit,1,30,105,drawHeight,'#fff0e6'); drawPromoter(contextCircuit,1,30,145,drawHeight,'#fff0e6'); drawAtt(contextCircuit,1,15,175,drawHeight,'#fff0e6'); drawPromoter(contextCircuit,0,30,201,drawHeight,'#fff0e6'); drawCDS(contextCircuit,1,40,15,241,drawHeight,'#fff0e6'); drawTerminator(contextCircuit,1,30,296,drawHeight,'#fff0e6'); drawTerminator(contextCircuit,0,30,300,drawHeight,'#fff0e6'); drawAtt(contextCircuit,0,15,330,drawHeight,'#fff0e6'); drawCDS(contextCircuit,1,40,15,366,drawHeight,'#fff0e6'); drawTerminator(contextCircuit,1,30,421,drawHeight,'#fff0e6'); drawPromoter(contextCircuit,1,30,461,drawHeight,'#fff0e6'); drawAtt(contextCircuit,1,15,491,drawHeight,'#fff0e6'); drawCDS(contextCircuit,0,40,15,527,drawHeight,'#fff0e6'); drawAtt(contextCircuit,0,15,592,drawHeight,'#fff0e6'); drawTerminator(contextCircuit,1,30,618,drawHeight,'#fff0e6');

//adding legend contextCircuit.fillStyle='#fff0e6'; contextCircuit.fillRect(580,5,10,10); contextCircuit.fillStyle='#f6777d'; contextCircuit.fillRect(580,20,10,10); contextCircuit.font = '13px Futura'; contextCircuit.fillStyle='#fff0e6'; contextCircuit.fillText('off',595,15); contextCircuit.fillText('on',595,30);

contextCircuit.font = '15px Futura'; contextCircuit.fillStyle='#fff0e6'; contextCircuit.fillText('P(C)',11,drawHeight-45); contextCircuit.fillText('P(C&T)',136,drawHeight-45); contextCircuit.fillText('P(C&T)',452,drawHeight-45);

contextCircuit.fillStyle='#1a1a1a'; contextCircuit.fillText('Int 1',50,drawHeight+6); contextCircuit.fillText('1B',166,drawHeight+6); contextCircuit.fillText('Int A',241,drawHeight+6); contextCircuit.fillText('1P',328,drawHeight+6); contextCircuit.fillText('Int 2',366,drawHeight+6); contextCircuit.fillText('2B',482,drawHeight+6); contextCircuit.fillText('2P',591,drawHeight+6);

contextCircuit.rotate(Math.PI); contextCircuit.translate(-646,-155); contextCircuit.fillStyle='#fff0e6'; contextCircuit.fillText('P(-C)',424,15); contextCircuit.fillStyle='#1a1a1a'; contextCircuit.fillText('Int B',82,66); contextCircuit.translate(646,155); contextCircuit.rotate(-Math.PI);

//jQuery goes here //nav animation

//introduction animation curtain var $animationPart = $('.animationPart'); var $animationPart1 = $('#animationPart1'); var $animationPart2 = $('#animationPart2'); var $animationPart3 = $('#animationPart3'); var $animationPart4 = $('#animationPart4');

$animationPart.on('mouseover',function () {

   $(this).siblings().children('.animationCurtain').show();
   $(this).children('.animationCurtain').hide();
   var $t = $(this);
   $(document).on('mouseout',function () {
       $t.children('.animationCurtain').show();
   });
   $(this).stopPropagation();

});

//introduction animation var $animationNotice = $('#animationNotice'); var $mouseX; var canvasLocation; var lineRight; var animationIndex; function drawLine(context,height){

   context.clearRect(0,height-2,160,4);
   context.strokeStyle='#fff0e6';
   context.beginPath();
   context.moveTo(0,height);
   context.lineTo(lineRight,height);
   context.stroke();

}

$animationPart1.on('mousemove',function (e) {

   //clear lines of other parts first
   context12.clearRect(0,0,160,138);
   context13.clearRect(0,0,160,138);
   context14.clearRect(0,0,160,138);
   context22.clearRect(0,0,160,138);
   context23.clearRect(0,0,160,138);
   context24.clearRect(0,0,160,138);
   $mouseX = e.pageX-$(window).scrollLeft();
   canvasLocation = eAnimation1[0].getBoundingClientRect().left;
   lineRight = $mouseX-canvasLocation;
   if ($mouseX>canvasLocation+8) {
       context11.clearRect(8,118,160,4);
       context11.clearRect(158,0,2,138);
       context11.strokeStyle='#fff0e6';
       context11.beginPath();
       context11.moveTo(8,120);
       context11.lineTo(lineRight,120);
       context11.stroke();
       if (lineRight<100) {
           context21.clearRect(8, 118, 160, 4);
           context21.clearRect(98, 0, 62, 138);
           context21.strokeStyle = '#fff0e6';
           context21.beginPath();
           context21.moveTo(8, 120);
           context21.lineTo(lineRight, 120);
           context21.stroke();
       }
       else {
           context21.strokeStyle = '#fff0e6';
           context21.beginPath();
           context21.moveTo(8, 120);
           context21.lineTo(101, 120);
           context21.stroke();
           context21.clearRect(8, 28, 160, 4);
           context21.strokeStyle = '#fff0e6';
           context21.beginPath();
           context21.moveTo(100, 120);
           context21.lineTo(100, 29);
           context21.stroke();
           context21.beginPath();
           context21.moveTo(100, 30);
           context21.lineTo(lineRight, 30);
           context21.stroke();
       }
   }

   //the circuit notice of part1
   if (lineRight<100) {

$animationNotice.children('div').replaceWith('

Nothing happens when Clock Signal is off.

');

   }
   else {

$animationNotice.children('div').replaceWith('

Nothing happens when Clock Signal is off,
although Target Signal that we wish to record is on.

');

   }

   //the circuit animation of part1
   //restore
   contextCircuit.clearRect(0, 55, 646, 100);
   contextCircuit.clearRect(189, 0, 145, 155);
   contextCircuit.clearRect(504, 40, 92, 155);
   contextCircuit.strokeStyle='#fff0e6';
   contextCircuit.beginPath();
   contextCircuit.moveTo(0,95);
   contextCircuit.lineTo(646,95);
   contextCircuit.stroke();

   drawPromoter(contextCircuit,1,30,20,drawHeight,'#fff0e6');
   drawCDS(contextCircuit,1,40,15,50,drawHeight,'#fff0e6');
   drawTerminator(contextCircuit,1,30,105,drawHeight,'#fff0e6');
   drawPromoter(contextCircuit,1,30,145,drawHeight,'#fff0e6');
   drawAtt(contextCircuit,1,15,175,drawHeight,'#fff0e6');
   drawPromoter(contextCircuit,0,30,201,drawHeight,'#fff0e6');
   drawCDS(contextCircuit,1,40,15,241,drawHeight,'#fff0e6');
   drawTerminator(contextCircuit,1,30,296,drawHeight,'#fff0e6');
   drawTerminator(contextCircuit,0,30,300,drawHeight,'#fff0e6');
   drawAtt(contextCircuit,0,15,330,drawHeight,'#fff0e6');
   drawCDS(contextCircuit,1,40,15,366,drawHeight,'#fff0e6');
   drawTerminator(contextCircuit,1,30,421,drawHeight,'#fff0e6');
   drawPromoter(contextCircuit,1,30,461,drawHeight,'#fff0e6');
   drawAtt(contextCircuit,1,15,491,drawHeight,'#fff0e6');
   drawCDS(contextCircuit,0,40,15,527,drawHeight,'#fff0e6');
   drawAtt(contextCircuit,0,15,592,drawHeight,'#fff0e6');
   drawTerminator(contextCircuit,1,30,618,drawHeight,'#fff0e6');

   contextCircuit.fillStyle='#1a1a1a';
   contextCircuit.fillText('Int 1',50,drawHeight+6);
   contextCircuit.fillText('1B',166,drawHeight+6);
   contextCircuit.fillText('Int A',241,drawHeight+6);
   contextCircuit.fillText('1P',328,drawHeight+6);
   contextCircuit.fillText('Int 2',366,drawHeight+6);
   contextCircuit.fillText('2B',482,drawHeight+6);
   contextCircuit.fillText('2P',591,drawHeight+6);

   contextCircuit.rotate(Math.PI);
   contextCircuit.translate(-646,-155);
   contextCircuit.fillStyle='#fff0e6';
   contextCircuit.fillText('P(-C)',424,15);
   contextCircuit.fillStyle='#1a1a1a';
   contextCircuit.fillText('Int B',82,66);
   contextCircuit.translate(646,155);
   contextCircuit.rotate(-Math.PI);

});

$animationPart2.on('mousemove',function (e) {

   //clear lines of other parts first
   context13.clearRect(0,0,160,138);
   context14.clearRect(0,0,160,138);
   context23.clearRect(0,0,160,138);
   context24.clearRect(0,0,160,138);
   //draw line of part1
   context11.strokeStyle='#fff0e6';
   context11.beginPath();
   context11.moveTo(8,120);
   context11.lineTo(160,120);
   context11.stroke();
   context11.beginPath();
   context11.moveTo(159,121);
   context11.lineTo(159,29);
   context11.stroke();
   context21.beginPath();
   context21.moveTo(8, 120);
   context21.lineTo(101, 120);
   context21.stroke();
   context21.beginPath();
   context21.moveTo(100, 30);
   context21.lineTo(160, 30);
   context21.stroke();
   context21.beginPath();
   context21.moveTo(100, 120);
   context21.lineTo(100, 29);
   context21.stroke();
   context12.clearRect(158,0,2,138);
   $mouseX = e.pageX-$(window).scrollLeft();
   canvasLocation = eAnimation1[1].getBoundingClientRect().left;
   lineRight = $mouseX-canvasLocation;
   drawLine(context12,30);
   if (lineRight<100) {
       context22.clearRect(0, 28, 160, 4);
       context22.clearRect(98, 0, 102, 138);
       context22.strokeStyle = '#fff0e6';
       context22.beginPath();
       context22.moveTo(0,30);
       context22.lineTo(lineRight, 30);
       context22.stroke();
   }
   else {
       context22.strokeStyle = '#fff0e6';
       context22.beginPath();
       context22.moveTo(0, 30);
       context22.lineTo(101, 30);
       context22.stroke();
       context22.clearRect(0, 118, 160, 4);
       context22.strokeStyle = '#fff0e6';
       context22.beginPath();
       context22.moveTo(100, 120);
       context22.lineTo(100, 29);
       context22.stroke();
       context22.beginPath();
       context22.moveTo(100, 120);
       context22.lineTo(lineRight, 120);
       context22.stroke();
   }

   //the circuit notice & animation of part2
   if (lineRight<50) {
       //restore
       contextCircuit.clearRect(0, 55, 646, 100);
       contextCircuit.clearRect(189, 0, 145, 155);
       contextCircuit.clearRect(504, 40, 92, 155);
       contextCircuit.strokeStyle='#fff0e6';
       contextCircuit.beginPath();
       contextCircuit.moveTo(0,95);
       contextCircuit.lineTo(646,95);
       contextCircuit.stroke();

       drawPromoter(contextCircuit,1,30,20,drawHeight,'#fff0e6');
       drawCDS(contextCircuit,1,40,15,50,drawHeight,'#fff0e6');
       drawTerminator(contextCircuit,1,30,105,drawHeight,'#fff0e6');
       drawPromoter(contextCircuit,1,30,145,drawHeight,'#fff0e6');
       drawAtt(contextCircuit,1,15,175,drawHeight,'#fff0e6');
       drawPromoter(contextCircuit,0,30,201,drawHeight,'#fff0e6');
       drawCDS(contextCircuit,1,40,15,241,drawHeight,'#fff0e6');
       drawTerminator(contextCircuit,1,30,296,drawHeight,'#fff0e6');
       drawTerminator(contextCircuit,0,30,300,drawHeight,'#fff0e6');
       drawAtt(contextCircuit,0,15,330,drawHeight,'#fff0e6');
       drawCDS(contextCircuit,1,40,15,366,drawHeight,'#fff0e6');
       drawTerminator(contextCircuit,1,30,421,drawHeight,'#fff0e6');
       drawPromoter(contextCircuit,1,30,461,drawHeight,'#fff0e6');
       drawAtt(contextCircuit,1,15,491,drawHeight,'#fff0e6');
       drawCDS(contextCircuit,0,40,15,527,drawHeight,'#fff0e6');
       drawAtt(contextCircuit,0,15,592,drawHeight,'#fff0e6');
       drawTerminator(contextCircuit,1,30,618,drawHeight,'#fff0e6');

       contextCircuit.fillStyle='#1a1a1a';
       contextCircuit.fillText('Int 1',50,drawHeight+6);
       contextCircuit.fillText('1B',166,drawHeight+6);
       contextCircuit.fillText('Int A',241,drawHeight+6);
       contextCircuit.fillText('1P',328,drawHeight+6);
       contextCircuit.fillText('Int 2',366,drawHeight+6);
       contextCircuit.fillText('2B',482,drawHeight+6);
       contextCircuit.fillText('2P',591,drawHeight+6);

       contextCircuit.rotate(Math.PI);
       contextCircuit.translate(-646,-155);
       contextCircuit.fillStyle='#fff0e6';
       contextCircuit.fillText('P(-C)',424,15);
       contextCircuit.fillStyle='#1a1a1a';
       contextCircuit.fillText('Int B',82,66);
       contextCircuit.translate(646,155);
       contextCircuit.rotate(-Math.PI);

$animationNotice.children('div').replaceWith('

When the Clock Signal is on for the first time, promoter P(C) starts to work.
In the meantime, promoter P(C&T) also works because the Target Signal is on as well.

');

       animationIndex=lineRight/50;
       drawPromoter(contextCircuit,1,30,20,drawHeight,animationColorChange(animationIndex,255,240,230,246,119,125));
       drawCDS(contextCircuit,1,40,15,50,drawHeight,animationColorChange(animationIndex,255,240,230,246,119,125));
       drawTerminator(contextCircuit,1,30,105,drawHeight,animationColorChange(animationIndex,255,240,230,246,119,125));
       drawPromoter(contextCircuit,1,30,145,drawHeight,animationColorChange(animationIndex,255,240,230,246,119,125));
       drawCDS(contextCircuit,1,40,15,241,drawHeight,animationColorChange(animationIndex,255,240,230,246,119,125));
       drawTerminator(contextCircuit,1,30,296,drawHeight,animationColorChange(animationIndex,255,240,230,246,119,125));
       contextCircuit.fillStyle='#1a1a1a';
       contextCircuit.fillText('Int 1',50,drawHeight+6);
       contextCircuit.fillText('Int A',241,drawHeight+6);
   }
   else if (lineRight<100){
       //restore
       contextCircuit.clearRect(0, 55, 646, 100);
       contextCircuit.clearRect(189, 0, 145, 155);
       contextCircuit.clearRect(504, 40, 92, 155);
       contextCircuit.strokeStyle='#fff0e6';
       contextCircuit.beginPath();
       contextCircuit.moveTo(0,95);
       contextCircuit.lineTo(646,95);
       contextCircuit.stroke();

       drawPromoter(contextCircuit,1,30,20,drawHeight,'#f6777d');
       drawCDS(contextCircuit,1,40,15,50,drawHeight,'#f6777d');
       drawTerminator(contextCircuit,1,30,105,drawHeight,'#f6777d');
       drawPromoter(contextCircuit,1,30,145,drawHeight,'#f6777d');
       drawAtt(contextCircuit,1,15,175,drawHeight,'#fff0e6');
       drawAtt(contextCircuit,0,15,330,drawHeight,'#fff0e6');
       drawCDS(contextCircuit,1,40,15,366,drawHeight,'#fff0e6');
       drawTerminator(contextCircuit,1,30,421,drawHeight,'#fff0e6');
       drawPromoter(contextCircuit,1,30,461,drawHeight,'#fff0e6');
       drawAtt(contextCircuit,1,15,491,drawHeight,'#fff0e6');
       drawCDS(contextCircuit,0,40,15,527,drawHeight,'#fff0e6');
       drawAtt(contextCircuit,0,15,592,drawHeight,'#fff0e6');
       drawTerminator(contextCircuit,1,30,618,drawHeight,'#fff0e6');

       contextCircuit.fillStyle='#1a1a1a';
       contextCircuit.fillText('Int 1',50,drawHeight+6);
       contextCircuit.fillText('1B',166,drawHeight+6);
       contextCircuit.fillText('1P',328,drawHeight+6);
       contextCircuit.fillText('Int 2',366,drawHeight+6);
       contextCircuit.fillText('2B',482,drawHeight+6);
       contextCircuit.fillText('2P',591,drawHeight+6);

       contextCircuit.rotate(Math.PI);
       contextCircuit.translate(-646,-155);
       contextCircuit.fillStyle='#1a1a1a';
       contextCircuit.fillText('Int B',82,66);
       contextCircuit.translate(646,155);
       contextCircuit.rotate(-Math.PI);

$animationNotice.children('div').replaceWith('

Int 1 starts to be transcripted and translated, slowly inversing the fragment between 1B and 1P. The Target Signal is recorded by Int A (The recombination site is not showed).

');

       contextCircuit.save();
       contextCircuit.clearRect(179, 55, 155, 95);
       contextCircuit.clearRect(189, 0, 145, 155);
       animationIndex=Math.floor(lineRight-50)/110;
       contextCircuit.translate(256.25,drawHeight);
       contextCircuit.rotate(Math.PI*animationIndex);
       contextCircuit.beginPath();
       contextCircuit.arc(0,0,77.5,0,2*Math.PI);
       contextCircuit.clip();
       contextCircuit.strokeStyle='#fff0e6';
       contextCircuit.beginPath();
       contextCircuit.moveTo(-100,0);
       contextCircuit.lineTo(100,0);
       contextCircuit.stroke();
       drawAtt(contextCircuit,1,15,175-256.25,0,'#fff0e6');
       drawPromoter(contextCircuit,0,30,201-256.25,0,'#fff0e6');
       drawCDS(contextCircuit,1,40,15,241-256.25,0,animationColorChange(animationIndex,246,119,125,255,240,230));
       drawTerminator(contextCircuit,1,30,296-256.25,0,animationColorChange(animationIndex,246,119,125,255,240,230));
       drawTerminator(contextCircuit,0,30,300-256.25,0,animationColorChange(animationIndex,255,240,230,246,119,125));
       drawAtt(contextCircuit,0,15,330-256.25,0,'#fff0e6');
       contextCircuit.fillStyle='#1a1a1a';
       contextCircuit.fillText('1B',166-256.25,6);
       contextCircuit.fillText('Int A',241-256.25,6);
       contextCircuit.fillText('1P',328-256.25,6);
       contextCircuit.rotate(-Math.PI*animationIndex);
       contextCircuit.translate(-256.25,-drawHeight);
       contextCircuit.restore();
   }
   else {
       //restore
       contextCircuit.clearRect(0, 55, 646, 100);
       contextCircuit.clearRect(189, 0, 145, 155);
       contextCircuit.clearRect(504, 40, 92, 155);
       contextCircuit.strokeStyle='#fff0e6';
       contextCircuit.beginPath();
       contextCircuit.moveTo(0,95);
       contextCircuit.lineTo(646,95);
       contextCircuit.stroke();

       drawPromoter(contextCircuit,1,30,20,drawHeight,'#f6777d');
       drawCDS(contextCircuit,1,40,15,50,drawHeight,'#f6777d');
       drawTerminator(contextCircuit,1,30,105,drawHeight,'#f6777d');
       drawPromoter(contextCircuit,1,30,145,drawHeight,'#fff0e6');
       drawAtt(contextCircuit,1,15,175,drawHeight,'#fff0e6');
       drawAtt(contextCircuit,0,15,330,drawHeight,'#fff0e6');
       drawCDS(contextCircuit,1,40,15,366,drawHeight,'#fff0e6');
       drawTerminator(contextCircuit,1,30,421,drawHeight,'#fff0e6');
       drawPromoter(contextCircuit,1,30,461,drawHeight,'#fff0e6');
       drawAtt(contextCircuit,1,15,491,drawHeight,'#fff0e6');
       drawCDS(contextCircuit,0,40,15,527,drawHeight,'#fff0e6');
       drawAtt(contextCircuit,0,15,592,drawHeight,'#fff0e6');
       drawTerminator(contextCircuit,1,30,618,drawHeight,'#fff0e6');

       contextCircuit.fillStyle='#1a1a1a';
       contextCircuit.fillText('Int 1',50,drawHeight+6);
       contextCircuit.fillText('1B',166,drawHeight+6);
       contextCircuit.fillText('1P',328,drawHeight+6);
       contextCircuit.fillText('Int 2',366,drawHeight+6);
       contextCircuit.fillText('2B',482,drawHeight+6);
       contextCircuit.fillText('2P',591,drawHeight+6);

       contextCircuit.rotate(Math.PI);
       contextCircuit.translate(-646,-155);
       contextCircuit.fillStyle='#1a1a1a';
       contextCircuit.fillText('Int B',82,66);
       contextCircuit.translate(646,155);
       contextCircuit.rotate(-Math.PI);

$animationNotice.children('div').replaceWith('

Then Int A stops recording.

');

       contextCircuit.save();
       contextCircuit.clearRect(179, 55, 155, 95);
       contextCircuit.clearRect(189, 0, 145, 155);
       animationIndex=Math.floor(lineRight-50)/110;
       contextCircuit.translate(256.25,drawHeight);
       contextCircuit.rotate(Math.PI*animationIndex);
       contextCircuit.beginPath();
       contextCircuit.arc(0,0,77.5,0,2*Math.PI);
       contextCircuit.clip();
       contextCircuit.strokeStyle='#fff0e6';
       contextCircuit.beginPath();
       contextCircuit.moveTo(-100,0);
       contextCircuit.lineTo(100,0);
       contextCircuit.stroke();
       drawAtt(contextCircuit,1,15,175-256.25,0,'#fff0e6');
       drawPromoter(contextCircuit,0,30,201-256.25,0,'#fff0e6');
       drawCDS(contextCircuit,1,40,15,241-256.25,0,animationColorChange(animationIndex,246,119,125,255,240,230));
       drawTerminator(contextCircuit,1,30,296-256.25,0,animationColorChange(animationIndex,246,119,125,255,240,230));
       drawTerminator(contextCircuit,0,30,300-256.25,0,'#fff0e6');
       drawAtt(contextCircuit,0,15,330-256.25,0,'#fff0e6');
       contextCircuit.fillStyle='#1a1a1a';
       contextCircuit.fillText('1B',166-256.25,6);
       contextCircuit.fillText('Int A',241-256.25,6);
       contextCircuit.fillText('1P',328-256.25,6);
       contextCircuit.rotate(-Math.PI*animationIndex);
       contextCircuit.translate(-256.25,-drawHeight);
       contextCircuit.restore();
   }

});

$animationPart3.on('mousemove',function (e) {

   //clear lines of other parts first
   context14.clearRect(0,28,160,4);
   context24.clearRect(0,0,160,138);
   //draw line of part1
   context11.strokeStyle='#fff0e6';
   context11.beginPath();
   context11.moveTo(8,120);
   context11.lineTo(160,120);
   context11.stroke();
   context11.beginPath();
   context11.moveTo(159,121);
   context11.lineTo(159,29);
   context11.stroke();
   context21.strokeStyle='#fff0e6';
   context21.beginPath();
   context21.moveTo(8, 120);
   context21.lineTo(101, 120);
   context21.stroke();
   context21.beginPath();
   context21.moveTo(100, 30);
   context21.lineTo(160, 30);
   context21.stroke();
   context21.beginPath();
   context21.moveTo(100, 120);
   context21.lineTo(100, 29);
   context21.stroke();
   //draw line of part2
   context12.strokeStyle='#fff0e6';
   context12.beginPath();
   context12.moveTo(0,30);
   context12.lineTo(160,30);
   context12.stroke();
   context12.beginPath();
   context12.moveTo(159,121);
   context12.lineTo(159,29);
   context12.stroke();
   context22.strokeStyle='#fff0e6';
   context22.beginPath();
   context22.moveTo(0, 30);
   context22.lineTo(101, 30);
   context22.stroke();
   context22.beginPath();
   context22.moveTo(100, 120);
   context22.lineTo(160, 120);
   context22.stroke();
   context22.beginPath();
   context22.moveTo(100, 30);
   context22.lineTo(100, 119);
   context22.stroke();
   context13.clearRect(158,0,2,138);
   $mouseX = e.pageX-$(window).scrollLeft();
   canvasLocation = eAnimation1[2].getBoundingClientRect().left;
   lineRight = $mouseX-canvasLocation;
   drawLine(context13,120);
   drawLine(context23,120);

   //the circuit notice & animation of part3
   if (lineRight<50){
       //restore
       contextCircuit.clearRect(0, 55, 646, 100);
       contextCircuit.clearRect(189, 0, 145, 155);
       contextCircuit.clearRect(504, 40, 92, 155);
       contextCircuit.strokeStyle='#fff0e6';
       contextCircuit.beginPath();
       contextCircuit.moveTo(0,95);
       contextCircuit.lineTo(646,95);
       contextCircuit.stroke();

       drawPromoter(contextCircuit,1,30,20,drawHeight,'#fff0e6');
       drawCDS(contextCircuit,1,40,15,50,drawHeight,'#fff0e6');
       drawTerminator(contextCircuit,1,30,105,drawHeight,'#fff0e6');
       drawPromoter(contextCircuit,1,30,145,drawHeight,'#fff0e6');
       contextCircuit.translate(256.25,drawHeight);
       contextCircuit.rotate(Math.PI);
       //Highlight! drawPromoter moves to here
       drawPromoter(contextCircuit,0,30,201-256.25,0,animationColorChange(animationIndex,255,240,230,246,119,125));
       drawCDS(contextCircuit,1,40,15,241-256.25,0,'#fff0e6');
       drawTerminator(contextCircuit,1,30,296-256.25,0,'#fff0e6');
       drawTerminator(contextCircuit,0,30,300-256.25,0,'#fff0e6');
       contextCircuit.fillStyle='#1a1a1a';
       contextCircuit.fillText('Int A',241-256.25,6);
       contextCircuit.rotate(-Math.PI);
       contextCircuit.translate(-256.25,-drawHeight);
       drawPromoter(contextCircuit,1,30,461,drawHeight,'#fff0e6');
       drawAtt(contextCircuit,1,15,491,drawHeight,'#fff0e6');
       drawCDS(contextCircuit,0,40,15,527,drawHeight,'#fff0e6');
       drawAtt(contextCircuit,0,15,592,drawHeight,'#fff0e6');
       drawTerminator(contextCircuit,1,30,618,drawHeight,'#fff0e6');

       contextCircuit.fillStyle='#1a1a1a';
       contextCircuit.fillText('Int 1',50,drawHeight+6);
       contextCircuit.fillText('Int 2',366,drawHeight+6);
       contextCircuit.fillText('2B',482,drawHeight+6);
       contextCircuit.fillText('2P',591,drawHeight+6);
       contextCircuit.fillStyle='#fff0e6';
       contextCircuit.fillText('P(-C)',290.5,drawHeight-45);

       contextCircuit.rotate(Math.PI);
       contextCircuit.translate(-646,-155);
       contextCircuit.fillStyle='#1a1a1a';
       contextCircuit.fillText('Int B',82,66);
       contextCircuit.translate(646,155);
       contextCircuit.rotate(-Math.PI);

$animationNotice.children('div').replaceWith('

1B and 1P disappeared. Most gene circuits have been recombinased as below after indused by the Clock Signal pulse.

');

       animationIndex=lineRight/50;
       drawCDS(contextCircuit,1,40,15,366,drawHeight,animationColorChange(animationIndex,255,240,230,246,119,125));
       drawTerminator(contextCircuit,1,30,421,drawHeight,animationColorChange(animationIndex,255,240,230,246,119,125));
       contextCircuit.fillStyle='#1a1a1a';
       contextCircuit.fillText('Int 2',366,drawHeight+6);
   }
   else {
       //restore
       contextCircuit.clearRect(0, 55, 646, 100);
       contextCircuit.clearRect(189, 0, 145, 155);
       contextCircuit.clearRect(504, 40, 92, 155);
       contextCircuit.strokeStyle='#fff0e6';
       contextCircuit.beginPath();
       contextCircuit.moveTo(0,95);
       contextCircuit.lineTo(646,95);
       contextCircuit.stroke();

       drawPromoter(contextCircuit,1,30,20,drawHeight,'#fff0e6');
       drawCDS(contextCircuit,1,40,15,50,drawHeight,'#fff0e6');
       drawTerminator(contextCircuit,1,30,105,drawHeight,'#fff0e6');
       drawPromoter(contextCircuit,1,30,145,drawHeight,'#fff0e6');
       contextCircuit.translate(256.25,drawHeight);
       contextCircuit.rotate(Math.PI);
       drawPromoter(contextCircuit,0,30,201-256.25,0,'#f6777d');
       drawCDS(contextCircuit,1,40,15,241-256.25,0,'#fff0e6');
       drawTerminator(contextCircuit,1,30,296-256.25,0,'#fff0e6');
       drawTerminator(contextCircuit,0,30,300-256.25,0,'#fff0e6');
       contextCircuit.fillStyle='#1a1a1a';
       contextCircuit.fillText('Int A',241-256.25,6);
       contextCircuit.rotate(-Math.PI);
       contextCircuit.translate(-256.25,-drawHeight);
       drawCDS(contextCircuit,1,40,15,366,drawHeight,'#f6777d');
       drawTerminator(contextCircuit,1,30,421,drawHeight,'#f6777d');
       drawPromoter(contextCircuit,1,30,461,drawHeight,'#fff0e6');
       drawAtt(contextCircuit,1,15,491,drawHeight,'#fff0e6');
       drawAtt(contextCircuit,0,15,592,drawHeight,'#fff0e6');
       drawTerminator(contextCircuit,1,30,618,drawHeight,'#fff0e6');

       contextCircuit.fillStyle='#1a1a1a';
       contextCircuit.fillText('Int 1',50,drawHeight+6);
       contextCircuit.fillText('Int 2',366,drawHeight+6);
       contextCircuit.fillText('2B',482,drawHeight+6);
       contextCircuit.fillText('2P',591,drawHeight+6);
       contextCircuit.fillStyle='#fff0e6';
       contextCircuit.fillText('P(-C)',290.5,drawHeight-45);

$animationNotice.children('div').replaceWith('

Promoter P(-C) begins to work, expressing Int 2 to inverse the fragment
between 2B and 2P. The circuit is waiting for the next record.

');

       contextCircuit.save();
       contextCircuit.clearRect(494, 55, 102, 95);
       contextCircuit.clearRect(504, 40, 92, 155);
       animationIndex=Math.floor(lineRight-50)/110;
       contextCircuit.translate(545.25,drawHeight);
       contextCircuit.rotate(Math.PI*animationIndex);
       contextCircuit.beginPath();
       contextCircuit.arc(0,0,51,0,2*Math.PI);
       contextCircuit.clip();
       contextCircuit.strokeStyle='#fff0e6';
       contextCircuit.beginPath();
       contextCircuit.moveTo(-100,0);
       contextCircuit.lineTo(100,0);
       contextCircuit.stroke();
       drawAtt(contextCircuit,1,15,491-545.25,0,'#fff0e6');
       drawCDS(contextCircuit,0,40,15,527-545.25,0,'#fff0e6');
       drawAtt(contextCircuit,0,15,592-545.25,0,'#fff0e6');
       contextCircuit.rotate(Math.PI);
       contextCircuit.fillStyle='#1a1a1a';
       contextCircuit.fillText('Int B',-18.75,6);
       contextCircuit.rotate(-Math.PI);
       contextCircuit.rotate(-Math.PI*animationIndex);
       contextCircuit.translate(-545.25,-drawHeight);
       contextCircuit.restore();
   }

});

$animationPart4.on('mousemove',function (e) {

   //draw line of part1
   context11.strokeStyle='#fff0e6';
   context11.beginPath();
   context11.moveTo(8,120);
   context11.lineTo(160,120);
   context11.stroke();
   context11.beginPath();
   context11.moveTo(159,121);
   context11.lineTo(159,29);
   context11.stroke();
   context21.strokeStyle='#fff0e6';
   context21.beginPath();
   context21.moveTo(8, 120);
   context21.lineTo(101, 120);
   context21.stroke();
   context21.beginPath();
   context21.moveTo(100, 30);
   context21.lineTo(160, 30);
   context21.stroke();
   context21.beginPath();
   context21.moveTo(100, 120);
   context21.lineTo(100, 29);
   context21.stroke();
   //draw line of part2
   context12.strokeStyle='#fff0e6';
   context12.beginPath();
   context12.moveTo(0,30);
   context12.lineTo(160,30);
   context12.stroke();
   context12.beginPath();
   context12.moveTo(159,121);
   context12.lineTo(159,29);
   context12.stroke();
   context22.strokeStyle='#fff0e6';
   context22.beginPath();
   context22.moveTo(0, 30);
   context22.lineTo(101, 30);
   context22.stroke();
   context22.beginPath();
   context22.moveTo(100, 120);
   context22.lineTo(160, 120);
   context22.stroke();
   context22.beginPath();
   context22.moveTo(100, 30);
   context22.lineTo(100, 119);
   context22.stroke();
   //draw line of part3
   context13.strokeStyle='#fff0e6';
   context13.beginPath();
   context13.moveTo(0,120);
   context13.lineTo(160,120);
   context13.stroke();
   context13.beginPath();
   context13.moveTo(159,121);
   context13.lineTo(159,29);
   context13.stroke();
   context23.strokeStyle='#fff0e6';
   context23.beginPath();
   context23.moveTo(0,120);
   context23.lineTo(160,120);
   context23.stroke();
   $mouseX = e.pageX-$(window).scrollLeft();
   canvasLocation = eAnimation1[3].getBoundingClientRect().left;
   lineRight = $mouseX-canvasLocation;
   drawLine(context14,30);
   drawLine(context24,120);

   //restore
   contextCircuit.clearRect(0, 55, 646, 100);
   contextCircuit.clearRect(189, 0, 145, 155);
   contextCircuit.clearRect(504, 40, 92, 155);
   contextCircuit.strokeStyle='#fff0e6';
   contextCircuit.beginPath();
   contextCircuit.moveTo(0,95);
   contextCircuit.lineTo(646,95);
   contextCircuit.stroke();

   drawPromoter(contextCircuit,1,30,20,drawHeight,'#fff0e6');
   drawCDS(contextCircuit,1,40,15,50,drawHeight,'#fff0e6');
   drawTerminator(contextCircuit,1,30,105,drawHeight,'#fff0e6');
   drawPromoter(contextCircuit,1,30,145,drawHeight,'#fff0e6');

   contextCircuit.translate(256.25,drawHeight);
   contextCircuit.rotate(Math.PI);
   drawPromoter(contextCircuit,0,30,201-256.25,0,'#fff0e6');
   drawCDS(contextCircuit,1,40,15,241-256.25,0,'#fff0e6');
   drawTerminator(contextCircuit,1,30,296-256.25,0,'#fff0e6');
   drawTerminator(contextCircuit,0,30,300-256.25,0,'#fff0e6');
   contextCircuit.fillStyle='#1a1a1a';
   contextCircuit.fillText('Int A',241-256.25,6);
   contextCircuit.rotate(-Math.PI);
   contextCircuit.translate(-256.25,-drawHeight);

   contextCircuit.translate(545.25,drawHeight);
   contextCircuit.rotate(Math.PI);
   drawCDS(contextCircuit,0,40,15,527-545.25,0,'#fff0e6');
   contextCircuit.rotate(Math.PI);
   contextCircuit.fillStyle='#1a1a1a';
   contextCircuit.fillText('Int B',-18.75,6);
   contextCircuit.rotate(-Math.PI);
   contextCircuit.rotate(-Math.PI);
   contextCircuit.translate(-545.25,-drawHeight);

   drawCDS(contextCircuit,1,40,15,366,drawHeight,'#fff0e6');
   drawTerminator(contextCircuit,1,30,421,drawHeight,'#fff0e6');
   drawPromoter(contextCircuit,1,30,461,drawHeight,'#fff0e6');
   drawTerminator(contextCircuit,1,30,618,drawHeight,'#fff0e6');

   contextCircuit.fillStyle='#1a1a1a';
   contextCircuit.fillText('Int 1',50,drawHeight+6);
   contextCircuit.fillText('Int 2',366,drawHeight+6);
   contextCircuit.fillStyle='#fff0e6';
   contextCircuit.fillText('P(-C)',290.5,drawHeight-45);

   //the circuit notice of part4
   if (lineRight<80){

$animationNotice.children('div').replaceWith('

Although Clock Signal is on, Target Signal is off.
As a result, Int B designed for the second record is not expressed.

');

   }
   else {

$animationNotice.children('div').replaceWith('

In the end, we can get the memorized signal in order, 1 and 0, which means the Target signal exists at time2 but disappears before time4.

');

   }

});