Skip to main content

Distortions 🫠

Make the screen go all wobbly, curvy, and tipsy-topsy!

Simple Distortion​

This is the most basic yet popular form of distorting the screen you can get - but don't let that deceive you, it is incredibly versatile and useful!

  • Style: This controls the math equation behind the distortion.
    • Sin Cos: This makes the screen wavey, but with some randomness added! (think of a sine wave/cosine wave being applied to the screen's uvs with some randomisation)
    • Wavey: This is like Sin Cos, but not random and a simple wave pattern.
    • Map Transform: This allows you to use an image as a base for the distortion. The UV will move in accordance to the colour values of the map.
    • Animated Map: Like Map Transform, but supports Spritesheets. An example use case for this would be having an animated rain spritesheet and applying it as a distortion to make it seem like rain is falling down on the screen!
  • Distortion Transparency: Controls how visible the distortion is. At 1, the distortion is simply applied to the screen without any consideration for layering. Below this, a new layer is applied on top of the screen with the distortion (an example use case for this would be a heat wave effect).
  • Power X, Power Y: Controls the horizon and vertical distortion strength respectively. Negative values will distort the screen towards the left, while positive will distort it to the right.
  • Speed X, Speed Y: Controls the speed of the distortion in the horizon and vertical directions respectively.
  • Wobble Style: Controls whether or not to add additional wobble! This is a great way to add some extra randomness to the distortion.
    • Wobble Amount: Controls the amount of wobble to add.
    • Wobble Speed: Controls the speed of the wobble.
    • Wobble Coverage: Controls the scale of the wobble (ex. a larger value will add more ripples to the screen).

Bézier Curve​

This effect applies a distortion along a bézier curve. You pick two points for the line and adjust the curvature and power of the distortion.

  • Power: How much the line should distort the screen.
  • Curvature: How much the line should curve (in practical use, you will see more distortion with higher values).
  • Point A, Point B: The two points that define the line. You can move these around to adjust the line's (and thus the distortion's) position.
tip

Set the Bézier Curve's power to 0 to disable the effect.

Blackhole​

Distorts in a circular pattern around the centre of the screen.

  • Style: Either enable or disable the effect.
  • Power: How much the distortion should affect the screen.
  • Reach: How far the distortion should reach from the centre of the screen (ex. how big the circle, or the blackhole, is).
  • Center X, Center Y: Where the blackhole will start from.

Bubbles​

Adds little circle distortions in a repeating grid across the screen.

  • Power: How much the bubbles should distort the screen.
  • Size: How big the bubbles should be (in practice, a higher value means smaller bubbles BUT you get more bubbles covering the screen).

Bumpy Glass​

Think of those weird glass walls of cubes that were popular in the late 90's/early 2000's. This effect applies a distortion in a grid pattern across the screen.

  • Style: Either enable or disable the effect.
  • Scale: How big the grid should be.
  • Size: The size of the bumps.
  • Angle: In which direction the bumps should distort the screen.
  • Power X, Power Y: How much the bumps should distort the screen in the horizon and vertical directions respectively.

Liquify​

Melts the screen - think of it as if the screen was made of ice cream and you left it out in the sun for too long.. 🍦

  • Power: How much the distortion should pull the screen down.
  • Scale: How wavey the liquify effect should be.
tip

Set the Liquify power to 0 to disable the effect.

Warp​

Warp, well, warps the screen in various styles! Think of it like you're grabbing the edges and pulling them back/forward/whatever.

  • Style: Controls the way the screen is warped.
    • Lens Explode: Center of screen bulges, edges pulled back.
    • Lens Implode: Center of the screen is pulled back, edges bulge.
    • Gravity Explode: Pushes the screen out starting from the centre.
    • Gravity Implode: Pulls the screen in starting from the edges.
  • Radius: How much the screen should be warped.
  • Power: How much the warp should distort the screen's UVs.

Wave​

Apply various wave patterns to the screen. Sort of like the Simple Distortion effect, but with more control! Also has support for ripples (ex. a stone being tossed into a pond).

  • Style: Control which wave algorithm is being used to distort the screen.
    • Wave styles: sin waves, tangent waves, triangle waves, square waves
    • Ripple styles: square ripples, circular ripples, square singular, circular singular
    • Other styles: archimedes spirals
  • Radial: If the value is set above 0, the effect will apply around the edges of the screen instead based on your value.
  • Intervals X, Intervals Y: How many waves should be applied in the horizon and vertical directions respectively.
  • Power X, Power Y: How much the waves should distort the screen in the horizon and vertical directions respectively.
  • Speed X, Speed Y: How fast the waves should move in the horizon and vertical directions respectively.
  • Manual X, Manual Y: For manual control of the waves moving in the horizon and vertical directions respectively (a use case is if you don't want to have it move automatically with speed).