Typography poster

Particles aggregation on letters

by schrodingers

HTML

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

JavaScript

var sketch = function (p) {
    // Global variables
    var nParticles = 505;
    var particles = [];
    var bgColor = 255;
    var obstacleColor = 240; //цвет букв и фона (внешнего)
    var inclination = p.random(-0.05, 0.05); //наклон холста
    var limits;

    // Initial setup
    p.setup = function () {
        var canvas = p.createCanvas(800, 600);
        // Reset the sketch each time the mouse is pressed inside the canvas
        canvas.mousePressed(resetSketch);
        p.noStroke();
        // Calculate the obstacle limits
        limits = obtainLimits(bgColor, obstacleColor, inclination);
    };

    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, Math.TAU);
            var vel = p.createVector(velMag * p.cos(ang), velMag * p.sin(ang));
            var diameter = 5;
            var color = p.color(0, 110, 210);
            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, obstacleColor, inclination) {
        //...