JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="800" height="500"></canvas>
    <div>
        <div>
            <label for="wind">
                Blow, wind. Blow!
            </label>
            <input type="checkbox" name="wind" id="wind" />
        </div>
        <div>
            <label for="trail">
                Leave trail</label>
            <input type="checkbox" name="trail" id="trail" />
        </div>
    </div>

JavaScript

// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
(function () {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelRequestAnimationFrame = window[vendors[x] +
          'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function (callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function () { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function (id) {
            clearTimeout(id);
        };
} ());

var Point = function(x, y) {
    this.x = x;
    this.y = y;
}

Point.prototype =
{
    add: function (point) {
        this.x += point.x;
        this.y += point.y;
    },

    subtract: function (point) {
        this.x -= point.x;
        this.y -= point.y;
    },

    scale: function (multiplier) {
        this.x *= multiplier;
        this.y *= multiplier;
    },

    min: function (x, y) {
        if (this.x < x)
            this.x = x;
        if (this.y < y)
            this.y = y;

    },

    max: function (x, y) {
        if (this.x > x)
            this.x = x;
        if (this.y > y)
            this.y = y;
    },

    copy: function (point) {
        this.x = point.x;
        this.y = point.y;
    },

    init: function () {
        this.x = this.y = 0;
    }
}

var Constraint = function(element, distance) {
    this.element = element;
    this.distance = distance;
}

var Particle = function(canvas, left, top) {
    
    var currentPoint = new...