construction

import { RollingDistortMaterial } from "blotter.ts/materials";

const material = new RollingDistortMaterial();

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.

• uSineDistortSpread material.uniforms.uSineDistortSpread

  Imagine a wave rolling across your text over time. The distance between the beginning and end of this wave takes up some percent of the total amount of visible text as it moves. The uSineDistortSpread uniform is used to describe this distance.

  • value material.uniforms.uSineDistortSpread.value

    Any floating point value is acceptable, however you will likely want to keep this value 0.5 and below. This value describes the distance (from 0.0 (0%) to 1.0 (100%)) your wave spans on a line running away from the center point, as described by the uDistortPosition uniform, along the axis perpendicular to the one described by the uRotation uniform. Therefore setting this value to anything above 0.5 will create distortions, as your wave will not have room to complete itself before beginning anew.

    The default value is 0.05.

  • type material.uniforms.uSineDistortSpread.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.

• uSineDistortCycleCount material.uniforms.uSineDistortCycleCount

  A counterpart to the above uSineDistortSpread, this uniform describes the number of wave cycles (crests and troughs) that should occur within the space defined by uSineDistortSpread.

  • value material.uniforms.uSineDistortCycleCount.value

    Any floating point value is acceptable. Setting this value to 1.0 would create a single arching wave: just a crest with no trough. Setting this value to 2.0 would create a full wave cycle: a crest and a trough. Play around, you'll get the idea.

    Note that you don't have to use whole numbers here; using partial numbers (e.g. 3.5) creates interesting artifacts you might enjoy.

    The default value is 2.

  • type material.uniforms.uSineDistortCycleCount.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.

• uSineDistortAmplitude material.uniforms.uSineDistortAmplitude

  A counterpart to the above uSineDistortCycleCount and uSineDistortSpread, this uniform describes the amplitude of the crests and troughs determined by uSineDistortCycleCount.

  • value material.uniforms.uSineDistortAmplitude.value

    Any floating point value is acceptable. When distortion on your text rotates, imagine a virtual line running from the position described by the uDistortPosition uniform and at the degrees described by the uRotation uniform. The wave distortion amplitude described by the uSineDistortAmplitude uniform is relative to this distance (from 0.0 (0%) to 1.0 (100%)).

    The default value is 0.25.

  • type material.uniforms.uSineDistortAmplitude.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.

• uNoiseDistortVolatility material.uniforms.uNoiseDistortVolatility

  Apart from the main sine wave distortion, RollingDistortMaterial also provides a way to define a more consistent and noisy distortion to your text. Because this distortion lacks any specific position or spread, the uNoiseDistortVolatility uniform is more concerned with an overall volatility your text will experience, or the rate at which variation occurs along the distortion axis (see uRotation).

  • value material.uniforms.uNoiseDistortVolatility.value

    Any floating point value is acceptable. Higher values equate to a higher volatility. As always, play with the values here until you find the effect you like.

    The default value is 20.

  • type material.uniforms.uNoiseDistortVolatility.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.

• uNoiseDistortAmplitude material.uniforms.uNoiseDistortAmplitude

  The uNoiseDistortAmplitude uniform describes the amplitude of the crests and troughs of the noise based distortion determined by uNoiseDistortVolatility.

  • value material.uniforms.uNoiseDistortAmplitude.value

    Any floating point value is acceptable. When distortion on your text rotates, imagine a virtual line running from the position described by the uDistortPosition uniform and at the degrees described by the uRotation uniform. The noise distortion amplitude described by the uNoiseDistortAmplitude uniform is relative to this distance (from 0.0 (0%) to 1.0 (100%)).

    The default value is 0.01.

  • type material.uniforms.uNoiseDistortAmplitude.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.

• uDistortPosition material.uniforms.uDistortPosition

  When imagining a wave moving across your text, you likely imagine it moving along some axis. For example, you may imagine the wave moving along a vertical line, from the top to the bottom of your text. As the wave travelled along this line, its Y position would change. The uniform uDistortPosition is used to describe the center position of your wave and the noise distortion applied to your text.

  Note that when the distortion is animating, as described by the uSpeed uniform, the animation occurs along a line running through the position described by the uDistortPosition uniform, at an angle perpendicular to the angle described by the uRotation uniform.

  • value material.uniforms.uDistortPosition.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 default value is [0.5, 0.5].

  • type material.uniforms.uDistortPosition.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.

• uRotation material.uniforms.uRotation

  The uRotation uniform describes the rotation, in degrees, of all distortion applied to your text. For example, if you apply a wave distortion to your text the amplitude of that wave, described by the uSineDistortAmplitude uniform, would rise and fall along the angle at these degrees.

  Note that when the distortion is animating, as described by the uSpeed uniform, the animation occurs along a line running through the position described by the uDistortPosition uniform, at an angle perpendicular to the angle described by the uRotation uniform.

  • value material.uniforms.uRotation.value

    A floating point value between 0.0 and 360.0.

    The default value is 170.

  • type material.uniforms.uRotation.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 applied to the distortion on your text.

  Note that when the distortion is animating, as described by the uSpeed uniform, the animation occurs along a line running through the position described by the uDistortPosition uniform, at an angle perpendicular to the angle described by the uRotation uniform.

  • value material.uniforms.uSpeed.value

    Any floating point value is acceptable, however you will likely want to keep this value below 1.0. 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 0.08.

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