Skip to content
Browse files

show node connections

  • Loading branch information...
1 parent f59773c commit 83087adf930b8963abe27408a67eff11614a8622 @uskudnik committed Aug 8, 2011
Showing with 43 additions and 10 deletions.
  1. +41 −10 GraphGL.js
  2. +2 −0 examples/twitter-followers/twitter-followers.html
View
51 GraphGL.js
@@ -18,7 +18,9 @@ function GraphGL(options) {
this.options = {
canvas: {},
nodes: {
- backgroundColor: 0xA0FF00,
+ color: 0xA0FF00,
+ borderColor: 0xAFFF00,
+ selectColor: 0xFF0011,
scale: 20
},
edges: {
@@ -46,6 +48,7 @@ function GraphGL(options) {
// this.graph.nodes[key].data.y = y;
this.graph.nodes[key].position.x = x;
this.graph.nodes[key].position.y = y;
+ this.graph.nodes[key].position.z = 1;
if(this.firstFrame) {
var scale = Math.max(5, 30*node.degree/data.maxDegree);
@@ -81,7 +84,8 @@ function GraphGL(options) {
this.renderer = new THREE.WebGLRenderer({
clearColor: this.options.canvas.backgroundColor,
- antialias: true
+ antialias: true,
+ enableDepthBufferWrite: true
});
this.renderer.sortObjects = false;
this.renderer.setSize(this.options.width, this.options.height);
@@ -111,20 +115,29 @@ function GraphGL(options) {
});
// Master geometries
- this.Edges = new THREE.Line(new THREE.Geometry(), new THREE.LineBasicMaterial( { color: 0xff0000, opacity: 0.2, linewidth: 1} ), THREE.LinePieces);
+ this.Edges = new THREE.Line(new THREE.Geometry(), new THREE.LineBasicMaterial( { color: this.options.nodes.color, opacity: 0.2, linewidth: 1} ), THREE.LinePieces);
+ // this.Edges.renderDepth = 0;
this.Edges.edges = [];
- this.connectedEdges = new THREE.Line(new THREE.Geometry(), new THREE.LineBasicMaterial( { color: 0x00ff00, opacity: 1.0, linewidth: 2} ), THREE.LinePieces);
+ this.connectedEdges = new THREE.Line(new THREE.Geometry(), new THREE.LineBasicMaterial( { color: this.options.selectColor, opacity: 0.8, linewidth: 2} ), THREE.LinePieces);
+ // this.connectedEdges.dynamic = true;
this.connectedEdges.edges = [];
// Events
this.events.mouse = {};
this.events.mouse.position = new THREE.Vector3();
+ this.events.selectedNodes = [];
+ // this.events.nodes.selected = false;
+
// For dragging around canvas
$(this.renderer.domElement).mousedown(function(ev){
+ // console.log("edges: ", that.Edges.materials[0].opacity);
+ // that.Edges.materials[0].opacity = 0.8;
that.events.mouse.down = true;
that.events.mouse.position.set(ev.pageX, ev.pageY, 0);
+
+
});
$(this.renderer.domElement).bind("mouseup mouseleave", function(ev){
that.events.mouse.down = false;
@@ -175,6 +188,17 @@ function GraphGL(options) {
// Interactivity
this.projector = new THREE.Projector();
$(this.renderer.domElement).click(function(ev){
+ // First remove old connected edges and reset color of selected node(s)
+ that.scene.removeObject(that.connectedEdges);
+ var i = that.events.selectedNodes.length;
+ while(i--) {
+ that.events.selectedNodes[i].materials[0].uniforms.color.value = that.hexColorToRGB(that.options.nodes.color);
+ }
+
+ that.connectedEdges = new THREE.Line(new THREE.Geometry(), new THREE.LineBasicMaterial( { color: that.options.nodes.selectColor, opacity: 0.8, linewidth: 2} ), THREE.LinePieces);
+ that.connectedEdges.edges = [];
+
+ //Calculate position of a click
clickPosition = new THREE.Vector3(ev.pageX, ev.pageY, that.camera.position.z);
clickPosition.subSelf(that.options.r0);
@@ -194,23 +218,21 @@ function GraphGL(options) {
if (distance < node.boundRadiusScale) {
console.log("Intersect: ", node);
+ that.events.selectedNodes.push(node);
// console.log("nodepos: ", node.position.x, node.position.y);
- node.materials[0].uniforms.color.value.z = 1;
+ node.materials[0].uniforms.color.value = that.hexColorToRGB(that.options.nodes.selectColor);
var i = that.Edges.edges.length;
while(i--) {
var edge = that.Edges.edges[i];
if (edge.source == node.data.id) {
that.connectedEdges.geometry.vertices.push(new THREE.Vector3());
that.connectedEdges.geometry.vertices.push(new THREE.Vector3());
-
that.connectedEdges.edges.push(edge);
}
}
that.scene.addObject(that.connectedEdges);
- // console.log(that.Edges);
- // console.log(that.connectedEdges);
}
}
});
@@ -238,7 +260,7 @@ Graph.prototype.node = function(data) {
if (data.color !== undefined) {
colorVector = this.hexColorToRGB(data.color);
} else {
- colorVector = this.hexColorToRGB(this.options.nodes.backgroundColor);
+ colorVector = this.hexColorToRGB(this.options.nodes.color);
}
// this.node_material.uniforms = {
@@ -262,6 +284,7 @@ Graph.prototype.node = function(data) {
vertexShader: $("#node-vertexShader").text(),
fragmentShader: $("#node-fragmentShader").text()
}));
+ // node.renderDepth = 1;
// node.dynamic = true;
// node.position.x = 0;
@@ -387,9 +410,16 @@ GraphGL.prototype.render = function() {
var itrg = i*2+1;
this.Edges.geometry.vertices[isrc].position = nsrc.position;
+ this.Edges.geometry.vertices[isrc].position.z = -1;
+
this.Edges.geometry.vertices[itrg].position = ntrg.position;
+ this.Edges.geometry.vertices[itrg].position.z = -1;
+ // console.log(nsrc.position, ntrg.position);
+ // console.log(this.Edges.geometry.vertices[isrc], this.Edges.geometry.vertices[itrg]);
this.Edges.geometry.__dirtyVertices = true;
+ // this.renderer.render(this.scene, this.camera);
+ // break;
}
var edges = this.connectedEdges.edges;
@@ -409,9 +439,10 @@ GraphGL.prototype.render = function() {
this.connectedEdges.geometry.vertices[itrg].position = ntrg.position;
this.connectedEdges.geometry.__dirtyVertices = true;
+
}
-
+ // console.log(this.connectedEdges);
this.renderer.render(this.scene, this.camera);
this.last_render = new_render;
}
View
2 examples/twitter-followers/twitter-followers.html
@@ -65,6 +65,8 @@
gl_FragColor = vec4(color, 1.0-d/dr);
// gl_FragColor = vec4(color, smoothstep(r, R, sqrt(pow(pos.x, 2.0) + pow(pos.y, 2.0))));
+ } else {
+ gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
}
}
}

0 comments on commit 83087ad

Please sign in to comment.
Something went wrong with that request. Please try again.