Jump to content
  • Advertisement
Sign in to follow this  
CelticSir

Keeping an object within boundries

This topic is 1511 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

Hey,

 

I have a basic circle which I can zoom in and out of, as well as scroll around. The problem how ever is trying to keep the the center point of the canvas (the red dot), within the circle.

 

The problem lies in two places, one when i'm scrolling around i should be able to have the red dot reach the perimeter of the circle. The second issue is zooming out will cause the red dot to be outside the circle (if the camera was offset from it's initial starting point).

 

Here is an example of the code: http://jsfiddle.net/nf2s5o38/

 

The maths I used to fix the problems are shown below.

When zooming in and out this function occurs:

function zoomObj(e){
    var delta       = e.wheelDelta,
        mousePos    = {};
        mousePos.x  = e.pagex;
        mousePos.y  = e.pageY;
    var range = zoom.percentVal * zoom.modifier;

    if(delta == 120){ 	//scroll in
	var endVal = zoom.position + range;
    } else {            //scroll out
	var endVal = zoom.position - range;
    }  

    zoom.position = endVal;	   
    
    //reposition camera to keep red dot inside the circle [currently not working correctly]
    camera.offsetX /= zoom.percent;
    camera.offsetY /= zoom.percent;
    zoom.percent = (zoom.position/zoom.range) * 100;		
    camera.offsetX *= zoom.percent;
    camera.offsetY *= zoom.percent;   
}

When scrolling around the canvas this function is used to keep the camera within the boundries:

function fixCamera(camX,camY){    
    var centerX        = canvas.width/2;  //red dot x
    var centerY        = canvas.height/2; //red dot y
    var X              = centerX - camX;  //camX = camera offsetX
    var Y              = centerY - camY;  //camy = camera offsetY
    var distance       = Math.sqrt( X*X + Y*Y );
    var radius         = obj.radius/100 * zoom.percent;
    if(distance > radius){
           return false;
    } else { 
           return true;   
    }  
}
Edited by thefollower

Share this post


Link to post
Share on other sites
Advertisement

For this kind of issue, you might want to look into basic circle based collision detection. First, find the center point of the circle. Then do something like this:

if(sqrt(pow((dotX-circleOffsetX), 2)+pow((dotY-circleOffsetY), 2)) < circleRadius)
{
//is inside the circle
}

This finds the dot's position relative to the center of the circle ((dotX-circleOffsetX) and (dotY-circleOffsetY)) then uses a basic distance formula to check if the distance from the center of the circle is less than the radius of the circle. If the dot isn't inside the circle, all you have to do is move it back inside the circle.

Share this post


Link to post
Share on other sites

Hmm i added that idea to this example: http://jsfiddle.net/q6pxmovp/ (Line number 48)

But now the circle doesn't move when trying to scroll.

 

This is the updated function:

function fixCamera(camX,camY){    
    var dotX           = canvas.width/2; //sprite location x
    var dotY           = canvas.height/2; //sprite location y
    var radius         = obj.radius/100 * zoom.percent; 
    var X              = camX - dotX; //circle center relative to red dot on X axis
    var Y              = camY - dotY; //circle center relative to red dot on Y axis
    
    if(Math.sqrt( Math.pow((dotX-X),2) + Math.pow((dotY-Y), 2) ) < radius){
        return true; //in the circle free to move
    } else {
        return false; //out of the circle not free to move
    }
}

Did i make a mistake?

Edited by thefollower

Share this post


Link to post
Share on other sites

On a side note - not everyone has a mouse wheel. Always a good idea to bind alternate keys.

 

 

I already have alternatives up for the main code, but a fiddle is just a quick implementation to demonstrate. But lets not get distracted :P

Edited by thefollower

Share this post


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

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!