Tangent to the curve - processing

Question

I’m new at coding and I have a problem, I would like to draw a program where there is a curve and but for now I just have the static drawing but I don’t know how to generate a tangent line on the curve thanks to his derivate, as the mouse move…
This is all I have for now
void draw(){
background(255);
noFill();
stroke(0);
beginShape();
for(float a=0; a < TWO_PI; a+=0.01) {
float r=78;
float x=sin (a);
float y=(pow(cos(a),2)/(2-cos(a)))
my idea was to make a cursor, that moved by the curve, and every tima generated is own tangent.
THANK YOU SO MUCH !!!!!

Answer 1

I recommend to use PVector for the computation.
Create a function which computes a point on the shape:
PVector fSahpe(float a) {
float r = 200;
float x = r * sin(a);
float y = -r *(pow(cos(a),2)/(2-cos(a)));
return new PVector(x, y);
}
You have to find the point on the shape which is closest to the mouse position. Find the nearest point while you draw the shape. Note, since the shape is translated, the mouse position which is used to compare the mouse position to a point on the shape has to be shifted in the opposite direction:
PVector m = new PVector(mouseX-width/2, mouseY-height/2);
dist() can be used to compute the Euclidean distance between 2 points:
float mindist = 1000;
float mina = 0;
for(float a=0; a < TWO_PI; a+=0.01) {
PVector p = fSahpe(a);
// [...]
float dist = PVector.dist(p, m);
if (dist < mindist) {
mindist = dist;
mina = a;
}
}
Define a threshold distance. If the distance of the mouse to the closest point on the curve falls below the distance, the draw the tangent:
if (mindist < 10) {
// [...] draw tangent
}
Compute 2 points on the curve, which are close to each another, where one point is the point which is closest to the mouse cursor:
PVector p0 = fSahpe(mina);
PVector p1 = fSahpe(mina+0.01);
This 2 points ar on the approximated tangent. Compute the vector from on point to the other and scale it to a certain length (the length is the half length of the tangent):
PVector dir = PVector.sub(p1, p0);
dir.normalize().mult(100);
Compute the start point and the end point of the tangent:
PVector l0 = PVector.add(p0, dir);
PVector l1 = PVector.sub(p0, dir);
See the complete example:
void setup() {
size(500, 500);
}
PVector fSahpe(float a) {
float r = 200;
float x = r * sin(a);
float y = -r *(pow(cos(a),2)/(2-cos(a)));
return new PVector(x, y);
}
void draw(){
background(0);
translate(width/2, height/2);
noFill();
strokeWeight(1);
stroke(255);
float mindist = 1000;
float mina = 0;
PVector m = new PVector(mouseX-width/2, mouseY-height/2);
beginShape();
for(float a=0; a < TWO_PI; a+=0.01) {
PVector p = fSahpe(a);
vertex(p.x, p.y);
float dist = PVector.dist(p, m);
if (dist < mindist) {
mindist = dist;
mina = a;
}
}
endShape();
if (mindist < 10) {
PVector p0 = fSahpe(mina);
PVector p1 = fSahpe(mina+0.01);
PVector dir = PVector.sub(p1, p0);
dir.normalize().mult(100);
PVector l0 = PVector.add(p0, dir);
PVector l1 = PVector.sub(p0, dir);
strokeWeight(3);
stroke(255, 0, 0);
line(l0.x, l0.y, l1.x, l1.y);
}
}