Project 5
flow.js 2021
flow.js is a p5 library that allows you to animate text and steer emotion in an artsy manner.
source code
Documentation
fontArray = font.textToPoints(text, x, y, s, {
sampleFactor: sample
});
textArt(fontArray, rotVal, r, g, b, alpha);
Parameters
text: The text you want to animate. This should be a string.
x: The x-coordinate of the text.
y: The y-coordinate of the text.
s: The size of the text.
sample: Changing the sample value (optional). Recommended range is 1-10.
fontArray: A globally declared variable that is addressed to the textToPoints() p5 function. Values of all the variables above need to be passed in.
rotVal: Rotation of the lines starting from each textToPoint x-y coordinate. Controls the flow of the animation.
r: The 'r' (red) value of the line's color fill. Value from 0-255.
g: The 'g' (green) value of the line's color fill. Value from 0-255.
b: The 'blue' (blue) value of the line's color fill. Value from 0-255.
alpha: The alpha value of the line's color fill. Controls the opacity of the lines. Value from 0-1.
Note: !! Upload your own font as an .otf file and preload it. !! Assign it to a 'font' variable and set it as the text font.
Input the textToPoints() p5 function and assign it to the globally declared 'fontArray' variable.
Make sure to declare a 'sample' variable and equate it to the desired value.
Examples
