Tangent to parametric curve

Back to work, you can do it

Don’t get discouraged

1 Like

If you don’t manage to complete the assignment then just hand in what you have achieved.

It is better to hand something in that is partly right, than hand in nothing at all. :grinning:

I am working on a solution where you place the mouse on a point and it gives the tangent for that spot.

I am still struggling with that.

In my opinion, there should be 2 derivatives for x,y

one for the function:

point(a*(t-pow(t, 3)), -a*(pow(t, 2)-pow(t, 4)));

and one for the other:

 point(-a*(t-pow(t, 3)), -a*(pow(t, 2)-pow(t, 4)));

The initial one works only for one “arm”; how would the other be (for

 point(-a*(t-pow(t, 3)), -a*(pow(t, 2)-pow(t, 4)));

)

x' = 
y' =

Thanks!!!

Chrisir

I want to summarise the mathematics I used in my video and as a mini primer on parametric curves…

The curve has a single formula
(x^4)+(y^3)-((x^2)*y)=0
This is called the implicit formula and it has a single implicit derivative
y' = dy/dx = (-4*x^2 + 2*x*y)/(3*y^2 - x^2)
(I assume this was provided by mcaaaalo so I am not sure how accurate this is.)

The problem is that we would like these functions to look like
y = f(x); and
y' = g(x)
in other words both y and the derivative of y can be expressed as a function of x alone but that is impossible (unless you know different :grinning:)

Fortunately we can change the implicit formulae into a pair of parametric equations by introducing a third variable t they are
x = t - t^3
y = t^2 - t^4
The curve is exactly the same for both implicit and parametric representations.

We simply vary the value of t and for each value calculate the x and y values and plot them. Now we can simplify the drawing code form

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

to this

for (float t=-2*PI; t<2*PI; t=t+0.001) {
    stroke(255, 128, 0);
    strokeWeight(1.25);
    //               a * x                            a * y 
    point(a*(t-pow(t, 3)), -a*(pow(t, 2)-pow(t, 4)));  
  }

This shows that we do in fact have a single continuous (smooth) curve, it just happens to be symmetrical about the y axis. Since we have a point [x,y] which we know to be on the curve I could have used the implicit formula to get the tangent slope at that point but I continued with the parametric equations. So the next step was to differentiate the two parametric equations to give us
x' = 1 - 3*t^2 and
y' = 2*t - 4*t^3
now to get the tangent slope we divide -y' by x', the - sign is because on a computer display the ‘y’ axis goes down the screen unlike in maths where it goes up.
To get the tangent angle we find the arc tangent of the slope i.e.
angle = arc tangent(-y' / x')
in Java
angle = atan( -(1 - 3*t*t) / (2*t*t - 4*t*t*t) );

So for any parametric value of t we can find the point and the tangent angle with
x = t - t*t*t
y = t*t - t*t*t*t
angle = atan( -(1 - 3*t*t) / (2*t*t - 4*t*t*t) )
I have replaced the power calculations with simple multiplications.

2 Likes

Fantastic resume, thank you!


more or les I have it, now it goes to make the line rotate the angle hahaha
and then to work with the mouse only.
Which is the next step to do??

Do you have this?

Regards, Chrisir

I have deleted this post

It is not showing the tangent in your picture!

NOO hahaha, this is what i need to fix, but i dont’t know how

Show the code you have

This is what I actually have
The axis code is okay is in another tab

float a=300;
float w = 100;

void setup() {
  size(750, 750);
}
void draw() {
  background(255);
  AXIS(height,width);
  fill(0);
  triangle(width-40,height/2,width-50,(height/2)+5,width-50,(height/2)-5);
  triangle(height/2,40,(width/2)-5,50,(width/2)+5,50);
  
  translate(width/2, height/2);
  for (float t=0; t<2*PI; t=t+0.001) {
    stroke(255, 0, 0);
    strokeWeight(2.5);
    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();
  
  fill(0, 255, 0);
  stroke(0, 255, 0);
  strokeWeight(1);

float t = map(mouseX, 0, width, PI/2, -PI/2); 
float x = a*(t-pow(t, 3));
float y = -a*(pow(t, 2) - pow(t, 4));
float dxt = (1-3*t*t);
float dyt = (2*t)-(4*t*t*t);

translate(x,y);
stroke(0,0,255);
fill(0,0,255);
ellipse(t - t*t*t,t*t - t*t*t*t,5,5);
line((t - t*t*t)-w,(t*t - t*t*t*t)-w,(t - t*t*t)+w,(t*t - t*t*t*t)+w);
stroke(0,255,0);
float tangle =atan(( -(1-3*t*t) / (2*t) - 4*t*t*t)); 
rotate(tangle);

  popMatrix();
}

This you need after rotate

Good!! But now the line is not fixed, but it stills not tangent to the curve :frowning:

You have translated to position [x,y] so drawing commands should use that as the origin. So rearranging your

  translate(x, y);
  stroke(0, 0, 255);
  fill(0, 0, 255);
  ellipse(0, 0, 5, 5);
  stroke(0, 255, 0);
  float tangle = atan(-dyt / dxt); 
  rotate(tangle);
  line(-w, 0, w, 0);

And now If I have to make the ellipse and the line deppending on muy mouse x and y position, I mean, i have to be on the curve to make the line appear.
At the end I’m learning more than I expected haha

1 Like