Collection of Useful Curve Shaping Functions

math
shaders

#1

Found this image online, figured it could prove to be useful to you folks out here. It’s a collection of shaping functions. I’m not sure who the original creator is… Wasn’t sure where to post it either, I figured ‘Resources’ was my best bet.

EDIT: The Credit for the image goes to https://twitter.com/kyndinfo


Switched from Unity to Unreal - Critiques appreciated
#2

Here’s some more easing functions with a little bit of interactivity


#3

Ah nice! Thanks for sharing.


#4

My favorite has always been y = 1 / (1 + x * x)

it gives you a nice bump. Its especially useful because if x is a distance you can avoid a square root since its squared. An example of its use would be to model how much a particle is influenced by a local force.


#5

I pretty much use these two all the time: x*x or sqrt(x). This is the same thing but bends the curve in 2 different directions. Basically, whenever I am working with shaders I have this opened and I just work on the curve until I get something that works: https://www.mathsisfun.com/data/function-grapher.php


#6

Thank you for posting this!


#7

http://www.kynd.info/log/


#8

The first image is nice since it actually lists the math used. It’s a lot of trig functions though, which aren’t great for shaders. I love the easings site too, but it’s just showing built in animations with out the associated math function. Plus some of them are trig based again. Quadratics or other polynomial parametrics are generally better options than anything with trig (and while trig functions are often approximated with polynomials on GPUs anyway, they can be fairly complex equations on their own).

Luckily the easings site are in an open source JQuery plugin.
http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js


#9

Real VFX have curves


#10

Thanks for sharing! I personaly like to use this tool: https://www.desmos.com/math


#11

I"m new here, so if the questions are easily searchable let me know. In what context do you use these curves? Is there a node in the UE4 material editor that uses this? or am I way off base here. haha


#12

In cascade, ue4’s particle editor you can use curves to control color over life, size by life, and other various modules.


#13

These curves can be used in a number of ways depending on what your doing, one of the things we commonly do in shaders is use gradients or normalized scalar values (-1 to 1) to control things. These curves give us a way to control the easing on these gradients. For example you could use a simple sine wave to create and ocean wave, you could apply that sine wave gradient to one of these formulas to control the tapering on the waves and influence it’s shape.

You could also use it to control the flow and speed of shader animations. There’s quite a lot of uses depending on what your doing.


#14

Sorry i didnt check back sooner guys. I appreciate the answers! It finally makes sense to me.


#15

This is so incredibly useful, thanks for putting this together and sharing!


#16

This is a really good talk with some great examples:


#17

Curves are incredibly versatile and I absolutely love them. In UE4 I started down the road of defining a fixed set of curves like this. However, I decided to let the user assign an arbitrary curve in-editor (UCurveFloat). This allows me to bypass defining a function in favor of letting users draw the curve they want.