Mouse clicks in Processingjs
As it happens, catching mouse clicks and doing something with them is really easy with Processing. We simply add a new function, mousePressed to the lmap object.
We now also have incoming links colored green on mouse over. This final change brings us pretty close to the flare dependency graph which we set out to emulate.
Close enough for me anyway, let’s walk this final code listing:
. . .
lmap.data = [
{"id": 1, "url": "http://www.prodevtips.com", "name": "Site 1", "type": "external", "links": []},
{"id": 2, "url": "http://www.prodevtips.com", "name": "Site 2", "type": "internal", "links": [3, 4, 1]},
{"id": 3, "url": "http://www.prodevtips.com", "name": "Site 3", "type": "internal", "links": [1, 2]},
{"id": 4, "url": "http://www.prodevtips.com", "name": "Site 4", "type": "internal", "links": [2]},
{"id": 5, "url": "http://www.prodevtips.com", "name": "Great site no 5", "type": "internal", "links": [11, 12]},
{"id": 6, "url": "http://www.prodevtips.com", "name": "Site 6", "type": "internal", "links": [1, 3]},
{"id": 7, "url": "http://www.prodevtips.com", "name": "Site 7", "type": "internal", "links": [2, 6]},
{"id": 8, "url": "http://www.prodevtips.com", "name": "Site 8", "type": "internal", "links": [5, 9]},
{"id": 9, "url": "http://www.prodevtips.com", "name": "Site 9", "type": "internal", "links": [1, 12]},
{"id": 10, "url": "http://www.prodevtips.com", "name": "Site 10", "type": "internal", "links": [7, 8]},
{"id": 11, "url": "http://www.prodevtips.com", "name": "Site 11", "type": "internal", "links": [12, 1]},
{"id": 12, "url": "http://www.prodevtips.com", "name": "Site 12", "type": "internal", "links": [3, 6]}
];
. . .
function inLink(){
p.fill(50, 150, 50);
p.stroke(50, 150, 50, 100);
}
lmap.draw = function(){
p.background(255);
$.each(lmap.data, function(i, obj){
p.pushMatrix();
p.translate(obj.xpos, obj.ypos);
p.rotate(obj.angle2);
p.translate(obj.xpos2, obj.ypos2);
if(mouseOver(obj))
tFill(obj.type, 100);
else
tFill(obj.type, 80);
p.text(obj.name, 0, 0);
p.popMatrix();
});
var cur_obj = {"id": 0};
$.each(lmap.data, function(i, obj){
if(mouseOver(obj))
cur_obj = obj;
});
$.each(lmap.data, function(i, obj){
$.each(obj.object_links, function(i, obj_link){
var to_obj = obj_link.to_obj;
if(cur_obj.id == obj.id)
tFill(to_obj.type, 100);
else if(to_obj.id == cur_obj.id)
inLink();
else
tFill(to_obj.type, 30);
p.bezier(obj.xpos, obj.ypos, obj_link.xb1, obj_link.yb1, obj_link.xb2, obj_link.yb2, to_obj.xpos, to_obj.ypos);
});
});
}
lmap.mousePressed = function(){
$.each(lmap.data, function(i, obj){
if(mouseOver(obj))
window.open(obj.url);
});
}
$(document).ready(function(){
p = Processing("treemap");
p.setup = lmap.setup;
p.draw = lmap.draw;
p.mousePressed = lmap.mousePressed;
p.init();
});1) We now have a url attribute in each page object.
2) We find out if we have the mouse pointer over any page separately and if we have the object is stored in a temporary variable, cur_obj.
3) We have a new function inLink which we will call if we’re dealing with a current object that has links coming to it.
4) We execute the incoming link logic in the third loop, ie if to_obj is the current object we draw all links to it in green.
5) Finally we create the mousePressed function where we loop through all objects again, if we are on top of any of them when the mouse is pressed we go to its url.
6) Don’t forget to assign lmap.mousePressed to p.mousePressed.
That was that, end of story. I’m happy where we are now, this is the iteration I will use in my project so we end here.
Related Posts
Tags: Javascript, jquery, mouse interaction, processing.js, visualization