dat.gui/demo/demo.js

function FizzyText(message) {

	var that = this;

	// These are the variables that we manipulate with gui-dat.
	// Notice they're all defined with "this". That makes them public.
	// Otherwise, gui-dat can't see them.

    this.growthSpeed = 0.5;		  // how fast do particles change size?
    this.maxSize = 3.2;			  // how big can they get?
    this.noiseStrength = 10;	  // how turbulent is the flow?
    this.speed = 0.4;			  // how fast do particles move?
    this.displayOutline = false;  // should we draw the message as a stroke?
    this.framesRendered = 0;

    // __defineGetter__ and __defineSetter__ makes JavaScript believe that
    // we've defined a variable 'this.message'. This way, whenever we 
    // change the message variable, we can call some more functions.
    
    this.__defineGetter__("message", function () {
        return message;
    });

    this.__defineSetter__("message", function (m) {
        message = m;
        createBitmap(message);
    });

	// We can even add functions to the GUI! As long as they have 
	// 0 arguments, we can call them from the dat-gui panel.
	
	this.explode = function() {
		var mag = Math.random()*30+30;
		for (var i in particles) {
			var angle= Math.random()*Math.PI*2;
			particles[i].vx = Math.cos(angle)*mag;
			particles[i].vy = Math.sin(angle)*mag;
		}
	};

	////////////////////////////////////////////////////////////////

    var _this = this;

	var width = 550;
	var height = 200;
	var textAscent = 82;
    var textOffsetLeft = 80;
	var noiseScale = 300;
	var frameTime = 30;
	
    var colors = ["#00aeff", "#0fa954", "#54396e", "#e61d5f"];
	
	// This is the context we use to get a bitmap of text using
	// the getImageData function.
    var r = document.createElement('canvas');
    var s = r.getContext('2d');

	// This is the context we actually use to draw.
    var c = document.createElement('canvas');
    var g = c.getContext('2d');

    r.setAttribute('width', width);
    c.setAttribute('width', width);
    r.setAttribute('height', height);
    c.setAttribute('height', height);

	// Add our demo to the HTML
    document.getElementById('helvetica-demo').appendChild(c);

	// Stores bitmap image
    var pixels = [];
    
    // Stores a list of particles
    var particles = [];

	// Set g.font to the same font as the bitmap canvas, incase we
	// want to draw some outlines.
    s.font = g.font = "800 " + textAscent + "px helvetica, arial, sans-serif";

    // Instantiate some particles
    for (var i = 0; i < 1000; i++) {
        particles.push(new Particle(Math.random() * width, Math.random() * height));
    }

	// This function creates a bitmap of pixels based on your message
	// It's called every time we change the message property.
    var createBitmap = function (msg) {
    
        s.fillStyle = "#fff";
        s.fillRect(0, 0, width, height);

        s.fillStyle = "#222";
        s.fillText(msg, textOffsetLeft, textAscent);

        // Pull reference
        var imageData = s.getImageData(0, 0, width, height);
        pixels = imageData.data;

    };

	// Called once per frame, updates the animation.
    var render = function () {

	    that.framesRendered ++;

        g.clearRect(0, 0, width, height);

        if (_this.displayOutline) {
            g.globalCompositeOperation = "source-over";
            g.strokeStyle = "#000";
            g.lineWidth = .5;
            g.strokeText(message, textOffsetLeft, textAscent);
        }

        g.globalCompositeOperation = "darker";

        for (var i = 0; i < particles.length; i++) {
            g.fillStyle = colors[i % colors.length];
            particles[i].render();
        }

    };

	// Returns x, y coordinates for a given index in the pixel array.
    var getPosition = function (i) {
        return {
            x: (i - (width * 4) * Math.floor(i / (width * 4))) / 4,
            y: Math.floor(i / (width * 4))
        };
    };

	// Returns a color for a given pixel in the pixel array.
    var getColor = function (x, y) {
        var base = (Math.floor(y) * width + Math.floor(x)) * 4;
        var c = {
            r: pixels[base + 0],
            g: pixels[base + 1],
            b: pixels[base + 2],
            a: pixels[base + 3]
        };

        return "rgb(" + c.r + "," + c.g + "," + c.b + ")";
    };
	
	// This calls the setter we've defined above, so it also calls
	// the createBitmap function.
	this.message = message;
	
	var loop = function() {
		// Don't render if we don't see it.
		// Would be cleaner if I dynamically acquired the top of the canvas.
		if (document.body.scrollTop < height + 20) {
			render();
		}
	}
	
	// This calls the render function every 30 milliseconds.
	setInterval(loop, frameTime);

	// This class is responsible for drawing and moving those little
	// colored dots.
    function Particle(x, y, c) {
    
    	// Position
        this.x = x;
        this.y = y;
	
        // Size of particle
        this.r = 0;
	
        // This velocity is used by the explode function.
        this.vx = 0;
        this.vy = 0;
        
        // Called every frame
        this.render = function () {
            
            // What color is the pixel we're sitting on top of?
            var c = getColor(this.x, this.y);
            
            // Where should we move?
            var angle = noise(this.x / noiseScale, this.y / noiseScale) * _this.noiseStrength;
            
            // Are we within the boundaries of the image?
            var onScreen = this.x > 0 && this.x < width &&
            			   this.y > 0 && this.y < height;
            			   
            var isBlack = c != "rgb(255,255,255)" && onScreen;
            			  
           	// If we're on top of a black pixel, grow.
           	// If not, shrink.
            if (isBlack) {
                this.r += _this.growthSpeed;
            } else {
                this.r -= _this.growthSpeed;
            }
            
            // This velocity is used by the explode function.
            this.vx *= 0.5;
            this.vy *= 0.5;
            
            // Change our position based on the flow field and our 
            // explode velocity.
            this.x += Math.cos(angle) * _this.speed + this.vx;
            this.y += -Math.sin(angle) * _this.speed + this.vy;
            
            this.r = GUI.constrain(this.r, 0, _this.maxSize);
            
            // If we're tiny, keep moving around until we find a black
            // pixel.
            if (this.r <= 0) {
                this.x = Math.random() * width;
                this.y = Math.random() * height;
                return; // Don't draw!
            }
            
            // Draw the circle.
            g.beginPath();
            g.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
            g.fill();
        
        }
        
    }

}