Template:Team:UC Davis/MutantWidget

From 2011.igem.org

(Difference between revisions)
Line 223: Line 223:
mutantcolors = ["white", "#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 520: Line 521:
             }
             }
 +
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 534: Line 542:
thisdataz[i]/axisdimensions[5]*100+thisdataerr[i]/axisdimensions[5]*100*2
thisdataz[i]/axisdimensions[5]*100+thisdataerr[i]/axisdimensions[5]*100*2
)));
)));
-
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 562:
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 579:
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 592:
                     //Find flanking x,y values
                     //Find flanking x,y values
                     var kx = ky = 0;
                     var kx = ky = 0;
-
                     while(thisx >= thisdatax[kx]) {  
+
                     while(thisx >= thisdatax[kx] && kx < thisdatax.length-1) {  
                         kx=kx+1;  
                         kx=kx+1;  
                     }
                     }
-
                     while(thisy >= thisdatay[ky]) {  
+
                     while(thisy >= thisdatay[ky] && ky < thisdatay.length-1) {  
                         ky=ky+1;  
                         ky=ky+1;  
                     }
                     }
-
if(kx > thisdatax.length-1)
 
-
{
 
-
kx = thisdatax.length-1;
 
-
}
 
-
if(ky > thisdatay.length-1)
 
-
{
 
-
ky = thisdatay.length-1;
 
-
}
 
                     kx--;
                     kx--;
                     ky--;
                     ky--;
Line 678: Line 680:
     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 704:
     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 764: Line 766:
             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))
+
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.clear();
             renderer.render(scene, camera);
             renderer.render(scene, camera);
Line 871: Line 883:
     //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 903:
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, 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);

Revision as of 00:24, 28 September 2011

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