Launch Sound to Vision Browser

FILTERS

Updated March 22th, 2025

Introduction

In Sound to Vision, a filter is a special effect or transformation that can be applied to assets to modify their appearance in real-time. Filters enable the dynamic alteration of visual elements, allowing for a wide range of artistic or stylistic effects. By adjusting properties like color, brightness, contrast, sharpness, and distortion, filters help create unique visual experiences. The filters in this API are designed to be highly customizable, with adjustable parameters that allow users to fine-tune the intensity and behavior of each effect. From blurring and pixelation to color shifts and more complex visual distortions, these filters provide the tools to enhance the media with engaging and immersive effects.

Below you find a detailed description to each of the filters that SToV has to offer. Please use the menu to the right to navigate quickly to the different options available.

Figure 1: The filter properties tab with the Adjustment Filter selected. When a filter is enabled it will have

Adjustment Filter

Description:The AdjustmentFilter applies various image adjustments, including brightness, contrast, saturation, gamma correction, and more. Use this filter to modify the appearance of images by adjusting brightness, contrast, and color balance.

Parameters

Parameter Type Description Default
gamma Number Gamma correction (higher values make the image brighter). 1.0
contrast Number Adjusts contrast (higher values increase contrast). 1.0
saturation Number Adjusts color saturation (higher values intensify colors). 1.0
brightness Number Controls brightness (higher values make the image brighter). 1.0
red Number Scales the red channel. 1.0
green Number Scales the green channel. 1.0
blue Number Scales the blue channel. 1.0
alpha Number Adjusts transparency (higher values make it more opaque). 1.0

Advanced Bloom Filter

Description: The AdvancedBloomFilter creates a glowing bloom effect around bright areas of an image. This effect can be customized with various properties to control intensity, blur, and brightness.

Parameter Type Description Default
threshold Number Defines how bright a color needs to be to affect bloom. Lower values will include more colors in the bloom effect. 0.5
bloomScale Number Adjusts the strength of the bloom. Higher values increase the intensity of the bloom effect. 1.0
brightness Number Controls the brightness of the bloom effect. Lower values create a more subtle effect, while higher values make the effect more pronounced. 1.0
blur Number Sets the strength of the blur applied to the bloom effect. Higher values result in a stronger blur. 8
quality Number Determines the quality of the blur filter. Higher values result in better quality but may impact performance. 4
kernels Number The kernels used for the blur filter. Allows for more control over the blur effect. 1
pixelSize Number Defines the pixel size for the blur effect, influencing the resolution of the blur. 1
resolution Number The resolution of the blur filter, affecting the quality and performance of the blur. 1

Ascii Filter

strong>Description:The AsciiFilter converts an image into an ASCII-style representation using blocky character-like shapes. Creates a retro, text-based aesthetic.

Parameters

Parameter Type Description Default
size Number Size of the ASCII characters. 8

Godray Filter

Description: The GodrayFilter simulates light rays originating from a source, creating a dramatic godray effect. It allows for detailed customization of the ray intensity, direction, and fractal noise used to generate the rays.

Parameter Type Description Default
angle Number Controls the angle or light-source direction of the rays, determining where the rays will originate. 30
gain Number Sets the general intensity of the rays. Higher values create stronger rays. 0.5
lacunarity Number Controls the density of the fractal noise used to generate the rays. Higher values result in more complex and dense rays. 2.5
parallel Boolean When set to true, the rays are generated from a specific angle. If set to false, the rays will be generated from a focal point (center). true
time Number The current time position used for animating the effect over time. 0
center Array The focal point for non-parallel rays. This should be used when parallel is set to false to create rays originating from a center point. [0, 0]
alpha Number Controls the transparency of the rays. A lower value makes the rays more transparent, while a higher value makes them more opaque. 1.0

Pixelate Filter

Description:The PixelateFilter reduces image detail by replacing pixels with larger color blocks.

Parameters

Parameter Type Description Default
size Number Size of the pixelation effect. {x: 10, y: 10}

Noise Filter

Description: The NoiseFilter adds random noise (grain) to an image, simulating film grain or static interference. Used for vintage film effects or subtle texture overlays.

Parameters

Parameter Type Description Default
noise Number Amount of noise applied to the image. 0.5

Color Overlay Filter

Description: The ColorOverlayFilter applies a solid color overlay to an image, blending it with the original content.

Parameter Type Description Default
color Number The color of the overlay in hex format. 0x000000
alpha Number The opacity of the overlay (0 to 1). 1.0

Bulge Pinch Filter

Description: The BulgePinchFilter distorts an image by bulging or pinching pixels around a focal point.

Parameter Type Description Default
center Point The center of the distortion. {x: 0.5, y: 0.5}
radius Number The radius of the bulge effect. 100
strength Number The intensity of the effect (negative values pinch, positive values bulge). 1.0

CRT Filter

Description: The CRTFilter simulates the look of an old CRT television, applying effects like interlaced lines, noise, and vignetting to recreate a retro appearance.

Parameter Type Description Default
curvature Number Bends the interlaced lines. A higher value means a more pronounced bend. 1.0
lineWidth Number Sets the width of the interlaced lines. 1.0
lineContrast Number Defines the contrast of the interlaced lines. 0.25
verticalLine Boolean True will use vertical lines, while false will use horizontal lines. false
noise Number Controls the opacity or intensity of the noise effect. The value should be between 0 and 1. 0.3
noiseSize Number Defines the size of the noise particles. 1.0
seed Number A seed value used for random noise generation, ensuring consistent results when re-applying the effect. 0
vignetting Number The radius of the vignette effect. Smaller values create a smaller vignette. 0.3
vignettingAlpha Number The opacity of the vignette effect. 1.0
vignettingBlur Number Sets the blur intensity of the vignette effect. 0.3
time Number For animating the interlaced lines over time. 0

Shockwave Filter

Description: The ShockwaveFilter creates a radial shockwave effect that distorts the content around a given center, simulating a dynamic wave or explosion.

Parameter Type Description Default
center Array Defines the center point of the shockwave effect. Expressed as an array with two values: [x, y]. [0.5, 0.5]
amplitude Number Controls the intensity or strength of the shockwave effect. Higher values result in more intense distortion. 0.5
wavelength Number Determines the wavelength of the shockwave, controlling the frequency of the wave peaks and valleys. 1.0
speed Number Defines the speed at which the shockwave propagates. 500.0
brightness Number Adjusts the brightness of the shockwave effect. 8
radius Number Specifies the radius of the shockwave's influence, determining how far the effect will reach. 4
time Number Controls the animation over time. This can be used to animate the shockwave effect. 0

Reflection Filter

Description: The ReflectionFilter adds a reflective surface beneath the image, optionally creating a wave-like effect on the reflection.

Parameter Type Description Default
mirror Number When set to true, it reflects the image; when set to false, it only creates wave-like effects without a full reflection. true
boundary Number Defines the vertical position of the reflection point. A value of 0.5 means the reflection is in the middle. Smaller values produce a larger reflection, while larger values produce a smaller one. 0.5
amplitude Array Defines the starting and ending amplitude of the waves in the reflection. The first value is the start, and the second is the end amplitude. [0, 20]
waveLength Array Defines the starting and ending length of the waves in the reflection. The first value is the starting wave length, and the second is the ending wave length. [30, 100]
alpha Array Defines the starting and ending alpha (opacity) values for the reflection. The first value is the start, and the second is the end opacity. [1, 1]
time Number Controls the animation of the wave's position over time. This can be used to animate the reflection. 0

Extract Filter

Description: The ExtractFilter is designed to extract a specific color based on RGB similarity. It is useful when you want to isolate a certain color or range of colors from an image.

Parameter Type Description Default
KeyColor Color The target color you wish to extract from the image. #000000
Similarity Number Defines how similar a color must be to KeyColor in order to be considered for extraction. A higher value means more colors will match. 0.4
Smoothness Number Controls the smoothness of the color transition between extracted colors. A higher value creates a more gradual blend. 0.1
Spill Number Sets the amount of spill from the extracted color into adjacent areas. Useful for creating a cleaner separation. 0.1

Chroma Filter

Description: The ChromaFilter is used for chroma keying, which is often employed to remove a specific color background (e.g., green screen effect). It works by extracting the background color based on RGB similarity and transparency.

Parameter Type Description Default
KeyColor Color The color used for chroma keying. Typically the background color (e.g., green or blue) to be removed from the image. #0000FF
Similarity Number Defines how similar a color must be to KeyColor in order to be removed. A higher value means more colors will be removed. 0.4
Smoothness Number Controls the smoothness of the transition when removing the key color. A higher value creates a more gradual transition. 0.1
Spill Number Sets the amount of spill from the chroma keyed area into the remaining image. Useful for cleaning up edges of the keying process. 0.1

Invert Filter

Description: The InvertFilter inverts the colors of an image, creating a negative effect.

Parameter Type Description Default

Coarse Noise Filter

Description: The CoarseNoiseFilter applies a rough noise pattern to the image, simulating a grainy texture.

Parameter Type Description Default

Radial Wave Shader

Description: The RadialWaveShader creates a radial wave effect emanating from a specified center point, allowing for dynamic distortion.

Parameter Type Description Default
Amount Number Controls the strength of the radial wave effect. A higher value increases the intensity of the effect. 1
Multiplier Number Defines how much the wave effect is multiplied. A higher value intensifies the wave effect. 1
Center x Number The X-coordinate of the center point where the radial wave originates (range: 0 to 1). 0.5
Center y Number The Y-coordinate of the center point where the radial wave originates (range: 0 to 1). 0.5

Cycle Threshold Shader

Description: The CycleThresholdShader applies a cycling threshold effect to the image, emphasizing certain pixel intensities over time.

Parameter Type Description Default

Zoom Filter

Description: The ZoomFilter applies a zoom effect to the image, adjusting the view of the scene based on the specified zoom factor.

Parameter Type Description Default
Zoom Factor Number Controls the zoom level of the effect. A value of 1 maintains the original size, while values greater than 1 zoom in, and values less than 1 zoom out. 0.5

Kaleidoscope Filter

Description: The KaleidoscopeFilter creates a kaleidoscope effect by reflecting and rotating the image around a central point, based on the number of sides and angles specified.

Parameter Type Description Default
Sides Number Defines the number of sides or reflections in the kaleidoscope effect. Higher values result in more complex patterns. 5
Angles Number Controls the rotation angle between each reflection. A value of 1.0 represents 360 degrees of rotation. Lower values create more subtle rotations, while higher values increase the rotation between reflections. 0.5

Transition Filter

Description: The TransitionFilter creates a smooth transition effect between two images or assets. The transition level is controlled by the dispersion factor.

Parameter Type Description Default
NextImage String Asset name to transition to, selected from a dropdown list. N/A
dispersionFactor Number The level of transition between the current and the next image. Higher values result in a more intense transition effect. 0.5

Blur Filter

Description: The BlurFilter applies a Gaussian blur effect to the image, softening the image and reducing sharpness.

Parameter Type Description Default
blur Number The amount of blur to apply (higher values create a stronger blur). 8
quality Number The quality of the blur. Higher values result in better quality, but with a performance cost. 1
resolution Number The resolution of the blur. Higher values create a sharper blur effect but can impact performance. 2

RGB Split Filter

Description: The RGBSplitFilter separates the red, green, and blue channels, creating a chromatic aberration effect.

Parameter Type Description Default
red Point Offset of the red channel. {x: 0, y: 0}
green Point Offset of the green channel. {x: 0, y: 0}
blue Point Offset of the blue channel. {x: 0, y: 0}

Dot Filter

Description: The DotFilter applies a halftone dot effect, simulating a printed or comic book style.

Parameter Type Description Default
scale Number The size of the dots. A higher value makes the dots smaller. 1.0
angle Number The angle at which the dots are oriented, in degrees. 5.0

Glitch Filter

Description: The GlitchFilter simulates digital glitch effects, causing displacement and random pixel disarray for a "broken" visual look.

Parameter Type Description Default
slices Number The maximum number of slices for the glitch effect. 5
offset Number The maximum offset amount of slices. 100
seed Number A seed value for randomizing the glitch effect. 0
average Boolean If true, divides the bands roughly into equal amounts. If false, the band sizes will vary more randomly. false
minSize Number The minimum size of individual slices (segment of the total sample size). 8
sampleSize Number The resolution of the displacement map texture. 512
red Array<Number> Red channel offset. [0, 0]
green Array<Number> Green channel offset. [0, 0]
blue Array<Number> Blue channel offset. [0, 0]

The Filters

  1. Introduction
    1. Adjustment Filter
    2. Advanced Bloom Filter
    3. Ascii Filter
    4. Godray Filter
    5. Pixelate Filter
    6. Noise Filter
    7. Color Overlay Filter
    8. Bulge Pinch Filter
    9. CRT Filter
    10. ShockwaveF ilter
    11. Reflection Filter
    12. Extract Filter
    13. Chroma Filter
    14. Invert Filter
    15. Coarse Noise Filter
    16. Radial Wave Shader
    17. Cycle Threshold Shader
    18. Zoom Filter
    19. Kaleidoscope Filter
    20. Blur Filter
    21. RGB Split Filter
    22. Dot Filter
    23. Glitch Filter