Processing examples: Reach2

Processing Coding Questions
1

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!

2

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
3

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);
4

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
5

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

1 Like