react-flowfield/dist/react-flowfield.esm.js

<div align="center"><h1>React-Flowfield</h1></div>

import React, { useRef, useEffect } from 'react';
import p5, { Vector } from 'p5';

var Partical = /*#__PURE__*/function () {
  function Partical(p5, RGBA) {
    this.maxSpeed = 4;
    this.p5 = p5;
    this.pos = p5.createVector(p5.random(p5.width), p5.random(p5.height));
    this.vel = p5.createVector(0, 0);
    this.acc = p5.createVector(0, 0);
    this.prevPos = this.pos.copy();
    this.particalRGB = RGBA;
  }

  var _proto = Partical.prototype;

  _proto.update = function update() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);
    this.vel.limit(this.maxSpeed);
  };

  _proto.follow = function follow(flowfield, scl, cols) {
    var x = this.p5.floor(this.pos.x / scl);
    var y = this.p5.floor(this.pos.y / scl);
    var index = x + y * cols;
    var force = flowfield[index];
    this.applyForce(force);
  };

  _proto.applyForce = function applyForce(force) {
    this.acc.add(force);
  };

  _proto.show = function show() {
    /*   this.p5.stroke(0, 10); */
    this.p5.stroke(this.particalRGB.R, this.particalRGB.G, this.particalRGB.B, this.particalRGB.A);
    this.p5.strokeWeight(1);
    this.p5.line(this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y);
    this.updatePrev();
  };

  _proto.updatePrev = function updatePrev() {
    this.prevPos.x = this.pos.x;
    this.prevPos.y = this.pos.y;
  };

  _proto.edges = function edges() {
    if (this.pos.x > this.p5.width) {
      this.pos.x = 0;
      this.updatePrev();
    }

    if (this.pos.x < 0) {
      this.pos.x = this.p5.width;
      this.updatePrev();
    }

    if (this.pos.y > this.p5.height) {
      this.pos.y = 0;
      this.updatePrev();
    }

    if (this.pos.y < 0) {
      this.pos.y = this.p5.height;
      this.updatePrev();
    }
  };

  return Partical;
}();

var FlowField = function FlowField(_ref) {
  var _ref$lengthOfAnimatio = _ref.lengthOfAnimation,
      lengthOfAnimation = _ref$lengthOfAnimatio === void 0 ? 4000 : _ref$lengthOfAnimatio,
      _ref$numberOfPartical = _ref.numberOfParticals,
      numberOfParticals = _ref$numberOfPartical === void 0 ? 2000 : _ref$numberOfPartical,
      _ref$backgroundColor = _ref.backgroundColor,
      backgroundColor = _ref$backgroundColor === void 0 ? {
    R: 255,
    G: 255,
    B: 255,
    A: 255
  } : _ref$backgroundColor,
      _ref$particalColor = _ref.particalColor,
      particalColor = _ref$particalColor === void 0 ? {
    R: 0,
    G: 0,
    B: 0,
    A: 10
  } : _ref$particalColor;
  var p5Sketch = useRef(null);

  var s = function s(p5) {
    var _p5Sketch$current, _p5Sketch$current$par, _p5Sketch$current2, _p5Sketch$current2$pa;

    var scl = 10;
    var inc = 0.1;
    var height = (_p5Sketch$current = p5Sketch.current) == null ? void 0 : (_p5Sketch$current$par = _p5Sketch$current.parentElement) == null ? void 0 : _p5Sketch$current$par.offsetHeight;
    var width = (_p5Sketch$current2 = p5Sketch.current) == null ? void 0 : (_p5Sketch$current2$pa = _p5Sketch$current2.parentElement) == null ? void 0 : _p5Sketch$current2$pa.offsetWidth;
    var cols;
    var rows;
    var zoff = 0;
    var numberOfItterations = 0;
    var partical = [];
    var flowfield;

    p5.setup = function () {
      if (height && width) p5.createCanvas(width, height);
      cols = p5.floor(p5.width / scl);
      rows = p5.floor(p5.height / scl);
      flowfield = new Array(cols * rows);

      for (var i = 0; i < numberOfParticals; i++) {
        partical[i] = new Partical(p5, particalColor);
      }

      p5.background(backgroundColor.R, backgroundColor.G, backgroundColor.B, backgroundColor.A);
    };

    p5.draw = function () {
      var yoff = 0; //Row Loop

      for (var y = 0; y < rows; y++) {
        var xoff = 0; //Cols loop

        for (var x = 0; x < cols; x++) {
          var index = x + y * cols;
          var angle = p5.noise(xoff, yoff, zoff) * p5.TWO_PI * 2;
          var v = Vector.fromAngle(angle);
          v.setMag(0.5);
          flowfield[index] = v;
          xoff += inc;
        }

        yoff += inc;
      }

      zoff += 0.0005;

      if (numberOfItterations < lengthOfAnimation) {
        for (var i = 0; i < partical.length - 1; i++) {
          partical[i].follow(flowfield, scl, cols);
          partical[i].update();
          partical[i].edges();
          partical[i].show();
        }
      }

      numberOfItterations += 1;
    };
  };

  var ignore = false;
  useEffect(function () {
    if (p5Sketch.current && !ignore) new p5(s, p5Sketch.current);
    return function () {
      ignore = true;
    };
  }, [p5Sketch.current]);
  return React.createElement("div", {
    ref: p5Sketch
  });
};

export { FlowField };
//# sourceMappingURL=react-flowfield.esm.js.map