From b2dc557e169f98b1d525195f757090f536dbb5eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lien=20Luciani?= Date: Fri, 20 Feb 2015 13:21:24 +0100 Subject: [PATCH 1/8] class --- test/test00_sticks.html | 412 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 412 insertions(+) create mode 100644 test/test00_sticks.html diff --git a/test/test00_sticks.html b/test/test00_sticks.html new file mode 100644 index 0000000..8c5a729 --- /dev/null +++ b/test/test00_sticks.html @@ -0,0 +1,412 @@ + + + + +Atom selection + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Load Local PDB FileYesNo

+

Load From RCSB PDB ID:  

+ + + + From 2e2b2e0fac8718120ec9c2537733a6558aa2240d Mon Sep 17 00:00:00 2001 From: amir003 Date: Fri, 20 Feb 2015 15:17:46 +0100 Subject: [PATCH 2/8] couvercle --- test/test00_1-1Csanschapeau.html | 400 ++++++++++++++++++++++++ test/test00_2-1Cavecchapeau.html | 434 ++++++++++++++++++++++++++ test/test00_3-2C.html | 518 +++++++++++++++++++++++++++++++ 3 files changed, 1352 insertions(+) create mode 100644 test/test00_1-1Csanschapeau.html create mode 100644 test/test00_2-1Cavecchapeau.html create mode 100644 test/test00_3-2C.html diff --git a/test/test00_1-1Csanschapeau.html b/test/test00_1-1Csanschapeau.html new file mode 100644 index 0000000..528c22d --- /dev/null +++ b/test/test00_1-1Csanschapeau.html @@ -0,0 +1,400 @@ + + + + + Atom selection + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Load Local PDB FileYesNo

+

Load From RCSB PDB ID:  

+ + + + diff --git a/test/test00_2-1Cavecchapeau.html b/test/test00_2-1Cavecchapeau.html new file mode 100644 index 0000000..5879905 --- /dev/null +++ b/test/test00_2-1Cavecchapeau.html @@ -0,0 +1,434 @@ + + + + + Atom selection + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Load Local PDB FileYesNo

+

Load From RCSB PDB ID:  

+ + + + diff --git a/test/test00_3-2C.html b/test/test00_3-2C.html new file mode 100644 index 0000000..bffae2b --- /dev/null +++ b/test/test00_3-2C.html @@ -0,0 +1,518 @@ + + + + + Atom selection + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Load Local PDB FileYesNo

+

Load From RCSB PDB ID:  

+ + + + From d99d97f30455581729cd5217133af75447c5f4a3 Mon Sep 17 00:00:00 2001 From: Marjorie Mersch Date: Fri, 20 Feb 2015 17:03:14 +0100 Subject: [PATCH 3/8] Sticks and CPK --- test/test00_sticks.html | 177 ++++++++++++++++++---------------------- 1 file changed, 80 insertions(+), 97 deletions(-) diff --git a/test/test00_sticks.html b/test/test00_sticks.html index 8c5a729..4601baa 100644 --- a/test/test00_sticks.html +++ b/test/test00_sticks.html @@ -8,13 +8,17 @@ @@ -22,8 +26,10 @@ precision highp float; + varying vec3 vColor; + void main(void) { - gl_FragColor = vec4(0.8,1,1,1.0); + gl_FragColor = vec4(vColor, 1.0); } @@ -67,12 +73,12 @@ var selected = mol.finder( 'BOND', function (bond) { - return ( bond.atom1.chain == "A" + return ( bond.atom1.chain == "3" && ( (bond.atom1.name === "CA" && bond.atom2.name === "C" ) || (bond.atom1.name === "C" && bond.atom2.name === "CA") ) ) }); - + selected = mol.bonds; console.log(selected.length + " bond(s) selected!"); for (var i=0; i< selected.length; i++) { //console.log(selected[i].atom1.groupID+'['+selected[i].atom1.name+';'+selected[i].atom2.name+']'); @@ -89,48 +95,13 @@ // 1- Create a scene with a default light and camera var scene = new Scene(); renderer.addScene(scene); - /* - // 2- Create a shape with geometry and colors for points - var shape = new Shape(); - var vertices = []; - var colors = []; - for (var i of [test.atom1, test.atom2]) { - vertices.push(i.x); - vertices.push(i.y); - vertices.push(i.z); - // CPK - switch (i.symbol) { - case 'C': - colors.push(0.78); //red - colors.push(0.78); //green - colors.push(0.78); //blue - break; - case 'N': - colors.push(0.56); //red - colors.push(0.56); //green - colors.push(1.00); //blue - break; - case 'O': - colors.push(0.94); //red - colors.push(0.00); //green - colors.push(0.00); //blue - break; - case 'P': - colors.push(1.00); //red - colors.push(0.65); //green - colors.push(0.00); //blue - break; - } - } - - shape.setGeometry({'type':'POINTS','attribute':'aVertexPosition','data':vertices}); - shape.setColors({'type': 'RGB', 'attribute':'aVertexColor','data':colors});*/ + function CylinderGenerator(n) { var step = 2 * Math.PI / n;//angle of each step, in radius - var radius = 1; - var nPoints = (n * 2 + 4) * 3; - var buffer = new ArrayBuffer(nPoints * 4);//points: float32 (4 bytes) - var i = nPoints - (2 * 3); + var radius = 0.1; + this.nCoords = (n * 2 + 4) * 3; + var buffer = new ArrayBuffer(this.nCoords * 4);//points: float32 (4 bytes) + var i = this.nCoords - (2 * 3); var view = new Float32Array(buffer, 3 * 4, i); var x, z, angle = -step; while(i) { @@ -144,7 +115,7 @@ view[--i] = x;// x // bottom point view[--i] = z;// z - view[--i] = -1;// y + view[--i] = 0;// y view[--i] = x;// x } @@ -152,9 +123,9 @@ template[0] = template[3]; template[1] = template[4]; template[2] = template[5]; - template[nPoints - 1] = template[nPoints - 4]; - template[nPoints - 2] = template[nPoints - 5]; - template[nPoints - 3] = template[nPoints - 6]; + template[this.nCoords - 1] = template[this.nCoords - 4]; + template[this.nCoords - 2] = template[this.nCoords - 5]; + template[this.nCoords - 3] = template[this.nCoords - 6]; this.template = template; this.cylinderVector = new Float32Array([0, 1, 0]); @@ -170,6 +141,7 @@ } } + // construction of transform matrix // scale var scale = vec3.distance(coords[0], coords[1]); @@ -185,7 +157,7 @@ var matrix = mat4.create(); mat4.identity(matrix); - //mat4.translate(matrix, matrix, coords[0]); + mat4.translate(matrix, matrix, coords[0]); mat4.rotate(matrix, matrix, angle, normal); mat4.scale(matrix, matrix, [1, scale, 1]); @@ -193,8 +165,8 @@ var outputBuffer = this.template.buffer.slice(0); var i = this.template.length / 3; var offset; - while (i) { - offset = --i * 3 * 4; + while (i) { // tant que je ne suis pas au 1er point (on boucle à l'envers a cause de --i) + offset = --i * 3 * 4; //offset = décalage dans la liste vec3.transformMat4( new Float32Array(outputBuffer, offset, 3), new Float32Array(this.template.buffer, offset, 3), @@ -204,57 +176,47 @@ return new Float32Array(outputBuffer); }; + + CylinderGenerator.prototype.colorChoice = function(symbol) { + var outputArray = new Float32Array(this.nCoords); + var i = this.template.length; + var color = getCPKColor(symbol); + while (i) { + outputArray[--i] = color[2]; + outputArray[--i] = color[1]; + outputArray[--i] = color[0]; + } + return outputArray; + }; + // 2- Create a shape with geometry and colors for bonds var shape = new Shape(); - var cylinder = new CylinderGenerator(16); - var vertices = cylinder.fitBetween(test.atom1, test.atom2); + //selected = [selected[1]]; + var vertices = new Float32Array(cylinder.nCoords * selected.length * 2); + var colors = new Float32Array(cylinder.nCoords * selected.length * 2); + for (var i = 0; i < selected.length; i++) { + vertices.set( + cylinder.fitBetween(selected[i].atom1, selected[i].middle), + i * 2 * cylinder.nCoords); + colors.set( + cylinder.colorChoice(selected[i].atom1.symbol), + i * 2 * cylinder.nCoords + ); + vertices.set( + cylinder.fitBetween(selected[i].middle, selected[i].atom2), + (i * 2 + 1) * cylinder.nCoords); + colors.set( + cylinder.colorChoice(selected[i].atom2.symbol), + (i * 2 + 1) * cylinder.nCoords + ); + } - var colors = []; - /*for (var i of [test.atom1]) { - vertices.push(0); - vertices.push(0); - vertices.push(0); - vertices.push(0.5); - vertices.push(0); - vertices.push(0); - vertices.push(0); - vertices.push(0.5); - vertices.push(0); - vertices.push(-0.5); - vertices.push(0.5); - vertices.push(0); - vertices.push(-0.5); - vertices.push(0.5); - vertices.push(-0.5); - // CPK - switch (i.symbol) { - case 'C': - colors.push(0.78); //red - colors.push(0.78); //green - colors.push(0.78); //blue - break; - case 'N': - colors.push(0.56); //red - colors.push(0.56); //green - colors.push(1.00); //blue - break; - case 'O': - colors.push(0.94); //red - colors.push(0.00); //green - colors.push(0.00); //blue - break; - case 'P': - colors.push(1.00); //red - colors.push(0.65); //green - colors.push(0.00); //blue - break; - } - }*/ + console.log(vertices); shape.setGeometry({'type':'TRIANGLE_STRIP','attribute':'aVertexPosition','data':vertices}); - //shape.setColors({'type': 'RGB', 'attribute':'aVertexColor','data':colors}); + shape.setColors({'type': 'RGB', 'attribute':'aVertexColor','data':colors}); // 2ter- Define shader program by hand var shaderProgram = new Program(renderer.getContext(),'monochrome'); @@ -263,7 +225,7 @@ shaderProgram.link(); // Get attribLocation shaderProgram.setAttribute("aVertexPosition"); - //shaderProgram.setAttribute("aVertexColor"); + shaderProgram.setAttribute("aVertexColor"); // Get uniformLocation shaderProgram.setUniformLocation("uPMatrix"); shaderProgram.setUniformLocation("uVMatrix"); @@ -272,10 +234,10 @@ shape.setProgram(shaderProgram); shape.updateGL(renderer.getContext() ); -// mat4.translate(shape.matrix,shape.matrix,[-test.middle.x,-test.middle.y,-test.middle.z]); + mat4.translate(shape.matrix,shape.matrix,[-mol.cg.x,-mol.cg.y,-mol.cg.z]); console.log(shape.matrix ); scene.add(shape); - mat4.translate(scene.getCamera().viewMatrix,scene.getCamera().viewMatrix,[0.0,0.0,-10.0]); + mat4.translate(scene.getCamera().viewMatrix,scene.getCamera().viewMatrix,[0.0,0.0,-60.0]); console.log(scene.toString()); // 3- Update renderer @@ -291,6 +253,27 @@ renderer.drawScene(); } +function getCPKColor(symbol) { + // CPK + switch (symbol) { + case 'C': + return [0.78, 0.78, 0.78]; + break; + case 'N': + return [0.56, 0.56, 1.00]; + break; + case 'O': + return [0.94, 0.00, 0.00]; + break; + case 'P': + return [1.00, 0.65, 0.00]; + break; + default: + return [0.00, 0.65, 0.00]; + break; + } +} + From 10c3f7fc24cbd5618e04cc5a3f69f5e4122dd20f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lien=20Luciani?= Date: Mon, 23 Feb 2015 16:27:57 +0100 Subject: [PATCH 4/8] sticks with covers --- test/test01_sticks.html | 433 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 433 insertions(+) create mode 100644 test/test01_sticks.html diff --git a/test/test01_sticks.html b/test/test01_sticks.html new file mode 100644 index 0000000..bd75254 --- /dev/null +++ b/test/test01_sticks.html @@ -0,0 +1,433 @@ + + + + +Atom selection + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Load Local PDB FileYesNo

+

Load From RCSB PDB ID:  

+ + + + From e5424753c775bc365e6792fed893b6a7f53df085 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lien=20Luciani?= Date: Mon, 23 Feb 2015 17:45:31 +0100 Subject: [PATCH 5/8] comments --- test/test00_sticks.html | 34 ++++++++++++++++++---------------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/test/test00_sticks.html b/test/test00_sticks.html index 4601baa..556d6e6 100644 --- a/test/test00_sticks.html +++ b/test/test00_sticks.html @@ -69,24 +69,15 @@ // Alpha Carbon of the group #10 in the chain 'B' // var selected = mol.finder('ATOM', function (atom) { if (atom.name === "CA" && atom.chain === "B" && atom.groupID == 10) return true; }); - // Alpha Carbon of the group #10 in the chain 'B' + // all var selected = mol.finder( 'BOND', function (bond) { - return ( bond.atom1.chain == "3" - && ( - (bond.atom1.name === "CA" && bond.atom2.name === "C" ) - || (bond.atom1.name === "C" && bond.atom2.name === "CA") ) ) - }); - selected = mol.bonds; + return true; + } + ); + console.log(selected.length + " bond(s) selected!"); - for (var i=0; i< selected.length; i++) { - //console.log(selected[i].atom1.groupID+'['+selected[i].atom1.name+';'+selected[i].atom2.name+']'); - } - - //console.log(selected); - var test = selected[25]; - console.log(test); // 0- Create a renderer for this canvas var renderer = new Renderer('canvas'); @@ -96,14 +87,22 @@ var scene = new Scene(); renderer.addScene(scene); + // Class CylinderGenerator + // n: number of faces for the cylinders function CylinderGenerator(n) { - var step = 2 * Math.PI / n;//angle of each step, in radius + // angle of each step, in radius + var step = 2 * Math.PI / n; var radius = 0.1; this.nCoords = (n * 2 + 4) * 3; - var buffer = new ArrayBuffer(this.nCoords * 4);//points: float32 (4 bytes) + // allocate memory for the cylinder + // each coordinate is a float32 (4 bytes) + var buffer = new ArrayBuffer(this.nCoords * 4); var i = this.nCoords - (2 * 3); + // view on the buffer corresponding to the cylinder without the degenerate triangles + // new Float32Array(buffer, offset (in bytes), length (number of float32)) var view = new Float32Array(buffer, 3 * 4, i); var x, z, angle = -step; + // loop, decrementing i while(i) { angle += step; z = -radius * Math.cos(angle); @@ -119,7 +118,9 @@ view[--i] = x;// x } + // view on the whole buffer, includes the cylinder + the degenerate triangles var template = new Float32Array(buffer); + // fills the coordinates for the degenerate triangles template[0] = template[3]; template[1] = template[4]; template[2] = template[5]; @@ -128,6 +129,7 @@ template[this.nCoords - 3] = template[this.nCoords - 6]; this.template = template; + // vector of the template cylinder this.cylinderVector = new Float32Array([0, 1, 0]); } From 1b6b029f5c3c7b58a894d81ada48d60182afb45e Mon Sep 17 00:00:00 2001 From: aurel-l Date: Thu, 26 Feb 2015 13:36:31 +0100 Subject: [PATCH 6/8] Delete test00_1-1Csanschapeau.html --- test/test00_1-1Csanschapeau.html | 400 ------------------------------- 1 file changed, 400 deletions(-) delete mode 100644 test/test00_1-1Csanschapeau.html diff --git a/test/test00_1-1Csanschapeau.html b/test/test00_1-1Csanschapeau.html deleted file mode 100644 index 528c22d..0000000 --- a/test/test00_1-1Csanschapeau.html +++ /dev/null @@ -1,400 +0,0 @@ - - - - - Atom selection - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Load Local PDB FileYesNo

-

Load From RCSB PDB ID:  

- - - - From ed5a3e2e8722b0d7da5c344a41d47659a5206302 Mon Sep 17 00:00:00 2001 From: aurel-l Date: Thu, 26 Feb 2015 13:36:48 +0100 Subject: [PATCH 7/8] Delete test00_2-1Cavecchapeau.html --- test/test00_2-1Cavecchapeau.html | 434 ------------------------------- 1 file changed, 434 deletions(-) delete mode 100644 test/test00_2-1Cavecchapeau.html diff --git a/test/test00_2-1Cavecchapeau.html b/test/test00_2-1Cavecchapeau.html deleted file mode 100644 index 5879905..0000000 --- a/test/test00_2-1Cavecchapeau.html +++ /dev/null @@ -1,434 +0,0 @@ - - - - - Atom selection - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Load Local PDB FileYesNo

-

Load From RCSB PDB ID:  

- - - - From 11aa1839ecc4751747cc91d89fd4b7558e3f86e6 Mon Sep 17 00:00:00 2001 From: aurel-l Date: Thu, 26 Feb 2015 13:37:00 +0100 Subject: [PATCH 8/8] Delete test00_3-2C.html --- test/test00_3-2C.html | 518 ------------------------------------------ 1 file changed, 518 deletions(-) delete mode 100644 test/test00_3-2C.html diff --git a/test/test00_3-2C.html b/test/test00_3-2C.html deleted file mode 100644 index bffae2b..0000000 --- a/test/test00_3-2C.html +++ /dev/null @@ -1,518 +0,0 @@ - - - - - Atom selection - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Load Local PDB FileYesNo

-

Load From RCSB PDB ID:  

- - - -