Jump to content

  • Log In with Google      Sign In   
  • Create Account

thefollower

Member Since 16 Feb 2008
Offline Last Active Nov 20 2014 02:35 PM

Topics I've Started

Calculate offset when reducing size of my object

30 October 2014 - 09:55 PM

Hello

 

I have a circle which i can adjust the size of. Within this circle is a red dot which cannot exit out of the circle. The problem is how ever - as i reduce the circle's size the red dot ends up outside the circle because i don't know how to calculate the offset to correct for it. The red dot is stationary and never moving in position or size - its always center of the canvas.

 

Here is image example of normal zoom:

IACHh.png

 

Then zoomed out:

 

vIRti.png

The example fiddle code is here: http://jsfiddle.net/24f2gLc5/
 

The functions I am using to adjust the circle size and draw it is below:

function zoomObj(e){
    var delta 		= e.wheelDelta;
    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;
    if(zoom.position < 0 ){ zoom.position = 0; }
    if(zoom.position > 100){ zoom.position = 100; } 
    zoom.percent = (zoom.position/zoom.range) * 100;	
    zoomotput.innerHTML = zoom.percent;
}

My draw function is like this:

 

function start(){
    var radius = obj.radius/100*zoom.percent;
    if(radius < 0){ radius = 0; }
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.beginPath();
    ctx.arc(camera.offsetX, camera.offsetY, radius ,0,2*Math.PI, false);
    ctx.restore();
    ctx.lineWidth = 1;
    ctx.strokeStyle = 'black';
    ctx.stroke();
    
    //red dot
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.beginPath();
    ctx.fillStyle = 'red';
    ctx.fillRect(canvas.width/2-5,canvas.height/2-5,10,10); 
    ctx.stroke();

}

Hope you can help explain the math needed to correct the offset of the circle ! 


Keeping an object within boundries

26 October 2014 - 09:44 PM

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;   
    }  
}

Problem with my zooming feature after panning

23 October 2014 - 08:32 PM

Hey,

 

I have been trying to add a zoom feature to my game but was experiencing issues with scrolling after having zoomed in and out. I get this weird "snapping" movement.

 

I have managed to reproduce the glitch in a fiddle here http://jsfiddle.net/d3k0yg0b/

 

I'm not totally sure what is causing the problem but I've been trying to look at my logic all day and can't work out whats causing it. The two main functions related to the problem are below:

 

function scroll(e) { //mousedown event trigger
    e.preventDefault();
    var mousePos = {};
        mousePos.x = e.pageX;
        mousePos.y = e.pageY;
    var parent = this,
        offsetX = canvas.offsetX,
        offsetY = canvas.offsetY;

    function update(e) {
    var new_mousePos = {};
        new_mousePos.x = e.pageX;
        new_mousePos.y = e.pageY;
    var difx = new_mousePos.x - mousePos.x,
        dify = new_mousePos.y - mousePos.y;
        canvas.offsetX = offsetX + (difx / 2.5);
        canvas.offsetY = offsetY + (dify / 2.5);

    var max_x = (canvas.width / 2) + (radius / 2),
        min_x = (canvas.width / 2) - (radius / 2),
        max_y = (canvas.height / 2) + (radius / 2),
        min_y = (canvas.height / 2) - (radius / 2);

        if (canvas.offsetX > max_x) {
            canvas.offsetX = max_x;
        } else if (canvas.offsetX < min_x) {
            canvas.offsetX = min_x;
        }
        if (canvas.offsetY > max_y) {
            canvas.offsetY = max_y;
        } else if (canvas.offsetY < min_y) {
            canvas.offsetY = min_y;
        }
    }

    function clear() {
        parent.removeEventListener('mousemove', update, false);
        this.removeEventListener('mouseup', clear, false);
    }
    parent.addEventListener('mousemove', update, false);
    document.body.addEventListener('mouseup', clear, false);
}


function zoomTest(e){
    ////
    //update radius for circle
    ////
    function zoomUpt(){
        radius = modifyPercentage(init_radius,zoom.percent);
    }
    ////
    //animate zoom to make it smoother
    ////
    function transition_zoom(zoom,speed,fnc){
        if(zoom.intervalId != false){ 
            clear();
        }        
        var range = zoom.percentVal*zoom.modifier;
        
        if(zoom.direction == 1){
        var endVal = zoom.position + range;
            if(endVal > zoom.maxRange){
                endVal = zoom.maxRange;
            }
        }else if(zoom.direction == 0){
        var endVal = zoom.position - range;
            if(endVal < 50){
                endVal = 50;
            }
        }
        
        function process_transition(){
            if(zoom.direction){
                zoom.position += zoom.speed;
                if(zoom.position > zoom.maxRange){ zoom.position = zoom.maxRange; }
                if(zoom.position > endVal) { zoom.position = endVal;}    
            } else {	
                zoom.position -= zoom.speed;
                if(zoom.position < 50) { zoom.position = 50; } 
                if(zoom.position < endVal) { zoom.position = endVal;} 
            }
            zoom.percent = (zoom.position/zoom.range) * 100;		
            if(fnc){ 
                fnc();
            }			
            if(zoom.position == endVal){
                clear();
            }
        }
        
        function clear(){
            clearInterval(zoom.intervalId);
            zoom.intervalId = false;
        }
        zoom.intervalId   = setInterval(process_transition,1);
    } 
    ////
	var delta 	= e.wheelDelta,
	    oldZoom 	= zoom.position,
	    completed	= 0;

	if(delta == 120){ 		  //scroll in
	        zoom.direction = 1;
        } else if(delta == -120){         //scroll out
		zoom.direction = 0;
	} else {
		zoom.direction = -1;
	}
}	
    if(zoom.position == zoom.maxRange && zoom.direction){ return false; }
	if(zoom.position == 150 && !zoom.direction){ return false; }				
	transition_zoom(zoom,zoom.speed,zoomUpt);
}

Calculate if NPC is inside an oval shape

21 January 2014 - 08:37 PM

Hello,

 

I have drawn a circle but converted it to an oval shape in my HTML5 canvas like this:

 

ctx.save();
ctx.scale(1.5,1);
ctx.beginPath();
ctx.arc(x, y, radius , 0, 2 * Math.PI, false);
ctx.restore();
ctx.lineWidth = 1;
ctx.strokeStyle = 'rgba(255,255,255,0.7)';
ctx.stroke();

Now in a separate function i have some calculations to set the location of my NPC. 

 

First i get the location of the oval center and the NPC position and get the distance like this:

 

var vectorX = NPC.X - locationX,
    vectorY = NPC.Y - locationY,
    distance = Math.sqrt(vectorX*vectorX + vectorY*vectorY);

if(distance < raidus){
   alert('You have entered the oval');
}

The problem lies with the if statement, because its an oval i don't totally know how i check if the NPC has entered accurately, its confusing me because its not a simple circle.


Make sprite follow an array of points in a grid

17 January 2014 - 09:08 PM

Hello

 

I need help with understanding how to approach the logic of this.

So i have an array of points which my sprite will follow at a fixed speed the array looks like this:

 

[

   {"X":"2"   ,"Y":"2"},
   {"X":"9"   ,"Y":"2"},
   {"X":"10" ,"Y":"3"},
   {"X":"1"   ,"Y":"3"}
]

 

 

My grids are 50 by 50 pixels and my sprite moves at 4 pixels per second.

 

Now I set up my sprite info so i have and i can calculate the line the sprite will take quite easily:
 

sprite.currentLocationX = path[0].X * 50;
sprite.currentLocationY = path[0].Y * 50;

sprite.dX = path[1].X * 50; //destination X

sprite.dY = path[1].Y * 50; //destination Y

 

 

My question is how do you calculate when the sprite has passed destination X:Y and so update the sprite's destination ?

 

I update the sprite's X:Y current location every frame using delta*speed.

 

I thought about using the idea of checking when X:Y is greater than destination X:Y but that merely assumes the sprite is moving north east only. 

 

If it matters in terms of explaining the way to work it out, my sprites moving in 8 compass directions.


PARTNERS