index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Paralax</title>
    <link rel="stylesheet" href="style.css">
    <script src="lib/paper/dist/paper-full.min.js" type="text/javascript"></script>
    <script type="text/paperscript" canvas="myCanvas">
        
    var count = 150;

    // Create a symbol, which we will use to place instances of later:
    var path = new Path.Circle({
        center: [0, 0],
        radius: 10,
        fillColor: 'white',
        strokeColor: 'black'
    });

    var symbol = new Symbol(path);

    // Place the instances of the symbol:
    for (var i = 0; i < count; i++) {
        // The center position is a random point in the view:
        var center = Point.random() * view.size;
        var placedSymbol = symbol.place(center);
        placedSymbol.scale(i / count);
    }

    var lSpeed = 0;
    var rSpeed = 0;
    var uSpeed = 0;
    var dSpeed = 0;

    function onKeyDown(e) {
        var l = (e.key === 'a');
        var r = (e.key === 'd');
        var u = (e.key === 'w');
        var d = (e.key === 's');

        lSpeed += l;
        rSpeed += r;
        uSpeed += u;
        dSpeed += d;
    }

    function onFrame(e) {

        lSpeed -= .1;
        rSpeed -= .1;
        uSpeed -= .1;
        dSpeed -= .1;

        lSpeed = Math.max(lSpeed, 0);
        rSpeed = Math.max(rSpeed, 0);
        uSpeed = Math.max(uSpeed, 0);
        dSpeed = Math.max(dSpeed, 0);

        for (var i = 0; i < count; i++) {
            var item = project.activeLayer.children[i];
            
            // Move the item 1/20th of its width to the right. This way
            // larger circles move faster than smaller circles:
            item.position.x += lSpeed*(item.bounds.width / 20) - rSpeed*(item.bounds.width / 20);
            item.position.y += uSpeed*(item.bounds.width / 20) - dSpeed*(item.bounds.width / 20);

            // If the item has left the view on the right, move it back
            // to the left:
            if (item.bounds.left > view.size.width) {
                item.position.x = 0;
            }
            if (item.bounds.right < 0) {
                item.position.x = view.size.width - item.bounds.width;
            }
            if (item.bounds.top > view.size.height) {
                item.position.y = 0;
            }
            if (item.bounds.bottom < 0) {
                item.position.y = view.size.height - item.bounds.height;
            }
        }
    }


    </script>
</head>

<body>
    <canvas id="myCanvas" resize></canvas>
</body>

</html>