Template:Team:UC Davis/MutantWidget

From 2011.igem.org

(Difference between revisions)
 
(17 intermediate revisions not shown)
Line 5: Line 5:
//Painstakingly coded by Keegan Owsley. Feel free to use it, but it might burn your house down.
//Painstakingly coded by Keegan Owsley. Feel free to use it, but it might burn your house down.
 +
function rerender()
 +
{
 +
 +
            camera.position.x = 250*Math.cos(theta);
 +
    camera.position.y = 250*Math.sin(theta);
 +
            if(phi < Math.PI/2)
 +
            {
 +
                phi = Math.PI/2;
 +
            }
 +
            if(phi > 3*Math.PI/4)
 +
            {
 +
                phi = 3*Math.PI/4;
 +
            }
 +
            camera.position.z = -250*Math.cos(phi);
 +
zaxislabel.rotation.y = Math.PI/2 - Math.atan2((zaxislabel.position.y-camera.position.y),(zaxislabel.position.x-camera.position.x));
 +
for(var i =0; i < yticklabels.length;i++)
 +
{
 +
yticklabels[i].rotation.y = -Math.PI/2 + Math.atan2((yticklabels[i].position.y-camera.position.y),(yticklabels[i].position.x-camera.position.x));
 +
}
 +
for(var i =0; i < xticklabels.length;i++)
 +
{
 +
xticklabels[i].rotation.y = -Math.PI/2 + Math.atan2((xticklabels[i].position.y-camera.position.y),(xticklabels[i].position.x-camera.position.x));
 +
}
 +
 +
 +
//renderer.clear();
 +
            renderer.render(scene, camera);
 +
}
function update3DPlotMeshes()
function update3DPlotMeshes()
Line 222: Line 250:
     FAR = 10000;
     FAR = 10000;
-
mutantcolors = ["black", "#ff6666", "orange", "yellow", "#66ff66", "#66ffff", "#ddaaff", "pink"];
+
mutantcolors = ["white", "#ff6666", "orange", "yellow", "#66ff66", "#66ffff", "#ddaaff", "pink"];
 +
mutantcolors_hex = [0xffffff, 0xff6666, 0xffa500, 0xffff00, 0x66ff66, 0x66ffff, 0xddaaff, 0xffc0cb];
selectedColor = "orange";
selectedColor = "orange";
widget_mode = "2D";
widget_mode = "2D";
Line 241: Line 270:
         have_3d_data = true;
         have_3d_data = true;
         }
         }
-
        $('#mw_optionstable').append("<tr><td>Sequence</td></tr>");
+
  //    $('#mw_optionstable').append("<tr><td>Sequence</td></tr>");
     $('#mw_optionstable td').css({opacity:0.3});
     $('#mw_optionstable td').css({opacity:0.3});
Line 247: Line 276:
     $('#mw_grapharea').append('<div id="mw_plot"/>');
     $('#mw_grapharea').append('<div id="mw_plot"/>');
     $('#mw_grapharea').append('<div id="mw_3dplot"/>');
     $('#mw_grapharea').append('<div id="mw_3dplot"/>');
 +
    $('#mw_3dplot').append("<table id='navbuttons3d' style='position:absolute;bottom:0px;left:350px;'><tr><td>&lt;</td><td>&gt;</td></tr></table>")
 +
    $('#mw_3dplot #navbuttons3d td').css({width:'15px'})
 +
    $('#mw_3dplot #navbuttons3d td').eq(0).mousedown(function(){theta -= Math.PI/8;rerender();})
 +
    $('#mw_3dplot #navbuttons3d td').eq(1).mousedown(function(){theta += Math.PI/8;rerender();})
         $('#mw_3dplot').toggle();
         $('#mw_3dplot').toggle();
     $('#mutantwidget').parent().append('<div id="mw_sequencearea"/>');
     $('#mutantwidget').parent().append('<div id="mw_sequencearea"/>');
     $('#mutantwidget span').hide();
     $('#mutantwidget span').hide();
     $('#mutantwidget .sequence').appendTo($('#mw_sequencearea'));
     $('#mutantwidget .sequence').appendTo($('#mw_sequencearea'));
-
         $('#mutantwidget').append("<div class='yaxis'>Relative Strength</div>");
+
         $('#mutantwidget').append("<div class='yaxis'>Relative Fluorescence</div>");
 +
        $('#mutantwidget').append("<div class='xaxis'>Arabinose (wt%)</div>");
          
          
     $('#mw_selectmenu td').mouseover(function()
     $('#mw_selectmenu td').mouseover(function()
Line 295: Line 329:
                     $('#mw_3dplot').hide();
                     $('#mw_3dplot').hide();
                     $('#mw_plot').show();
                     $('#mw_plot').show();
 +
                    $('.yaxis').show();
 +
                    $('.xaxis').show();
widget_mode = "2D";
widget_mode = "2D";
             dataseries = [];
             dataseries = [];
Line 317: Line 353:
             {  
             {  
                 xaxis: {max:.014, min:0},
                 xaxis: {max:.014, min:0},
-
                 yaxis: {max: 1.0, min:0},
+
                 yaxis: {max: 1.2, min:0},
                 grid: {  },
                 grid: {  },
                                 points: {show: true},  
                                 points: {show: true},  
Line 327: Line 363:
                     $('#mw_plot').hide();
                     $('#mw_plot').hide();
                     $('#mw_3dplot').show();
                     $('#mw_3dplot').show();
 +
                    $('.yaxis').hide();
 +
                    $('.xaxis').hide();
widget_mode = "3D";
widget_mode = "3D";
update3DPlotMeshes();
update3DPlotMeshes();
Line 340: Line 378:
             {
             {
                 $(this).removeClass("selected");
                 $(this).removeClass("selected");
 +
                $(this).mouseout();
                 $('#mw_sequencearea').children().eq($(this).parent().index()).hide();
                 $('#mw_sequencearea').children().eq($(this).parent().index()).hide();
             } else
             } else
Line 371: Line 410:
             {  
             {  
                 xaxis: {max:.014, min:0},
                 xaxis: {max:.014, min:0},
-
                 yaxis: {max: 1.0, min:0},
+
                 yaxis: {max: 1.2, min:0},
                 grid: { },
                 grid: { },
                                 points: {show: true},  
                                 points: {show: true},  
Line 417: Line 456:
             {
             {
                 thisdatax[i] = parseFloat(thisdatax[i]);
                 thisdatax[i] = parseFloat(thisdatax[i]);
-
                 data[index].data.push([thisdatax[i], thisdatay[i]])
+
                 data[index].data.push([thisdatax[i], thisdatay[i]]);
-
errbars_2d[index].data.push([thisdatax[i], thisdatay[i]+thisdataerr[i]*2])
+
-
errbars_2d[index].data.push([thisdatax[i], thisdatay[i]-thisdataerr[i]*2])
+
-
errbars_2d[index].data.push([null, null])
+
             }
             }
 +
    var errbarwidth = Math.max.apply(null,thisdatax)/150;
 +
            for(i=0; i < thisdatax.length; ++i)
 +
            {
 +
errbars_2d[index].data.push([thisdatax[i], thisdatay[i]+thisdataerr[i]]);
 +
errbars_2d[index].data.push([thisdatax[i], thisdatay[i]-thisdataerr[i]]);
 +
errbars_2d[index].data.push([null, null]);
 +
errbars_2d[index].data.push([thisdatax[i]-errbarwidth, thisdatay[i]+thisdataerr[i]]);
 +
errbars_2d[index].data.push([thisdatax[i]+errbarwidth, thisdatay[i]+thisdataerr[i]]);
 +
errbars_2d[index].data.push([null, null]);
 +
errbars_2d[index].data.push([thisdatax[i]-errbarwidth, thisdatay[i]-thisdataerr[i]]);
 +
errbars_2d[index].data.push([thisdatax[i]+errbarwidth, thisdatay[i]-thisdataerr[i]]);
 +
errbars_2d[index].data.push([null, null]);
 +
    }
              
              
         }
         }
Line 428: Line 477:
             {  
             {  
                 xaxis: {max:.014, min:0},
                 xaxis: {max:.014, min:0},
-
                 yaxis: {max: 1.0, min:0},
+
                 yaxis: {max: 1.2, min:0},
                 grid: {  },
                 grid: {  },
             });
             });
Line 520: Line 569:
             }
             }
 +
var lineMat = new THREE.LineBasicMaterial(
 +
    {
 +
color:mutantcolors_hex[index],
 +
opacity:1,
 +
linewidth:2
 +
    }
 +
);
for(i=0; i < thisdataerr.length; i++)
for(i=0; i < thisdataerr.length; i++)
{
{
Line 527: Line 583:
thisdatax[i%thisdatax.length]/axisdimensions[1]*100,
thisdatax[i%thisdatax.length]/axisdimensions[1]*100,
thisdatay[Math.floor(i/thisdatax.length)]/axisdimensions[3]*100,
thisdatay[Math.floor(i/thisdatax.length)]/axisdimensions[3]*100,
-
thisdataz[i]/axisdimensions[5]*100-thisdataerr[i]/axisdimensions[5]*100*2
+
thisdataz[i]/axisdimensions[5]*100-thisdataerr[i]/axisdimensions[5]*100
)));
)));
errbargeom.vertices.push(new THREE.Vertex(new THREE.Vector3(
errbargeom.vertices.push(new THREE.Vertex(new THREE.Vector3(
thisdatax[i%thisdatax.length]/axisdimensions[1]*100,
thisdatax[i%thisdatax.length]/axisdimensions[1]*100,
thisdatay[Math.floor(i/thisdatax.length)]/axisdimensions[3]*100,
thisdatay[Math.floor(i/thisdatax.length)]/axisdimensions[3]*100,
-
thisdataz[i]/axisdimensions[5]*100+thisdataerr[i]/axisdimensions[5]*100*2
+
thisdataz[i]/axisdimensions[5]*100+thisdataerr[i]/axisdimensions[5]*100
)));
)));
-
var errbar = new THREE.Line(errbargeom, axisMat);
+
var errbar = new THREE.Line(errbargeom, lineMat);
errorbars_3d[index].addChild(errbar);
errorbars_3d[index].addChild(errbar);
}
}
//Particles look like ass.
//Particles look like ass.
//Use lines instead.
//Use lines instead.
 +
for(i=0; i < thisdatax.length*(thisdatay.length-1); i++)
for(i=0; i < thisdatax.length*(thisdatay.length-1); i++)
{
{
 +
var linegeom = new THREE.Geometry();
var linegeom = new THREE.Geometry();
linegeom.vertices.push(new THREE.Vertex(new THREE.Vector3(
linegeom.vertices.push(new THREE.Vertex(new THREE.Vector3(
Line 552: Line 610:
thisdataz[i+thisdatax.length]/axisdimensions[5]*100
thisdataz[i+thisdatax.length]/axisdimensions[5]*100
)));
)));
-
meshchildren[index].addChild(new THREE.Line(linegeom, axisMat));
+
meshchildren[index].addChild(new THREE.Line(linegeom, lineMat));
}
}
for(i=0; i < (thisdatax.length-1)*(thisdatay.length); i++)
for(i=0; i < (thisdatax.length-1)*(thisdatay.length); i++)
Line 569: Line 627:
thisdataz[Math.floor(i/(thisdatax.length-1))+i+1]/axisdimensions[5]*100
thisdataz[Math.floor(i/(thisdatax.length-1))+i+1]/axisdimensions[5]*100
)));
)));
-
meshchildren[index].addChild(new THREE.Line(linegeom, axisMat));
+
meshchildren[index].addChild(new THREE.Line(linegeom, lineMat));
}
}
              
              
Line 582: Line 640:
                     //Find flanking x,y values
                     //Find flanking x,y values
                     var kx = ky = 0;
                     var kx = ky = 0;
-
                     while(thisx >= thisdatax[kx] && kx < thisdatax.length-1) {  
+
                     while(thisx >= thisdatax[kx]) {  
                         kx=kx+1;  
                         kx=kx+1;  
                     }
                     }
-
                     while(thisy >= thisdatay[ky] && ky < thisdatay.length-1) {  
+
                     while(thisy >= thisdatay[ky]) {  
                         ky=ky+1;  
                         ky=ky+1;  
                     }
                     }
Line 678: Line 736:
     xaxislabel = new THREE.Mesh(new THREE.PlaneGeometry(400, 40, 2, 2), xm);
     xaxislabel = new THREE.Mesh(new THREE.PlaneGeometry(400, 40, 2, 2), xm);
-
     xaxislabel.position.x = 0;
+
     xaxislabel.position.x = -50;
-
     xaxislabel.position.y = -50;
+
     xaxislabel.position.y = 0;
     xaxislabel.position.z = -48;
     xaxislabel.position.z = -48;
xaxislabel.scale.x = 0.2;
xaxislabel.scale.x = 0.2;
xaxislabel.scale.y = -0.2;
xaxislabel.scale.y = -0.2;
     xaxislabel.rotation.x = -Math.PI/2;
     xaxislabel.rotation.x = -Math.PI/2;
 +
    xaxislabel.rotation.y = -Math.PI/2;
     xaxislabel.doubleSided = true;
     xaxislabel.doubleSided = true;
Line 701: Line 760:
     yaxislabel = new THREE.Mesh(new THREE.PlaneGeometry(400, 40, 2, 2), xm);
     yaxislabel = new THREE.Mesh(new THREE.PlaneGeometry(400, 40, 2, 2), xm);
-
     yaxislabel.position.x = -50;
+
     yaxislabel.position.x = 0;
-
     yaxislabel.position.y = 0;
+
     yaxislabel.position.y = -50;
     yaxislabel.position.z = -48;
     yaxislabel.position.z = -48;
yaxislabel.scale.x = 0.2;
yaxislabel.scale.x = 0.2;
yaxislabel.scale.y = -0.2;
yaxislabel.scale.y = -0.2;
     yaxislabel.rotation.x = -Math.PI/2;
     yaxislabel.rotation.x = -Math.PI/2;
-
    yaxislabel.rotation.y = -Math.PI/2;
 
     yaxislabel.doubleSided = true;
     yaxislabel.doubleSided = true;
Line 750: Line 808:
         {
         {
theta += (lastMouseX - event.pageX)/70
theta += (lastMouseX - event.pageX)/70
-
phi -= (lastMouseY - event.pageY)/70
+
phi -= (lastMouseY - event.pageY)/70;
-
            camera.position.x = 250*Math.cos(theta);
+
-
    camera.position.y = 250*Math.sin(theta);
+
-
            if(phi < Math.PI/2)
+
-
            {
+
-
                phi = Math.PI/2;
+
-
            }
+
-
            if(phi > 3*Math.PI/4)
+
-
            {
+
-
                phi = 3*Math.PI/4;
+
-
            }
+
-
            camera.position.z = -250*Math.cos(phi);
+
             lastMouseX = event.pageX;
             lastMouseX = event.pageX;
             lastMouseY = event.pageY;
             lastMouseY = event.pageY;
-
zaxislabel.rotation.y = Math.PI/2 - Math.atan2((zaxislabel.position.y-camera.position.y),(zaxislabel.position.x-camera.position.x))
+
rerender();
-
//renderer.clear();
+
-
            renderer.render(scene, camera);
+
         });
         });
     });
     });
Line 871: Line 916:
     //Grid
     //Grid
     var gridlinegeom = new THREE.Geometry();
     var gridlinegeom = new THREE.Geometry();
-
     gridlinegeom.vertices.push(origin);
+
     gridlinegeom.vertices.push(new THREE.Vertex(new THREE.Vector3(0,0,0)));
     gridlinegeom.vertices.push(new THREE.Vertex(new THREE.Vector3(100,0,0)));
     gridlinegeom.vertices.push(new THREE.Vertex(new THREE.Vector3(100,0,0)));
      
      
-
for(var i=1; i <= 10; i++)
+
for(var i=1; i <= 5; i++)
{
{
var gridline = new THREE.Line(gridlinegeom, axisMat);
var gridline = new THREE.Line(gridlinegeom, axisMat);
-
gridline.position.y = i/10*100-50;
+
gridline.position.y = i/5*100-50;
gridline.position.x = -50;
gridline.position.x = -50;
gridline.position.z = -50;
gridline.position.z = -50;
scene.addChild(gridline);
scene.addChild(gridline);
 +
 +
 +
var gridline = new THREE.Line(gridlinegeom, axisMat);
var gridline = new THREE.Line(gridlinegeom, axisMat);
-
gridline.position.x = i/10*100-50;
+
gridline.position.x = i/5*100-50;
gridline.position.y = -50;
gridline.position.y = -50;
gridline.position.z = -50;
gridline.position.z = -50;
Line 888: Line 936:
scene.addChild(gridline);
scene.addChild(gridline);
}
}
 +
yticklabels = [];
 +
xticklabels = [];
 +
for(var i=1; i <= 5; i++)
 +
{
 +
    var x = document.createElement("canvas");
 +
    var xc = x.getContext("2d");
 +
    x.width = 40;
 +
    x.height = 40;
 +
    xc.fillStyle = "#ffffff";
 +
    xc.font = "12pt arial";
 +
    xc.textBaseline = "top";
 +
    xc.fillText(i/5*axisdimensions[1], 10, 0);
 +
 +
    var xm = new THREE.MeshBasicMaterial({
 +
    map: new THREE.Texture(x)
 +
    });
 +
    xm.map.needsUpdate = true;
 +
    var xtick = new THREE.Mesh(new THREE.PlaneGeometry(13/ASPECT, 13, 2, 2), xm);
 +
    xtick.position.y = i/5*100-50;
 +
    xtick.position.x = -50;
 +
    xtick.position.z = -58;
 +
    xtick.rotation.x = Math.PI/2;
 +
    xtick.doubleSided = true;
 +
    xtick.updateMatrix();
 +
    scene.addChild(xtick);
 +
 +
    var x = document.createElement("canvas");
 +
    var xc = x.getContext("2d");
 +
    x.width = 80;
 +
    x.height = 40;
 +
    xc.fillStyle = "#ffffff";
 +
    xc.font = "12pt arial";
 +
    xc.textBaseline = "top";
 +
    xc.fillText((i/5*axisdimensions[3]).toFixed(4), 10, 0);
 +
 +
    var xm = new THREE.MeshBasicMaterial({
 +
    map: new THREE.Texture(x)
 +
    });
 +
    xm.map.needsUpdate = true;
 +
    var ytick = new THREE.Mesh(new THREE.PlaneGeometry(26/ASPECT, 13, 2, 2), xm);
 +
    ytick.position.x = i/5*100-50;
 +
    ytick.position.y = -50;
 +
    ytick.position.z = -58;
 +
    ytick.rotation.x = Math.PI/2;
 +
    ytick.doubleSided = true;
 +
    ytick.updateMatrix();
 +
    scene.addChild(ytick);
 +
 +
xticklabels.push(xtick);
 +
yticklabels.push(ytick);
 +
}
 +
var particle = new THREE.Particle(pointMaterial);
var particle = new THREE.Particle(pointMaterial);
Line 981: Line 1,081:
     -ms-transform: rotate(-90deg);
     -ms-transform: rotate(-90deg);
top:179px;
top:179px;
-
left:-33px;
+
left:-40px;
 +
position:absolute;
 +
}
 +
 
 +
.xaxis {
 +
bottom:15px;
position:absolute;
position:absolute;
 +
left:320px;
}
}
</style>
</style>
</html>
</html>

Latest revision as of 03:39, 29 September 2011

Retrieved from "http://2011.igem.org/Template:Team:UC_Davis/MutantWidget"