flow.js

 var colors = ["#826BD7", "#48253C", "#4C616D", "#97D2DF", "#556D57", "#524945", "#3E4053", "#CC2496"];
        var data = [];
        var numBuckets = 8;
        var buckets = [];
        var destinations = [];
        var margin = {
            right: 50

        };

        paper.install(window);
        window.onload = function() {
            paper.setup('myCanvas');
            drawBuckets();
            populate();
            view.onFrame = function(event) {
                for(var i=0; i<data.length; i++){
                    data[i].updateState(event.delta);
                }
            }
             setInterval(addShape, 500);
        }

        function drawBuckets(){
            var n = (2*numBuckets)+1;
            var height = Math.floor((paper.view.viewSize.height)/n);
            margin.top = height;
            margin.bottom = height;
            var width = Math.floor(0.75*height);
            for(var j=0; j<numBuckets; j++){
                var r = new paper.Path.Rectangle(paper.view.viewSize.width-margin.right-width, margin.top + (j*(height+margin.bottom)), width, height);
                r.strokeColor = "black";
                r.fillColor = colors[j];
                buckets.push(r);
                destinations.push(r.bounds.center);
            }
        }

        function populate() {
            for(var i=0; i<2000; i++){
                var dataShape = new DataShape(paper);
                data.push(dataShape);
            }
        }

        function addShape(){
            var howMany = 10 + Math.floor(Math.random()*150);
            for(var i=0; i<data.length;i++){
                if(!data[i].active){
                    data[i].start();
                    howMany--;
                }
                if(howMany <= 0)
                    break;
            }
        }

        var DataShape = function(paper){
           // var colors = ["#0ba8c0","#5db85d","#c8d1fe", "#52b599", "#f14d5f", "#cb88c3"];

            var self = this;
            self.paper = paper;
            self.active = false;
            self.walkingPath = new paper.Path();
            self.group = 0;
            self.offSet = 0;
            self.startPosition = new Point();

            self.speed = 0;

            self.createShape = function () {
                var circle = self.paper.Path.Circle(-10, -10, 4);
                return circle;
            }



            self.updateState = function(delta) {
                if(self.active) {
                    self.shape.position = self.walkingPath.getPointAt(self.offSet);
                    self.offSet+=delta*self.speed;
                    if (self.shape.bounds.left > buckets[self.group].bounds.left) {
                        self.reset();
                    }
                }
            }

            self.reset = function() {
                self.group = Math.floor(Math.random()*numBuckets);

                self.offSet = 0;
                self.speed = 0;
                self.shape.visible = false;
                self.active = false;
                self.walkingPath.removeSegments();
                self.group = Math.floor(Math.random()*numBuckets);
                var x = 10;
                var y = 10 + Math.floor(Math.random()*self.paper.view.viewSize.height-10);
                var color = colors[self.group];

                self.walkingPath.add(new Point(x, y));
                self.walkingPath.add(destinations[self.group]);
                self.shape.fillColor = color;
                self.shape.position.x = x;
                self.shape.position.y = y;
                // self.walkingPath.strokeColor = "black";
            }

            self.start = function () {
                self.speed = 75 + Math.floor(Math.random()*75);
                self.active = true;
                self.shape.visible = true;

            }
            self.shape = this.createShape();
            self.reset();
        }