Public Group

# 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.

## 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 );
return false;
} else {
return true;
}
}

Edited by thefollower

##### Share on other sites

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 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 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 on other sites

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

##### 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

1. 1
2. 2
Rutin
17
3. 3
4. 4
5. 5

• 13
• 26
• 10
• 11
• 9
• ### Forum Statistics

• Total Topics
633735
• Total Posts
3013596
×