Tangent to parametric curve

Come on please, im not going to use that app anymore, is because they want us to do so, related with maths, but it’s not really related.
If not Ican send you my code and you guide me to arrive to the sollution
Thanks

OK here is the code tor draw the parametric curve, it is basically the same as yours but gives you a clean starting place.

I have marked in the code where you will be putting the he explanation and will explain what you need to do in the next discussion.

float a=300;
float w = 100;

void setup() {
  size(750, 750);
}
void draw() {
  background(255);
  //AXIS(height,width);
  translate(width/2, height/2);
  for (float t=0; t<2*PI; t=t+0.001) {
    stroke(255, 128, 0);
    strokeWeight(1.25);
    point(a*(t-pow(t, 3)), -a*(pow(t, 2)-pow(t, 4)));
    point(-a*(t-pow(t, 3)), -a*(pow(t, 2)-pow(t, 4)));
  }
 
  pushMatrix();
  // Set colours for point and tangent line
  fill(0, 128, 0);
  stroke(0, 128, 0);
  strokeWeight(1);

  // ####################################################
  // the code to draw the tangent will go here
  // #################################################### 

  popMatrix();
}
1 Like

In my solution I have used the parametric equations rather than implicit so we hae

x = t - t^3 
y = t^2 - t^4

So the first thing is to find the derivatives of these functions with respect to t which is a simple differentiation to get

x' = 1 - 3*t^2 
y' = 2*t - 4*t^3

The tangent angle at any point on the parametric curve is given by the the formula
angle = atan(-y' / x')

So in my solution I

Get a t position by mapping the mouse x position to the range -1 to 1
Use this value of t to find the XY coordinates for the point on the curve
translate the graphics matrix to [x, y]
rotate the matrix by the tangent angle
draw the tangent

and there you have it :smile:

2 Likes

That would be a nice article for your blog…!

:wink:

3 Likes

God hahaha I don’t know how to do the rest…I’m an epic disaster

If you produced the original code at the start of this discussion then you should be able to do it. At least make an effort. Look I will even give you a start

// Map the mouseX poistion to give us a value in the range 1.57 to -1.57
// this range of t covers the visible part of the curve
float t = map(mouseX, 0, width, PI/2, -PI/2); 
// I have extracted these equations from your code
float x = a*(t-pow(t, 3));
float y = -a*(pow(t, 2) - pow(t, 4));
// Calculate the derivatives
float dxt = ?????
float dyt = ?????
// Calculate the tangent angle
float tangle = ?????
// Translate to x, y
// Rotate by tangle
// Draw a small ellipse for the point
// Draw the tangent line

and all this goes in the space shown in the code i posted.

You have 2 days to get this done - it should be a doddle from here even for an “epic disaster” :laughing:

I will come back in 3 days to see how you got on. :+1:

When you say derivatives are you referring to that???

The derivative of a function is the equation that represents the slope of the curve at any point along its’ length and is got by differentiating the original function.

I gave the formulae for the derivatives a few posts ago and although you have coded the y derivative you have made a mistake with the x derivative.

Also the translate is to location [x,y] NOT [dxt, dyt] remember you want to move the drawing origin to the point on the curve.

Sorry for bothering you, but in the ellipse and the line, the origin point, has to be mouseX and mouseY?

Just try it and don’t ask

This is spoonfeeding…

1 Like

NO - I am talking about drawing the tangent at a point on the curve determined by the parametric value of ‘t’ why on earth would I want it where the mouse happens to be LOL.

The x and y were just before we did the dxt and dyt calculations.

1 Like

@Chrisir I should have said that LOL

1 Like

BTW what is the course you are studying?

1 Like

1st of Civil Engeneering

Thanks for everything anyway, I don’t think I will be able to finish the program, but still, thank you very much

Oh, yes, you will!

It’s only 10 minutes to go

Almost there!!!

1 Like

To top it off, they just told me that the line only has to appear if I only stand on the curve

The line has to appear only when the mouse is on the curve?

That’s not hard, I did this with dist() already

Jesus hahha, I’m going mad
Yes, only when the mouse is on the curve

1 Like