Word limits

Click the mouse to start again. Works with any font and shape.

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 nParticles = 300;
    var particles = [];
    var bgColor = 255;
    var obstacleColor = 130;
    var inclination = p.random(-0.05, 0.05);
    var limits;

    // Initial setup
    p.setup = function () {
        // Create the canvas
        var canvas = p.createCanvas(500, 750);

        // Reset the sketch each time the mouse is pressed inside the canvas
        canvas.mousePressed(resetSketch);

        // General sketch properties
        p.noStroke();

        // Calculate the obstacle limits
        limits = obtainLimits(bgColor, obstacleColor, inclination);
    };

    // Execute the sketch
    p.draw = function () {
        // Paint the obstacles
        paintObstacles(bgColor, obstacleColor, inclination);

        // Add new particles if necessary
        if (particles.length < nParticles) {
            var pos = p.createVector(p.random(0.4, 0.6) * p.width, 0.1 * p.height);
            var velMag = p.random(1, 3);
            var ang = p.random(-Math.PI, 0);
            var vel = p.createVector(velMag * p.cos(ang), velMag * p.sin(ang));
            var diameter = 5;
            var color = p.color(255, 0, 0);
            particles.push(new Particle(pos, vel, diameter, color));
        }

        // Paint the particles and update their position and velocity
        for (var i = 0; i < particles.length; i++) {
            particles[i].paint();
            particles[i].update(limits);
        }
    };

    //
    // This function resets the sketch
    //
    function resetSketch() {
        // Change the noise seed and the inclination angle
        p.noiseSeed(p.random(0, 1000));
        inclination = p.random(-0.05, 0.05);

        // Obtain the new limits
        limits = obtainLimits(bgColor, obstacleColor, inclination);

        // Start with new particles
        particles = [];
    }

    //
    // Calculates the limits of the painted obstacles
    //
    obtainLimits = function (bgColor,...