# Tangent to parametric curve

**URL:** <https://discourse.processing.org/t/tangent-to-parametric-curve/19788>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [April 14, 2020, 10:12pm UTC](https://discourse.processing.org/t/tangent-to-parametric-curve/19788 "2020-04-14T22:12:15Z")\
**Posts on this page:** 16\
**Page:** 3

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 16, 2020, 12:25pm UTC](https://discourse.processing.org/t/tangent-to-parametric-curve/19788/41 "2020-04-16T12:25:06Z")

</div>

Back to work, you can do it

Don’t get discouraged

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [April 16, 2020, 1:10pm UTC](https://discourse.processing.org/t/tangent-to-parametric-curve/19788/42 "2020-04-16T13:10:33Z")

</div>

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. 😀

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 16, 2020, 2:13pm UTC](https://discourse.processing.org/t/tangent-to-parametric-curve/19788/43 "2020-04-16T14:13:26Z")

</div>

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

> [@quark](#):
>
> x’ = 1 - 3_t^2  
> y’ = 2_t - 4\*t^3

I am still struggling with that.

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

one for the function:

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

```

and one for the other:

```auto
 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

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

```

)

```auto
x' = 
y' =

```

Thanks!!!

Chrisir

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [April 16, 2020, 5:46pm UTC](https://discourse.processing.org/t/tangent-to-parametric-curve/19788/44 "2020-04-16T17:46:00Z")

</div>

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 😀)

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

```auto
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

```auto
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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 16, 2020, 5:57pm UTC](https://discourse.processing.org/t/tangent-to-parametric-curve/19788/45 "2020-04-16T17:57:52Z")

</div>

Fantastic resume, thank you!

---

<div class="post-metadata">

**Author:** ![mcaaaalvo](https://avatars.discourse-cdn.com/v4/letter/m/6a8cbe/32.png) [@mcaaaalvo](https://discourse.processing.org/u/mcaaaalvo)\
**Post date:** [April 16, 2020, 6:42pm UTC](https://discourse.processing.org/t/tangent-to-parametric-curve/19788/46 "2020-04-16T18:42:46Z")

</div>

![Screenshot 2020-04-16 at 20.41.24](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5790078f793576beb6942af0cc9c9dbf60ffdeda.jpeg)  
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??

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 16, 2020, 7:35pm UTC](https://discourse.processing.org/t/tangent-to-parametric-curve/19788/47 "2020-04-16T19:35:59Z")

</div>

> [@quark](#):
>
> To get the tangent angle we find the arc tangent of the slope i.e.  
> `angle = arc tangent(-y' / x')`

Do you have this?

Regards, Chrisir

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [April 16, 2020, 8:11pm UTC](https://discourse.processing.org/t/tangent-to-parametric-curve/19788/48 "2020-04-16T20:11:23Z")

</div>

I have deleted this post

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [April 16, 2020, 8:12pm UTC](https://discourse.processing.org/t/tangent-to-parametric-curve/19788/49 "2020-04-16T20:12:55Z")

</div>

It is not showing the tangent in your picture!

---

<div class="post-metadata">

**Author:** ![mcaaaalvo](https://avatars.discourse-cdn.com/v4/letter/m/6a8cbe/32.png) [@mcaaaalvo](https://discourse.processing.org/u/mcaaaalvo)\
**Post date:** [April 16, 2020, 8:45pm UTC](https://discourse.processing.org/t/tangent-to-parametric-curve/19788/50 "2020-04-16T20:45:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [April 16, 2020, 8:48pm UTC](https://discourse.processing.org/t/tangent-to-parametric-curve/19788/51 "2020-04-16T20:48:57Z")

</div>

Show the code you have

---

<div class="post-metadata">

**Author:** ![mcaaaalvo](https://avatars.discourse-cdn.com/v4/letter/m/6a8cbe/32.png) [@mcaaaalvo](https://discourse.processing.org/u/mcaaaalvo)\
**Post date:** [April 16, 2020, 9:12pm UTC](https://discourse.processing.org/t/tangent-to-parametric-curve/19788/52 "2020-04-16T21:12:59Z")

</div>

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

```auto
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();
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 16, 2020, 9:36pm UTC](https://discourse.processing.org/t/tangent-to-parametric-curve/19788/53 "2020-04-16T21:36:46Z")

</div>

> [@mcaaaalvo](#):
>
> line(-w,0,w,0);

This you need after rotate

---

<div class="post-metadata">

**Author:** ![mcaaaalvo](https://avatars.discourse-cdn.com/v4/letter/m/6a8cbe/32.png) [@mcaaaalvo](https://discourse.processing.org/u/mcaaaalvo)\
**Post date:** [April 16, 2020, 9:42pm UTC](https://discourse.processing.org/t/tangent-to-parametric-curve/19788/54 "2020-04-16T21:42:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [April 16, 2020, 10:14pm UTC](https://discourse.processing.org/t/tangent-to-parametric-curve/19788/55 "2020-04-16T22:14:04Z")

</div>

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

```auto
  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);

```

---

<div class="post-metadata">

**Author:** ![mcaaaalvo](https://avatars.discourse-cdn.com/v4/letter/m/6a8cbe/32.png) [@mcaaaalvo](https://discourse.processing.org/u/mcaaaalvo)\
**Post date:** [April 16, 2020, 10:32pm UTC](https://discourse.processing.org/t/tangent-to-parametric-curve/19788/56 "2020-04-16T22:32:50Z")

</div>

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

[Previous page](https://discourse.processing.org/t/tangent-to-parametric-curve/19788.md?page=2)