react-text-particles
Version:
Create visually stunning text particles with React Text Particles and let your imagination run wild!
210 lines (201 loc) • 7.43 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var reactP5Wrapper = require('react-p5-wrapper');
var Particle = /*#__PURE__*/function () {
function Particle(p5, config, colorSet, x, y, size, index) {
if (index === void 0) {
index = 0;
}
this.p5 = p5;
this.config = config;
this.colorSet = colorSet;
this.baseSize = size;
this.index = index;
this.spawn = this.p5.createVector(x, y);
this.init();
}
var _proto = Particle.prototype;
_proto.init = function init() {
var _this$config;
this.size = this.baseSize * this.p5.random(0.5, 1.5);
this.start = this.p5.millis();
this.position = this.spawn.copy();
this.velocity = this.p5.createVector(0, 0);
this.acceleration = this.p5.createVector(0, 0);
this.duration = ((_this$config = this.config) == null ? void 0 : _this$config.lifeSpan) * this.p5.random(0.2, 1.2);
this.drag = this.p5.random(0.9, 1);
this.addForce(this.p5.createVector(this.p5.random(this.p5.TWO_PI), this.p5.random(10)));
this.color = this.p5.random(this.colorSet);
};
_proto.display = function display() {
var _this$config2;
var elapsed = this.p5.millis() - this.start;
var sizeMultiplier = 1;
if (elapsed < this.duration * 0.1) {
sizeMultiplier = this.p5.map(elapsed, 0, this.duration * 0.1, 0, 1);
} else if (elapsed > this.duration * 0.5) {
sizeMultiplier = this.p5.map(elapsed, this.duration * 0.5, this.duration, 1, 0);
}
this.p5.fill(this.color);
this.p5.circle(this.position.x, this.position.y, this.size * sizeMultiplier * this.p5.map(this.velocity.mag(), 0, (_this$config2 = this.config) == null ? void 0 : _this$config2.topSpeed, 0.5, 1.2));
};
_proto.update = function update() {
var _this$config3;
this.velocity.add(this.acceleration);
this.velocity.limit((_this$config3 = this.config) == null ? void 0 : _this$config3.topSpeed);
this.velocity.mult(this.drag);
this.position.add(this.velocity.copy().mult(1 / this.p5._targetFrameRate));
this.acceleration.mult(0);
if (this.position.y > this.p5.height || this.p5.millis() - this.start > this.duration) {
this.init();
}
};
_proto.addForce = function addForce(vector) {
this.acceleration.add(vector);
};
return Particle;
}();
var sketch = function sketch(p5) {
var particles = [];
var field = [];
var fieldStep;
var gravity;
var config;
var colorSet = [];
p5.setup = function () {
if (config) {
var _config, _config2;
p5.createCanvas((_config = config) == null || (_config = _config.canvas) == null ? void 0 : _config.width, (_config2 = config) == null || (_config2 = _config2.canvas) == null ? void 0 : _config2.height);
p5.colorMode(p5.HSL, 100);
p5.frameRate(60);
p5.noStroke();
setGravity();
init();
}
};
p5.updateWithProps = function (props) {
if (props.config) config = props.config;
if (props.colorSet) colorSet = props.colorSet;
p5.setup();
};
function init() {
var _config3, _config4;
p5.clear();
p5.fill(0);
p5.textSize((_config3 = config) == null ? void 0 : _config3.textSize);
p5.textAlign(p5.CENTER, p5.CENTER);
p5.textStyle(p5.BOLD);
p5.text((_config4 = config) == null ? void 0 : _config4.text, p5.width / 2, p5.height / 2);
particles = createParticles();
field = createField();
p5.clear();
}
function createParticles() {
var tempParticles = [];
var step = calculateStep(160);
var i = 0;
for (var x = 0; x < p5.width; x += step) {
for (var y = 0; y < p5.height; y += step) {
var alpha = p5.get(x + step / 2, y + step / 2)[3];
if (alpha > 0.5) {
tempParticles.push(new Particle(p5, config, colorSet, x + step / 2, y + step / 2, step * 3, i));
i++;
}
}
}
return tempParticles;
}
function createField() {
var tempField = [];
var step = fieldStep = calculateStep(20);
var i = 0;
for (var x = 0; x < p5.width; x += step) {
for (var y = 0; y < p5.height; y += step) {
i++;
var a = p5.noise(i) * p5.TWO_PI;
tempField[x + "-" + y] = a;
}
}
return tempField;
}
function calculateStep(min) {
return p5.floor(p5.max(p5.width, p5.height) / p5.min(min, p5.min(p5.width, p5.height)));
}
function setGravity() {
var _config5, _config6;
gravity = p5.createVector(p5.radians((_config5 = config) == null || (_config5 = _config5.gravity) == null ? void 0 : _config5.direction), (_config6 = config) == null || (_config6 = _config6.gravity) == null ? void 0 : _config6.force);
}
p5.draw = function () {
if (config) {
var _config7;
p5.background(((_config7 = config) == null || (_config7 = _config7.canvas) == null ? void 0 : _config7.bg) || 'white');
particles.forEach(function (particle) {
var _config8, _config9;
particle.addForce(gravity);
particle.addForce(p5.createVector(field[Math.floor(particle.position.x / fieldStep) * fieldStep + "-" + Math.floor(particle.position.y / fieldStep) * fieldStep] + ((_config8 = config) == null ? void 0 : _config8.flowOffset), (_config9 = config) == null ? void 0 : _config9.flow));
particle.update();
particle.display();
});
}
};
};
function useParticleConfig(_ref) {
var _ref$text = _ref.text,
text = _ref$text === void 0 ? 'Halil Atilla' : _ref$text,
_ref$textSize = _ref.textSize,
textSize = _ref$textSize === void 0 ? 160 : _ref$textSize,
_ref$flow = _ref.flow,
flow = _ref$flow === void 0 ? 0.3 : _ref$flow,
_ref$topSpeed = _ref.topSpeed,
topSpeed = _ref$topSpeed === void 0 ? 100 : _ref$topSpeed,
_ref$lifeSpan = _ref.lifeSpan,
lifeSpan = _ref$lifeSpan === void 0 ? 2000 : _ref$lifeSpan,
_ref$flowOffset = _ref.flowOffset,
flowOffset = _ref$flowOffset === void 0 ? 0 : _ref$flowOffset,
_ref$gravity = _ref.gravity,
gravity = _ref$gravity === void 0 ? {
direction: 90,
force: 0
} : _ref$gravity,
_ref$canvas = _ref.canvas,
canvas = _ref$canvas === void 0 ? {
width: 880,
height: 300,
bg: '#161c1e'
} : _ref$canvas,
_ref$colorSet = _ref.colorSet,
colorSet = _ref$colorSet === void 0 ? ['#fbbf24', '#e91e63', '#60a5fa', '#673ab7', '#65a30d'] : _ref$colorSet;
var _useState = React.useState({
colorSet: colorSet,
config: {
text: text,
textSize: textSize,
flow: flow,
topSpeed: topSpeed,
lifeSpan: lifeSpan,
flowOffset: flowOffset,
gravity: gravity,
canvas: canvas
},
sketch: sketch
}),
state = _useState[0];
return state;
}
var TextParticles = function TextParticles(props) {
var state = React.useMemo(function () {
return useParticleConfig(props);
}, [props]);
return React__default.createElement(reactP5Wrapper.ReactP5Wrapper, {
sketch: state.sketch,
config: state.config,
colorSet: state.colorSet
});
};
var index = /*#__PURE__*/React__default.memo(TextParticles);
exports.TextParticles = TextParticles;
exports.default = index;
//# sourceMappingURL=react-text-particles.cjs.development.js.map