blotter

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.uniforms

    An object that holds the uniforms that describe how the material's effects should be rendered. Each entry is a live UniformInterface: assign to its value and the running effect updates. You should not replace this property directly.

    • uPointCellWidth material.uniforms.uPointCellWidth

      Although regularly penetrating the space of others, each point rendered through the FliesMaterial moves 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 the uPointCellWidth uniform.

      • value material.uniforms.uPointCellWidth.value

        A floating point value between 0.0 (0%) and 1.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 the uPointCellWidth uniform is 0.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.type

        The 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.uPointRadius

      The uPointRadius uniform describes the size of the points that together constitute the FliesMaterial effect.

      • value material.uniforms.uPointRadius.value

        A floating point value between 0.0 (0%) and 1.0 (100%), relative to half the value of the uPointCellWidth uniform. That is, given a value of 1.0, the uPointRadius uniform would describe a point with a total circumference equal to the cell in which it exists as described by the uPointCellWidth uniform.

        The default value is 0.75.

      • type material.uniforms.uPointRadius.type

        The 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.uDodge

      There may be occasions in which you will want to diminish the presence of points created by the FliesMaterial around a certain position within your text, such as to make points dodge the cursor as a user swipes across your text on the page. The uDodge uniform 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 the uDodgePosition uniform, and at the distance described by the uDodgeSpread uniform.

      • value material.uniforms.uDodge.value

        A floating point value. Either 0.0 (false) or 1.0 (true).

        The default value is 0.

      • type material.uniforms.uDodge.type

        The 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.uDodgePosition

      The uDodgePosition uniform describes a position within your text away from which the points of the FliesMaterial should dodge when the value of the uDodge uniform is more than 0.0.

      • value material.uniforms.uDodgePosition.value

        A pair of floating point values between 0.0 (0%) and 1.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.type

        The 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.uDodgeSpread

      When the value of the uDodge uniform is more than 0.0, the points of the FliesMaterial will increasingly diminish in size as they approach the position described by the uDodgePosition uniform. The uDodgeSpread uniform is used to describe the distance across which this diminishing should occur.

      • value material.uniforms.uDodgeSpread.value

        A floating point value between 0.0 (0%) and 1.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.type

        The 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.uSpeed

      The uSpeed uniform describes the speed of the animation of the points of the FliesMaterial.

      • value material.uniforms.uSpeed.value

        Any 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.type

        The 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.

source code