JSFiddle - React, Tailwind, and code Playground

by schrodingers

HTML

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

JavaScript

//p5.js particles words animated
/*
Particles compose words, words make sentences, and sentences evolve into stories.

*/
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");
    p.textAlign(p.CENTER);
    p.textSize(textSize);
    p.textStyle(p.BOLD);
    p.noStroke();
    p.fill(255);
    p.text(word,...