# Wrong tangent at the end of the curve

**URL:** <https://discourse.threejs.org/t/wrong-tangent-at-the-end-of-the-curve/49156>\
**Category:** Questions\
**Tags:** curve, tangent\
**Created:** [March 16, 2023, 8:33am UTC](https://discourse.threejs.org/t/wrong-tangent-at-the-end-of-the-curve/49156 "2023-03-16T08:33:46Z")\
**Posts on this page:** 1\
**Showing post:** 9

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [March 23, 2023, 7:12am UTC](https://discourse.threejs.org/t/wrong-tangent-at-the-end-of-the-curve/49156/9 "2023-03-23T07:12:57Z")

</div>

Here is what I have found so far. I hope it will help you.

First I added visualization of the tangents along the curve. These are the tiny red arrows. In this way, I got confirmation that one of the tangents (near the top) is wrong, as it points in a drastically different direction than the others:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/f/ef8d6f0e532daf7df462c37e11a0c179cd9ccb14.jpeg)

Then I found that inside `morph()` you loop through array `t[...]`. However, it contains wrong values for the top front. For example, these lines:

```javascript
g.curve.getTangent( g.t[idx * 3], tangent );
console.log( idx, g.t[idx * 3] ); // added by me

```

produce:

```javascript
16 1.0018504347826087
17 1.0018504347826087
...
31 1.0018504347826087

```

So, the code tries to get a tangent at position beyond 1, while the curve is defined only in range [0,1].

When I add “protection” for out-of-range values, the top of the cylinder looks fine:

```javascript
g.curve.getTangent( Math.min(g.t[idx * 3],1) , tangent ); // added Math.min

```

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/5/559db9b5c4beb43d5c08718fa0b684228481e634.jpeg)

My conclusion is that the out-of-range values in array `t[...]` cause the problem. The wrong values are generated by a call to `makeBoundaryFront( g.top, g.div4Top, -g.phiTop, -1 )`, so maybe this is the place where the error is caused.

An easy fix could be to clamp the relative height in `makeBoundaryFront`:

```javascript
g.t.push( THREE.MathUtils.clamp( (y-g.cylBtm )/g.height,0,1), ... );

```

but a better solution would be to generate only good values without clamping.

---

_[View the full topic](https://discourse.threejs.org/t/wrong-tangent-at-the-end-of-the-curve/49156)._