How to rotate one object at another (slowly)

Question

I have been looking around for this function and thus far I just can't find any I can make any sense of. I already have a rotating function to make it equal to the position but slowly is proving to be a bit harder with 0-360 and all.

I am using a html canvas 2d context to render the objects on a Cartesian coordinate system .

I would like object1 to face at positionX and positionY at a turn rate (R) , fairly straightforward.

there is no need for me to supply any code since your likely going to make your own anyways. But I will anyways here you go:

let faceAt = function (thisObject,positionX,positionY) {
  let desiredLocationX = positionX - thisObject.transform.x;
  let desiredLocationY =  positionY -thisObject.transform.y;
  thisObject.transform.rotation = Math.degrees(Math.atan2(desiredLocationY, desiredLocationX));
};

The (Math.degrees) function converts radians to degrees.

This thread says it all : https://www.google.ca/amp/s/jibransyed.wordpress.com/2013/09/05/game-maker-gradually-rotating-an-object-towards-a-target/amp/

Answer 1

This question is quite unclear. But, I'm assuming you essentially just want to rotate an element around an arbitrary point on a HTML5 canvas.

On a canvas, you can only draw one element at a time. You can't really manipulate singular elements - for example, you can't rotate an element by itself. Instead, you'd need to rotate the entire canvas. This will always rotate around the centre of the canvas, but if you move the canvas origin, then you will draw on a different part of the canvas; thus allowing you to rotate around a point.

Check out the following example. You can click anywhere on the canvas to make the square rotate around that point. Hopefully this is what you are after:

let cv = document.getElementById("cv");
let ctx = cv.getContext("2d");
let angle = 0;

//Variables you can change:
let speed = 1; //Degrees to rotate per frame
let pointX = 250; //The x-coord to rotate around
let pointY = 250; //The y-coord to rotate around

ctx.fillStyle = "#000";

setInterval(()=>{ //This code runs every 40ms; so that the animation looks smooth
  angle = (angle + speed) % 360; //Increment the angle. Bigger changes here mean that the element will rotate faster. If we go over 360deg, reset back to 0.
  
  ctx.clearRect(0, 0, 400, 400); //Clear away the previous frame.
  
  //Draw the point we are rotating around
  ctx.beginPath();
  ctx.arc(pointX,pointY,5,0,2*Math.PI);
  ctx.fill();
  ctx.closePath();
  
  ctx.save(); //Save the state before we transform and rotate the canvas; so we can go back to the unrotated canvas for the next frame
  
  ctx.translate(pointX, pointY); //Move the origin (0, 0) point of the canvas to the point to rotate around. The canvas always rotates around the origin; so this will allow us to rotate around that point
  ctx.rotate(angle*Math.PI/180); //Rotate the canvas by the current angle. You can use your Math.degrees function to convert between rads / degs here.
  
  ctx.fillStyle = "#f00"; //Draw in red. This is also restored when ctx.restore() is called; hence the point will always be black; and the square will always be red.
  
  ctx.fillRect(0, 0, 50, 50); //Draw the item we want rotated. You can draw anything here; I just draw a square.
  
  ctx.restore(); //Restore the canvas state
  
}, 40);





//Boring event handler stuff
//Move the point to where the user clicked
//Not too robust; relys on the body padding not changing
//Really just for the demo


cv.addEventListener("click", (event)=>{
    pointX = event.clientX - 10;
    pointY = event.clientY - 10;
});

#cv {
  border:solid 1px #000; /*Just so we can see the bounds of the canvas*/
  padding:0;
  margin:0;
}

body {
  padding:10px;
  margin:0;
}

<canvas id="cv" width="400" height="400"></canvas><br>
Click on the canvas above to make the rectangle rotate around the point that was clicked.