0.1.1 • Published 4 years ago
partica v0.1.1
particalizor-5000
| original | particalized-5000 |
|---|---|
 |  |
settings used to create the example image above
import React from "react";
import MovingPicture from "particalizor-5000";
import testImage from "./testImage.png";
export const MovingPictureApp: React.FC<IMovingPictureAppProps> = ({}) => {
return (
<MovingPicture
directionChannel={"saturation"}
particleVelocity={0.5}
hueChannel={"blue"}
hueReverse={false}
particleTraceWidth={2}
particleLifeTime={7000}
particleNumber={700}
imageSource={testImage}
/>
);
}api
| property | type | required | default | description |
|---|---|---|---|---|
| imageSource | string | yes | -- | source of the image, either imported image (.png, .jpg), either base64 representation |
| particleNumber | number | no | 7000 | number of particles |
| particleTraceWidth | number | no | 1 | width of a particle trace |
| particleLifeTime | number | no | 700 | lifetime of a particle |
| particleVelocity | number | no | 0.5 | velocity of particles |
| directionChannel | string | no | "hue" | enum of {"red","green","blue","hue","saturation","light"} |
| hueChannel | string | no | "blue" | enum of {"red","green","blue","hue","saturation","light"} |
| directionReverse | boolean | no | false | reversed direction |
| hueReverse | boolean | no | false | reversed hue |
| randomizeSettings | boolean | no | false | randomize properties that are not passed in |
example usage
import React from "react";
import MovingPicture from "particalizor-5000";
import testImage from "./testImage.png";
export const MovingPictureApp: React.FC<IMovingPictureAppProps> = ({}) => {
return (
<MovingPicture
imageSource={testImage}
/>
);
}