I'm trying to add lines to points on a curve perpendicular to the tangent at the point. This is similar to the second example for bezierTangent here: http://processing.org/reference/bezierTangent_.html

The problem is this doesn't work in all cases. Below is code showing an example where it works, and one where it doesn't.

Can anyone explain where this is going wrong Do I have to treat the angle differently for each quadrant

applet in action

Code:

void setup() {
  size(600, 600, P3D); 
  background(255);

  translate(width/2, height/2, 300);

  int steps = 8;
  float thickness = 20;

  //new TangentCurve(steps, thickness, 0,0, 0,-50, 100,-50, 100,0);
  //new TangentCurve(steps, thickness, 0,0, 0,50, 90,40, 100,0);
  new TangentCurve(steps, thickness, 85, 20, 10, 10, 90, 90, 15, 80);
  //new TangentCurve(steps, thickness, 0,0, 30,0, 70,30, 50,60);
  //new TangentCurve(steps, thickness, 0,0, -30,0, -50,30, -50,60);
  //new TangentCurve(steps, thickness, 0,0, 30,0, 50,-30, 50,-60);
  new TangentCurve(steps, thickness, 0,0, -30,20, -60,-40, -50,-60);

}

class TangentCurve {

  int steps;
  float thickness;
  float x1, y1, cx1, cy1, cx2, cy2, x2, y2;

  TangentCurve(int steps_, float thickness_, float x1_, float y1_, float cx1_, float cy1_, float cx2_, float cy2_, float x2_, float y2_) {
    steps = steps_;
    thickness = thickness_/2;
    x1 = x1_;
    y1 = y1_;
    cx1 = cx1_;
    cy1 = cy1_;
    cx2 = cx2_;
    cy2 = cy2_;
    x2 = x2_;
    y2 = y2_;

    render();
  }

  void render() {
    // Green tangent lines
    stroke(0, 200, 0);
    for (int i = 0; i <= steps; i++) {
	float t = i / float(steps);
	float x = bezierPoint(x1, cx1, cx2, x2, t);
	float y = bezierPoint(y1, cy1, cy2, y2, t);
	float tx = bezierTangent(x1, cx1, cx2, x2, t);
	float ty = bezierTangent(y1, cy1, cy2, y2, t);
	
	float a = atan2(ty, tx);
	a += PI/2.0;

	float myX1 = x - cos(a)*thickness;
	float myY1 = y - sin(a)*thickness;
	float myX2 = x + cos(a)*thickness;
	float myY2 = y + sin(a)*thickness;

	line(myX1, myY1, myX2, myY2);
    }
    
    // Red control handles.
    stroke(255,0,0);
    line(x1,y1,cx1,cy1);
    line(x2,y2,cx2,cy2);
    
    // Black bezier curve
    noFill();
    stroke(0);
    bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2);
  }
}
 

Perfect - many thanks for that! I've been banging my head against that problem for a while now. Glad to know my maths was relatively sane.