|
|
| (19 intermediate revisions by 6 users not shown) |
| Line 1: |
Line 1: |
| − | {{Fudan-TSI}}<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> | + | {{Fudan-TSI}}<!-- jquery loaded by HQ 1.12.4 --> |
| − | <html lang="en"> | + | <html></p></div></div></div><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"> |
| − | <!--
| + | <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.css&action=raw&ctype=text/css"> |
| − | This html document is created by Tian Huang for Team Fudan iGEM 2018.
| + | <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-font-awesome.css&action=raw&ctype=text/css" /> |
| − | We make it compatible on laptop and mobile devices by using Materialize 1.0.0-rc.2.
| + | <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-css.css&action=raw&ctype=text/css" /> |
| − | -->
| + | <style> |
| − | <!-- LC check on 2018-10-18 -->
| + | /*****************************************************************************/ |
| − | <head>
| + | /* DEFAULT WIKI SETTINGS */ |
| − | <meta charset="UTF-8">
| + | /*****************************************************************************/ |
| − | | + | #home_logo, #sideMenu { display:none; } |
| − | <!-- CSS -->
| + | #sideMenu, #top_title, .patrollink { display:none; } |
| − | <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-css.css&action=raw&ctype=text/css" />
| + | #content { margin-left: 0; padding:0px; width:100%;} |
| − | | + | .judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important; } |
| − | <!-- Font-awesome icons 4.7.0 -->
| + | /* css clean * */ |
| − | <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-font-awesome.css&action=raw&ctype=text/css" />
| + | #FudanTSIBody li { list-style: none; } |
| − | | + | |
| − | <!-- Materialize 1.0.0-rc.2 (Material Design like) -->
| + | |
| − | <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.css&action=raw&ctype=text/css">
| + | |
| − | | + | |
| − | <!-- Clear default CSS settings; CSS reset -->
| + | |
| − | <style>
| + | |
| − | *{margin: 0;padding: 0;list-style: none;}
| + | |
| − | /* via: https://blog.csdn.net/weixin_41014370/article/details/79523637 */
| + | |
| − | | + | |
| − | /** 清除内外边距 **/
| + | |
| − | body, h1, h3, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
| + | |
| − | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
| + | |
| − | pre, /* text formatting elements 文本格式元素 */
| + | |
| − | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
| + | |
| − | th, td /* table elements 表格元素 */ {
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | /** 设置默认字体 **/
| + | |
| − | | + | |
| − | /* @@@@ h1, h3, h3, h4, h5, h6 { font-size: 100%; }*/
| + | |
| − | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
| + | |
| − | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
| + | |
| − | /* @@@@ small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
| + | |
| − | | + | |
| − | /** 重置列表元素 **/
| + | |
| − | ul, ol { list-style: none; }
| + | |
| − | | + | |
| − | /** 重置文本格式元素 **/
| + | |
| − | a { text-decoration: none; }
| + | |
| − | a:hover { text-decoration: underline; }
| + | |
| − | | + | |
| − | | + | |
| − | /** 重置表单元素 **/
| + | |
| − | legend { color: #000; } /* for ie6 */
| + | |
| − | fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
| + | |
| − | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
| + | |
| − | /* 注：optgroup 无法扶正 */
| + | |
| − | | + | |
| − | /** 重置表格元素 **/
| + | |
| − | table { border-collapse: collapse; border-spacing: 0; }
| + | |
| − | #FudanBody .imgNoM img{
| + | |
| − | width:100%;
| + | |
| − | } | + | |
| − | #FudanBody .imgNoM{ | + | |
| − | text-align:center;
| + | |
| − | } | + | |
| | </style> | | </style> |
| − | <title>2019 Team:Fudan-TSI Demonstrate</title> | + | <title>Composite Parts | 2019 iGEM Team:Fudan-TSI</title> |
| | </head> | | </head> |
| − |
| |
| | <body> | | <body> |
| − | <!-- Fudan div at igem.org --> | + | <div id="FudanTSIdivWrapper"><div id="FudanTSIBody"> |
| − | <div id="FudanWrapper" class="white"> | + | <header> |
| − | <div id="FudanBody" class="white"> | + | <div id="emptyBar" style="position:relative;width: 100%;"></div><nav id="topNav" class="black z-depth-0_5"><div class="nav-wrapper"><div id="teamLogo" class="brand-logo"> <a href="/Team:Fudan-TSI" target="_self"><img alt="2019 team logo" src="https://static.igem.org/mediawiki/2019/d/d3/T--Fudan-TSI--HomepageLogo.gif"></a></div><ul id="nav-mobile" class="right"> |
| − | <header>
| + | <li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown1">Project</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown2">Results</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown3">Model</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown4">Parts</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown5">Human practices</a></li><li class="hide-on-med-and-down"><a class="dropdown-trigger" data-target="dropdown6">Team</a></li> |
| − | <!-- empty bar -->
| + | <li class="hide-on-med-and-down"><a href="/Team:Fudan-TSI/Judging">Judging</a></li> |
| − | <div id="emptyBar" style="position:relative;width: 100%;"></div>
| + | <li> <a id="navList" data-target="slide-out" class="waves-effect waves-light sidenav-trigger right"> <i class="fa fa-navicon" style="font-size: 24px"></i> </a></li></ul></div> </nav> |
| | + | <!-- Dropdown and List elements in navigation bar --> |
| | + | <ul id="dropdown1" class="dropdown-content"> |
| | + | <li><a href="/Team:Fudan-TSI/Description">Background</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Design">Design</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Experiments">Experiments</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Applied_Design">Applied design</a></li> |
| | + | </ul> |
| | + | <ul id="dropdown2" class="dropdown-content"> |
| | + | <li><a href="/Team:Fudan-TSI/Demonstrate#ReverseTranscription">Reverse transcription</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Demonstrate#Recombination">Recombination</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Measurement">Measurement</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Notebook">Notebook</a></li> |
| | + | </ul> |
| | + | <ul id="dropdown3" class="dropdown-content"> |
| | + | <li><a href="/Team:Fudan-TSI/Model">Modeling</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Software">Software</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Hardware">Hardware</a></li> |
| | + | </ul> |
| | + | <ul id="dropdown4" class="dropdown-content"> |
| | + | <li><a href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Improve">Part improvement</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li> |
| | + | </ul> |
| | + | <ul id="dropdown5" class="dropdown-content"> |
| | + | <li><a href="/Team:Fudan-TSI/Public_Engagement">Public engagement</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Human_Practices#IntegratedHumanPractice">Integrated HP</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Safety">Safety</a></li> |
| | + | </ul> |
| | + | <ul id="dropdown6" class="dropdown-content"> |
| | + | <li><a href="/Team:Fudan-TSI/Team">Members</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Attributions">Attributions</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Team#Acknowledge">Acknowledge</a></li> |
| | + | <li><a href="/Team:Fudan-TSI/Heritage">Heritage</a></li> |
| | + | </ul> |
| | | | |
| − | <!-- Navigation bar 2019-9-15 -->
| |
| − | <nav id="topNav" class="white z-depth-0_5">
| |
| − | <div class="nav-wrapper">
| |
| − | <div id="teamLogo" class="brand-logo">
| |
| − | <a href="/Team:Fudan-TSI" target="_self"><img alt="2019 team logo" src="https://static.igem.org/mediawiki/2019/3/3c/T--Fudan-TSI--Logo0.gif"></a>
| |
| − | </div>
| |
| − | <ul id="nav-mobile" class="right">
| |
| − | <li>
| |
| − | <a id="navList" data-target="slide-out" class="waves-effect waves-light sidenav-trigger right">
| |
| − | <i class="fa fa-navicon" style="font-size:24px"></i>
| |
| − | </a>
| |
| − | </li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </nav>
| |
| − | <!-- Dropdown and List elements in navigation bar -->
| |
| − | <!-- Slide-out navigator contents 2019-9-15 -->
| |
| − | <ul id="slide-out" class="sidenav">
| |
| − | <li style="padding: 0"><div class="sidenavBanner">
| |
| − | <div class="background">
| |
| − | </div>
| |
| − | <p class="flow-text" style="width:100%;text-align:center"><span class="white-text">Demonstration</span></p>
| |
| − | </div></li>
| |
| − | <li>
| |
| − | <ul class="collapsible expandable">
| |
| − | <li class="onThisPageNav"><span>On this page</span></li>
| |
| − | <li class="onThisPageNav"><a href="#section1">div with id section1</a></li>
| |
| − | <li class="onThisPageNav"><a href="#section2">div with id section2</a></li>
| |
| − | <li class="onThisPageNav"><a href="#section3">div with id section3</a></li>
| |
| − | <li class="onThisPageNav"><a href="#section4">div with id section4</a></li>
| |
| − | <li class="onThisPageNav"><a href="#section5">div with id section5</a></li>
| |
| − | <li class="onThisPageNav"><span>Team: Fudan-TSI</span></li>
| |
| − | <li><div class="collapsible-header"><span>Project</span></div>
| |
| − | <div class="collapsible-body"><ul>
| |
| − | <li><a href="/Team:Fudan-TSI/Description">Background</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Design">Design</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Applied_Design">Applied Design</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Experiments">Experiments</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Judging">Judging</a></li>
| |
| − | </ul></div>
| |
| − | </li>
| |
| − | <li><div class="collapsible-header"><span>Results</span></div>
| |
| − | <div class="collapsible-body"><ul>
| |
| − | <li><a href="/Team:Fudan-TSI/Results#ReverseTranscription">Reverse Transcription</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Results#Recombination">Recombination</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Measurement">Measurement</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Notebook">Notebook</a></li>
| |
| − | </ul></div>
| |
| − | </li>
| |
| − | <li><div class="collapsible-header"><span>Model</span></div>
| |
| − | <div class="collapsible-body"><ul>
| |
| − | <li><a href="/Team:Fudan-TSI/Model">Modeling</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Software">Software</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Hardware">Hardware</a></li>
| |
| − | </ul></div>
| |
| − | </li>
| |
| − | <li><div class="collapsible-header"><span>Parts</span></div>
| |
| − | <div class="collapsible-body"><ul>
| |
| − | <li><a href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Improve">Improved parts</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li>
| |
| − | </ul></div>
| |
| − | </li>
| |
| − | <li><div class="collapsible-header"><span>Outreach</span></div>
| |
| − | <div class="collapsible-body"><ul>
| |
| − | <li><a href="/Team:Fudan-TSI/Public_Engagement">Education & Public engagement</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Integrated_Human_Practice">Integrated human practice</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Safety">Safety</a></li>
| |
| − | </ul></div>
| |
| − | </li>
| |
| − | <li><div class="collapsible-header"><span>Team</span></div>
| |
| − | <div class="collapsible-body"><ul>
| |
| − | <li><a href="/Team:Fudan-TSI/Team">Members</a></li>
| |
| − | <li><a href="/Team:Fudan-TSI/Attributions">Attributions</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:Fudan/Heritage" target=_blank>Heritage</a></li>
| |
| − | </ul></div>
| |
| − | </li>
| |
| − | </ul><!-- .expandable -->
| |
| − | </li>
| |
| − | <li><div class="placeHolder"></div></li>
| |
| − | </ul>
| |
| − | </header>
| |
| | | | |
| − | <div id="pageContent" style="">
| + | <ul id="slide-out" class="sidenav"> |
| | + | <li style="padding: 0"><div class="sidenavBanner"> |
| | + | <div class="background"></div> |
| | + | <p class="flow-text" style="width:100%;text-align:center"><span class="white-text">Composite Parts</span></p> |
| | + | </div></li> |
| | + | <li> |
| | + | <ul class="collapsible expandable"> |
| | + | <li><span class="pageSidebar">Team: Fudan-TSI</span></li><li><div class="collapsible-header"><span class="pageSidebar">Project</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Description">Background</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Design">Design</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Experiments">Experiments</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Applied_Design">Applied design</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Judging">Judging</a></li></ul></div></li><li><div class="collapsible-header"><span class="pageSidebar">Results</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Demonstrate#ReverseTranscription">Reverse transcription</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Demonstrate#Recombination">Recombination</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Measurement">Measurement</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Notebook">Notebook</a></li></ul></div></li><li><div class="collapsible-header"><span class="pageSidebar">Model</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Model">Modeling</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Software">Software</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Hardware">Hardware</a></li></ul></div></li><li><div class="collapsible-header active"><span class="pageSidebar">Parts</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Improve">Part improvement</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li></ul></div></li><li><div class="collapsible-header"><span class="pageSidebar">Human practices</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Public_Engagement">Public engagement</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Human_Practices#IntegratedHumanPractice">Integrated HP</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Safety">Safety</a></li></ul></div></li><li><div class="collapsible-header"><span class="pageSidebar">Team</span></div><div class="collapsible-body"><ul><li><a class="pageSidebar" href="/Team:Fudan-TSI/Team">Members</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Attributions">Attributions</a></li><li><a class="pageSidebar" href="/Team:Fudan-TSI/Heritage">Heritage</a></li></ul></div></li> |
| | + | </ul><!-- .expandable --> |
| | + | </li> |
| | + | <li><div class="placeHolder"></div></li> |
| | + | </ul> |
| | + | </header> |
| | | | |
| | + | <div id="pageContent"> |
| | + | <div id="contentBanner" class="figureBanner"> |
| | + | <div class="row"> |
| | + | <div class="col s12 hide-on-med-and-up"> |
| | + | <h1><br/>Composite Parts</h1> |
| | + | </div> |
| | + | </div> |
| | + | <div class="hide-on-small-only"> |
| | + | <style> |
| | + | #demo {width:100%;height:100%;position:relative;z-index:-100;} |
| | + | #demo svg {width:100%;height:100%;position:fixed;} |
| | + | #demo svg g {mix-blend-mode:lighten;} |
| | + | #demo svg polygon {stroke:none;fill:white;} |
| | + | </style> |
| | + | <div id="pageCover"> |
| | + | <svg id="demo" viewBox="0 0 1600 600" preserveAspectRatio="xMidYMid slice"> |
| | + | <defs> |
| | + | <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB"> |
| | + | <stop id="stop1a" offset="0%" stop-color="#12a3b4"></stop> |
| | + | <stop id="stop1b" offset="100%" stop-color="#ff509e"></stop> |
| | + | </linearGradient> |
| | + | <linearGradient id="grad2" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB"> |
| | + | <stop id="stop2a" offset="0%" stop-color="#e3bc13"></stop> |
| | + | <stop id="stop2b" offset="100%" stop-color="#00a78f"></stop> |
| | + | </linearGradient> |
| | + | </defs> |
| | + | <rect id="rect1" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad1)"></rect> |
| | + | <rect id="rect2" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad2)"></rect> |
| | + | </svg> |
| | + | </div><!-- #pageCover --> |
| | + | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bkg&action=raw&ctype=text/javascript"></script> |
| | + | <script> |
| | + | ////////////////////////////// |
| | + | // Demo Functions |
| | + | ////////////////////////////// |
| | + | function bkgFunction(showStats) { |
| | + | // stats |
| | + | if (showStats) { |
| | + | var stats = new Stats(); |
| | + | stats.domElement.style.position = 'absolute'; |
| | + | stats.domElement.style.left = '0'; |
| | + | stats.domElement.style.top = '0'; |
| | + | document.body.appendChild(stats.domElement); |
| | + | requestAnimationFrame(function updateStats(){ |
| | + | stats.update(); |
| | + | requestAnimationFrame(updateStats); |
| | + | }); |
| | + | } |
| | + | // init |
| | + | var svg = document.getElementById('demo'); |
| | + | tesselation.setup(svg); |
| | + | gradients.setup(); |
| | + | var lastTransitionAt, transitionDelay = 10000, transitionDuration = 3000; |
| | + | function playNextTransition() { |
| | + | tesselation.next(transitionDuration); |
| | + | gradients.next(transitionDuration); |
| | + | }; |
| | + | function tick(time) { |
| | + | if (!lastTransitionAt || time - lastTransitionAt > transitionDelay) { |
| | + | lastTransitionAt = time; |
| | + | playNextTransition(); |
| | + | } |
| | + | window.requestAnimationFrame(tick); |
| | + | } |
| | + | window.requestAnimationFrame(tick); |
| | + | } |
| | + | ////////////////////////////// |
| | + | // Delaunay Triangulation |
| | + | ////////////////////////////// |
| | + | var calcDelaunayTriangulation = (function() { |
| | + | var EPSILON = 1.0 / 1048576.0; |
| | + | function getSuperT(vertices) { |
| | + | var xMin = Number.POSITIVE_INFINITY, yMin = Number.POSITIVE_INFINITY, |
| | + | xMax = Number.NEGATIVE_INFINITY, yMax = Number.NEGATIVE_INFINITY, |
| | + | i, xDiff, yDiff, maxDiff, xCenter, yCenter; |
| | + | for(i = vertices.length; i--; ) { |
| | + | if(vertices[i][0] < xMin) xMin = vertices[i][0]; |
| | + | if(vertices[i][0] > xMax) xMax = vertices[i][0]; |
| | + | if(vertices[i][1] < yMin) yMin = vertices[i][1]; |
| | + | if(vertices[i][1] > yMax) yMax = vertices[i][1]; |
| | + | } |
| | + | xDiff = xMax - xMin; |
| | + | yDiff = yMax - yMin; |
| | + | maxDiff = Math.max(xDiff, yDiff); |
| | + | xCenter = xMin + xDiff * 0.5; |
| | + | yCenter = yMin + yDiff * 0.5; |
| | + | return [ |
| | + | [xCenter - 20 * maxDiff, yCenter - maxDiff], |
| | + | [xCenter, yCenter + 20 * maxDiff], |
| | + | [xCenter + 20 * maxDiff, yCenter - maxDiff] |
| | + | ]; |
| | + | } |
| | + | function circumcircle(vertices, i, j, k) { |
| | + | var xI = vertices[i][0], yI = vertices[i][1], |
| | + | xJ = vertices[j][0], yJ = vertices[j][1], |
| | + | xK = vertices[k][0], yK = vertices[k][1], |
| | + | yDiffIJ = Math.abs(yI - yJ), yDiffJK = Math.abs(yJ - yK), |
| | + | xCenter, yCenter, m1, m2, xMidIJ, xMidJK, yMidIJ, yMidJK, xDiff, yDiff; |
| | + | // bail condition |
| | + | if(yDiffIJ < EPSILON){ |
| | + | if (yDiffJK < EPSILON){ |
| | + | throw new Error("Can't get circumcircle since all 3 points are y-aligned"); |
| | + | } |
| | + | } |
| | | | |
| − | <div id="contentBanner" class="figureBanner">
| |
| − | <div class="row">
| |
| − | <div class="col s12 hide-on-med-and-up">
| |
| − | <h1>Demonstration</h1>
| |
| − | </div>
| |
| − | <div class="col s12 hide-on-med-and-up">
| |
| − | <span></span>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div id="figureBannerTitle" class="hide-on-small-only">
| |
| − | <h1>Demonstration</h1>
| |
| − | <p class="flow-text"><span></span></p>
| |
| − | </div>
| |
| − | <div class="hide-on-small-only">
| |
| − | <img src="https://static.igem.org/mediawiki/2018/a/a5/T--Fudan--title_demonstration.jpg">
| |
| − | <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" style="position:absolute; left:0;top:0; width: 4%;height: 100%;">
| |
| − | <defs>
| |
| − | <linearGradient y2="0%" x2="100%" y1="0%" x1="0%" id="blackgraleft">
| |
| − | <stop stop-color="rgb(0,0,0)" stop-opacity="1" offset="0%"/>
| |
| − | <stop stop-color="rgb(0,0,0)" stop-opacity="0" offset="100%"/>
| |
| − | </linearGradient>
| |
| − | </defs>
| |
| − | <g>
| |
| − | <rect id="svg_1" fill="url(#blackgraleft)" height="100%" width="100%"/>
| |
| − | </g>
| |
| − | </svg>
| |
| − | <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" style="position:absolute; right:0;top:0; width: 4%;height: 100%;">
| |
| − | <defs>
| |
| − | <linearGradient y2="0%" x2="100%" y1="0%" x1="0%" id="blackgraright">
| |
| − | <stop stop-color="rgb(0,0,0)" stop-opacity="0" offset="0%"/>
| |
| − | <stop stop-color="rgb(0,0,0)" stop-opacity="1" offset="100%"/>
| |
| − | </linearGradient>
| |
| − | </defs>
| |
| − | <g>
| |
| − | <rect id="svg_2" fill="url(#blackgraright)" height="100%" width="100%"/>
| |
| − | </g>
| |
| − | </svg>
| |
| − | </div>
| |
| − | </div>
| |
| | | | |
| − | <!-- main content of the page -->
| + | // calc circumcircle center x/y, radius |
| − | <div class="container">
| + | m1 = -((xJ - xI) / (yJ - yI)); |
| − | <main style="margin: 0">
| + | m2 = -((xK - xJ) / (yK - yJ)); |
| − | <div class="section container scrolSpy" id="section1">
| + | xMidIJ = (xI + xJ) / 2.0; |
| − | <h2>Video abstract</h2>
| + | xMidJK = (xJ + xK) / 2.0; |
| − | <video class="responsive-video" style="margin-top:23px;" controls>
| + | yMidIJ = (yI + yJ) / 2.0; |
| − | <source src="https://static.igem.org/mediawiki/2018/4/45/T--Fudan--demostrate-video.mp4" type="video/mp4">
| + | yMidJK = (yJ + yK) / 2.0; |
| − | </video>
| + | xCenter = (yDiffIJ < EPSILON) ? xMidIJ : |
| − | <h2>Transmembrane Logic
| + | (yDiffJK < EPSILON) ? xMidJK : |
| − | </h2>
| + | (m1 * xMidIJ - m2 * xMidJK + yMidJK - yMidIJ) / (m1 - m2); |
| − | <h3>Sensing and integrating various transmembrane signals is a key aspect of cellular decision making.
| + | yCenter = (yDiffIJ > yDiffJK) ? |
| − | </h3><p class="flow-text">
| + | m1 * (xCenter - xMidIJ) + yMidIJ : |
| − | For example, activation of CD8+ cells requires co-activation of TCR and CD28 molecules, meanwhile, this activation can be inhibited by the PD-1 pathway <a href="https://www.ncbi.nlm.nih.gov/pubmed/28280247" target=_blank>(Hui et al., 2017)</a>. By abstracting this biological process, we can get: the activation of CD8+ cell = activated TCR AND (activated CD28 NIMPLY activated PD-1). Programming cells with predictable complex transmembrane signal inputs – customized intracellular signal outputs logic relationships are significant for expanding the widespread applications of mammalian cells, such as cellular immunotherapy <a href="https://www.ncbi.nlm.nih.gov/pubmed/24337479" target=_blank>(Fedorov et al., 2013;</a> <a href="https://www.ncbi.nlm.nih.gov/pubmed/23242161" target=_blank>Kloss et al., 2013;</a> <a href="https://www.ncbi.nlm.nih.gov/pubmed/26830879" target=_blank>Roybal et al., 2016a;</a> <a href="https://www.ncbi.nlm.nih.gov/pubmed/27693353" target=_blank>Roybal et al., 2016b), tissue patterning </a><a href="https://www.ncbi.nlm.nih.gov/pubmed/26830878" target=_blank>(Morsut et al., 2016;</a><a href="https://www.ncbi.nlm.nih.gov/pubmed/27693353" target=_blank>Roybal et al., 2016;</a> <a href="https://www.ncbi.nlm.nih.gov/pubmed/29853554" target=_blank>Toda et al., 2018)</a>.
| + | m2 * (xCenter - xMidJK) + yMidJK; |
| − | </p>
| + | xDiff = xJ - xCenter; |
| − | <div class="expFigureHolder" style="width:100%">
| + | yDiff = yJ - yCenter; |
| − | <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/2/28/T--Fudan--results-1.svg">
| + | // return |
| | + | return {i: i, j: j, k: k, x: xCenter, y: yCenter, r: xDiff * xDiff + yDiff * yDiff}; |
| | + | } |
| | + | function dedupeEdges(edges) { |
| | + | var i, j, a, b, m, n; |
| | + | for(j = edges.length; j; ) { |
| | + | b = edges[--j]; a = edges[--j]; |
| | + | for(i = j; i; ) { |
| | + | n = edges[--i]; m = edges[--i]; |
| | + | if(a === m){ |
| | + | if (b===n){ |
| | + | edges.splice(j, 2); edges.splice(i, 2); |
| | + | break; |
| | + | } |
| | + | } |
| | + | if(a === n){ |
| | + | if (b===m){ |
| | + | edges.splice(j, 2); edges.splice(i, 2); |
| | + | break; |
| | + | } |
| | + | } |
| | + | } |
| | + | } |
| | + | } |
| | + | return function(vertices) { |
| | + | var n = vertices.length, |
| | + | i, j, indices, st, candidates, locked, edges, dx, dy, a, b, c; |
| | + | // bail if too few / too many verts |
| | + | if(n < 3 || n > 2000) |
| | + | return []; |
| | + | // copy verts and sort indices by x-position |
| | + | vertices = vertices.slice(0); |
| | + | indices = new Array(n); |
| | + | for(i = n; i--; ) |
| | + | indices[i] = i; |
| | + | indices.sort(function(i, j) { |
| | + | return vertices[j][0] - vertices[i][0]; |
| | + | }); |
| | + | // supertriangle |
| | + | st = getSuperT(vertices); |
| | + | vertices.push(st[0], st[1], st[2]); |
| | + | // init candidates/locked tris list |
| | + | candidates = [circumcircle(vertices, n + 0, n + 1, n + 2)]; |
| | + | locked = []; |
| | + | edges = []; |
| | + | // scan left to right |
| | + | for(i = indices.length; i--; edges.length = 0) { |
| | + | c = indices[i]; |
| | + | // check candidates tris against point |
| | + | for(j = candidates.length; j--; ) { |
| | + | // lock tri if point to right of circumcirc |
| | + | dx = vertices[c][0] - candidates[j].x; |
| | + | if (dx > 0.0){ |
| | + | if(dx * dx > candidates[j].r){ |
| | + | locked.push(candidates[j]); |
| | + | candidates.splice(j, 1); |
| | + | continue; |
| | + | } |
| | + | } |
| | | | |
| − | </div>
| |
| − | <h3>a sequence-specific toolbox for continuous mutagenesis
| |
| − | </h3>
| |
| − | <p class="flow-text"><b>
| |
| − | The ingenious design of nature makes us amazing, and inspires us to explore new possibilities. By designing the ENABLE (Engineered, Across-membrane, Binary Logic in Eukaryotes) system and achieving the first complete transmembrane binary Boolean logic in mammals, we could make the pupil outdo the master, make cells even smarter.
| |
| − | </b></p>
| |
| − | </div>
| |
| − | <div id="section2" class="section container">
| |
| − | <h2>Optimizing the Receptor, aims for reduced background activation
| |
| − | </h2>
| |
| − | <p class="flow-text">In order to be able to implement a custom multiplexed transmembrane signal input/output relationship, the first condition is that engineering modular receptor to enable it to recognize extracellular signals and transduce them into customized intracellular signals. <a href="https://www.nature.com/articles/nrc.2016.17" target=_blank>SynNotch</a> is a transmembrane receptor with high programmability. Therefore, we can use this tool to receive extracellular signals and output customized intracellular signals.
| |
| − | </p><p class="flow-text">
| |
| − | Good tools are prerequisite to the successful execution of a job. In order to make SynNotch more suitable as a tool for receiving complex extracellular signals, we have optimized it. Please visit <a href="/Team:Fudan-TSI/Optimization">Optimization page</a> for more details.
| |
| − | </p>
| |
| − | </div>
| |
| − | <div id="section3" class="section container">
| |
| − | <h2>Three-layer design for dual transmembrane signals
| |
| | | | |
| − | </h2>
| + | // point outside circumcirc = leave candidates |
| − | <p class="flow-text">The expression of membrane proteins on the cell membrane is limited. Our modeling tells us how to make cells sensitive to the limited signal molecules, and perform function efficiently is the key to make the transmembrane logic gate system work.
| + | dy = vertices[c][1] - candidates[j].y; |
| | + | if(dx * dx + dy * dy - candidates[j].r > EPSILON) |
| | + | continue; |
| | + | // point inside circumcirc = break apart, save edges |
| | + | edges.push( |
| | + | candidates[j].i, candidates[j].j, |
| | + | candidates[j].j, candidates[j].k, |
| | + | candidates[j].k, candidates[j].i |
| | + | ); |
| | + | candidates.splice(j, 1); |
| | + | } |
| | + | // new candidates from broken edges |
| | + | dedupeEdges(edges); |
| | + | for(j = edges.length; j; ) { |
| | + | b = edges[--j]; |
| | + | a = edges[--j]; |
| | + | candidates.push(circumcircle(vertices, a, b, c)); |
| | + | } |
| | + | } |
| | + | // close candidates tris, remove tris touching supertri verts |
| | + | for(i = candidates.length; i--; ) |
| | + | locked.push(candidates[i]); |
| | + | candidates.length = 0; |
| | + | for(i = locked.length; i--; ) |
| | + | if(locked[i].i < n){ |
| | + | if(locked[i].j < n){ |
| | + | if(locked[i].k < n){ |
| | + | candidates.push(locked[i].i, locked[i].j, locked[i].k); |
| | + | } |
| | + | } |
| | + | } |
| | | | |
| − | </p><p class="flow-text"> Based on this, we developed the ENABLE system with a 3-layers design: Receptor, Amplifier, and Combiner. By adding an intermediate layer, the “Amplifier” layer, we are able to effectively amplify the transmembrane signal, thus enabling our intracellular components to effectively travel logic functions.
| |
| | | | |
| − | </p><p class="flow-text"> The 3-layer design principle underlying ENABLE empowers any future development of transmembrane logic circuits, thus contributes a foundational advance to synthetic biology.
| + | // done |
| | + | return candidates; |
| | + | }; |
| | + | })(); |
| | + | var tesselation = (function() { |
| | + | var svg, svgW, svgH, prevGroup; |
| | + | function createRandomTesselation() { |
| | + | var wW = window.innerWidth; |
| | + | var wH = window.innerHeight; |
| | + | var gridSpacing = 250, scatterAmount = 0.75; |
| | + | var gridSize, i, x, y; |
| | + | if (wW / wH > svgW / svgH) { // window wider than svg = use width for gridSize |
| | + | gridSize = gridSpacing * svgW / wW; |
| | + | } else { // window taller than svg = use height for gridSize |
| | + | gridSize = gridSpacing * svgH / wH; |
| | + | } |
| | + | var vertices = []; |
| | + | var xOffset = (svgW % gridSize) / 2, yOffset = (svgH % gridSize) / 2; |
| | + | for (x = Math.floor(svgW/gridSize) + 1; x >= -1; x--) { |
| | + | for (y = Math.floor(svgH/gridSize) + 1; y >= -1; y--) { |
| | + | vertices.push( |
| | + | [ |
| | + | xOffset + gridSize * (x + scatterAmount * (Math.random() - 0.5)), |
| | + | yOffset + gridSize * (y + scatterAmount * (Math.random() - 0.5)) |
| | + | ] |
| | + | ); |
| | + | } |
| | + | } |
| | + | var triangles = calcDelaunayTriangulation(vertices); |
| | + | var group = document.createElementNS('http://www.w3.org/2000/svg','g'); |
| | + | var polygon; |
| | + | for(i = triangles.length; i; ) { |
| | + | polygon = document.createElementNS('http://www.w3.org/2000/svg','polygon'); |
| | + | polygon.setAttribute('points', |
| | + | vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' + |
| | + | vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' + |
| | + | vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] |
| | + | ); |
| | + | group.appendChild(polygon); |
| | + | } |
| | + | return group; |
| | + | } |
| | + | return { |
| | + | setup: function(svgElement) { |
| | + | svg = svgElement; |
| | + | var vb = svg.getAttribute('viewBox').split(/\D/g); |
| | + | svgW = vb[2]; |
| | + | svgH = vb[3]; |
| | + | }, |
| | + | next: function(t) { |
| | + | var toRemove, i, n; |
| | + | t /= 1000; |
| | + | if(prevGroup){ |
| | + | if(prevGroup.children){ |
| | + | if(prevGroup.children.length){ |
| | + | toRemove = prevGroup; |
| | + | n = toRemove.children.length; |
| | + | for (i = n; i--; ) { |
| | + | TweenMax.to(toRemove.children[i], t*0.4, {opacity: 0, delay: t*(0.3*i/n)}); |
| | + | } |
| | + | TweenMax.delayedCall(t * (0.7 + 0.05), function(group) { svg.removeChild(group); }, [toRemove], this); |
| | + | } |
| | + | } |
| | + | } |
| | | | |
| − | </p>
| + | var g = createRandomTesselation(); |
| − | <div class=" expFigureHolder" style=" width: 50%; margin: 23px auto 0 auto" > | + | n = g.children.length; |
| − | <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/a/a3/T--Fudan--results-3.svg">
| + | for (i = n; i--; ) { |
| | + | TweenMax.fromTo(g.children[i], t*0.4, {opacity: 0}, {opacity: 0.3 + 0.25 * Math.random(), delay: t*(0.3*i/n + 0.3), ease: Back.easeOut}); |
| | + | } |
| | + | svg.appendChild(g); |
| | + | prevGroup = g; |
| | + | } |
| | + | } |
| | + | })(); |
| | + | ////////////////////////////// |
| | + | // Gradients |
| | + | ////////////////////////////// |
| | + | var gradients = (function() { |
| | + | var grad1, grad2, showingGrad1; |
| | + | // using colors from IBM Design Colors this time |
| | + | var colors = [ // 14 colors - use 3-5 span |
| | + | '#3c6df0', // ultramarine50 |
| | + | '#12a3b4', // aqua40 |
| | + | '#00a78f', // teal40 |
| | + | '#00aa5e', // green40 |
| | + | '#81b532', // lime30 |
| | + | '#e3bc13', // yellow20 |
| | + | '#ffb000', // gold20 |
| | + | '#fe8500', // orange30 |
| | + | '#fe6100', // peach40 |
| | + | '#e62325', // red50 |
| | + | '#dc267f', // magenta50 |
| | + | '#c22dd5', // purple50 |
| | + | '#9753e1', // violet50 |
| | + | '#5a3ec8' // indigo60 |
| | + | ]; |
| | + | function assignRandomColors(gradObj) { |
| | + | var rA = Math.floor(colors.length * Math.random()); |
| | + | var rB = Math.floor(Math.random() * 3) + 3; // [3 - 5] |
| | + | rB = (rA + (rB * (Math.random() < 0.5 ? -1 : 1)) + colors.length) % colors.length; |
| | + | gradObj.stopA.setAttribute('stop-color', colors[rA]); |
| | + | gradObj.stopB.setAttribute('stop-color', colors[rB]); |
| | + | } |
| | + | return { |
| | + | setup: function() { |
| | + | showingGrad1 = false; |
| | + | grad1 = { |
| | + | stopA: document.getElementById('stop1a'), |
| | + | stopB: document.getElementById('stop1b'), |
| | + | rect: document.getElementById('rect1') |
| | + | }; |
| | + | grad2 = { |
| | + | stopA: document.getElementById('stop2a'), |
| | + | stopB: document.getElementById('stop2b'), |
| | + | rect: document.getElementById('rect2') |
| | + | }; |
| | + | grad1.rect.style.opacity = 0; |
| | + | grad2.rect.style.opacity = 0; |
| | + | }, |
| | + | next: function(t) { |
| | + | t /= 1000; |
| | + | var show, hide; |
| | + | if (showingGrad1) { |
| | + | hide = grad1; |
| | + | show = grad2; |
| | + | } else { |
| | + | hide = grad2; |
| | + | show = grad1; |
| | + | } |
| | + | showingGrad1 = !showingGrad1; |
| | + | TweenMax.to(hide.rect, 0.55*t, {opacity: 0, delay: 0.2*t, ease: Sine.easeOut}); |
| | + | assignRandomColors(show); |
| | + | TweenMax.to(show.rect, 0.65*t, {opacity: 1, ease: Sine.easeIn}); |
| | + | } |
| | + | }; |
| | + | })(); |
| | + | ////////////////////////////// |
| | + | // Start |
| | + | ////////////////////////////// |
| | + | bkgFunction(); |
| | + | </script> |
| | + | <div style=" position:absolute;top:100px;left:9%" ><center><img style=" height: 120px; width:auto" alt=" cover gif 1st added" src="https://static.igem.org/mediawiki/ 2019/ e/ ee/T--Fudan- TSI-- coverCompositeParts. gif" /></center></div> |
| | + | </div> |
| | + | </div> |
| | | | |
| − | </div>
| + | <!--//////////////////////////////////////////////////// |
| − | </div>
| + | do not edit above, if must BE CAREFUL |
| − | <div id="section4" class=" section container"> | + | //////////////////////////////////////////////////////--> |
| − | <h2>Unified intracellular logic gates layout
| + | |
| | + | <!-- side navigator of page content --> |
| | + | <!-- main content of the page --> |
| | + | <main style="margin:0"><article> |
| | | | |
| − | </h2>
| + | <div class="section container"> |
| − | <p class="flow-text"> In order to be able to receive dual transmembrane signals and produce complete binary Boolean logic, we designed a set of interactive grammar for the interaction between the "Amplifier" layer and the "Combiner" layer within the cell membrane. This grammar consists mainly of the following elements, a transcription system based on the activating-form, silencing-from or NIMPLY-form promoters (the three are collectively referred to as a synthetic transcription factor-promoter pairs based transcription system); intein-based protein in vivo fusion systems, proteolytic enzyme-based protein in vivo destruction systems (the two are collectively referred to as a protein fusion/destruction-based transcription factor logic). We have test them and report in <a href="/Team:Fudan-TSI/ Results"> Results page</a> , as well as on < b>parts.igem</ b> pages. | + | <p class="flow-text"> For best composite part, we would like to present you with our <a href="/Team:Fudan-TSI/ Part_Collection"> Cre recombinase together with degradation tag</a> . Cre recombinase < a href="http://parts.igem .org/Part:BBa_K3257044" target="_blank">(BBa_K3257044)</ a> is responsible for the recombination process between the reverse transcribed cDNA and the target Gene of Interest (GOI), which is rather one of the most important processes in our system.</p> |
| − | </p>
| + | <p class="flow-text">Because of the leakage of uninduced Cre expression, we have spent much effort in lowering the steady-state expression level of Cre. An important approach is to attach 5 different types of degradation tags after the CDS of Cre. Using EGFP <a href="http://parts.igem.org/Part:BBa_E0040" target="_blank">(BBa_E0040)</a> as a reporter, we can see that the degradation rate of degradation tag with amino acid residual sequence of AANDENWVLAA <a href="http://parts.igem.org/Part:BBa_K3257073" target="_blank">(BBa_K3257073)</a> is moderate for Cre recombinase to reach a steady but relatively low level of expression <a href="#Fig1">(Figure 1)</a>.</p> |
| − | <div class="expFigureHolder" style="width:60%;margin: 23px auto 0 auto"> | + | |
| − | <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/e/ec/T--Fudan--stack.gif">
| + | |
| | | | |
| − | </div>
| + | <div class=" figureHolder" id=" Fig1"> |
| − | </div>
| + | <img class="responsive-img" src="https://static.igem.org/mediawiki/ 2019/ 3/ 34/T--Fudan- TSI- -Composite_Fig1. png" /> |
| − | <div id="section5" class="section container">
| + | <p><b>Figure 1. Degradation tag greatly reduces the protein level at stable state.</b><br/> |
| − | <h2>ENABLE logic gates
| + | WT represents the positive control of EGFP without any tag attachment. The five degradation tags are represented by their last five amino acid sequence. The vertical axe shows the quantitative analysis of EGFP fluorescence (excitation wavelength: 485 nm; detection wavelength: 528 nm), normalized by cell amount (OD600). The fluorescence is quantified by the concentration of green fluorescein, cell number is quantified by the number of silicon beads, both are from the distributed measurement kit. Fluorescence below detection level are eliminated. Error bar stands for the SEM of 3 replicates. t-test is performed between WT and each degradation tag, P<0.0001 (****).</p> |
| − | </h2>
| + | </div> |
| − | <p class="flow-text">Below we show experimental verifications of six (OR, NOR, AND, NAND, IMPLY, NIMPLY) of the eight truly binary logics.
| + | |
| − | </p>
| + | |
| − | <div class="expFigureHolder" style="width:100%">
| + | |
| − | <img class="responsive-img" src="https://static.igem.org/mediawiki/ 2018/ 5/ 56/T--Fudan-- LG. svg"> | + | |
| | | | |
| − | </div>
| + | <p class="flow-text"> Transformed into BL21(DE3) with another plasmid containing lox sites and analyzed by colony PCR, we can see that DNA cleavage between identical-oriented loxP sites happens indicating the normal function of Cre recombinase <a href="#Fig2">(Figure 2)</ a> . For more information of other composite parts, please refer to < a href=" /Team:Fudan- TSI/Part_Collection">the part collection page</ a> and < a target=" _blank" href=" http:// parts.igem.org/"> the iGEM Part Registry</ a> ranging from BBa_K3257100 to BBa_K3257118.</ p> |
| − | <p class="flow-text"> Here, we use the OR gate as a proof of concept for a three-layer transmembrane binary Boolean logic during tissue patterning. | + | |
| − | </p>
| + | |
| − | <p class="flow-text"> Through dynamic and static observations, we can see that the Receiver cell with transmembrane OR gate can be activated by two Sender cells expressing different membrane antigens.
| + | |
| − | </p>
| + | |
| − | <div class="row">
| + | |
| − | <img class="col s12 m4" src="https://static.igem.org/mediawiki/2018/9/98/T--Fudan--demon-1.png">
| + | |
| − | <img class="col s12 m4" src="https://static.igem.org/mediawiki/2018/d/d1/T--Fudan--results-rgb2.gif">
| + | |
| − | </div>
| + | |
| | | | |
| − | <h2>Public engagement and education
| + | <div align="center" class="figureHolder" id="Fig2"> |
| − | </h2>
| + | <img class="responsive-img" src="https://static.igem.org/mediawiki/2019/9/97/T--Fudan-TSI--Composite_Fig2.gif" /> |
| − | <p class="flow-text">Our <a href="/Team:Fudan-TSI/Human_Practices">human practice</a> activities include <a href="/Team:Fudan-TSI/Public_Engagement">dialogues (debate and interviews), presentations</a>, <a href="/Team:Fudan-TSI/Bio-Art">Bio-Art display</a> and <a href="/Team:Fudan-TSI/Public_Engagement">hands-on practices</a>, all of which centered around farseeing. We want to unlock the creativity and intelligence in as many people as possible. Fully engaged with the public, we motivated by their openness and willingness, which reminds us why we initiated the research and why we work hard in the lab - for the good of the people, including ourselves.
| + | <p><b>Figure 2. The verification of DNA cleavage between LoxP sites.</b><br/> |
| − | </p>
| + | Plasmids containing the Cre gene were co-transformed with plasmids containing mCherry flanked by LoxP sites. A pair of sequencing primers were used to amplify the mCherry gene. PCR product would be around 1000 bp while fragments cleaved by Cre recombinase would be approximately 250 bp. The positive control group is the PCR product of plasmids containing the original mCherry gene. The negative control group is the PCR product of plasmids containing the Cre gene only.</p> |
| − | </div>
| + | </div> |
| | | | |
| − | </main>
| + | <p class="flow-text">Combining these two results, we show that this composite part is able to express Cre recombinase which functions well in an <i>E. coli</i> cell at a relatively low expression level, which is we need for new recombinants accumulating during the R-Evolution process.</p> |
| − | </div>
| + | |
| − | <!-- end of main content of the page -->
| + | |
| | | | |
| − | <!--Abstract on content page-->
| + | <p class="flow-text"> In the future, iGEMers and synthetic biologists may use this part for homologous recombination with different degradation tags and promoters based on their own requirements.</p> |
| − | <div id="abstractContent" class="z-depth-2">
| + | |
| − | <a href="#!"><img alt="project summary" src="https://static.igem.org/mediawiki/2018/9/96/T--Fudan--X.svg"></a>
| + | |
| − | <div class="container">
| + | |
| − | <h4 style="margin:0;padding:10px 0;">Project Summary</h4>
| + | |
| − | <p class="flow-text " style="margin:0"> Mutation library generation is critical for biological and medical research, but current methods cannot mutate a specific sequence continuously without manual intervention. Here we present a toolbox for <i>in vivo</i> continuous mutation library construction. First, the target DNA is transcribed into RNA. Next, our reverse transcriptase reverts RNA into cDNA, during which the target is randomly mutated by enhanced error-prone reverse transcription. Finally, the mutated version replaces the original sequence through recombination . These steps will be carried out iteratively, generating a random mutation library of the target with high efficiency as mutations accumulate along with bacterial growth. Our toolbox is orthogonal and provides a wide range of applications among various species. R-Evolution could mutate coding sequences and regulatory sequences, which enables the <i>in vivo</i> evolution of individual proteins or multiple targets at a time, promotes high-throughput research, and serves as a foundational advance to synthetic biology. | + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| | | | |
| − | <!-- Floating Btns -->
| + | < p class=" flow- text"> For more information of other composite parts, please refer to <a href="/Team:Fudan-TSI/ Part_Collection"> the part collection page</a> and <a target="_blank" href="http:// parts.igem.org/"> the iGEM Part Registry</a> ranging from BBa_K3257100 to BBa_K3257118.</ p> |
| − | <div class="floatingBtn">
| + | |
| − | <a href="#!" id="abstractBtn" class="btn">
| + | |
| − | <i class="fa fa-sticky-note" style="font-size:30px;line-height:50px"></i>
| + | |
| − | </a>
| + | |
| − | <a href=" #FudanWrapper" class="btn"> | + | |
| − | <i class="fa fa-angle-up" style="font-size:48px;line-height:45px"></i>
| + | |
| − | </a>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <!-- Footer with sponsors and contact methods -->
| + | |
| − | <footer id="FudanFooter" class="page-footer grey">
| + | |
| − | <div class="container">
| + | |
| − | <div class="row">
| + | |
| − | <div id="sponsor" class="col m3 s12 row">
| + | |
| − | <a href="https://2019.igem.org/Team:Fudan-TSI"><img alt="2018 Team:Fudan logo white" class="col s3 m6 l3" style="position:relative; padding: 0.5em 0.3rem; margin:-0.15rem 0; left: -0.45rem;" src="https://static.igem.org/mediawiki/2019/7/7f/T--Fudan-TSI--Logo0-crop-grey.png">
| + | |
| − | </a><a href="http://www.fudan.edu.cn/en/" target="_blank" ><img class="col s3 m6 l3" alt="Fudan University" src="https://static.igem.org/mediawiki/2018/f/f7/T--Fudan--schoolLogo.png"> | + | |
| − | </a><a href="http://life.fudan.edu.cn/" target="_blank"><img class="col s3 m6 l3" style="margin-bottom: 4%;/* 该图比其他小一点，排版需要 */" alt="School of Life Sciences, Fudan University" src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan--schoolOfLifeSciencesIcon.png">
| + | |
| − | </a><a href="http://www.yfc.cn/en/" target="_blank"><img class="col s3 m6 l3" style="padding: 0.15rem 0.9rem;" alt="Yunfeng Capital" src="https://static.igem.org/mediawiki/2018/e/e2/T--Fudan--yunfengLogo.png">
| + | |
| − | </a>
| + | |
| − | <h3 class="col s12" style="text-align: left; color: rgba(255, 255, 255, 0.8); font-size:12.5px">R-Evolution: an <i>in vivo</i> sequence-specific toolbox for continuous mutagenesis</h3>
| + | |
| − | </div>
| + | |
| − | <div id="usefulLinks" class="col m9 s12 row">
| + | |
| − | <div class="col s12 l6 row">
| + | |
| − | <div class="col s12 m4 active">
| + | |
| − | <span><a href="/Team:Fudan-TSI/Description">Project</a></span>
| + | |
| − | <ul>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Description">Background</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Design">Design</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Applied_Design">Applied Design</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Experiments">Experiments</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Judging">Judging</a></li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | <div class="col s12 m4">
| + | |
| − | <span><a href="/Team:Fudan-TSI/Results">Results</a></span>
| + | |
| − | <ul>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Results#ReverseTranscription">Reverse Transcription</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Results#Recombination">Recombination</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Measurement">Measurement</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Notebook">Notebook</a></li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | <div class="col s12 m4">
| + | |
| − | <span><a href="/Team:Fudan-TSI/Model">Model</a></span>
| + | |
| − | <ul>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Model">Modeling</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Software">Software</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Hardware">Hardware</a></li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="col s12 l6 row">
| + | |
| − | <div class="col s12 m4">
| + | |
| − | <span><a href="/Team:Fudan-TSI/Parts">Parts</a></span>
| + | |
| − | <ul>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Improve">Improved parts</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | <div class="col s12 m4">
| + | |
| − | <span><a href="/Team:Fudan-TSI/Human_Practices">Outreach</a></span>
| + | |
| − | <ul>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Public_Engagement">Education & Public engagement</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Integrated_Human_Practice">Integrated human practice</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Safety">Safety</a></li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | <div class="col s12 m4">
| + | |
| − | <span><a href="/Team:Fudan-TSI/Team">Team</a></span>
| + | |
| − | <ul>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Team">Members</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI/Attributions">Attributions</a></li>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Fudan/Heritage" target=_blank>Heritage</a></li>
| + | |
| − | <li><a href="/Team:Fudan-TSI">© 2019</a></li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | <div class="col s12 m4"> </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="footer-copyright">
| + | |
| − | <div class="container">
| + | |
| − | <div class="contactUS row">
| + | |
| − | <div class="col s12 m6 l4"><i class="fa fa-location-arrow"></i> Life Sci Bldg, 2005 Songhu Rd, Shanghai
| + | |
| − | </div><div class="col s12 m6 l2"><i class="fa fa-fax"></i> +86-21-31246727
| + | |
| − | </div><div class="col s12 m6 l2"><i class="fa fa-envelope-o"></i> igem@fudan.edu.cn
| + | |
| − | </div><div class="col s12 m6 l4"><i class="fa fa-twitter"></i> <i class="fa fa-wechat"></i> Fudan_iGEM
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </footer>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | </div>
| + | |
| | </div> | | </div> |
| | | | |
| | | | |
| − | <!-- Javascript files --> | + | <!--//////////////////////////////////////////////////// |
| − | <!-- Materialize 1.0.0-rc.2 -->
| + | do not edit below, if must BE CAREFUL |
| − | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.js&action=raw&ctype=text/javascript"></script>
| + | //////////////////////////////////////////////////////--> |
| | + | </article></main></div><!-- end of side navigator and main of the page --> |
| | | | |
| − | <!-- Javascript --> | + | <!-- Floating Btns, Footer with sponsors --> |
| − | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-js.js&action=raw&ctype=text/javascript"></script> | + | <div class="floatingBtn"> <a href="#FudanTSIdivWrapper" class="btn"> <i class="fa fa-angle-up" style="font-size:48px;line-height:45px"></i> </a></div> <footer id="FudanTSIfooter" class="page-footer blue-grey darken-1"><div class="container"><div class="row"><div id="sponsor" class="col m3 s12 row"> <a href="https://2019.igem.org/Team:Fudan-TSI"><img alt="2019 Team:Fudan-TSI logo white" class="col s3 m6 l3" style="position:relative; padding: 0.45em 0.3rem; margin:-0.15rem 0; left: -0.45rem;" src="https://static.igem.org/mediawiki/2019/0/0f/T--Fudan-TSI--LogoGrey.gif"> </a><a href="http://www.fudan.edu.cn/en/" target="_blank"><img class="col s3 m6 l3" alt="Fudan University" src="https://static.igem.org/mediawiki/2018/f/f7/T--Fudan--schoolLogo.png"> </a><a href="http://life.fudan.edu.cn/" target="_blank"><img class="col s3 m6 l3" style="margin-bottom: 4%;/* fig should be smaller, 2018 ht */" alt="School of Life Sciences, Fudan University" src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan--schoolOfLifeSciencesIcon.png"> </a><a href="http://www.yfc.cn/en/" target="_blank"><img class="col s3 m6 l3" style="padding: 0.15rem 0.9rem;" alt="Yunfeng Capital" src="https://static.igem.org/mediawiki/2018/e/e2/T--Fudan--yunfengLogo.png"> </a><h3 class="col s12" style="text-align:left;font-size:12.5px">R-Evolution: an <i>in vivo</i> sequence-specific toolbox for continuous mutagenesis</h3></div><div id="footerNavList" class="col m9 s12 row"><div class="col s12 l6 row"><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Description">Project</a></span><ul><li><a href="/Team:Fudan-TSI/Description">Background</a></li><li><a href="/Team:Fudan-TSI/Design">Design</a></li><li><a href="/Team:Fudan-TSI/Experiments">Experiments</a></li><li><a href="/Team:Fudan-TSI/Applied_Design">Applied design</a></li><li><a href="/Team:Fudan-TSI/Judging">Judging</a></li></ul></div><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Demonstrate">Results</a></span><ul><li><a href="/Team:Fudan-TSI/Demonstrate#ReverseTranscription">Reverse transcription</a></li><li><a href="/Team:Fudan-TSI/Demonstrate#Recombination">Recombination</a></li><li><a href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li><li><a href="/Team:Fudan-TSI/Measurement">Measurement</a></li><li><a href="/Team:Fudan-TSI/Notebook">Notebook</a></li></ul></div><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Model">Model</a></span><ul><li><a href="/Team:Fudan-TSI/Model">Modeling</a></li><li><a href="/Team:Fudan-TSI/Software">Software</a></li><li><a href="/Team:Fudan-TSI/Hardware">Hardware</a></li></ul></div></div><div class="col s12 l6 row"><div class="col s12 m4 active"> <span><a href="/Team:Fudan-TSI/Parts">Parts</a></span><ul><li><a href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li><li><a href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li><li><a href="/Team:Fudan-TSI/Improve">Part improvement</a></li><li><a href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li></ul></div><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Human_Practices">Outreach</a></span><ul><li><a href="/Team:Fudan-TSI/Public_Engagement">Public engagement</a></li><li><a href="/Team:Fudan-TSI/Human_Practices#IntegratedHumanPractice">Integrated HP</a></li><li><a href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li><li><a href="/Team:Fudan-TSI/Safety">Safety</a></li></ul></div><div class="col s12 m4"> <span><a href="/Team:Fudan-TSI/Team">Team</a></span><ul><li><a href="/Team:Fudan-TSI/Team">Members</a></li><li><a href="/Team:Fudan-TSI/Attributions">Attributions</a></li><li><a href="/Team:Fudan-TSI/Team#Acknowledge">Acknowledge</a></li><li><a href="/Team:Fudan-TSI/Heritage">Heritage</a></li></ul></div><div class="col s12 m4"> </div></div></div></div></div><div class="footer-copyright"><div class="container"><div class="contactUS row"><div class="col s12 m6 l4"><i class="fa fa-location-arrow"></i> Life Sci Bldg, 2005 Songhu Rd, Shanghai</div><div class="col s12 m6 l2"><i class="fa fa-fax"></i> +86-21-31246727</div><div class="col s12 m6 l2"><i class="fa fa-envelope-o"></i> igem@fudan.edu.cn</div><div class="col s12 m6 l4"><i class="fa fa-twitter"></i> <i class="fa fa-wechat"></i> Fudan_iGEM</div></div></div></div> </footer> |
| | + | </div></div></div><!-- #pageContent #FudanTSIBody #FudanTSIdivWrapper --> |
| | | | |
| | + | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.js&action=raw&ctype=text/javascript"></script><!-- Materialize 1.0.0-rc.2 --> |
| | + | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/Fudan-js.js&action=raw&ctype=text/javascript"></script> |
| | </body> | | </body> |
| | </html> | | </html> |
