Template:Team:UC Davis/MutantWidget

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<script src='https://2011.igem.org/Template:Team:UC_Davis/jquery.flot.min.js?action=raw'></script>
<script src='https://2011.igem.org/Template:Team:UC_Davis/jquery.flot.min.js?action=raw'></script>
 +
<script src='https://2011.igem.org/Template:Team:UC_Davis/Three.js'></script>
<script>
<script>
 +
//Painstakingly coded by Keegan Owsley. Feel free to use it, but it might burn your house down.
 +
// RGB <-> HSL conversions based on equations from wikipedia.
// RGB <-> HSL conversions based on equations from wikipedia.
// If they're wrong, don't blame me!
// If they're wrong, don't blame me!
Line 118: Line 121:
$('#mutantwidget').prepend('<div id="mw_grapharea"/>');
$('#mutantwidget').prepend('<div id="mw_grapharea"/>');
$('#mw_grapharea').append('<div id="mw_plot"/>');
$('#mw_grapharea').append('<div id="mw_plot"/>');
 +
$('#mw_grapharea').append('<div id="mw_3dplot"/>');
$('#mutantwidget').parent().append('<div id="mw_sequencearea"/>');
$('#mutantwidget').parent().append('<div id="mw_sequencearea"/>');
$('#mutantwidget span').hide();
$('#mutantwidget span').hide();
Line 219: Line 223:
grid: { color:"rgba(225, 225, 225, 1)" },
grid: { color:"rgba(225, 225, 225, 1)" },
});
});
 +
 +
});
 +
 +
sphereMaterial = new THREE.MeshBasicMaterial(
 +
{
 +
color:0xCC0000
 +
}
 +
);
 +
plotMaterial = new THREE.MeshFaceMaterial(
 +
// {
 +
// color:0xCC0000,
 +
// opacity:.4,
 +
// vertexColors:true
 +
// }
 +
);
 +
axisMat = new THREE.LineBasicMaterial(
 +
{
 +
color:0xffffff,
 +
opacity:0.6,
 +
linewidth:1
 +
}
 +
);
 +
axisdimensions = [0, 5, 0, 2, 0, 1];
 +
var numxpoints = 30;
 +
var numypoints = 30;
 +
 +
var lastMouseX, lastMouseY;
 +
 +
var data_3d;
 +
isdragging = false;
 +
 +
 +
$(document).ready(function() {
 +
data_3d = [];
 +
//Parse datas!
 +
$('.zdata_3d').each(
 +
function(index)
 +
{
 +
var thisdataz = $(this).text().split(',');
 +
var thisdatax = $('.xdata_3d').text().split(',');
 +
var thisdatay = $('.ydata_3d').eq(index).text().split(',');
 +
//numxpoints = thisdatax.length;
 +
//numypoints = thisdatay.length;
 +
data_3d.push(new THREE.PlaneGeometry(100,100,numxpoints-1, numypoints-1));
 +
var i;
 +
for(i=0; i < thisdatax.length; ++i)
 +
{
 +
thisdatax[i] = parseFloat(thisdatax[i]);
 +
}
 +
for(i=0; i < thisdatay.length; ++i)
 +
{
 +
thisdatay[i] = parseFloat(thisdatay[i]);
 +
}
 +
for(i=0; i < thisdataz.length; ++i)
 +
{
 +
thisdataz[i] = parseFloat(thisdataz[i]);
 +
 +
}
 +
 +
for(i=0; i < numxpoints; ++i)
 +
{
 +
for(var j=0; j < numypoints; ++j)
 +
{
 +
var thisx = thisdatax[thisdatax.length-1]*i/numxpoints;
 +
var thisy = thisdatay[thisdatay.length-1]*j/numypoints;
 +
data_3d[index].vertices[j*numxpoints+i].position.x = thisx/axisdimensions[1]*100;
 +
data_3d[index].vertices[j*numxpoints+i].position.y = thisy/axisdimensions[3]*100;
 +
//Find flanking x,y values
 +
var kx = ky = 0;
 +
while(thisx >= thisdatax[kx]) {
 +
kx=kx+1;
 +
}
 +
while(thisy >= thisdatay[ky]) {
 +
ky=ky+1;
 +
}
 +
kx--;
 +
ky--;
 +
thisz = interp2(thisdatax[kx],
 +
thisdatay[ky],
 +
thisdatax[kx+1],
 +
thisdatay[ky+1],
 +
thisdataz[kx+ky*thisdatax.length],
 +
thisdataz[kx+ky*thisdatax.length+1],
 +
thisdataz[kx+(ky+1)*thisdatax.length],
 +
thisdataz[kx+1+(ky+1)*thisdatax.length], thisx, thisy)
 +
data_3d[index].vertices[j*numxpoints+i].position.z = thisz/axisdimensions[5]*100;
 +
}
 +
}
 +
data_3d[index].computeCentroids();
 +
//vertex colors
 +
/*
 +
var colors = [];
 +
for(i=0; i < thisdataz.length; ++i)
 +
{
 +
var color = new THREE.Color(0x550000);
 +
// color.setHSV(.125, 1, 0);
 +
colors.push(color);
 +
}
 +
*/
 +
materials = [];
 +
for(i=0; i < data_3d[index].faces.length; ++i)
 +
{
 +
thisfacecolor = (
 +
data_3d[index].vertices[data_3d[index].faces[i].a].position.z+
 +
data_3d[index].vertices[data_3d[index].faces[i].b].position.z+
 +
data_3d[index].vertices[data_3d[index].faces[i].c].position.z+
 +
data_3d[index].vertices[data_3d[index].faces[i].d].position.z)/4/100;
 +
materials.push([new THREE.MeshBasicMaterial(
 +
{
 +
color:thisfacecolor*0xffffff,
 +
opacity:.6
 +
}
 +
)]);
 +
var newcolor = colorRamp(thisfacecolor, cool_color_ramp);
 +
materials[i][0].color.setRGB(newcolor[0], newcolor[1], newcolor[2]);
 +
data_3d[index].faces[i].materials = materials[i];
 +
}
 +
data_3d[index].materials = materials;
 +
 +
}
 +
);
 +
 +
//Axis labels
 +
var x = document.createElement("canvas");
 +
var xc = x.getContext("2d");
 +
x.width = 80;
 +
x.height = 20;
 +
xc.fillStyle = "#ffffff";
 +
xc.font = "14pt arial bold";
 +
xc.textBaseline = "top";
 +
xc.fillText("Test", 10, 0);
 +
 +
var xm = new THREE.MeshBasicMaterial({
 +
map: new THREE.Texture(x)
 +
});
 +
xm.map.needsUpdate = true;
 +
 +
zaxislabel = new THREE.Mesh(new THREE.PlaneGeometry(80, 20, 2, 2), xm);
 +
zaxislabel.position.x = 0;
 +
zaxislabel.position.y = 100;
 +
zaxislabel.position.z = 0;
 +
 +
zaxislabel.doubleSided = true;
 +
zaxislabel.updateMatrix();
 +
 +
 +
var $container = $('#mw_3dplot');
 +
$('body').mouseup(function(){
 +
isdragging = false;
 +
$container.unbind('mousemove');
 +
});
 +
$container.mousedown(function(event){
 +
isdragging = true;
 +
lastMouseX = event.pageX;
 +
lastMouseY = event.pageY;
 +
$container.mousemove(function(event)
 +
{
 +
origin_camera.rotation.y += (-lastMouseX + event.pageX)/70;
 +
origin_object.rotation.x += (-lastMouseY + event.pageY)/70;
 +
if(origin_object.rotation.x > 0)
 +
{
 +
origin_object.rotation.x = 0;
 +
}
 +
if(origin_object.rotation.x < -Math.PI/2)
 +
{
 +
origin_object.rotation.x = -Math.PI/2;
 +
}
 +
lastMouseX = event.pageX;
 +
lastMouseY = event.pageY;
 +
zaxislabel.lookAt(camera.position);
 +
renderer.render(scene, camera);
 +
});
 +
});
 +
renderer = new THREE.CanvasRenderer();
 +
camera = new THREE.OrthoCamera( -100, 100, 100, -100, - 2000, 1000 );
 +
 +
var scene = new THREE.Scene();
 +
camera.position.z = 200;
 +
renderer.setSize(WIDTH, HEIGHT);
 +
$container.append(renderer.domElement);
 +
var radius = 50, segments = 16, rings = 16;
 +
/*
 +
sphere = new THREE.Mesh(
 +
new THREE.SphereGeometry(radius,
 +
segments,
 +
rings),
 +
sphereMaterial
 +
);
 +
sphere.position.x = 50;
 +
sphere.position.y = 50;
 +
sphere.position.z = 50;
 +
*/
 +
 +
plot_mesh = new THREE.Mesh(
 +
data_3d[0],
 +
plotMaterial
 +
);
 +
plot_mesh.doubleSided = true;
 +
 +
//plot_mesh.addChild(sphere);
 +
 +
origin = new THREE.Vertex(new THREE.Vector3(0,0,0));
 +
 +
axisgeom = new THREE.Geometry();
 +
axisgeom.vertices.push(origin);
 +
axisgeom.vertices.push(new THREE.Vertex(new THREE.Vector3(100,0,0)));
 +
axisgeom.vertices.push(new THREE.Vertex(new THREE.Vector3(98, 1, 0)));
 +
axisgeom.vertices.push(new THREE.Vertex(new THREE.Vector3(98, -1, 0)));
 +
axisgeom.vertices.push(new THREE.Vertex(new THREE.Vector3(100, 0, 0)));
 +
 +
xaxis = new THREE.Line(
 +
axisgeom,
 +
axisMat
 +
);
 +
 +
yaxis = new THREE.Line(
 +
axisgeom,
 +
axisMat
 +
);
 +
yaxis.rotation.z = 90*Math.PI/180;
 +
 +
zaxis = new THREE.Line(
 +
axisgeom,
 +
axisMat
 +
);
 +
zaxis.addChild(zaxislabel);
 +
zaxis.rotation.y = -90*Math.PI/180;
 +
 +
plot_mesh.position.x = -50;
 +
plot_mesh.position.z = -50;
 +
plot_mesh.position.y = -50;
 +
 +
origin_camera = new THREE.Object3D();
 +
origin_object = new THREE.Object3D();
 +
origin_camera.addChild(origin_object);
 +
origin_object.addChild(plot_mesh);
 +
 +
origin_object.rotation.z = -150*Math.PI/180;
 +
origin_object.rotation.y = 0*Math.PI/180;
 +
origin_object.rotation.x = -60*Math.PI/180;
 +
 +
origin_object.scale.x = -1;
 +
 +
plot_mesh.addChild(xaxis);
 +
plot_mesh.addChild(yaxis);
 +
plot_mesh.addChild(zaxis);
 +
scene.addChild(origin_camera);
 +
renderer.render(scene, camera);
});
});
Line 236: Line 488:
width:100%;
width:100%;
height:100%;
height:100%;
 +
}
 +
#mw_3dplot{
 +
width:100%;
 +
height:100%
}
}
#mw_selectmenu {
#mw_selectmenu {

Revision as of 00:01, 25 September 2011

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