Loading...
Logo
Processing Forum
HI,

I have a large interactive tree-like structure with clickable branches and leaves.

The code works as follows:

setup(){
//main setup
}
update(input){
tree.update(input);
}

draw(){
tree.draw();
}

class Tree{
// tree stuff

update(){
}

draw(){
clicked?{
// do stuff
}else{
//do other stuff
}

}
boolean clicked(){
is the mouse within the branch? return true
}

}


The tree gets updated ONCE and then is just being drawn. 

I use translate() with mouseDragged(). Everything works fine, however when I do the translation I loose the clickability. The whole structure is displayed correctly though. I guess it's because the coordinates are set in the very beginning. Strangely the drawing translates perfectly, just the click fails. 


Can anybody recommend anything?

Replies(1)

Keep track of the global xy-translation and account for it in your mouseOver functions. If you have a lot of places where you check against the mouse, it's easier to just make one corrected mouse PVector and check against that instead of mouseX and mouseY (which you have to correct all the time).

Code Example
Copy code
  1. int translateX = 100;
  2. int translateY = 100;

  3. void setup() {
  4.   size(500, 500);
  5.   noStroke();
  6.   smooth();
  7. }

  8. void draw() {
  9.   background(255);
  10.   translate(translateX, translateY);
  11.   int cX = 150;
  12.   int cY = 150;
  13.   float cD = 250;
  14.   if (mouseOverCircle(cX, cY, cD)) { fill(0, 255, 0); }
  15.   else { fill(255, 0, 0); }
  16.   ellipse(cX, cY, cD, cD);
  17. }

  18. boolean mouseOverCircle(int x, int y, float diameter) {
  19.   return (dist(mouseX-translateX, mouseY-translateY, x, y) < diameter*0.5);
  20. }