# Tangent of curvevertex

Hello!

Is there a way to get the normal or tangent of a vertex in a line drawn with curveVertex()?

I have found curveTangent() and bezierTangent() but I don’t see a way to do it with a curveVertex shape.

Thanks!

1 Like

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.

hi, actually that is the same

-a- curve and curveVertex make the SAME line:

``````  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
https://processing.org/reference/curveTangent_.html
seems to have a documentation mistake reported
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:

``````
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);
}
}

``````