# Tangent of curvevertex

**URL:** <https://discourse.processing.org/t/tangent-of-curvevertex/13988>\
**Category:** Coding Questions\
**Created:** [September 14, 2019, 2:06pm UTC](https://discourse.processing.org/t/tangent-of-curvevertex/13988 "2019-09-14T14:06:35Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![arcadeperfect](https://avatars.discourse-cdn.com/v4/letter/a/7ab992/32.png) [@arcadeperfect](https://discourse.processing.org/u/arcadeperfect)\
**Post date:** [September 14, 2019, 2:06pm UTC](https://discourse.processing.org/t/tangent-of-curvevertex/13988/1 "2019-09-14T14:06:35Z")

</div>

Hello!

Is there a way to get the normal or tangent of a vertex in a line drawn with [curveVertex()](https://processing.org/reference/curveVertex_.html)?

I have found [curveTangent()](https://processing.org/reference/curveTangent_.html) and [bezierTangent()](https://processing.org/reference/bezierTangent_.html) but I don’t see a way to do it with a curveVertex shape.

Thanks!

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [October 7, 2019, 12:46am UTC](https://discourse.processing.org/t/tangent-of-curvevertex/13988/2 "2019-10-07T00:46:43Z")

</div>

I think the approach here would be to use the curves points to find its derivative, then you could find the normal, only issue I can see with this is resolution.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 7, 2019, 2:48am UTC](https://discourse.processing.org/t/tangent-of-curvevertex/13988/3 "2019-10-07T02:48:11Z")

</div>

hi, actually that is the same

-a- curve and curveVertex make the SAME line:

```auto
  curve(cp1.x, cp1.y, p1.x, p1.y, p2.x, p2.y, cp2.x, cp2.y);

  beginShape();
  curveVertex(cp1.x, cp1.y); // cp
  curveVertex(p1.x, p1.y);
  curveVertex(p2.x, p2.y);
  curveVertex(cp2.x, cp2.y); //cp
  endShape();

```

-b- curve Point and curve Tangent  
use a point at ( t 0 … 1 )  
on that by curve OR curve Vertex made line

-c- the  
**curve Tangent reference**

> **[curveTangent() / Reference](https://processing.org/reference/curveTangent_.html)**
>
> Calculates the tangent of a point on a curve. There's a good definition of tangent on Wikipedia.

seems to have a documentation mistake [reported](https://github.com/processing/processing-docs/issues/780)  
about points and controlpoints, while in the shown example  
the used numbers shown for curvePoint and curveTangent are in the same sequence.

-d-  
something to play:

```auto

PVector cp1 = new PVector(84, 91);
PVector p1 = new PVector(84, 91);
PVector p2 = new PVector(228, 219);
PVector cp2 = new PVector(228, 219);

float t = 0.2;
PVector p = new PVector(0, 0); // point at 't'
PVector pt = new PVector(0, 0); // tangent
PVector pn = new PVector(0, 0); // normal to tangent ( 90 deg rotated )

void setup() {
  size(300, 300);
  print("use mouse X Y for control point 1 \nMouseWheel Plus Plus: key [t] and turn mousewheel: change t");
}

void draw() {
  background(200, 200, 0);
  noFill();
  strokeWeight(1);
  stroke(0, 200, 0);
  // for play:
  cp1.set(mouseX, mouseY);
  stroke(100, 0, 0);
  beginShape();
  curveVertex(cp1.x, cp1.y); // cp
  curveVertex(p1.x, p1.y);
  curveVertex(p2.x, p2.y);
  curveVertex(cp2.x, cp2.y); //cp
  endShape();

  // https://processing.org/reference/curvePoint_.html
  p.set( curvePoint(cp1.x, p1.x, p2.x, cp2.x, t), curvePoint(cp1.y, p1.y, p2.y, cp2.y, t) );
  // https://processing.org/reference/curveTangent_.html !! WRONG
  float tx = curveTangent(cp1.x, p1.x, p2.x, cp2.x, t); // !! refrerence say ( p1,cp1,cp2,p2 )
  float ty = curveTangent(cp1.y, p1.y, p2.y, cp2.y, t);
  float a = atan2(ty, tx);
  pt.set( cos(a)*100 + p.x, sin(a)*100 + p.y );
  a -= PI/2.0;
  pn.set( cos(a)*100 + p.x, sin(a)*100 + p.y );

  stroke(0, 200, 0); // show curve AND curveVertex is same!
  curve(cp1.x, cp1.y, p1.x, p1.y, p2.x, p2.y, cp2.x, cp2.y);

  stroke(100, 0, 0);
  beginShape();
  curveVertex(cp1.x, cp1.y); // cp
  curveVertex(p1.x, p1.y);
  curveVertex(p2.x, p2.y);
  curveVertex(cp2.x, cp2.y); //cp
  endShape();

  circle(p1.x, p1.y, 5);
  circle(p2.x, p2.y, 5);
  stroke(200);
  line(cp1.x, cp1.y, p1.x, p1.y);
  stroke(200, 0, 200);
  circle(p.x, p.y, 10);
  strokeWeight(2);
  line(p.x, p.y, pt.x, pt.y);
  line(p.x, p.y, pn.x, pn.y);
}

void mouseWheel(MouseEvent event) {
  float e = event.getCount(); //println(e);
  if ( keyPressed && key == 't' ) { 
    t += e*0.01 ;
    println(" key t: t= "+t);
  }
}

```

 ![curve_point_tangent](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6775a85a4f2181f571b6e85e807a9e77dc9b2c5b.png)

* * *

so easy answer:

> use curveTangent for curve AND curveVertex.