# Processing examples: Reach2

**URL:** https://discourse.processing.org/t/processing-examples-reach2/29143
**Category:** Coding Questions
**Created:** [April 5, 2021, 9:00pm UTC](https://discourse.processing.org/t/processing-examples-reach2/29143 "2021-04-05T21:00:50Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![pokelan](https://avatars.discourse-cdn.com/v4/letter/p/b19c9b/32.png) [@pokelan](https://discourse.processing.org/u/pokelan)
#### Post date: [April 5, 2021, 9:00pm UTC](https://discourse.processing.org/t/processing-examples-reach2/29143/1 "2021-04-05T21:00:50Z")

</div>

Hi all

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

And some parts confuse me.

```auto
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?

```auto
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!

---

<div class="post-metadata">

### Author: ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)
#### Post date: [April 5, 2021, 9:36pm UTC](https://discourse.processing.org/t/processing-examples-reach2/29143/2 "2021-04-05T21:36:38Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![pokelan](https://avatars.discourse-cdn.com/v4/letter/p/b19c9b/32.png) [@pokelan](https://discourse.processing.org/u/pokelan)
#### Post date: [April 5, 2021, 9:42pm UTC](https://discourse.processing.org/t/processing-examples-reach2/29143/3 "2021-04-05T21:42:52Z")

</div>

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

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

```

---

<div class="post-metadata">

### Author: ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [April 6, 2021, 6:15pm UTC](https://discourse.processing.org/t/processing-examples-reach2/29143/4 "2021-04-06T18:15:59Z")

</div>

`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`:

```auto
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:

```auto
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:

```auto
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.

---

<div class="post-metadata">

### Author: ![pokelan](https://avatars.discourse-cdn.com/v4/letter/p/b19c9b/32.png) [@pokelan](https://discourse.processing.org/u/pokelan)
#### Post date: [April 6, 2021, 10:15pm UTC](https://discourse.processing.org/t/processing-examples-reach2/29143/5 "2021-04-06T22:15:08Z")

</div>

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