Thousand words

Type some text on the keyboard to reveal the image. Left/right click decreases/increases the line separation. Picture by Petras Gagilas http://www.flickr.com/photos/gagilas/4495968987

by Javier Graciá Carpio

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

JavaScript

var sketch = function (p) {
    // Global variables
    var img, phrase, lastLine, nLines, textSize, textLeading;

    // Load the image before the sketch is run
    p.preload = function () {
        // Picture by Petras Gagilas
        // http://www.flickr.com/photos/gagilas/4495968987
        img = p.loadImage("http://farm3.staticflickr.com/2713/4495968987_6e546b3d55_z.jpg");
    };

    // Initial setup
    p.setup = function () {
        // Resize the image
        img.resize(0.8 * img.width, 0.8 * img.height);

        // Create the canvas
        var canvas = p.createCanvas(img.width, img.height);

        // Initialize the global variables
        phrase = "";
        lastLine = "";
        nLines = 0;
        textSize = 120;
        textLeading = 120;

        // Set the font properties
        p.textFont("Helvetica");
        p.textSize(textSize);
        p.textLeading(textLeading);
        p.textAlign(p.CENTER);
        p.noStroke();

        // Draw only when it's necessary
        p.noLoop();
    };

    // Execute the sketch
    p.draw = function () {
        // Clean the canvas
        p.background(0);

        // Write the text in red
        var xPos = 0.5 * p.width + 0.5 * p.textWidth("\n");
        var yPos = 0.5 * p.height + 0.25 * textSize - 0.5 * nLines * textLeading;
        p.fill(p.color(255, 0, 0));
        p.text(phrase, xPos, yPos);

        // Manipulate the canvas pixels
        var x, y, pixel, distance;

        p.loadPixels();
        img.loadPixels();

        for (x = 0; x < p.width; x++) {
            for (y = 0; y < p.height; y++) {
                pixel = 4 * (x + y * p.width);

                if (p.pixels[pixel] === 255) {
                    p.pixels[pixel] = img.pixels[pixel];
                    p.pixels[pixel + 1] = img.pixels[pixel + 1];
                    p.pixels[pixel + 2] = img.pixels[pixel + 2];
                } else {
                    distance = Math.sqrt(p.sq(x - 0.5 * p.width) + p.sq(y - 0.5 * p.height));
 ...