• Advertisement
Sign in to follow this  

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.

If you intended to correct an error in the post then please contact us.

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.arc(0,0,obj[i].radius,0,Math.PI*2);  
		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 smile.png

Edited by thefollower

Share this post


Link to post
Share on other sites
Advertisement
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 this post


Link to post
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 this post


Link to post
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);

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement