Rotating and translating with Processing
Let’s begin with taking stock of where we stand at the moment.
This time we’ve managed the following:
1) Each piece of text is first rotated to line up properly for reading.
2) Rotating the texts resulted in them being somewhat displaced because the centers of rotation are in the top left corner, therefore some translations, after the rotating, were necessary.
The lines are drawn between the texts to terminate properly in the center of the side that is facing inwards.
Still to do:
1) Some nice Bezier curvature.
2) Interaction, when we move the mouse over lines and texts we want them to “light up” and somehow indicate what links out and what links in.
3) Linking, when we press somewhere, maybe straight on the text we will jump to the url of the page in question.
. . .
lmap.draw = function(){
p.fill(0);
var radius = 300;
var pi_offset = p.TWO_PI / lmap.data.length;
var angle = 0.01;
var c_x = 400;
var c_y = 400;
$.each(lmap.data, function(i, obj){
tFill(obj.type);
var xpos = lmap.data[i].xpos = c_x + radius * p.cos(angle);
var ypos = lmap.data[i].ypos = c_y + radius * p.sin(angle);
var txt_width = lmap.arial.width(obj.name) * lmap.font_size;
p.pushMatrix();
p.translate(xpos, ypos);
if(angle > p.PI/2 && angle < 3 * p.PI / 2){
p.rotate(angle + p.PI);
p.translate(-txt_width, -lmap.font_size / 2);
}else{
p.rotate(angle);
p.translate(0, -lmap.font_size / 2);
}
p.text(obj.name, 0, 0);
p.popMatrix();
angle += pi_offset;
});
. . .
}Everything new is located in the first each loop shown above. Stuff to note here:
1) We begin by storing the width of each text in txt_width, this variable will be needed later in some cases to perform adjustments.
2) We use pushMatrix in order to begin with the state we currently are in before we start doing rotations, this is important to achieve a non-incremental drawing style (note that we rotate with angle, not the pi_offset all the time).
3) If we are on the left side of the circle we need to flip the texts around since we don’t want them to be upside down. That’s simply accomplished by adding PI (180 degrees) to the angle.
4) Depending on whether we are on the left or right side we need to make some translationary adjustments, since we’ve rotated around the top left corner the texts to the left will be too far inside the circle, we need to move them outwards. Luckily that is easily accomplished by simply going minus the text width. The reason for that is that the translation here happens around the local coordinate axis of each text (ie no need to determine distances with the help of trigonometry yet again).
5) Translation on the y-axis is much simpler, since the center lies in the top left corner we simply have to move half the height of the text upwards.
Related Posts
Tags: Javascript, jquery, processing, rotation, translation, visualization