• 11
• 9
• 11
• 9
• 11

# Confused at rotating an object around a transformed circle

This topic is 906 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

I have a circle which I transformed to create a more 2.5D perspective and I want to have my object rotate around this transformed circle but still keep the 2D perspective of that object.

The problem is I don't know how to calculate the path for the object when the circle is transformed as it is no longer a simple circle.

This is my code which draws and updates positions:

Javascript:

function update(){

for(var i = 0; i < obj.length; i++){

var delta = Date.now() - obj[i].start;

obj.start = Date.now();
var angle     = obj[i].rotSpeed * delta;
obj[i].x  = obj[i].radius * Math.cos(angle);
obj[i].y  = obj[i].radius * Math.sin(angle);
}
}

function draw(){
update();
ctx.clearRect(0,0,element.width,element.height);

ctx.save();

//circle angled
ctx.setTransform(scale, 0.01, 0.01, 0.3*scale, (element.width/2) -camera.x*scale, (element.height/2) -camera.y*scale);

for(var i = 0; i < obj.length; i++){
ctx.beginPath();
ctx.lineWidth = 4.5;
ctx.strokeStyle = "white";
ctx.stroke();
}
ctx.resetTransform();
ctx.restore();

//draw sprite position
ctx.save();
ctx.setTransform(scale, 0, 0, scale, (element.width/2) -camera.x*scale, (element.height/2) -camera.y*scale);;

ctx.beginPath();
ctx.arc(obj[0].x-10, obj[0].y-10,5,0,Math.PI*2);
ctx.fillStyle = 'white';
ctx.fill();

ctx.restore();
requestAnimationFrame(draw);
}

draw();


I also have the animation displayed here so you can see what I am referring to in action: http://jsfiddle.net/jLLpwfux/1/

How do i correct for this so it will follow the line correctly? I can't use the transform function because that will cause the sprite's shape to also transform and I would prefer to keep that as a normal circle.

Hope you can help me

Edited by thefollower

##### Share on other sites
You need to scale your object radius in the Update function by the same amount you scale the path.

Changing this:
obj[i].y				= obj[i].radius * Math.sin(angle);

To this:

obj[i].y				= (obj[i].radius * 0.3) * Math.sin(angle);

Fixed the problem.

##### Share on other sites

I tried that previously here: http://jsfiddle.net/j1s3vopd/ but it is still slightly off. I could not work out why it was slightly off the line all the time.

EDIT sorry just saw a mistake in my draw function and now it works perfectly.

Thank you @ MarkS

Edited by thefollower

##### Share on other sites

EDIT sorry just saw a mistake in my draw function and now it works perfectly.

I'm glad you figured it out! I was in the middle of replying with the solution when one of the forum software hamsters got a little drunk while running his wheel and screwed up my account permissions. I couldn't post anything the rest of the day!

Your program reminds me of a planet circling a star. Just for fun, I added perspective foreshortening:

    var pers = (0.5 + (1.0 / (obj[0].radius * 0.6)) * obj[0].y);
ctx.arc(obj[0].x,obj[0].y,pers * 5,0,Math.PI*2);