Jump to content

  • Log In with Google      Sign In   
  • Create Account


Member Since 16 Feb 2008
Offline Last Active Private

Topics I've Started

Camera movement too fast

Yesterday, 08:45 PM



I have a camera function which the user clicks on the screen and the camera moves to that location. The problem how ever is the camera moves way past the point the user clicked, and the camera moves faster the further away the location of the click was from the camera.

I believe it is related to my maths in the fraction function but this is the whole animation code:


if(evt.button == 0){ // left click              

  var initial      = worldPosition(canvas.width/2,canvas.height/2),
      target       = worldPosition(mouse.onElement.x,mouse.onElement.y),            
      deltaX       = (target.x - initial.x),
      deltaY       = (target.x - initial.y),
      timeStart    = Date.now(),
      timeLength   = 800;

    // see below code snippet for data example 
    console.log({'Dif X':target.x-initial.x,'Dif Y':target.y-initial.y}); 

    function update(){
        function fraction(t){       
            var difx      = target.x - (initial.x + t*deltaX);
            var dify      = target.y - (initial.y + t*deltaY);
                camera.x -= difx;
                camera.y -= dify;

        function easing(x){
            return 0.5 + 0.5 * Math.sin((x - 0.5) * Math.PI);

        var t = (Date.now() - timeStart) / timeLength;
          if (t > 1) {
          } else {
    this.scroll = setInterval(update, 1); //start animation

This here is an example console.log data encase it helps:
Initial : {x: 576.3685331485237, y: -2608.131466851476}
Target  : {x: 577.3685331485237, y: -2615.631466851476}
Deltas  : {Dif X: 1, Dif Y: -7.5}

Can any one shed light on where I am going wrong here?

Mouse over sprite detection with zoom

03 October 2015 - 09:33 PM



I have a basic script which checks if the mouse is hovering over a sprite on my canvas. I have zoom function and this functionality works fine when the zoom is at default (1.0).

But if the zoom is any other number the detection is wrong. The issue here is that if a sprite is in the north east direction from center and you zoom in, the sprite moves north east, and for sprites in the south west they move south west for zooming in.

So i can't simply just adjust the numbers by scale (which is what i currently have). But I do not know how to solve this problem.

This is my function that does the checking:


function check(e,element){
    var data    = {};
        // get mouse position relative to the element
        data.x  = e.pageX - element.offsetLeft; 
        data.y  = e.pageY - element.offsetTop;

        // el.scale = float (0.0 to 3.0)
        data.x /= el.scale;
        data.y /= el.scale;

        // default object size is 20 pixels (a square) 
        var objSize  = 20 * el.scale; 

    for(var i = 0; i < objs.length; i++){ //check all objects
        var x        = objs[i].x / el.scale;
        var y        = objs[i].y / el.scale;

            if(data.x > x - objSize && 
               data.x < x + objSize && 
               data.y > y - objSize && 
               data.y < y + objSize){
                otpt.innerHTML = true; //mouse is over an object
                otpt.innerHTML = false; //not over an object

And a working example of the problem I am experiencing is here: http://jsfiddle.net/ejp9bphm/ (zoom in above or below 1.0 experience the issue).

Hope you can help explain how i solve this problem.

Easing a camera offset

20 September 2015 - 11:43 PM



I am trying to get my camera to move with an easing movement to a position i click on my game out canvas. It currently seems to shoot off at light speed, and always in the same direction no matter where I click on my screen.

I tried to calculate the direction based on where i clicked relative to the middle of my screen. I am using JavaScript by the way, and this was my attempt:


self.easing = function(x) {
    return 0.5 + 0.5 * Math.sin((x - 0.5) * Math.PI);

self.mouseEvents = function(e,el){      
    var mousePos = mouse.relativePosition(e,el); //relative to element that was clicked {'x':int,'y':int} format
    var parent   = el;
    if(e.button == 0){ //left click
        //middle of element is our camera position for user
        var initial   = {'x':canvas.width/2,'y':canvas.height/2}, 
            delta     = {'x':mousePos.x - initial.x,  'y':mousePos.y - initial.y},
            timeStart = new Date().getTime();
            timeLength= 800;


    function update(){
            function fraction(t){   
                 canvas.offsetX -= initial.x + t * delta.x,
                 canvas.offsetY -= initial.y + t * delta.y;             
            var t = (new Date().getTime() - timeStart) / timeLength;
                if (t > 1) {
                } else {
    parent.scroll = setInterval(update, 10); 

// called from main game loop (infinite loop):

self.draw = function(){
    var x = img.x - (img.width/2) - canvas.offsetX;
    var y = img.y - (img.height/2) - canvas.offsetY;

I also made a fiddle of the code: http://jsfiddle.net/p61f5k3z/

I am curious where I have gone wrong? I am currently thinking its my math logic some where, but I can't figure out what the mistake is. 

Adjusting the amount of spirals for output

17 September 2015 - 10:08 PM



I have been experimenting with a galaxy type shape in JavaScript. I have got a pretty decent looking shape. But i do not know how to reduce the amount of arms in my maths for the output.


For example, say i wanted to have two spiral arms instead of the amount I currently have for more variability, i cannot figure out how to do it. If i just simply change the values in my maths such as the number of arms i wish to draw, then the shape is lost completely. 

I am wondering if there is a better/simpler solution to create the kind of thing I am trying to do.

Here is a working example of the code: http://jsfiddle.net/erh5r4jm/

And the relevant code/logic/maths:

var a 				= 3;
var numArms                     = 20;
var num				= 100;
var stars			= 5;

//the draw function code:

    for (var arm = 0; arm < numArms; arm++) {
        for (var p = 0; p < num; p++) {
            var pX = a * p * Math.cos(p + (Math.PI * arm)) + Math.random(); 
            	pY = a * p * Math.sin(p + (Math.PI * arm)) + Math.random();
            for(s = 0; s < stars; s++){
                pX +=  randFloat(-15,15,2); //get random float between range (-15, 15) to 2 decimal places
                pY +=  randFloat(-15,15,2);
                ctx.arc(pX+element.width/2,pY+element.height/2, 0.5 , 0, Math.PI*2 ,false);
                ctx.fillStyle = "white";

Zooming in/out for objects in x:y positions

16 September 2015 - 06:05 PM

So i have been a bit confused on the logic of how i would approach this.

I have a bunch of objects in a fixed x:y position on my canvas. And i want to zoom in and out with my mouse wheel. Then i was wondering how do I move the objects from their position to make seem like I am zooming in and out. Obviously they change in size, but they would also move position - it's the position on the output that has me a bit confused in terms of the logic.


I use JavaScript to program my application, but i'm just looking the logical approach to how i would do this. Most of my objects are in an array which contain and x:y "pixel position" not a grid position.

Any advice would be welcome :)