diff --git a/examples/simple_graph/img/0.jpg b/examples/simple_graph/img/0.jpg new file mode 100644 index 0000000..a37a67b Binary files /dev/null and b/examples/simple_graph/img/0.jpg differ diff --git a/examples/simple_graph/img/1.JPG b/examples/simple_graph/img/1.JPG new file mode 100644 index 0000000..542fe17 Binary files /dev/null and b/examples/simple_graph/img/1.JPG differ diff --git a/examples/simple_graph/img/10.JPG b/examples/simple_graph/img/10.JPG new file mode 100644 index 0000000..1aaf363 Binary files /dev/null and b/examples/simple_graph/img/10.JPG differ diff --git a/examples/simple_graph/img/11.JPG b/examples/simple_graph/img/11.JPG new file mode 100644 index 0000000..9b3a00d Binary files /dev/null and b/examples/simple_graph/img/11.JPG differ diff --git a/examples/simple_graph/img/12.JPG b/examples/simple_graph/img/12.JPG new file mode 100644 index 0000000..60e095c Binary files /dev/null and b/examples/simple_graph/img/12.JPG differ diff --git a/examples/simple_graph/img/13.JPG b/examples/simple_graph/img/13.JPG new file mode 100644 index 0000000..294e27c Binary files /dev/null and b/examples/simple_graph/img/13.JPG differ diff --git a/examples/simple_graph/img/14.JPG b/examples/simple_graph/img/14.JPG new file mode 100644 index 0000000..684b45f Binary files /dev/null and b/examples/simple_graph/img/14.JPG differ diff --git a/examples/simple_graph/img/15.JPG b/examples/simple_graph/img/15.JPG new file mode 100644 index 0000000..27246f4 Binary files /dev/null and b/examples/simple_graph/img/15.JPG differ diff --git a/examples/simple_graph/img/16.JPG b/examples/simple_graph/img/16.JPG new file mode 100644 index 0000000..735612d Binary files /dev/null and b/examples/simple_graph/img/16.JPG differ diff --git a/examples/simple_graph/img/17.JPG b/examples/simple_graph/img/17.JPG new file mode 100644 index 0000000..34fd8e6 Binary files /dev/null and b/examples/simple_graph/img/17.JPG differ diff --git a/examples/simple_graph/img/18.JPG b/examples/simple_graph/img/18.JPG new file mode 100644 index 0000000..b486909 Binary files /dev/null and b/examples/simple_graph/img/18.JPG differ diff --git a/examples/simple_graph/img/19.JPG b/examples/simple_graph/img/19.JPG new file mode 100644 index 0000000..ae5b231 Binary files /dev/null and b/examples/simple_graph/img/19.JPG differ diff --git a/examples/simple_graph/img/2.JPG b/examples/simple_graph/img/2.JPG new file mode 100644 index 0000000..b58a952 Binary files /dev/null and b/examples/simple_graph/img/2.JPG differ diff --git a/examples/simple_graph/img/20.JPG b/examples/simple_graph/img/20.JPG new file mode 100644 index 0000000..bd0db37 Binary files /dev/null and b/examples/simple_graph/img/20.JPG differ diff --git a/examples/simple_graph/img/21.JPG b/examples/simple_graph/img/21.JPG new file mode 100644 index 0000000..4d2aeac Binary files /dev/null and b/examples/simple_graph/img/21.JPG differ diff --git a/examples/simple_graph/img/22.JPG b/examples/simple_graph/img/22.JPG new file mode 100644 index 0000000..e026349 Binary files /dev/null and b/examples/simple_graph/img/22.JPG differ diff --git a/examples/simple_graph/img/23.JPG b/examples/simple_graph/img/23.JPG new file mode 100644 index 0000000..127bb8a Binary files /dev/null and b/examples/simple_graph/img/23.JPG differ diff --git a/examples/simple_graph/img/24.JPG b/examples/simple_graph/img/24.JPG new file mode 100644 index 0000000..fb1bb53 Binary files /dev/null and b/examples/simple_graph/img/24.JPG differ diff --git a/examples/simple_graph/img/25.JPG b/examples/simple_graph/img/25.JPG new file mode 100644 index 0000000..d49d756 Binary files /dev/null and b/examples/simple_graph/img/25.JPG differ diff --git a/examples/simple_graph/img/26.JPG b/examples/simple_graph/img/26.JPG new file mode 100644 index 0000000..6653272 Binary files /dev/null and b/examples/simple_graph/img/26.JPG differ diff --git a/examples/simple_graph/img/27.JPG b/examples/simple_graph/img/27.JPG new file mode 100644 index 0000000..00c0cb7 Binary files /dev/null and b/examples/simple_graph/img/27.JPG differ diff --git a/examples/simple_graph/img/28.JPG b/examples/simple_graph/img/28.JPG new file mode 100644 index 0000000..587ccd7 Binary files /dev/null and b/examples/simple_graph/img/28.JPG differ diff --git a/examples/simple_graph/img/29.JPG b/examples/simple_graph/img/29.JPG new file mode 100644 index 0000000..4b44f31 Binary files /dev/null and b/examples/simple_graph/img/29.JPG differ diff --git a/examples/simple_graph/img/3.JPG b/examples/simple_graph/img/3.JPG new file mode 100644 index 0000000..8b1720c Binary files /dev/null and b/examples/simple_graph/img/3.JPG differ diff --git a/examples/simple_graph/img/30.JPG b/examples/simple_graph/img/30.JPG new file mode 100644 index 0000000..07c622f Binary files /dev/null and b/examples/simple_graph/img/30.JPG differ diff --git a/examples/simple_graph/img/31.JPG b/examples/simple_graph/img/31.JPG new file mode 100644 index 0000000..f66f33d Binary files /dev/null and b/examples/simple_graph/img/31.JPG differ diff --git a/examples/simple_graph/img/32.JPG b/examples/simple_graph/img/32.JPG new file mode 100644 index 0000000..4d6e4b7 Binary files /dev/null and b/examples/simple_graph/img/32.JPG differ diff --git a/examples/simple_graph/img/33.JPG b/examples/simple_graph/img/33.JPG new file mode 100644 index 0000000..23a792c Binary files /dev/null and b/examples/simple_graph/img/33.JPG differ diff --git a/examples/simple_graph/img/34.JPG b/examples/simple_graph/img/34.JPG new file mode 100644 index 0000000..0ff9758 Binary files /dev/null and b/examples/simple_graph/img/34.JPG differ diff --git a/examples/simple_graph/img/35.JPG b/examples/simple_graph/img/35.JPG new file mode 100644 index 0000000..90d6c41 Binary files /dev/null and b/examples/simple_graph/img/35.JPG differ diff --git a/examples/simple_graph/img/36.JPG b/examples/simple_graph/img/36.JPG new file mode 100644 index 0000000..13bdc95 Binary files /dev/null and b/examples/simple_graph/img/36.JPG differ diff --git a/examples/simple_graph/img/37.JPG b/examples/simple_graph/img/37.JPG new file mode 100644 index 0000000..86bbda4 Binary files /dev/null and b/examples/simple_graph/img/37.JPG differ diff --git a/examples/simple_graph/img/38.JPG b/examples/simple_graph/img/38.JPG new file mode 100644 index 0000000..cfbbad4 Binary files /dev/null and b/examples/simple_graph/img/38.JPG differ diff --git a/examples/simple_graph/img/39.JPG b/examples/simple_graph/img/39.JPG new file mode 100644 index 0000000..591b5a7 Binary files /dev/null and b/examples/simple_graph/img/39.JPG differ diff --git a/examples/simple_graph/img/4.JPG b/examples/simple_graph/img/4.JPG new file mode 100644 index 0000000..ced42aa Binary files /dev/null and b/examples/simple_graph/img/4.JPG differ diff --git a/examples/simple_graph/img/5.JPG b/examples/simple_graph/img/5.JPG new file mode 100644 index 0000000..a40d9d0 Binary files /dev/null and b/examples/simple_graph/img/5.JPG differ diff --git a/examples/simple_graph/img/6.JPG b/examples/simple_graph/img/6.JPG new file mode 100644 index 0000000..b2b6f47 Binary files /dev/null and b/examples/simple_graph/img/6.JPG differ diff --git a/examples/simple_graph/img/7.JPG b/examples/simple_graph/img/7.JPG new file mode 100644 index 0000000..4c22b70 Binary files /dev/null and b/examples/simple_graph/img/7.JPG differ diff --git a/examples/simple_graph/img/8.JPG b/examples/simple_graph/img/8.JPG new file mode 100644 index 0000000..5d7fd60 Binary files /dev/null and b/examples/simple_graph/img/8.JPG differ diff --git a/examples/simple_graph/img/9.JPG b/examples/simple_graph/img/9.JPG new file mode 100644 index 0000000..97efe99 Binary files /dev/null and b/examples/simple_graph/img/9.JPG differ diff --git a/examples/simple_graph/img/sonycam-original.ttf b/examples/simple_graph/img/sonycam-original.ttf new file mode 100644 index 0000000..3f8f25b Binary files /dev/null and b/examples/simple_graph/img/sonycam-original.ttf differ diff --git a/examples/simple_graph/index.html b/examples/simple_graph/index.html index 7bf25df..e6e629b 100644 --- a/examples/simple_graph/index.html +++ b/examples/simple_graph/index.html @@ -15,7 +15,7 @@ - Graph Visualization + f @@ -52,21 +52,42 @@
+ +

CARTOGRAFÍA DE AFECTOS

-

+ +

+ + +
Rotate: Left Mouse Button and Move
Zoom: Press Key S + Left Mouse Button and Move
Drag: Press Key D + Left Mouse Button and Move + CARTOGRAFIAS DEL DESEO +
+

titulos

+
+ diff --git a/examples/simple_graph/simple_graph.js b/examples/simple_graph/simple_graph.js index bcf499e..96f35b3 100644 --- a/examples/simple_graph/simple_graph.js +++ b/examples/simple_graph/simple_graph.js @@ -46,304 +46,311 @@ */ -var Drawing = Drawing || {}; - -Drawing.SimpleGraph = function(options) { - options = options || {}; - - this.layout = options.layout || "2d"; - this.layout_options = options.graphLayout || {}; - this.show_stats = options.showStats || false; - this.show_info = options.showInfo || false; - this.show_labels = options.showLabels || false; - this.selection = options.selection || false; - this.limit = options.limit || 10; - this.nodes_count = options.numNodes || 20; - this.edges_count = options.numEdges || 10; - - var camera, controls, scene, renderer, interaction, geometry, object_selection; - var stats; - var info_text = {}; - var graph = new GRAPHVIS.Graph({limit: options.limit}); - - var geometries = []; - - var that=this; - - init(); - createGraph(); - animate(); - - function init() { - // Three.js initialization - renderer = new THREE.WebGLRenderer({alpha: true, antialias: true}); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - - - camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight, 1, 1000000); - camera.position.z = 10000; - - controls = new THREE.TrackballControls(camera); - - controls.rotateSpeed = 0.5; - controls.zoomSpeed = 5.2; - controls.panSpeed = 1; - - controls.noZoom = false; - controls.noPan = false; - - controls.staticMoving = false; - controls.dynamicDampingFactor = 0.3; - - controls.keys = [ 65, 83, 68 ]; - - controls.addEventListener('change', render); - - scene = new THREE.Scene(); - - // Node geometry - if(that.layout === "3d") { - geometry = new THREE.SphereGeometry(30); - } else { - geometry = new THREE.BoxGeometry( 50, 50, 0 ); - } - - // Create node selection, if set - if(that.selection) { - object_selection = new THREE.ObjectSelection({ - domElement: renderer.domElement, - selected: function(obj) { - // display info - if(obj !== null) { - info_text.select = "Object " + obj.id; - } else { - delete info_text.select; + var Drawing = Drawing || {}; + + Drawing.SimpleGraph = function(options) { + options = options || {}; + + this.layout = options.layout || "2d"; + this.layout_options = options.graphLayout || {}; + this.show_stats = options.showStats || false; + this.show_info = options.showInfo || false; + this.show_labels = options.showLabels || false; + this.selection = options.selection || false; + this.limit = options.limit || 10; + this.nodes_count = options.numNodes || 20; + this.edges_count = options.numEdges || 10; + + var camera, controls, scene, renderer, interaction, geometry, object_selection; + var stats; + var info_text = {}; + var graph = new GRAPHVIS.Graph({limit: options.limit}); + + var geometries = []; + + var that=this; + + init(); + createGraph(); + animate(); + + function init() { + // Three.js initialization + renderer = new THREE.WebGLRenderer({alpha: true, antialias: true}); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.setSize(window.innerWidth, window.innerHeight); + + + camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight, 1, 1000000); + camera.position.z = 10000; + + controls = new THREE.TrackballControls(camera); + + controls.rotateSpeed = 0.5; + controls.zoomSpeed = 5.2; + controls.panSpeed = 1; + + controls.noZoom = false; + controls.noPan = false; + + controls.staticMoving = false; + controls.dynamicDampingFactor = 0.3; + + controls.keys = [ 65, 83, 68 ]; + + controls.addEventListener('change', render); + + scene = new THREE.Scene(); + + // Node geometry + if(that.layout === "3d") { + geometry = new THREE.SphereGeometry(300); + } else { + geometry = new THREE.BoxGeometry( 300, 300, 100 ); + } + + // Create node selection, if set + if(that.selection) { + object_selection = new THREE.ObjectSelection({ + domElement: renderer.domElement, + selected: function(obj) { + // display info + if(obj !== null) { + info_text.select = "Object " + obj.id; + } else { + delete info_text.select; + } + }, + clicked: function(obj) { } - }, - clicked: function(obj) { - } - }); - } - - document.body.appendChild( renderer.domElement ); - - // Stats.js - if(that.show_stats) { - stats = new Stats(); - stats.domElement.style.position = 'absolute'; - stats.domElement.style.top = '0px'; - document.body.appendChild( stats.domElement ); - } - - // Create info box - if(that.show_info) { - var info = document.createElement("div"); - var id_attr = document.createAttribute("id"); - id_attr.nodeValue = "graph-info"; - info.setAttributeNode(id_attr); - document.body.appendChild( info ); + }); + } + + document.body.appendChild( renderer.domElement ); + + // Stats.js + if(that.show_stats) { + stats = new Stats(); + stats.domElement.style.position = 'absolute'; + stats.domElement.style.top = '0px'; + document.body.appendChild( stats.domElement ); + } + + // Create info box + if(that.show_info) { + var info = document.createElement("div"); + var id_attr = document.createAttribute("id"); + id_attr.nodeValue = "graph-info"; + info.setAttributeNode(id_attr); + document.body.appendChild( info ); + } } - } - - - /** - * Creates a graph with random nodes and edges. - * Number of nodes and edges can be set with - * numNodes and numEdges. - */ - function createGraph() { - - var node = new GRAPHVIS.Node(0); - node.data.title = "This is node " + node.id; - graph.addNode(node); - drawNode(node); - - var nodes = []; - nodes.push(node); - - var steps = 1; - while(nodes.length !== 0 && steps < that.nodes_count) { - node = nodes.shift(); - - var numEdges = randomFromTo(1, that.edges_count); - for(var i=1; i <= numEdges; i++) { - var target_node = new GRAPHVIS.Node(i*steps); - if(graph.addNode(target_node)) { - target_node.data.title = "This is node " + target_node.id; - - drawNode(target_node); - nodes.push(target_node); - if(graph.addEdge(node, target_node)) { - drawEdge(node, target_node); + + + /** + * Creates a graph with random nodes and edges. + * Number of nodes and edges can be set with + * numNodes and numEdges. + */ + function createGraph() { + + var node = new GRAPHVIS.Node(0); + node.data.title = "This is node " + node.id; + graph.addNode(node); + drawNode(node); + + var nodes = []; + nodes.push(node); + + var steps = 1; + while(nodes.length !== 0 && steps < that.nodes_count) { + node = nodes.shift(); + + var numEdges = randomFromTo(1, that.edges_count); + for(var i=1; i <= numEdges; i++) { + var target_node = new GRAPHVIS.Node(i*steps); + if(graph.addNode(target_node)) { + target_node.data.title = "This is node " + target_node.id; + + drawNode(target_node); + nodes.push(target_node); + if(graph.addEdge(node, target_node)) { + drawEdge(node, target_node); + } } } + steps++; } - steps++; + + that.layout_options.width = that.layout_options.width || 2000; + that.layout_options.height = that.layout_options.height || 2000; + that.layout_options.iterations = that.layout_options.iterations || 100000; + that.layout_options.layout = that.layout_options.layout || that.layout; + graph.layout = new Layout.ForceDirected(graph, that.layout_options); + graph.layout.init(); + info_text.nodes = "Nodes " + graph.nodes.length; + info_text.edges = "Edges " + graph.edges.length; } - - that.layout_options.width = that.layout_options.width || 2000; - that.layout_options.height = that.layout_options.height || 2000; - that.layout_options.iterations = that.layout_options.iterations || 100000; - that.layout_options.layout = that.layout_options.layout || that.layout; - graph.layout = new Layout.ForceDirected(graph, that.layout_options); - graph.layout.init(); - info_text.nodes = "Nodes " + graph.nodes.length; - info_text.edges = "Edges " + graph.edges.length; - } - - - /** - * Create a node object and add it to the scene. - */ - function drawNode(node) { - var draw_object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: Math.random() * 0xe0e0e0, opacity: 0.8 } ) ); - var label_object; - - if(that.show_labels) { - if(node.data.title !== undefined) { - label_object = new THREE.Label(node.data.title); - } else { - label_object = new THREE.Label(node.id); + + + /** + * Create a node object and add it to the scene. + */ + function drawNode(node) { + var draw_object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) ); + var label_object; + + if(that.show_labels) { + if(node.data.title !== undefined) { + label_object = new THREE.Label(node.data.title); + } else { + label_object = new THREE.Label(node.id); + } + node.data.label_object = label_object; + scene.add( node.data.label_object ); } - node.data.label_object = label_object; - scene.add( node.data.label_object ); - } - - var area = 5000; - draw_object.position.x = Math.floor(Math.random() * (area + area + 1) - area); - draw_object.position.y = Math.floor(Math.random() * (area + area + 1) - area); - - if(that.layout === "3d") { - draw_object.position.z = Math.floor(Math.random() * (area + area + 1) - area); - } - - draw_object.id = node.id; - node.data.draw_object = draw_object; - node.position = draw_object.position; - scene.add( node.data.draw_object ); - } - - - /** - * Create an edge object (line) and add it to the scene. - */ - function drawEdge(source, target) { - material = new THREE.LineBasicMaterial({ color: 0x606060 }); - - var tmp_geo = new THREE.Geometry(); - tmp_geo.vertices.push(source.data.draw_object.position); - tmp_geo.vertices.push(target.data.draw_object.position); - - line = new THREE.LineSegments( tmp_geo, material ); - line.scale.x = line.scale.y = line.scale.z = 1; - line.originalScale = 1; - - // NOTE: Deactivated frustumCulled, otherwise it will not draw all lines (even though - // it looks like the lines are in the view frustum). - line.frustumCulled = false; - - geometries.push(tmp_geo); - - scene.add( line ); - } - - - function animate() { - requestAnimationFrame( animate ); - controls.update(); - render(); - if(that.show_info) { - printInfo(); + + var area = 5000; + draw_object.position.x = Math.floor(Math.random() * (area + area + 1) - area); + draw_object.position.y = Math.floor(Math.random() * (area + area + 1) - area); + + if(that.layout === "3d") { + draw_object.position.z = Math.floor(Math.random() * (area + area + 1) - area); + } + + draw_object.id = node.id; + node.data.draw_object = draw_object; + node.position = draw_object.position; + + draw_object.onclick = function() { + var img = document.getElementById("hover-img"); + img.src = "img/" + (node.id % 39 + 1) + ".JPG"; + document.getElementById("hover-image").style.display = "block"; + } + + scene.add( node.data.draw_object ); } - } - - - function render() { - var i, length, node; - - // Generate layout if not finished - if(!graph.layout.finished) { - info_text.calc = "Calculating layout..."; - graph.layout.generate(); - } else { - info_text.calc = ""; + + + /** + * Create an edge object (line) and add it to the scene. + */ + function drawEdge(source, target) { + material = new THREE.LineBasicMaterial({ color: 0xFF0000 }); + + var tmp_geo = new THREE.Geometry(); + tmp_geo.vertices.push(source.data.draw_object.position); + tmp_geo.vertices.push(target.data.draw_object.position); + + line = new THREE.LineSegments( tmp_geo, material ); + line.scale.x = line.scale.y = line.scale.z = 1; + line.originalScale = 1; + + // NOTE: Deactivated frustumCulled, otherwise it will not draw all lines (even though + // it looks like the lines are in the view frustum). + line.frustumCulled = false; + + geometries.push(tmp_geo); + + scene.add( line ); } - - // Update position of lines (edges) - for(i=0; i
- +