 # Processing examples: Reach2

Hi all

I am trying to understand this Processing example:
https://processing.org/examples/reach2.html

And some parts confuse me.

``````reachSegment(0, mouseX, mouseY);
for(int i=1; i<numSegments; i++) {
reachSegment(i, targetX, targetY);
``````

What will “targetX” and “targetY” be? Are they just “mouseX” and “mouseY” or something different?

``````void reachSegment(int i, float xin, float yin) {
float dx = xin - x[i];
float dy = yin - y[i];
angle[i] = atan2(dy, dx);
targetX = xin - cos(angle[i]) * segLength;
targetY = yin - sin(angle[i]) * segLength;
}
``````

Is “xin” “targetX” and “yin” “targetY”?
What are “x[i]” and “y[i]”, and how are these values produced?

Thanks for your explanation!

Only the segment on the end is trying to reach for the mouse’s position.
All the other segments are trying to reach for the other end of the previous segment!

1 Like

So the segment in the end you are referring to is this one?

``````for(int i=0; i<x.length; i++) {
segment(x[i], y[i], angle[i], (i+1)*2);
``````

`targetX` and `targetY` are global variables. It means that you can access and modify them no matter where you are in your program so it includes functions.

The first thing you do in your draw() loop is a call to `reachSegment`:

``````reachSegment(0, mouseX, mouseY);
``````

0 correspond to the last segment and `mouseX`, `mouseY` is the position that you are trying to reach.

The function goes like this:

``````void reachSegment(int i, float xin, float yin) {
float dx = xin - x[i];                     // x delta between the segment and the target x position
float dy = yin - y[i];                     // y delta between the segment and the target y position
angle[i] = atan2(dy, dx);                  // The new angle of the segment
targetX = xin - cos(angle[i]) * segLength; // The new target x position for the next segment
targetY = yin - sin(angle[i]) * segLength; // The new target y position for the next segement
}
``````

The key thing to realize here is that you are updating the `targetX` and `targetY` values.
And the way you do that is by computing the new base position of the current segment. So the position of the base point of the current segment is stored in `targetX` and `targetY`.

Then you go back in your draw loop for this:

``````for(int i=1; i<numSegments; i++) {
reachSegment(i, targetX, targetY);
}
``````

Here you are looping through the remaining segments (you already have done the first one).
The difference is that now the target is not `mouseX` and `mouseY` anymore but `targetX` and `targetY`. And as we have seen, `targetX` and `targetY` are updated everytime you call the function so it correspond to the base of the previous segment.

So basically, the idea is to rotate the last segment to point toward the mouse, then compute where the base of that segment would be, store that position in `targetX` and `targetY` then do the same for the other segments using the base of the upper segment as a target.

1 Like

Ah, thanks a lot!
That really helped me to understand what’s going on 1 Like