Moving Shapes - funny :)

var movingShapes = (function () {
    var shapes = [];
    var directions = [
        new direction(0, 1),
        new direction(1, 0),
        new direction(0, -1),
        new direction(-1, 0)
    ]
    function generateColor() {
        var red = parseInt(Math.random() * 255);
        var green = parseInt(Math.random() * 255);
        var blue = parseInt(Math.random() * 255);
        var color = 'rgb(' + red + ',' + green + ',' + blue + ')';
        return color;
    }
    function direction(top, left) {
        this.top = top;
        this.left = left;
    }
    function rect(startTop, startLeft) {
        this.type = "rect";
        this.currentTop = startTop;
        this.currentLeft = startLeft;
        this.moves = 0;
        this.div = document.createElement('div');
        this.div.style.top = startTop + 'px';
        this.div.style.left = startLeft + 'px';
        this.div.style.backgroundColor = generateColor();
        this.div.style.color = generateColor();
        this.div.style.borderColor = generateColor();
        this.div.innerHTML = "text";
        document.body.appendChild(this.div);
    }
    function ellipse(centerTop, centerLeft) {
        this.radius = 150;
        this.centerTop = centerTop;
        this.centerLeft = centerLeft;
        this.type = "ellipse";
        this.angle = 0;
        this.div = document.createElement('div');
        this.div.style.top = (centerTop + this.radius * Math.sin(this.angle * Math.PI / 180)) + "px";
        this.div.style.left = (centerLeft + this.radius * Math.cos(this.angle * Math.PI / 180)) + "px";
        this.div.style.backgroundColor = generateColor();
        this.div.style.color = generateColor();
        this.div.style.borderColor = generateColor();
        this.div.innerHTML = "text";
        document.body.appendChild(this.div);
    }
    function moveRectangle(shape) {
        currentDirection = directions[parseInt(shape.moves / 100)%4];
        shape.moves += 2;
        shape.currentTop += currentDirection.top;
        shape.currentLeft += currentDirection.left;
        shape.div.style.top = shape.currentTop + 'px';
        shape.div.style.left = shape.currentLeft + 'px';
    }
    function moveEllipse(shape) {
        shape.angle += 1;
        shape.div.style.top = (shape.centerTop + shape.radius * Math.sin(shape.angle * Math.PI / 180)) + "px";
        shape.div.style.left = (shape.centerLeft + shape.radius * Math.cos(shape.angle * Math.PI / 180)) + "px";
    }
    function add(type) {
        if (type == "rect") {
            var shape = new rect(parseInt(Math.random() * 800), parseInt(Math.random() * 1000));
            shapes.push(shape);
        } else if (type== "ellipse") {
            var shape = new ellipse(parseInt(Math.random() * 800), parseInt(Math.random() * 1000));
            shapes.push(shape);
        }
    }
    var rotateAll = function rotateAll() {
        if (shapes.length > 0) {
            for (var i = 0; i < shapes.length; i++) {
                if (shapes[i].type == "rect") {
                    moveRectangle(shapes[i]);
                } else if (shapes[i].type == "ellipse") {
                    moveEllipse(shapes[i]);
                }
            }
        }
    }
    function rotate() {
        setInterval(rotateAll, 20);
    }

    return {
        add: add,
        rotate: rotate
    };
})();