//output json from web service

​

 /*var data =

        [{

            "UserId": 42,

            "Name": "Abc",

            "ProfilePicUrl": "https://static.pexels.com/photos/1848/nature-sunny-red-flowers-large.jpg",

            "Connections": [43,45]

        }, {

            "UserId": 43,

            "Name": "Pqr",

            "ProfilePicUrl": "https://static.pexels.com/photos/1848/nature-sunny-red-flowers-large.jpg",

            "Connections": [44]

        }, {

            "UserId": 44,

            "Name": "Lmn",

            "ProfilePicUrl": "https://static.pexels.com/photos/1848/nature-sunny-red-flowers-large.jpg",

            "Connections": []

        }, {

            "UserId": 45,

            "Name": "Xyz",

            "ProfilePicUrl": "https://static.pexels.com/photos/1848/nature-sunny-red-flowers-large.jpg",

            "Connections": []

        }];*/

​

​

​

​

​

    const canvas = document.getElementById('animation');

    const ctx = canvas.getContext('2d');

    var users = [];

​

    // resize the canvas to fill browser window dynamically

    window.addEventListener('resize', resizeCanvas, false);

​

    function resizeCanvas() {

        canvas.width = window.innerWidth;

        canvas.height = window.innerHeight;

​

        /**

         * Your drawings need to be inside this function otherwise they will be reset when

         * you resize the browser window and the canvas goes will be cleared.

         */

        drawUsers();

    }

    resizeCanvas();

​

    $(function () {

        fetchData();

    });

​

    function fetchData() {

        $.ajax({

            url: 'MyWebserviceUrl',

            async: true,

            cache: true,

            success: function (response) {

                startRefresh(response);

            }

        });

    }

​

    function startRefresh(data) {

        $.each(data, function (index, user) {

​

            //check if user already added.if already added then just update connections array for new connections

            if(users[index] && users[index].id==user.UserId)

            {

​

            }

            //if user is new then add in to this array

            else

            {

                users.push({

                    id: user.UserId,

                    connections: user.Connections,

                    width: 80,

                    height: 80,

                    x: Math.round(Math.random() * (canvas.width - 80)),

                    y: Math.round(Math.random() * (canvas.height - 80)),

                    dir: {

                        x: Math.random() > 0.5 ? 1 : -1,

                        y: Math.random() > 0.5 ? 1 : -1

                    }

                });

            } 

        });

    }

​

​

    function drawUsers() {

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        $.each(users, function (index, user) {

            ctx.beginPath();

            ctx.rect(user.x, user.y, user.width, user.height);

            ctx.strokeStyle = 'red';

            ctx.stroke();

            ctx.closePath();

​

            if (user.connections != null) {

                user.connections.forEach(function (id) {

                    const other = users.find(user => user.id === id);

​

                    ctx.beginPath();

                    ctx.moveTo(user.x + (user.width / 2), user.y + (user.height / 2));

                    ctx.lineTo(other.x + (other.width / 2), other.y + (other.height / 2));

                    ctx.strokeStyle = 'black';

                    ctx.stroke();

                    ctx.closePath();

                });

            }

        });

        window.requestAnimationFrame(drawUsers);

    }

​

​

    function updateUsers() {

        //will fire every 9 seconds to check whether there is new users or new connections between existing users from database...

        fetchData();

​

        $.each(users, function (index, user) {

            if (user.x <= 0) user.dir.x = 1;

            if (user.x + user.width > canvas.width) user.dir.x = -1;

            if (user.y <= 0) user.dir.y = 1;

            if (user.y + user.height > canvas.height) user.dir.y = -1;

​

            user.x += user.dir.x;

            user.y += user.dir.y;

        });

        //window.setTimeout(updateUsers, 1000 / 60);

        window.setTimeout(updateUsers, 9000);

    }

    drawUsers();

    updateUsers();