FliesMaterial
Veering in a tireless swarm, the FliesMaterial recreates your text as a cloud of
animated points.
FliesMaterial extends Material, and therefore has the same
properties and functions as Material.
-
construction
import { FliesMaterial } from "blotter.ts/materials"; const material = new FliesMaterial(); -
uniforms
material.uniformsAn object that holds the uniforms that describe how the material's effects should be rendered. Each entry is a live
UniformInterface: assign to itsvalueand the running effect updates. You should not replace this property directly.-
uPointCellWidth
material.uniforms.uPointCellWidthAlthough regularly penetrating the space of others, each point rendered through the
FliesMaterialmoves primarily within its own space on your text. Imagine a grid of these spaces overlaid atop your text. The width and height of each unit within this grid is equal to the value of theuPointCellWidthuniform.-
value
material.uniforms.uPointCellWidth.valueA floating point value between
0.0(0%) and1.0(100%), relative to the height of your text (including any padding and line height). For example, if your text has a total height of 100 pixels, and the value of theuPointCellWidthuniform is0.04, each unit within the grid of used spaces described above will have a width and a height of 4 pixels.The default value is
0.04. -
type
material.uniforms.uPointCellWidth.typeThe uniform type of the value being passed to the shader.
"1f"means the value is a single float (e.g.0.5). You should not change this property.
-
-
uPointRadius
material.uniforms.uPointRadiusThe
uPointRadiusuniform describes the size of the points that together constitute theFliesMaterialeffect.-
value
material.uniforms.uPointRadius.valueA floating point value between
0.0(0%) and1.0(100%), relative to half the value of theuPointCellWidthuniform. That is, given a value of1.0, theuPointRadiusuniform would describe a point with a total circumference equal to the cell in which it exists as described by theuPointCellWidthuniform.The default value is
0.75. -
type
material.uniforms.uPointRadius.typeThe uniform type of the value being passed to the shader.
"1f"means the value is a single float (e.g.0.5). You should not change this property.
-
-
uDodge
material.uniforms.uDodgeThere may be occasions in which you will want to diminish the presence of points created by the
FliesMaterialaround a certain position within your text, such as to make points dodge the cursor as a user swipes across your text on the page. TheuDodgeuniform serves as a boolean (true/false) value, meant to tell the effect whether or not to have its points dodge around the position described by theuDodgePositionuniform, and at the distance described by theuDodgeSpreaduniform.-
value
material.uniforms.uDodge.valueA floating point value. Either
0.0(false) or1.0(true).The default value is
0. -
type
material.uniforms.uDodge.typeThe uniform type of the value being passed to the shader.
"1f"means the value is a single float (e.g.0.5). You should not change this property.
-
-
uDodgePosition
material.uniforms.uDodgePositionThe
uDodgePositionuniform describes a position within your text away from which the points of theFliesMaterialshould dodge when the value of theuDodgeuniform is more than0.0.-
value
material.uniforms.uDodgePosition.valueA pair of floating point values between
0.0(0%) and1.0(100%), relative to the width and height of your text respectively (including any padding and line height). The origin is the bottom-left corner of the text, as in WebGL.The default value is
[0.5, 0.5]. -
type
material.uniforms.uDodgePosition.typeThe uniform type of the value being passed to the shader.
"2f"means the value is a pair of floating point values, passed in the form of an array (e.g.[0.5, 0.5]). You should not change this property.
-
-
uDodgeSpread
material.uniforms.uDodgeSpreadWhen the value of the
uDodgeuniform is more than0.0, the points of theFliesMaterialwill increasingly diminish in size as they approach the position described by theuDodgePositionuniform. TheuDodgeSpreaduniform is used to describe the distance across which this diminishing should occur.-
value
material.uniforms.uDodgeSpread.valueA floating point value between
0.0(0%) and1.0(100%), relative to the height of your text (including any padding and line height).The default value is
0.25. -
type
material.uniforms.uDodgeSpread.typeThe uniform type of the value being passed to the shader.
"1f"means the value is a single float (e.g.0.5). You should not change this property.
-
-
uSpeed
material.uniforms.uSpeedThe
uSpeeduniform describes the speed of the animation of the points of theFliesMaterial.-
value
material.uniforms.uSpeed.valueAny floating point value is acceptable. This value acts as a multiplier against the default uniform passed to all effects,
uGlobalTime, which represents the time in seconds since the effect started. Therefore, smaller values slow animation while higher values speed up animation. Play around, you'll get the idea.The default value is
1. -
type
material.uniforms.uSpeed.typeThe uniform type of the value being passed to the shader.
"1f"means the value is a single float (e.g.0.5). You should not change this property.
-
-