Ripple
Learn to use the Ripple effect with Fable
J
Written by Juan Gonzalez - Macias
Updated over a week ago

Overview

This effect creates a ripple distortion, similar to a ripple in water.

Effect Controls

  1. Radius: [ Default 100 ] [ Range 0 - INFINITY ] [ USER INPUT ]

    • Controls the size of the ripple

    • Based off dimensions of Canvas or image.

      • Not always 1:1 with each use

  2. Phase: [ Default 0 ] [ Range -360 to 360 ]

    • Shifts the distortion to a different position

    • Looping at -360, 0, 360

  3. Wave Width: [ Default 10 ] [ Range 0 - 100 ]

    • Dictates the width of the wave

  4. Wave Height: [ Default 10 ] [ Range 0 - 300 ]

    • Dictates the height of the wave

  5. Center X: [ Default 50 ] [ Range 0 - 100 ]

    • Sets the X coordinate where the ripple will originate

  6. Center Y: [ Default 50 ] [ Range 0 - 100 ]

    • Sets the Y coordinate where the ripple will originate

  7. Is symmetric: [ Default ON ] [ CHECKER BOX ]

    • Indicates if the ripple is symmetrical

  8. Is repeating UV: [ Default ON ] [ CHECKER BOX ]

    • Indicates if the distortion will repeat at edges or not.

    • If CHECKED OFF the image will have a clear distorted edge and not repeat its pixels to the bounding box edges

  9. Time: [ Default 0 ] [ USER INPUT ]

    • Allows for the animation of the ripple

  10. Global Opacity: [ Default 100 ] [ 0 - 100 ]

    • Controls the overall opacity of the effect on the image

Effect Preview

  • Distortion Map: [ Radius 1000 ] [ Phase 190 ] [ Wave Width 50 ] [ Wave Height 10 ] [ Center X 50 ] [ Center Y 50 ] [ Is symmetric ON ] [ Is repeating UV ON ]

  • UV Map: [ Radius 1000 ] [ Phase 190 ] [ Wave Width 50 ] [ Wave Height 10 ] [ Center X 50 ] [ Center Y 50 ] [ Is symmetric ON ] [ Is repeating UV ON ]

  • Distortion Map: [ Radius 1000 ] [ Phase 190 ] [ Wave Width 50 ] [ Wave Height 10 ] [ Center X 50 ] [ Center Y 50 ] [ Is symmetric OFF ] [ Is repeating UV ON ]

  • UV Map: [ Radius 1000 ] [ Phase 190 ] [ Wave Width 50 ] [ Wave Height 10 ] [ Center X 50 ] [ Center Y 50 ] [ Is symmetric OFF ] [ Is repeating UV ON ]

  • Image: [ Radius 2000 ] [ Phase 0 ] [ Wave Width 50 ] [ Wave Height 79 ] [ Center X 50 ] [ Center Y 0 ] [ Is symmetric ON ] [ Is repeating UV ON ]

Did this answer your question?