0

https://jsfiddle.net/prew217o/

As you can see ive tried converting the deltoid formula to code but why isnt it working? I wonder what ive done wrong because the formula is the exact same one as in the wikipedia article.

const ctx = document.getElementById("myCanvas").getContext("2d");
ctx.translate(150, 75);
var t = 0;
var a = 100;
var b = 80;

function y(t) { 
    return (b-a) * Math.cos(t) + Math.acos(((b-a) / a) * t);
}

function x(t) { 
    return (b-a) * Math.sin(t) - Math.asin(((b-a) / a) * t);
}
var nx = 0;
var ny = 0;

function animate() {
    t += 0.1;

  ctx.beginPath();
  ctx.moveTo(nx, ny);
  ctx.lineTo(x(t), y(t));
  ctx.stroke();

    nx = x(t);
  ny = y(t);
  console.log(ny)
  requestAnimationFrame(animate);
}
animate();
Asperger
  • 3,064
  • 8
  • 52
  • 100

1 Answers1

1

You're using arcsin and arccos instead of a * sin and a * cos. Change your code like so to get a curve that actually looks like a deltoid curve:

var a = 20;
var b = 3 * a;

function x(t) { 
    return (b-a) * Math.cos(t) + a * Math.cos(((b-a) / a) * t);
}

function y(t) { 
    return (b-a) * Math.sin(t) - a * Math.sin(((b-a) / a) * t);
}

Link to the fiddle

PS: The wikipedia article uses b = 3 * a. I used the same in my fiddle.

Jan Wendland
  • 1,350
  • 9
  • 17
  • Hi, I just noticed after drawing the deltoid, it continues drawing the again lines on the exact same spot. You can see that the line gets thicker. – Daan May 09 '18 at 09:54
  • I think it continues to draw it over and over unless you set a condition for it to stop – Jonas Grumann May 09 '18 at 09:55
  • Okay cool, thanks for explaining. Wasn't looking at the code at all, just thought it might have been unwanted. – Daan May 09 '18 at 09:56
  • ah sorry i interpreted it wrong. I though it was acos – Asperger May 09 '18 at 09:57