dat.gui/demo/demo.js

function DynamicText(message, width, height, textAscent) {
    
    var message = message;
    
    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";
    
    var createParticles = function(m) {
        s.fillStyle = "#fff";
        s.fillRect(0, 0, width, height);
        
        s.fillStyle = "#222";
        s.fillText(m, 0, 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);
                var c = getPixel(p.x, p.y);
                particles.push( new Particle(p.x, p.y, c) );
            }
        }
    };
    
    var render = function() {
        
        g.clearRect(0, 0, width, height);
        
        for(var i = 0; i < particles.length; i++) {
            particles[i].update();
            
            var p = particles[i].position;
            g.fillStyle = particles[i].color;
            g.fillRect(p.x, p.y, 1, 1);
        }
    };
    
    var getPosition = function(i) {
        return { x: (i - (width * 4) * Math.floor(i/(width * 4))) / 4, y: Math.floor(i/(width * 4)) };
    };
    
    var getPixel = function(x, y) {
        var base = (y * width + x) * 4;
        return { r: pixels[base + 0], g: pixels[base + 1], b: pixels[base + 2], a:  pixels[base + 3]};
    };
    
    this.__defineGetter__("message", function() {
        return message;
    });
    
    this.__defineSetter__("message", function(m) {
        message = m;
        particles = [];
        createParticles(message);
        render();
    });
    
    createParticles(message);
    setInterval(render, 30);
}

function Particle(x, y, c) {
    var x = x;
    var y = y;
    
    this.color = "rgb("+c.r+", "+c.g+", "+c.b+")";
    
    this.update = function() {
        // x+=Math.random() - Math.random();
    };
    
    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;
        }
    });
}