Search code examples
javascriptgraphtrigonometrycurvepolar-coordinates

Polar curve equation with plus-minus sign (±) in Javascript

I am trying to draw polar curves on HTML canvas using Javascript. What should I do when I want to convert plus-minus sign (±)?

Example: Watt's curve

Math representation of Watt's curve

Below is what I tried. Since I need to get value of r, I enclose entire equation with square root, also I use it's absolute value, otherwise I get null for trying to get square root if number is negative. Following code draws something that looks like a polar curve, but not Watt's curve.

var a = 1;
var b = 1;
var c = 2;
r = Math.sqrt(Math.abs(Math.pow(b, 2) - Math.pow(a * Math.sin(t) * Math.sqrt(Math.abs(Math.pow(c, 2) - Math.pow(a, 2) * Math.pow(Math.cos(t), 2), 2)), 2) ));

I get similar deviations of expected results with other equations containing plus-minus sign (ones without it work fine), so I suppose the problem is that I wrongly 'translate' this symbol. What do I do wrong?

Solution

  • It looks like there is an incorrect multiplication of a squared theta with the inner square root (Math.sin(t) * Math.sqrt(...)).

    To plot the equation, convert the plus-minus sign into two equations:

    var a = 1;
var b = 1;
var c = 2;

var b2 = Math.pow(b, 2);
var asint = a * Math.sin(t);
var sqroot = Math.sqrt(Math.pow(c, 2) - Math.pow(a, 2) * Math.pow(Math.cos(t), 2), 2);

var r = Math.sqrt(b2 - Math.pow(asint + sqroot, 2));
// now plot r
r = Math.sqrt(b2 - Math.pow(asint - sqroot, 2));
// now plot r again

    The Math.abs() shouldn't be necessary.