I have this Desmos graph: here
I was wondering if there was someone who could maybe provide some guidance for translating this into JavaScript. I understand most of the math, I just lack the knowledge on how to represent it in JS. My main goal is to calculate the position of rotating points on a JS canvas. I have already translated the canvas so that the coordinate system mirrors one of a mathematical graph.
ctx.translate(c.width/2, c.height/2);
ctx.scale(1, -1)
I would like to have 3 variables. The x and y of the player's current pos, the point of rotation x and y, and the target x and y.
Please let me know if I can provide more detail or any other info that could be of use.
-Thanks in advance.
you can do it with builtin api from canvas, example as below.
// x coordinate
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(150, 0);
ctx.stroke();
// y coordinate
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, 150);
ctx.stroke();
// point
ctx.beginPath();
ctx.arc(75, 75, 2, 0, Math.PI * 2, true)
ctx.fill();
see details in https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
for complex graph, you can use d3.js library, see https://d3js.org/