bouncing-dots/js/stuff.js

var Stuff = function (options) {
    options = options || {};
    this.paused = false;

    // Save this query here now that the page is loaded
    this.canvas = document.getElementById("magic");

    this.counter = 0;
};


/* Get the height and width of full document. To avoid browser
 * incompatibility issues, choose the maximum of all height/width values.
 *
 * Method from http://stackoverflow.com/a/1147768 */
Stuff.prototype.getDocumentDimensions = function () {
    var body = document.body,
        html = document.documentElement;

    var height = Math.max(body.scrollHeight, body.offsetHeight, 
                          html.clientHeight, html.scrollHeight,
                          html.offsetHeight);

    var width = Math.max(body.scrollWidth, body.offsetWidth, 
                         html.clientWidth, html.scrollWidth,
                         html.offsetWidth);
    
    return {"height": height, "width": width};
};

/* Choose a random RGB color to begin the color gradient with */
Stuff.prototype.pickRandomColor = function() {
    return {"r": Math.floor(Math.random() * (255 + 1)),
            "g": Math.floor(Math.random() * (255 + 1)),
            "b": Math.floor(Math.random() * (255 + 1))};
};

Stuff.prototype.clear = function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
};

Stuff.prototype.getRandomInRange = function(min, max, negative) {
    rand = Math.floor(Math.random() * (max - min + 1)) + min;
    if (negative) {
        if (Math.random() < 0.5) {
            rand = rand * -1;
        }
    }
    return rand;
};

Stuff.prototype.sortedInsert = function(ordered_array, value, to_insert) {
    for (i = 0; i < ordered_array.length; i++) {
        if (ordered_array[i] >= value) {
            ordered_array.splice(i, 0, to_insert);
            return;
        }
    }
    ordered_array.push(to_insert);
};

Stuff.prototype.lineToNearestPoints = function(context, ordered_array) {
    for (i = 0; i < ordered_array.length; i++) {
        point = ordered_array[i];
        context.beginPath();
        context.strokeStyle = 'black';
        context.moveTo(point.x, point.y);
        if (i !== 0) {
            point_before = ordered_array[i-1];
            context.lineTo(point_before.x, point_before.y);
        }
        context.moveTo(point.x, point.y);
        if (i !== (ordered_array.length - 1)) {
            point_after = ordered_array[i+1];
            context.lineTo(point_after.x, point_after.y);
        }
        context.stroke();
        context.closePath();
    }
};

Stuff.prototype.initPoints = function(width, height, num_points) {
    this.points = [];
    for (i = 0; i < num_points; i++) {
        random_x = Math.floor(Math.random() * (width + 1));
        random_y = Math.floor(Math.random() * (height + 1));
        point = {'x': random_x, 'y': random_y};
        this.points.push(point);
    }
};

Stuff.prototype.distance = function(point1, point2) {
    return Math.sqrt(Math.pow((point1.x - point2.x), 2) + Math.pow((point1.y - point2.y), 2));
};

Stuff.prototype.drawPolygon = function(context) {
    for (i = 0; i < this.points.length; i++) {
        if (this.converge_point) {
            if (this.points[i].x >= this.converge_point.x) {
                this.points[i].x = this.points[i].x - 3;
            } else {
                this.points[i].x = this.points[i].x + 3;
            }
            if (this.points[i].y >= this.converge_point.y) {
                this.points[i].y = this.points[i].y - 3;
            } else {
                this.points[i].y = this.points[i].y + 3;
            }
        } else if (this.counter % 10 === 0) {
            if (Math.random() < 0.5) {
                this.points[i].y = this.points[i].y - 10;
            } else {
                this.points[i].y = this.points[i].y + 10;
            }
        } else if ((this.mouse_position) && (this.distance(this.mouse_position, this.points[i]) < 50)) {
            if (this.points[i].x >= this.mouse_position.x) {
                this.points[i].x = this.points[i].x + 3;
            } else {
                this.points[i].x = this.points[i].x - 3;
            }
            if (this.points[i].y >= this.mouse_position.y) {
                this.points[i].y = this.points[i].y + 3;
            } else {
                this.points[i].y = this.points[i].y - 3;
            }
        } else {
            this.points[i].x = this.points[i].x + this.getRandomInRange(0, 2, true);
            this.points[i].y = this.points[i].y + this.getRandomInRange(0, 2, true);
        }
        // this.x_sorted = [];
        // this.y_sorted = [];
        // this.sortedInsert(this.x_sorted, this.points[i].x, point);
        // this.sortedInsert(this.y_sorted, this.points[i].y, point);

        context.beginPath();
        context.strokeStyle = 'black';
        context.arc(this.points[i].x, this.points[i].y, 1, 0, 2*Math.PI);
        context.stroke();
        context.closePath();
    }

    this.converge_point = null;
    // this.lineToNearestPoints(context, this.x_sorted);
    // this.lineToNearestPoints(context, this.y_sorted);
};

/* Most of this funtion is provided by Maissan Inc. in their tutorial:
   http://www.maissan.net/articles/simulating-vines */
 Stuff.prototype.drawThing = function(context, sort, prune, chain) {
    var AnimationFrame = window.AnimationFrame;
    AnimationFrame.shim();
    var animationFrame = new AnimationFrame(30),
        timeCounter = 0,
        color,
        gradient;
    context.lineWidth = 0.5;
    
    var self = this;
    function animate(time) {
        // resize canvas if document size changed
        dimensions = self.getDocumentDimensions();
        if ((dimensions.height !== self.canvas.height) ||
            (dimensions.width !== self.canvas.width)) {
            self.canvas.height = dimensions.height;
            self.canvas.width = dimensions.width;
        }
        if (self.points === undefined) {
            self.initPoints(self.canvas.width, self.canvas.height, 5000);
        }

        if (!self.paused) {
            self.clear();
            self.drawPolygon(context);
            self.counter = self.counter + 1;
        }
        frameId = animationFrame.request(animate);
    }

    // Drawing interval
    var frameId = animationFrame.request(animate);
    return frameId;
};

Stuff.prototype.canvasClickHandler = function(event) {
    var x = event.pageX;
    var y = event.pageY;
    this.converge_point = {'x': x, 'y': y};
    color = this.pickRandomColor();
    this.canvas.style.backgroundColor = "rgb(" + color.r + "," + color.g + "," + color.b + ")";
};

Stuff.prototype.canvasMouseMoveHandler = function(event) {
    var x = event.pageX;
    var y = event.pageY;
    this.mouse_position = {'x': x, 'y': y};
};

Stuff.prototype.draw = function() {
    var interval_time = 2000;

    // Initialize canvas
    var dimensions = this.getDocumentDimensions();
    this.canvas.height = dimensions.height;
    this.canvas.width = dimensions.width;

    // Check for canvas support, bind click event, and get context
    if (this.canvas.getContext){
        var self = this;
        this.canvas.addEventListener("click", function () { self.canvasClickHandler.apply(self, arguments); });
        this.canvas.addEventListener("mousemove", function () { self.canvasMouseMoveHandler.apply(self, arguments); });

        this.context = this.canvas.getContext("2d");

        // Draw stuff
        var frameId = this.drawThing(this.context, false, true, true);
    }
};