dat.gui/demo/demo.js

function DynamicText(string, width, height, textAscent) {
    
    this.string = string;
    
    this.width  = width;
    this.height = height;
    
    this.textAscent = textAscent;
    
    var r = document.createElement('canvas');
    var s = r.getContext('2d');
    
    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);
    
    // document.getElementById('helvetica-demo').appendChild(r);
    document.getElementById('helvetica-demo').appendChild(c);
    
    var pixels    = [];
    var particles = [];
    
    s.font = "800 "+textAscent+"px helvetica, arial, sans-serif";
    
    this.update = function() {
        
        // Create our reference bitmap
        s.fillStyle = "#fff";
        s.fillRect(0, 0, this.width, this.height);
        
        s.fillStyle = "#000";
        s.fillText(this.string, 0, this.textAscent);
        
        // Pull reference
        var imageData = s.getImageData(0, 0, width, height);
        pixels = imageData.data;
        
        // Set reference onto particles
        for(var i = 0; i < pixels.length; i+=4) {
            if(pixels[i] < 255) {
                var p = getPosition(i);
                if(particles[i])
                    particles[i].position = p;
                else
                    particles.push( new Particle(p.x, p.y) );
            }
        }
    };
    
    this.render = function(c) {
        g.fillStyle = c;
        for(var i = 0; i < particles.length; i++) {
            var p = particles[i].position;
            g.fillRect(p.x, p.y, 1, 1);
        }
    };
    
    var getPosition = function(i) {
        var p = { x: (i - (width * 4) * Math.floor(i/(width * 4))) / 4, y: Math.floor(i/(width * 4)) };
        return p;
    };
    
    var getPixel = function(x, y) {
        var p = { r: pixels[4 * x * y + 0], g: pixels[4 * x * y + 1], b: pixels[4 * x * y + 2], a:  pixels[4 * x * y + 3]};
        return p;
    };
}

function Particle(x, y) {
    var x = x;
    var y = y;
    
    this.__defineGetter__("x", function() {
        return x;
    });
    
    this.__defineGetter__("y", function() {
        return y;
    });
    
    this.__defineGetter__("position", function() {
        return { x: x, y: y };
    });
    
    this.__defineSetter__("x", function(n) {
        x = n;
    });
    
    this.__defineSetter__("y", function(n) {
        y = n;
    });
    
    // Dependent on Vector format
    this.__defineSetter__("position", function(p) {
        if(p.x && p.y) {
            x = p.x;
            y = p.y;
        }
    });
}