Рисование дельтовидной кривой на холсте - PullRequest
Новая
       61

Рисование дельтовидной кривой на холсте

0 голосов
/ 09 мая 2018

https://jsfiddle.net/prew217o/

Как вы можете видеть, я пытался преобразовать дельтовидную формулу в код, но почему она не работает? Интересно, что я сделал не так, потому что формула такая же, как в статье в Википедии. 

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

1 Ответ

0 голосов
/ 09 мая 2018

Вы используете arcsin и arccos вместо a * sin и a * cos. Измените свой код так, чтобы получить кривую, которая на самом деле выглядит как дельтовидная кривая: 

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

Ссылка на скрипку

PS: в статье в Википедии используется b = 3 * a. Я использовал то же самое в своей скрипке.

...