Evolving words

Particles compose words, words make sentences, and sentences evolve into stories.

by Javier Graciá Carpio

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/toxiclibsjs/0.1.3/toxiclibs.min.js"></script>
<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 positions, step;

    // Initial setup
    p.setup = function () {
        // Create the canvas
        var canvas = p.createCanvas(600, 400);
        p.frameRate(30);

        // Calculate the trajectory positions for every particle
        positions = calculateTrajectories("This is not a LOVE story", 2 * p.width);
        step = 0;
    };

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

        // Paint the trajectories step by step
        if (step < positions[0].length) {
            p.noStroke();
            p.fill(0, 150, 200, 100);

            // Draw all the particles
            for (var i = 0; i < positions.length; i++) {
                p.ellipse(positions[i][step].x, positions[i][step].y, 5, 5);
            }
        } else if (step > positions[0].length + 20) {
            // Stop the sketch
            p.noLoop();
        }

        step++;
    };

    //
    // Calculates the particles trajectories
    //
    calculateTrajectories = function (text, nParticles) {
        var words, limits, trajectories, nSteps, i;

        // Split the text into words
        words = p.splitTokens(text, " ");

        // Calculate the words limits
        limits = [];

        for (i = 0; i < words.length; i++) {
            limits[i] = wordLimits(words[i]);
        }

        // Calculate the particle trajectories
        trajectories = [];
        nSteps = 80;

        for (i = 0; i < nParticles; i++) {
            trajectories[i] = trajectory(limits, nSteps);
        }

        return trajectories;
    };

    //
    // Calculates the word limits
    //
    wordLimits = function (word) {
        var textSize, limits, x, y, dx, dy, px, py, pixel, isLimit;

        // Paint the background
        p.background(0);

        // Paint the text
        textSize = 0.25 * p.width;
        p.push();
        p.textFont("Helvetica");
       ...