Tangent of curvevertex

Processing Coding Questions
1

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
2

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.

3

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

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

curve_point_tangent
curve_point_tangent1121×892 31.9 KB

so easy answer:

use curveTangent for curve AND curveVertex.