Team:USTC-China/modeling presentation

From 2012.igem.org

(Difference between revisions)
Line 4: Line 4:
<link rel="stylesheet" href="https://2012.igem.org/Team:USTC-China/background.css?action=raw&ctype=text/css" type="text/css" media="screen">
<link rel="stylesheet" href="https://2012.igem.org/Team:USTC-China/background.css?action=raw&ctype=text/css" type="text/css" media="screen">
-
<link href='http://fonts.googleapis.com/css?family=Capriola' rel='stylesheet' type='text/css'>
+
 
-
<link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>
+
-
<link href='http://fonts.googleapis.com/css?family=Life+Savers' rel='stylesheet' type='text/css'>
+
-
<script type="text/javascript" src="https://2012.igem.org/Team:USTC-China/jquery-1.2.3.js?action=raw&ctype=text/javascript"></script>
+
-
<script type="text/javascript" src="https://2012.igem.org/Team:USTC-China/jquery.easing.1.3.js?action=raw&ctype=text/javascript"></script>
+
-
<script type="text/javascript" src="https://2012.igem.org/Team:USTC-China/jquery.kwicks-1.5.1.js?action=raw&ctype=text/javascript"></script>
+
-
<script type="text/javascript">
+
-
$().ready(function() {
+
-
$('.kwicks').kwicks({
+
-
max : 200,
+
-
duration: 800, 
+
-
easing: 'easeOutQuint'
+
-
});
+
-
});
+
-
</script>
+
     <!--this is the top menu-->
     <!--this is the top menu-->
-
      
+
    <style> 
 +
     body{ 
 +
        font-size:9pt; 
 +
    } 
 +
    table{ 
 +
        border-collapse: collapse; 
 +
        border:solid #333 1px; 
 +
    } 
 +
    td{ 
 +
        height: 7px; 
 +
        width: 7px; 
 +
        font-size: 0px; 
 +
    } 
 +
    .filled{ 
 +
        background-color:blue; 
 +
    } 
 +
</style> 
 +
<script>
 +
var greynum=10;
 +
var rednum=10;
 +
var bluenum=10;
 +
var p1=0.9;
 +
var p2=0.1;
 +
var p3=0.8;
 +
function disp_prompt()
 +
{
 +
greynum=prompt("Number of Normal Cells:","180","","")
 +
rednum=prompt("Number of Red Cells:","120")
 +
bluenum=prompt("Number of Blue Cells:","120")
 +
p1=prompt("Probability 1","0.9")
 +
p2=prompt("Probability 2","0.1")
 +
p3=prompt("Probability 3","0.8")
 +
//if (name!=null && name!="")
 +
//{
 +
// document.write("你好！" + name + name2+ " 今天过得怎么样？")
 +
//}
 +
alert("Done! click Reset to refresh the parameters");
 +
}
 +
    function $(id){return document.getElementById(id);}
 +
    var ctime = 0;
 +
 +
    //类 
 +
    var Snake = { 
 +
       
 +
        direction: 0, 
 +
        //定时器 
 +
        timer: null, 
 +
        //速度 
 +
        speed: 250, 
 +
        //是否已经暂停 
 +
        paused: true, 
 +
        //行数 
 +
        rowCount: 68, 
 +
        //列数 
 +
        colCount: 100, 
 +
//countsteps
 +
turnlimit: 100,
 +
//初始化 
 +
        init: function(){ 
 +
            var colors = ['red','grey','blue'/*,'#ccc'*/]; 
 +
            this.tbl = $("main"); 
 +
            var x = 0; 
 +
            var y = 0; 
 +
            var colorIndex = 0; 
 +
            //构造table 
 +
            for(var row=0;row<this.rowCount;row++){ 
 +
                var tr=this.tbl.insertRow(-1); 
 +
                for(var col=0;col<this.colCount;col++) { 
 +
                    var td=tr.insertCell(-1); 
 +
                } 
 +
            } 
 +
            //产生松散节点 初始化细胞
 +
/*for(var i=0; i<120; i++){ 
 +
                x = Math.floor(Math.random()*this.colCount); 
 +
                y = Math.floor(Math.random()*this.rowCount); 
 +
                colorIndex = Math.floor(Math.random()*3); 
 +
                if(!this.isCellFilled(x,y)){ 
 +
                    this.tbl.rows[y].cells[x].style.backgroundColor = colors[colorIndex]; 
 +
                } 
 +
            };*/
 +
//grey
 +
for(var i=0; i<greynum; i++){ 
 +
                x = Math.floor(Math.random()*this.colCount); 
 +
                y = Math.floor(Math.random()*this.rowCount); 
 +
                colorIndex = 1; 
 +
                if(!this.isCellFilled(x,y)){ 
 +
                    this.tbl.rows[y].cells[x].style.backgroundColor = colors[colorIndex]; 
 +
                } 
 +
            };
 +
//red
 +
            for(var i=0; i<rednum; i++){ 
 +
                x = Math.floor(Math.random()*this.colCount); 
 +
                y = Math.floor(Math.random()*this.rowCount); 
 +
                colorIndex = 0; 
 +
                if(!this.isCellFilled(x,y)){ 
 +
                    this.tbl.rows[y].cells[x].style.backgroundColor = colors[colorIndex]; 
 +
                } 
 +
            };
 +
//blue
 +
for(var i=0; i<bluenum; i++){ 
 +
                x = Math.floor(Math.random()*this.colCount); 
 +
                y = Math.floor(Math.random()*this.rowCount); 
 +
                colorIndex = 2; 
 +
                if(!this.isCellFilled(x,y)){ 
 +
                    this.tbl.rows[y].cells[x].style.backgroundColor = colors[colorIndex]; 
 +
                } 
 +
            };
 +
},
 +
        //细胞运动 
 +
 +
        move: function(){
 +
//alert("Begin");
 +
            this.timer = setInterval
 +
(
 +
function(){ 
 +
Snake.OS();   
 +
}, this.speed
 +
);
 +
        }, 
 +
OS: function(){ 
 +
if(this.NSK()==1){
 +
ctime++;
 +
//var p1=0.9;
 +
//var p2=0.1;
 +
//var p3=0.8;
 +
//构造临时数组
 +
var plank = new Array(6);
 +
for(index=0;index<6;index++)
 +
{
 +
plank[index] = new Array(this.rowCount+2);
 +
for(i=0;i<this.rowCount+2;i++)
 +
{
 +
plank[index][i]=new Array(this.colCount+2);
 +
}
 +
}
 +
//临时数组初值
 +
for(index=0;index<2;index++)
 +
{
 +
for(i=0;i<this.rowCount+2;i++)
 +
{
 +
for(j=0;j<this.colCount+2;j++)
 +
{
 +
plank[index][i][j]=0;
 +
}
 +
}
 +
}
 +
//初始数组初值
 +
for(var poiny=1;poiny<this.rowCount+1;poiny++){
 +
for(var poinx=1;poinx<this.colCount+1;poinx++){
 +
//alert("Row" + poiny + "col" + poinx );
 +
if(this.tbl.rows[poiny-1].cells[poinx-1].style.backgroundColor == "blue")
 +
//{alert("BLUE at " + " Row " + poiny + " Col " + poinx);}
 +
{plank[1][poiny][poinx-1]=-2;}
 +
if(this.tbl.rows[poiny-1].cells[poinx-1].style.backgroundColor == "red")
 +
//{alert("RED at " + " Row " + poiny + " Col " + poinx);}
 +
{plank[1][poiny][poinx]=2;}
 +
if(this.tbl.rows[poiny-1].cells[poinx-1].style.backgroundColor == "grey")
 +
//{alert("GREY at " + " Row " + poiny + " Col " + poinx);}
 +
{plank[1][poiny][poinx]=1;}
 +
}
 +
}
 +
//Find Blue cells and vanish them spread them
 +
for(i=1;i<this.rowCount+1;i++)
 +
{
 +
for(j=1;j<this.colCount+1;j++)
 +
{
 +
if(plank[1][i][j]==-2)
 +
{
 +
plank[1][i][j]=0;
 +
//3 for spreaded blue cell
 +
if(plank[1][i][j+1]==1)
 +
{plank[1][i][j+1]=3}
 +
if(plank[1][i][j-1]==1)
 +
{plank[1][i][j-1]=3}
 +
if(plank[1][i+1][j]==1)
 +
{plank[1][i+1][j]=3}
 +
if(plank[1][i-1][j]==1)
 +
{plank[1][i-1][j]=3}
 +
}
 +
}
 +
}
 +
//distribute spreaded blue cell
 +
for(i=0;i<this.rowCount;i++)
 +
{
 +
for(j=0;j<this.colCount;j++)
 +
{
 +
if(plank[1][i][j]==3)
 +
{
 +
if(Math.random()<p1)
 +
{plank[1][i][j]=-2}
 +
else
 +
{plank[1][i][j]=2}
 +
}
 +
}
 +
}
 +
//grey and red cell spread
 +
for(i=1;i<this.rowCount+1;i++)
 +
{
 +
for(j=1;j<this.colCount+1;j++)
 +
{
 +
if(plank[1][i][j]==1)
 +
{
 +
//3 for waiting grey cell
 +
if(plank[1][i][j+1]==0)
 +
{plank[1][i][j+1]=3}
 +
if(plank[1][i][j-1]==0)
 +
{plank[1][i][j-1]=3}
 +
if(plank[1][i+1][j]==0)
 +
{plank[1][i+1][j]=3}
 +
if(plank[1][i-1][j]==0)
 +
{plank[1][i-1][j]=3}
 +
}
 +
}
 +
}
 +
for(i=1;i<this.rowCount+1;i++)
 +
{
 +
for(j=1;j<this.colCount+1;j++)
 +
{
 +
if(plank[1][i][j]==2)
 +
{
 +
if(Math.random()<p2)
 +
//5 fot dead red cell
 +
{plank[1][i][j]=5}
 +
else
 +
{
 +
//non-cell red spread
 +
//4 for spreaded red cell
 +
if(plank[1][i][j+1]==0)
 +
{plank[1][i][j+1]=4}
 +
if(plank[1][i][j-1]==0)
 +
{plank[1][i][j-1]=4}
 +
if(plank[1][i+1][j]==0)
 +
{plank[1][i+1][j]=4}
 +
if(plank[1][i-1][j]==0)
 +
{plank[1][i-1][j]=4}
 +
//grey-cell occupied red spread
 +
if(plank[1][i][j+1]==3){
 +
if(Math.random()<p3)
 +
{plank[1][i][j+1]=4}
 +
}
 +
if(plank[1][i][j-1]==3){
 +
if(Math.random()<p3)
 +
{plank[1][i][j-1]=4}
 +
}
 +
if(plank[1][i+1][j]==3){
 +
if(Math.random()<p3)
 +
{plank[1][i+1][j]=4}
 +
}
 +
if(plank[1][i-1][j]==3){
 +
if(Math.random()<p3)
 +
{plank[1][i-1][j]=4}
 +
}
 +
}
 +
}
 +
}
 +
}
 +
//number to cell
 +
for(i=1;i<this.rowCount+1;i++)
 +
{
 +
for(j=1;j<this.colCount+1;j++)
 +
{
 +
if(plank[1][i][j]==3)
 +
{
 +
plank[1][i][j]=1;
 +
}
 +
if(plank[1][i][j]==4)
 +
{
 +
plank[1][i][j]=2;
 +
}
 +
if(plank[1][i][j]==5)
 +
{
 +
plank[1][i][j]=0;
 +
}
 +
}
 +
}
 +
//paint
 +
for(y=1;y<this.rowCount+1;y++)
 +
{
 +
for(x=1;x<this.colCount+1;x++)
 +
{
 +
if(plank[1][y][x]==0)
 +
{this.tbl.rows[y-1].cells[x-1].style.backgroundColor = ''}
 +
if(plank[1][y][x]==2)
 +
{this.tbl.rows[y-1].cells[x-1].style.backgroundColor = 'red'}
 +
if(plank[1][y][x]==-2)
 +
{this.tbl.rows[y-1].cells[x-1].style.backgroundColor = 'blue'}
 +
if(plank[1][y][x]==1)
 +
{this.tbl.rows[y-1].cells[x-1].style.backgroundColor = 'grey'}
 +
}
 +
}
 +
 +
                return; 
 +
            } 
 +
        }, 
 +
NS: function(ctime,turnlimit){ 
 +
            if(ctime==turnlimit){ 
 +
                return -1;//over
 +
            }
 +
else
 +
            {return 1}
 +
        },
 +
NSK: function(){
 +
if(this.timer==200){
 +
return -1;
 +
}
 +
if(this.timer!=200){
 +
return 1;
 +
}
 +
 +
},
 +
        pause: function(){ 
 +
                clearInterval(Snake.timer); 
 +
        }, 
 +
        //检查一个坐标点有没有被填充 
 +
        isCellFilled: function(x,y){ 
 +
            if(this.tbl.rows[y].cells[x].style.backgroundColor == ""){ 
 +
                return false; 
 +
            } 
 +
            return true; 
 +
        }, 
 +
        //重新开始 
 +
        restart: function(){ 
 +
            if(this.timer){ 
 +
                clearInterval(this.timer); 
 +
            } 
 +
            for(var i=0; i<this.rowCount;i++){ 
 +
                    this.tbl.deleteRow(0); 
 +
            } 
 +
            //this.body = []; 
 +
            this.init(); 
 +
            this.speed = 250; 
 +
        },
 +
    };
 +
</script> 
</head>
</head>
<a name="top" id="top"></a>
<a name="top" id="top"></a>
-
<div id="ustc">
 
-
<a href="http://wcm.ustc.edu.cn/pub/en_new/" >
 
-
<img src="https://static.igem.org/mediawiki/2012/7/7f/Ustc.png"
 
-
alt="University of Science and Technology of China"/>
 
-
</a>
 
-
</div>
 
-
<div class="kwicks_container">
 
-
  <ul class="kwicks">
 
-
  <li id="kwick_1">
 
-
  <a href="https://2012.igem.org/Team:USTC-China">Home
 
-
  <h3>Front page</h3>
 
-
    </a>
 
-
  </li>
 
-
  <li id="kwick_2">
 
-
  <a href="https://2012.igem.org/Team:USTC-China/background">Project
 
-
  <h3>lambda phage</h3>
 
-
    </a>
 
-
  </li>
 
-
  <li id="kwick_3">
 
-
  <a href="https://2012.igem.org/Team:USTC-China/results">Achievements
 
-
  <h3>What we get</h3>
 
-
    </a>
 
-
  </li>
 
-
  <li id="kwick_4">
 
-
  <a href="https://2012.igem.org/Team:USTC-China/modeling">Modeling
 
-
  <h3>Analytic</h3>
 
-
    </a>
 
-
  </li>
 
-
  <li id="kwick_5">
 
-
  <a href="https://2012.igem.org/Team:USTC-China/outreach">Outreach
 
-
  <h3>HumanPractice</h3>
 
-
    </a>
 
-
  </li>
 
-
  <li id="kwick_6">
 
-
  <a href="https://2012.igem.org/Team:USTC-China/protocols">Notes
 
-
  <h3>Daily Recordings</h3>
 
-
    </a>
 
-
  </li>
 
-
  <li id="kwick_7">
 
-
  <a href="https://2012.igem.org/Team:USTC-China/team">Team
 
-
  <h3>Members</h3>
 
-
    </a>
 
-
  </li>
 
-
  </ul>
 
-
</div>
 
-
<div id="welcome">
 
-
<P>PROJECT BACKGROUND</P>
 
-
</div>
 
<div id="centercontent"  >
<div id="centercontent"  >
-
 
+
<body onload="Snake.init();">
 +
<h1>Modeling Presentation</h1>
 +
<table border="1" width="1200">
 +
<tr>
 +
<td colspan="2">Modeling Presentation</td>
 +
</tr>
 +
<tr>
 +
<td width="100%">
 +
<table id="main" border="0" cellspacing="1" cellpadding="1"></table>
 +
</td>
 +
<td valign="top">
 +
<input type="button" id="btn" value="Start/Pause" /><br /> 
 +
<input type="button" id="reset" value="Reset" /><br />
 +
<input type="button" onclick="disp_prompt()" value="Set parameters" /><br />
 +
</td>
 +
</tr>
 +
</table>
 +
<script type="text/javascript"> 
 +
        $('btn').onclick = function(){ 
 +
                if(Snake.paused){ 
 +
                        Snake.move(); 
 +
                        Snake.paused = false; 
 +
                } 
 +
                else{ 
 +
                        Snake.pause(); 
 +
                        Snake.paused = true; 
 +
                } 
 +
        }; 
 +
        $("reset").onclick = function(){ 
 +
                Snake.restart(); 
 +
                this.blur(); 
 +
        };
 +
//$('disp_prompt').onclick = function(){ 
 +
        //      Snake.disp_prompt(); 
 +
        //      this.blur(); 
 +
        //};
 +
</script> 
 +
</body> 
</div><!--the centercontent-->
</div><!--the centercontent-->

Revision as of 12:52, 23 September 2012

Modeling Presentation

Modeling Presentation



backtotop

Retrieved from "http://2012.igem.org/Team:USTC-China/modeling_presentation"