Tangent line of curve

Processing Coding Questions
1

Hi everyone!!!
I’m new at coding and I have a problem, I would like to draw a program where there is a bicorn curve and every time the mouse is on the curve, it can be generated a tangent line, so on infinite points, but for now I just have the static drawing but I don’t know how to generate a tangent line on the curve as the mouse move…

This is all I have for now

void setup(){
size(500,500);
}

void draw(){
  background(0);
   translate(width/2, height/2);
   
   noFill();
   stroke(255);
   beginShape();
   for(float a=0; a < TWO_PI; a+=0.01) {
     float r=200;
     float x=(r)*sin (a);
     float y=(-r)*(pow(cos(a),2)/(2-cos(a)));
     vertex(x,y);
   }
 endShape();
 
}

THANK YOU SO MUCH !!! :smile:

1 Like
2

Hello,

Welcome to the forum.

Please format your code:
https://discourse.processing.org/faq#format-your-code

3

One method:

Currently you draw your bicorn with:

float x=(r)*sin (a);

Say you have your mouseX as input. Your mouseX = 50. What is a solution for a for a point on your bicorn that also has x = 50?

If you can solve for a, then you know r (constant) and x (the mouse) – so now you can solve for y on your bicorn. Now you know a point on your bicorn that is x-aligned with the mouse.

To test, add this to the end of your draw:

  float mx = mouseX-width/2;
  float my = mouseY-height/2;
  ellipse(mx, my, 10, 10);
  mouseCurvePoint(mx);

…and create a mouseCurvePoint function to draw a circle.

void mouseCurvePoint(float x) {

  // solve 'a' here given x, r
  
  // solve 'y' here given x, r, a

  println(x, a);
  ellipse(x, y, 10, 10); // mark your solution point
}

Screen Shot 2020-04-11 at 2.58.51 PM
Screen Shot 2020-04-11 at 2.58.51 PM934×556 3.17 KB

Now that you have a point, you need to solve for the slope at that point in order to know the slope of your tangent line. You can then create a line segment of that slope that passes through your point using the slope-intercept form of a line – and you have your tangent!

1 Like