Jump to content

Move canvas object towards a delivered position


d4ne
 Share

Recommended Posts

I'm trying to move a canvas object towards a onmousedown position, which gets sent from a user to the server.

But my problem is the following: The object on the canvas is only moving a little step towards the delivered position. There must be a problem which could be caused by the dest calculation.

Youtube video which shows my problem: https://www.youtube.com/watch?v=XxB1dNsuY38

A jsfiddle with a working example: http://jsfiddle.net/loktar/5d02ooaf/

Code which sends the position from the user to the server and which draws each user on the canvas:

<script type="text/javascript">
    var ctx = document.getElementById("ctx").getContext("2d");

    ctx.canvas.width  = window.innerWidth;
    ctx.canvas.height = window.innerHeight - 142;

    var socket = io();

    socket.on('newPositions', function(data)
    {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

        ctx.fillStyle = "rgb(255,0,0)";
        ctx.beginPath();

        for(var i = 0; i < data.length; i++){
            ctx.arc(data[i].x, data[i].y, 10, 0, Math.PI * 2);
        }

        ctx.closePath();
        ctx.fill();
    });

    document.onmousedown = function(event)
    {
        socket.emit('positionUpdate', {x: event.pageX - ctx.canvas.offsetLeft, y: event.pageY  - ctx.canvas.offsetTop, state: true});
    }

    document.onmouseup = function(event)
    {
        socket.emit('positionUpdate', {x: event.pageX - ctx.canvas.offsetLeft, y: event.pageY  - ctx.canvas.offsetTop, state: false});
    }
</script>

Part of the app.js code which contains the current position update code

var serv = require('http').Server(app);

var SOCKET_LIST = [];
var PLAYER_LIST = [];

var Player = function(id, x, y){
    var self = {
        x: 100,
        y: 100,
        id: id,
        number: "" + Math.floor(10 * Math.random()),
        mouseMovement: false,
        maxSpd: 5,
        radius: 10
    }
    self.updatePosition = function(x, y)
    {
        if(self.mouseMovement){
            // Problem movement
            var targetX = x;
            var targetY = y;

            var tx = targetX - self.x;
            var ty = targetY - self.y;
            var dist = Math.sqrt(tx * tx + ty * ty);

            var velX = (tx / dist) * self.maxSpd;
            var velY = (ty / dist) * self.maxSpd;

            if (dist > self.radius / 2) {
                self.x += velX;
                self.y += velY;
            }

            // Problem movement end
        }
    }

    return self;
}

var io = require('socket.io')(serv, {});
io.sockets.on('connection', function(socket){
    console.log('socket connection');

    socket.id = Math.random();
    SOCKET_LIST[socket.id] = socket;

    var player = Player(socket.id);
    PLAYER_LIST[socket.id] = player;

    socket.on('disconnect', function(){
        delete SOCKET_LIST[socket.id];
        delete PLAYER_LIST[socket.id];
    });

    socket.on('positionUpdate', function(data){
        player.mouseMovement = data.state;
        player.updatePosition(data.x, data.y);
    });
});

setInterval(function(){
    var pack = [];

    for(var i in PLAYER_LIST){
        var player = PLAYER_LIST[i];
        player.updatePosition();

        pack.push({
            x:player.x,
            y:player.y,
            number:player.number
        });
    }
    for(var i in SOCKET_LIST){
        var socket = SOCKET_LIST[i];
        socket.emit('newPositions', pack);
    }
}, 1000/30);

 

Explaination:

The following code sends the target position to the server:

document.onmousedown = function(event)
{
    socket.emit('positionUpdate', {x: event.pageX - ctx.canvas.offsetLeft, y: event.pageY  -ctx.canvas.offsetTop, state: true});
}

Then the following code will be triggered:

socket.on('positionUpdate', function(data){
    player.mouseMovement = data.state;
    player.updatePosition(data.x, data.y);
});

Which will set the player.mouseMovement to true and delivers the targeted x and y cordinates to the player.updatePosition function:

self.updatePosition = function(x, y)
{
    if(self.mouseMovement){
        // Problem movement
        var targetX = x;
        var targetY = y;

        var tx = targetX - self.x;
        var ty = targetY - self.y;
        var dist = Math.sqrt(tx * tx + ty * ty);

        var velX = (tx / dist) * self.maxSpd;
        var velY = (ty / dist) * self.maxSpd;

        if (dist > self.radius / 2) {
            self.x += velX;
            self.y += velY;
        }

        // Problem movement end
    }
}

 

I would appreciate any kind of help or suggestions.

Link to comment
Share on other sites

@d4ne I recommend adding a visual aid here to save yourself a lot of pain debugging. 

document.onmousedown = function(event)
{

//create a ball here

//position the ball at event.pageX - ctx.canvas.offsetLeft and event.pageY  -ctx.canvas.offsetTop
    socket.emit('positionUpdate', {x: event.pageX - ctx.canvas.offsetLeft, y: event.pageY  -ctx.canvas.offsetTop, state: true});
}

 

-- if the ball appears under your cursor you atleast know you're sending the co-ordinates correctly.

Also:

    self.updatePosition = function(x, y)
    {

//create another ball if not already existing

//set position to x and y
        if(self.mouseMovement){
            // Problem movement
            var targetX = x;
            var targetY = y;

If the new ball is in the correct position then you know you received the position correctly, and therefore there is an issue processing the "from->to" loop.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...