Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<canvas id='animation' style='background: #ccc'></canvas>
</body>
</html>
 
 * {
            margin: 0;
            padding: 0;
        }
        /* to remove the top and left whitespace */
​
        html, body {
            width: 100%;
            height: 100%;
        }
        /* just to be sure these are full screen*/
​
        canvas {
            display: block;
        }
 
//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() {
      startRefresh(data)
        /*$.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();
​
            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();
                });
            }
        });
​
      $.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.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();
​
        //window.setTimeout(updateUsers, 1000 / 60);
        window.setTimeout(updateUsers, 9000);
    }
    drawUsers();
    updateUsers();
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers