## Bezier curves and mouse interaction in Processingjs

A lot has happened since last time, we now manage bezier curvature and mouse interaction. Since we now have interaction (out links will light up when we move the mouse over the site name in question) we can’t just quit in the middle of the draw function like we’ve done so far.

To achieve our goal we therefore have to split things up, we need to set everything up and store all the information we need in the setup function. This information will now be used in the draw function.

Let’s walk this stuff:

``````. . .
lmap.setup = function(){
p.size(800, 800);
p.strokeWeight(2);
lmap.font_size = 14;
p.textFont(lmap.arial, lmap.font_size);

var pi_offset = p.TWO_PI / lmap.data.length;
var angle = 0;
var c_x = 400;
var c_y = 400;

\$.each(lmap.data, function(i, obj){
lmap.data[i].xpos = c_x + radius * p.cos(angle);
lmap.data[i].ypos = c_y + radius * p.sin(angle);
var txt_width = lmap.data[i].width = lmap.arial.width(obj.name) * lmap.font_size;
lmap.data[i].height = lmap.font_size;
lmap.data[i].angle = angle;

if(angle > p.PI/2 && angle < 3 * p.PI / 2){
lmap.data[i].angle2 = angle + p.PI;
lmap.data[i].xpos2 = -txt_width;
}else{
lmap.data[i].angle2 = angle;
lmap.data[i].xpos2 = 0;
}

lmap.data[i].ypos2 = -lmap.font_size / 2;
angle += pi_offset;
});

\$.each(lmap.data, function(j, obj){
var to_obj = findPage(id);

var angle_diff = Math.abs(obj.angle - to_obj.angle) / 2;

var rmin = -50 * angle_diff;
var rmax = 50 * angle_diff;

});
});

}
. . .``````

A lot here can be recognized from the old draw function, new stuff is happening in the second each loop. We need to store two extra points in order to be able to draw each curve properly, start and end point like before naturally, but also two new control points which will control the curvature.

To set the control points up we first use the new original angle value which we saved in the first loop, with that value we can define a disc drawn at the very same angle the text is drawn, but further inside the circle (100 pixels). The area of the disc is defined through the random max and min (rmin, rmax) values which currently stand at -50 to 50. Somewhere within this area we subsequently put the control point.

Finally we save all this information in a new object_links array, one object for each outgoing link.

``````. . .
function tFill(type, alpha){
if(type == "external"){
p.fill(150, 50, 50);
p.stroke(150, 50, 50, alpha);
}else{
p.fill(50, 50, 150);
p.stroke(50, 50, 150, alpha);
}
}

function mouseOver(obj){
if(p.dist(p.mouseX, p.mouseY, obj.xpos, obj.ypos) < obj.height)
return true;
return false;
}

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();
});

\$.each(lmap.data, function(i, obj){
if(mouseOver(obj))
tFill(to_obj.type, 100);
else
tFill(to_obj.type, 50);