Quadradic is 2nd degree... because it comes from quadrado(square). Thats not a bad nomenclature, the confusion is caused by english mixing germanic and latin words...
Squirrel Eiserloh was my game programming professor at SMU Guildhall. He was the best teacher I ever had. The most amazing person, who explained complex concepts in such a cool, interesting and easy-to-understand manner. Everyone has their No. 1 teacher that they remember fondly for the rest of their lives. For me, that teacher is Squirrel Eiserloh.
Dude, this is great for figuring various jump arcs for a 2D(or 3D I guess) Platformer inorder to implement Variable Gravity. You just implement where you are in _dt in the jump over all and you would get your perfect Gravity value so your player moves in whatever arch you define. Very nice talk.Simple and easy enough that a cave man like me could understand it.
Jump arcs and gravity actually doesn't need such complicated way. Think of NES Super Mario Bros. as it uses only basic operations (+ - operator, 1 byte unsigned type variables) for this. With every frame it just adds "acceleration" to movement vector, and increases or decreases "acceleration". It works like gravity, and allows to change jump arc in real time.
What great timing this got recommended to me. Just finished programming almost all the linear transformation stuff for my game and a non-linear tutorial appears
Ohhhhh yeah, I added an extremely snappy and framerate-independent(as long as the game runs under 240 fps, too high it still looks weird :( ) camera system to my game
you guys should check out the 'tunable normalized sigmoid function'. It can represent most of these shapes with just a change in a constant. Can be very usefull
Small error in the BellCurve6 tween - you need to Flip(SmoothStop3) instead of just using SmoothStop3 otherwise you get a cumulative function (an S curve looking thing).
Excellent! I was exactly looking for some of these functions, and the performance update on power with mix is really nice to know. I am doing procedural generation for creating galaxies, and I needed something very specific (the Arch namely). The added toolkit will be very helpful in general, as I use all sorts of such functions a LOT. Plus now I know inserting 2 inverse-functions (1-x) is actually not obscene.
13:14 I think it should be opposite for higher powers (say >4). pow(x,n) function will do the calculation in O(logn) time but x*x*..x will do it in O(n) time.
You compute high integer powers using a method called Exponentiating by Squaring (there's a Wiki article). It is also O(log N). This is very commonly needed in cryptography, and if it wasn't possible to do this in logarithmic time, none of the encryption would work.
I think big-O notation suggests perhaps missing the speaker's point, where n is more or less assumed to be small. Also I believe on floating point values pow() can be done in constant time on many modern architectures.
like the math but i really expected to see some code with the math applied to some game examples. example, vectors, lerping, shooting projectiles, closest neighbor etc etc..
14:18 in Russian "quadrat[ic]" means "a square", so for us it doesn't actually sound weird, since X quadratic means literally "X squarish". I don't really know why it's called quadratic in English though, - since you call a square "square", not "a quadrat" like we do, so you should be actually calling it: x² = x squarish x³ = x cubic etc...
In portuguese too. x^2 is "quadrado", the same name as the square shape name. And it makes sense, because b * h is the formula for retangle area, and if b = h, we can change it to b * b or h * h, we will get the same result, and it is the square (x*x), the "quadrado".
It is surprising how much personality non-mathematicians often attach to such abstract concepts as multiplication or power functions. This is an interesting perspective on how to achieve fast and ‘good-looking’ transformations, but I am slightly worried about the attachment to particular cases for educational purposes and not recommending any general ideas as further reading or at least references. I would be happy to hear some remarks about division vs multiplication (powers are expensive, but what about reciprocals?) because this basic operation enriches the non-linear set a lot.
Smoothstart2.2's relative error compared to x^2.2 just explodes as it narrows zero and is even for like 0.2 15% off. This wrecks total havoc with your color reproduction, in particular given the fact that the x^2.2 is already a quite poor approximation to the sRGB gamma transfer function, which already suffers huge relative errors.
This was the first thing I thought of (sorry I know this is a year off)! The accuracy he gave confused the hell out of me. The error only goes lower than 1% around 0.7+ (I used absolute percent error so maybe there’s a metric he used that’s a different value). I get that visually the graphs are still very visually similar which is what we need them for but still 99% accuracy is bogus 😂
For some reason the reply won't load when I click view reply (maybe it's been marked as spam?) What if you post just the youtube video ID's and not the full links?
Oh yes, I should have known. Trucking RUclips shadow bans users the moment they dare post a link. It's not really a shadow ban, but moderation queue. Except I'm not sure if this channel has moderators and if they go through comments held back for moderation regularly. (I don't on my videos unless someone asks about it to remind me it exists. There is no new comments in spam folder notification unfortunately.) Since there was no "your comment is held back for moderation" warning, I forgot and did not think to work around the ban by adding a space. Annoying..."
Once the clickable links (invisible above) are approved by the channel owner (if ever) this comment will be backup only. Here's the blocked comments only I can see at the moment (I added enough spaces that they're no longer URLs according to any filter): 3ICE 2 days ago Juice it or lose it - a talk by Martin Jonasson & Petri Purho: youtube c om/ watc h ? v= Fy0aCDmgnxg Jan Willem Nijman - Vlambeer - "The art of screenshake": youtube co m /watc h ? v = AJdEqssNZ-U Thank you so much for telling me my comment is not actually there, visible. Ducking lying RUclips shows it to me but not anyone else. I despise such shadow ban practices.
I can't get the smoothstep5 to work... I did (1-t)(t^5)+t(1-(1-t)^5) but it comes out LESS smooth than smoothstep3... Anyone knows what I am doing wrong? 20:24
Mix(smoothStart2, smoothStart3, 0.2) works the following way. Let's say on a certain point in a timeline our x value is equal to 0.5, in that case *smoothStart2* will evaluate this argument to (0.5 * 0.5) which will result to 0.25 and return it to the mix function, then *smoothStart3* will evaluate this same variable *x = 0.5* to (0.5 * 0.5 * 0.5) which will result to 0.125 and return to it to the mix function. At this point our function will look like this *Mix(0.25, 0.125, 0.2)*, 0.2 is an indicator of influence of the first two numbers over each other (0.5 and 0.125), 0.2 actually presents a 20% in this case, it's basically telling us the following: sum up 80% of our first value (0.25) which looks like *(0.25 * (80 / 100))* and leftover 20% of value 0.125 which looks like *(0.125 * (20/100))* and in the end this looks like *((0.25 * (80 / 100)) + (0.125 * (20 / 100))* . In the end this equates to value of 0.225. You can copy and paste the following two variations of the functions in google and compare the results yourself. They're 95% similar. GDC hosts versions: ((0.5*0.5) * (80 / 100)) + ((0.5 * 0.5 * 0.5) * (20 / 100)) Plain old google calculator version (0.5^2.2)
it's basically a lerp (linear interpolation) between two predefined functions, with a constant interpolant. he claims that it's a decent approximation, as long as the number is in range 0-1. however, he stressed that this is only good enough as long as the approximation is optical, and not strictly numerical. you know, if you want to send a rocket to the Moon, maybe you should not use such an approximation. simple lerp works like this (min, max, t) => min + t (max - min) which is simple enough, scale the total range by t and offset by minimum if interpolant t is in a range 0 .. 1, you'll get a proportional value between minimum and maximum after some basic reordering of terms (min, max, t) => (1 - t)min + tmax then, you plug smoothStart2(t) and smoothStart3(t) in as min and max arguments, and 0.2 as t what you get is (1 - 0.2) x smoothStart2(t) + 0.2 x smoothStart3(t) which is what the previous guy said (admittedly, a year ago :) but hey, I like typing) "sum up 80% of our first value ... and leftover 20% ..."
When flipping though. If x is 10, then 1-10 is -9 so wouldn't that change the whole value you're trying to smooth? Wouldn't it be better to multiply it by negative -1? -1(-1*x)" ?
24:41 BellCurve6(t) = SmoothStop3(t) * SmoothStart(t); Since there is no Flip(t)*t invovled, why it become looking like Bell(Normal Distribution) Shape?
As someone who comes from a Flash scene in the late nineties and especially in the early naughts, much before iPhone and other slick UX interfaces which got animated, all of this is really really old news for me. I'm incredibly glad for all you people to learn about this, because these things have directly inspired the modern trends in touch screens and gaming UIs. All thanks to people who had the knowledge and the nerve to use little gimmicks of animation in their buttons and frames, windows and palettes, in times when MS Excel was the sole authority on how a computer software should look & feel (you can see the effect it had in Civilization games prior to the fifth installment..). All thanks to the once revolutionary Flash player, which is now sadly banned from every online platform, mostly because of scene politics, dry business, and PR nonsense. But I liked how it married a technical mind with an artistic edge, and paved a way to brave pioneers to show us how a software made for humans should look like. I personally, as a developer, cannot fathom making a software that doesn't employ a tastefully tweaked tween animation since at least 2001. Of course, I'm a game developer, though I have moved from Flash to other graphics engines out there. However, I can't understand this guy coming along and cynically destroying the point of the terms that were invented, changed, reinvented and solidified much before he had any appreciation for it. Initially the thing was known as 'easing,' but we kinda learned to grow out of this programming lingo, as soon as we learned that animation already uses this technique, known as "betweening", for almost 100 years. It simply made more sense, animation isn't just a word that is used for traditional animation -- animation in it's primary definition is that thing that gives anything immobile, uncanny, or simply "inanimate," a lively, unpredictable, and natural quality of change. It literally means "the state of being full of life." With added animation you basically decorate a shift or change or motion with a series of subtle in-between frames, to enrich the experience, and make it more palatable. It made things pop, it made the interface seem more responsive, it made the transitions appear more fluid, or more organic, or naturally twitchy and bouncy, as opposed to synthetic jitter and instant state switching. For this reason, the whole point of animating stuck with us, this has become known as betweening, or tweening in short. He also got the point of in and out completely backwards: you don't stop a train *in* the station, the point of *in* is to reflect "getting into motion" i.e. letting go, and *out* as "getting out of motion" i.e getting something to stop. His mind is not in the right place and he's definitely not an authority on these things. Also when he talks about Quad, Cubic, Quartic, and Quintic, he's basically referring to the old 'easing' lingo that was too dry for most of us anyway, and thus abandoned, but seriously, these names are pretty old mathematical names for these exponential functions... What's he gonna do next, reinvent Bezier curves as well? I'm sorry, but in my practice, I'm perfectly well-acquainted with such names, when I see Quad and Cubic, I know pretty well what to expect, not to mention that in my native language we say "kvadrat" (pronounced as kvad-rut) which is a square, so these things run pretty deep. And in fact, English etymology for square says this "Middle English: shortening of Old French esquare (noun), esquarre (past participle, used as an adjective), esquarrer (verb), based on Latin quadra ‘square’." No one's gonna change how things are called based on how terribly your ancestors adopted their words from Old French. No excuse.
I get why he decided to use flip, power, flip, to explain smooth stop. But it feels very unmotivated. If you add a little rigor you would notice that SmoothStart has derivative 0 at 0 and derivative n for x^n. So we really want a function with the opposite derivatives. The constraints are f(0)=0, f(1)=1, f'(0)=n, f'(1)=0. So let f'(x) = n(1-x)^k obviously has these properties for f'. Then integrate using u-subsitution F(x) = -n/(k+1) (1-x)^(k+1) + C. Then solve the boundary condition and find that C=1 and n=k+1. So F(x) = 1 - (1-x)^n. Now you might say, "that is way harder". But it's also more general and doesn't just feel like trial and error.
What you call "trial and error" he calls "exposing the evolution" of the math behind the function so that simply looking at the function it's clear how it was composed.
@@stevedoetsch I forgot I wrote this. Future me still agrees with what I wrote. If you want to design something then mathematical rigor is a tool to explore constraint space and design space methodically. Anything else is trial and error.
I'm one of those people that says "lerp" for any interpolation. Or at least used to, I've been a lot more semantically pedantic over time, which you could probably represent as an interpolation of the quadratic ease-in variety.
The shape of this square root graph in 17:24 doesn't look correct. sqrt(x) has this upper-right end in the origin, the curve is more abrupt there, as opposed to this.
He got it kinda wrong with the train example, the concept is EasingIn but into the movement, not stopping. So it would be the other way around, and it would make sense.
@@Komagb I usually use easings for interpolations (movement, rotations, etc.), So that makes sense and it's intuitive, because easingin means easing into the interpolation, and out when stopping
Yeah, that's where he stops being entirely truthful. He says it's t*(1-t) but actually it's 4*t*(1-t). The other curves from that point on are similar: you have to scale them up (often quite a lot) so they fit the full 0-1 height. I wonder if his graphing/tweening engine finds the min/max and does that automatically? With all the other unnecessary trivia that he put in there I'm surprised he didn't mention something major like "oh, you have to scale this up 6.75 times."
i'm terrible at math but when doing animation, i've always thought it's like ease in=ease at start (when going "in" to animation) ease out=ease at end (going "out" of animation) and sine, cube, quad as the exaggeration of the ease instictually. plus it didn't take a crazy genius to realize that, you just try each one and see the animation play... p.s: i'm not a native english speaker
14:21 Actually they are "terrible" names if you're not from places where the main language pulls from latin (or if you don't speak those languages). For example knowing Portuguese, which pulls from Latin a lot, those terms are very familiar. Most if not all prefixes in math terms come from Latin, so if you know any romance language you easily identify the number associated with it. Even tho English does pull from Latin in some aspects (in this case the terms are using Latin prefixes even) it's not the same degree as Romance languages Edit: Also regarding the EasingIn and EasingOut part, at the start of the presentation it was established that this functions could be called Easing Functions so int that context using EasingIn to identify the start of the function and EasingOut to mean the end of the function is not really an out there concept imo
this is an English talk towards everyone (this is not restricted to countries with English as the main language, and even if it was those countries are not filled with people that only speak English). And I acknowledged that for solely English people it would be weird for people that talked Romance languages it wouldn't be
the terms also make sense since you're easing out of the location and easing into a new location, they also come from slow in and slow out which was a technique coined in the 1920s in disney. I'm not sure this guy's issue with the labels , they are not confusing , i havent met any animation student or coworker whos found them confusing after a proper explanation
+Lucky Not neccesarily. You can ease into an action/transition/transformation/animation, and ease out of that transition. It doesn't make sense to me to ease out of the starting location.
+animowany111 Because you are using the definition of easing, Which the terms don't use, the term has EasingIn and EasingOut because that's what the functions are called. So knowing that Easing actually means "easing funtions", to go from there to "oh EasingIN is the start of the function" and "EasingOUT is the end of the function, is not that complicated and even if it was it wouldn't be rocket science and people would understand after short explanation, the way the talk refers to this it makes it seem like they are so complicated which they are not e: There's people bellow even saying that the person giving the talk gave the wrong meaning of the term so go figure...
Well, it's a blend. Quad - is 4 not 2, even the quadratic function is the power of 2. So basically quad and quart has the same root, but they were fucked up by mathematicians because of calculations of square. So it's not that obvious even for the those who knows etymology.
Super annoying that he decided that the terms literally everybody uses, every piece of software uses and every programming language uses aren't good enough for him so I have to go through the whole thing translating what he's saying. That's just petty and pointless. Sure, jellyfish aren't made of jelly and they're not fish. No, you don't get to use you're own name for them, that's what they're called, get over it.
Let me save you 30 mins: Go to wolphram and experiment with different X multiplications, exponentiation etc You won't get any practical tips from this talk.
Shame, he should have more time for these kind of presentations. His work is priceless.
What a legend
He doesn't even waste time to tell me what his name is. So I had to go back and look it up to look up his other talks.
Quadradic is 2nd degree... because it comes from quadrado(square). Thats not a bad nomenclature, the confusion is caused by english mixing germanic and latin words...
Squirrel Eiserloh was my game programming professor at SMU Guildhall. He was the best teacher I ever had. The most amazing person, who explained complex concepts in such a cool, interesting and easy-to-understand manner. Everyone has their No. 1 teacher that they remember fondly for the rest of their lives. For me, that teacher is Squirrel Eiserloh.
These math talks are the best!
Ñ
@@TheRealSergen Ç
Dude, this is great for figuring various jump arcs for a 2D(or 3D I guess) Platformer inorder to implement Variable Gravity. You just implement where you are in _dt in the jump over all and you would get your perfect Gravity value so your player moves in whatever arch you define. Very nice talk.Simple and easy enough that a cave man like me could understand it.
Use a physics library for jumping or lose endless potential for emergent play.
Jump arcs and gravity actually doesn't need such complicated way. Think of NES Super Mario Bros. as it uses only basic operations (+ - operator, 1 byte unsigned type variables) for this. With every frame it just adds "acceleration" to movement vector, and increases or decreases "acceleration". It works like gravity, and allows to change jump arc in real time.
the more i rewatch this, the more valuable it appears to be to me.
What great timing this got recommended to me. Just finished programming almost all the linear transformation stuff for my game and a non-linear tutorial appears
Ohhhhh yeah, I added an extremely snappy and framerate-independent(as long as the game runs under 240 fps, too high it still looks weird :( ) camera system to my game
Excellent talk, especially when you pause it and code it live as well. Thank you!
you guys should check out the 'tunable normalized sigmoid function'. It can represent most of these shapes with just a change in a constant. Can be very usefull
Small error in the BellCurve6 tween - you need to Flip(SmoothStop3) instead of just using SmoothStop3 otherwise you get a cumulative function (an S curve looking thing).
Nice catch! The arch and bell curve functions also don't seem to interpolate all the way to 1 before returning to 0.
Excellent! I was exactly looking for some of these functions, and the performance update on power with mix is really nice to know. I am doing procedural generation for creating galaxies, and I needed something very specific (the Arch namely). The added toolkit will be very helpful in general, as I use all sorts of such functions a LOT. Plus now I know inserting 2 inverse-functions (1-x) is actually not obscene.
12:05 didn't noticed this last time I watched. Now I understood the purpose of this talk.
13:14 I think it should be opposite for higher powers (say >4). pow(x,n) function will do the calculation in O(logn) time but x*x*..x will do it in O(n) time.
You compute high integer powers using a method called Exponentiating by Squaring (there's a Wiki article). It is also O(log N). This is very commonly needed in cryptography, and if it wasn't possible to do this in logarithmic time, none of the encryption would work.
I think big-O notation suggests perhaps missing the speaker's point, where n is more or less assumed to be small. Also I believe on floating point values pow() can be done in constant time on many modern architectures.
like the math but i really expected to see some code with the math applied to some game examples. example, vectors, lerping, shooting projectiles, closest neighbor etc etc..
Here's the pseudo-code: 12:01
@@stevedoetsch Would you be able to explain the pseudo code for an idiot (me)? I don't really understand what the parameters represent.
@@SkitzFist1 in = 25, startIn = 0, endIn = 50, startOut = 0, endOut = 1 you will get 0.5 because you map the range of 0 - 50 to 0 - 1
Good talk, timeless!
Really good channel. Happy that I followed you guys, good work GDC.
This talk is excellent.
lovely accurate, effective efficient math for curves, thanks ^^ its hard to find better concepts than old dated ones ^^
14:18 in Russian "quadrat[ic]" means "a square", so for us it doesn't actually sound weird, since X quadratic means literally "X squarish".
I don't really know why it's called quadratic in English though, - since you call a square "square", not "a quadrat" like we do, so you should be actually calling it:
x² = x squarish
x³ = x cubic
etc...
In portuguese too. x^2 is "quadrado", the same name as the square shape name. And it makes sense, because b * h is the formula for retangle area, and if b = h, we can change it to b * b or h * h, we will get the same result, and it is the square (x*x), the "quadrado".
It is surprising how much personality non-mathematicians often attach to such abstract concepts as multiplication or power functions. This is an interesting perspective on how to achieve fast and ‘good-looking’ transformations, but I am slightly worried about the attachment to particular cases for educational purposes and not recommending any general ideas as further reading or at least references. I would be happy to hear some remarks about division vs multiplication (powers are expensive, but what about reciprocals?) because this basic operation enriches the non-linear set a lot.
Smoothstart2.2's relative error compared to x^2.2 just explodes as it narrows zero and is even for like 0.2 15% off. This wrecks total havoc with your color reproduction, in particular given the fact that the x^2.2 is already a quite poor approximation to the sRGB gamma transfer function, which already suffers huge relative errors.
This was the first thing I thought of (sorry I know this is a year off)! The accuracy he gave confused the hell out of me. The error only goes lower than 1% around 0.7+ (I used absolute percent error so maybe there’s a metric he used that’s a different value). I get that visually the graphs are still very visually similar which is what we need them for but still 99% accuracy is bogus 😂
The animation is awesome.
Links to the two talks referenced at 0:40 in my comments below.
For some reason the reply won't load when I click view reply (maybe it's been marked as spam?) What if you post just the youtube video ID's and not the full links?
Oh yes, I should have known. Trucking RUclips shadow bans users the moment they dare post a link. It's not really a shadow ban, but moderation queue. Except I'm not sure if this channel has moderators and if they go through comments held back for moderation regularly. (I don't on my videos unless someone asks about it to remind me it exists. There is no new comments in spam folder notification unfortunately.) Since there was no "your comment is held back for moderation" warning, I forgot and did not think to work around the ban by adding a space. Annoying..."
Once the clickable links (invisible above) are approved by the channel owner (if ever) this comment will be backup only. Here's the blocked comments only I can see at the moment (I added enough spaces that they're no longer URLs according to any filter):
3ICE
2 days ago
Juice it or lose it - a talk by Martin Jonasson & Petri Purho:
youtube c om/ watc h ? v= Fy0aCDmgnxg
Jan Willem Nijman - Vlambeer - "The art of screenshake":
youtube co m /watc h ? v = AJdEqssNZ-U
Thank you so much for telling me my comment is not actually there, visible. Ducking lying RUclips shows it to me but not anyone else. I despise such shadow ban practices.
Yeah, youtube's whole moderation system is kinda crap but at least that workaround worked
20:09 What does the t parameter do in the mix function? Looks like something is missing....
22:15 SmoothStart2.2 isn't that 20% 2 and 80% 3? Not the other way around, so the BlendB value should be the inverse 1-BlendB.
Very useful topic. Saving this for later reference, since I've made a custom Tweening class and these will come in handy.
Great talk as always with this host
Congratulations 🎉 You have discovered Modulation.
this is what i call a good talk
I can't get the smoothstep5 to work...
I did (1-t)(t^5)+t(1-(1-t)^5) but it comes out LESS smooth than smoothstep3...
Anyone knows what I am doing wrong?
20:24
Damn, wish there was more examples like his, I'm on the hunt, but this stuff is greattt
24:18 Looking at the composite I'm getting some Bernstein-vibes. It's just missing the outer functions to complete the picture.
I don't quite understand the SmoothStart2.2 approximation with Mix function. How does that work?
Mix(smoothStart2, smoothStart3, 0.2) works the following way. Let's say on a certain point in a timeline our x value is equal to 0.5, in that case *smoothStart2* will evaluate this argument to (0.5 * 0.5) which will result to 0.25 and return it to the mix function, then *smoothStart3* will evaluate this same variable *x = 0.5* to (0.5 * 0.5 * 0.5) which will result to 0.125 and return to it to the mix function. At this point our function will look like this *Mix(0.25, 0.125, 0.2)*, 0.2 is an indicator of influence of the first two numbers over each other (0.5 and 0.125), 0.2 actually presents a 20% in this case, it's basically telling us the following: sum up 80% of our first value (0.25) which looks like *(0.25 * (80 / 100))* and leftover 20% of value 0.125 which looks like *(0.125 * (20/100))* and in the end this looks like *((0.25 * (80 / 100)) + (0.125 * (20 / 100))* . In the end this equates to value of 0.225.
You can copy and paste the following two variations of the functions in google and compare the results yourself. They're 95% similar.
GDC hosts versions: ((0.5*0.5) * (80 / 100)) + ((0.5 * 0.5 * 0.5) * (20 / 100))
Plain old google calculator version (0.5^2.2)
it's basically a lerp (linear interpolation) between two predefined functions, with a constant interpolant.
he claims that it's a decent approximation, as long as the number is in range 0-1.
however, he stressed that this is only good enough as long as the approximation is optical, and not strictly numerical.
you know, if you want to send a rocket to the Moon, maybe you should not use such an approximation.
simple lerp works like this (min, max, t) => min + t (max - min)
which is simple enough, scale the total range by t and offset by minimum
if interpolant t is in a range 0 .. 1, you'll get a proportional value between minimum and maximum
after some basic reordering of terms (min, max, t) => (1 - t)min + tmax
then, you plug smoothStart2(t) and smoothStart3(t) in as min and max arguments, and 0.2 as t
what you get is (1 - 0.2) x smoothStart2(t) + 0.2 x smoothStart3(t)
which is what the previous guy said (admittedly, a year ago :) but hey, I like typing)
"sum up 80% of our first value ... and leftover 20% ..."
This is juicy. Helped me understand a few things a little more.
Heyyy! It’s Squirrell again!
When flipping though. If x is 10, then 1-10 is -9 so wouldn't that change the whole value you're trying to smooth?
Wouldn't it be better to multiply it by negative -1? -1(-1*x)" ?
The idea here is that x is always between 0 and 1.
1-x means that I multiply by -1 as you said and then sum 1 to shift it up
Squirrel is kewl. i liked his tween joke.
24:41 BellCurve6(t) = SmoothStop3(t) * SmoothStart(t);
Since there is no Flip(t)*t invovled, why it become looking like Bell(Normal Distribution) Shape?
Thanks for the meat, Squirrel.
But in my test, BellCurve6 don't work properly.
Try SmoothStopArch3(t) * SmoothStartArch3(t)
Thanks, I ran some tests, turn out I just need ((1-t) * t )^n to get the bell shape.
What about easing using trigonometric function. Is it expensive too?
As someone who comes from a Flash scene in the late nineties and especially in the early naughts, much before iPhone and other slick UX interfaces which got animated, all of this is really really old news for me.
I'm incredibly glad for all you people to learn about this, because these things have directly inspired the modern trends in touch screens and gaming UIs. All thanks to people who had the knowledge and the nerve to use little gimmicks of animation in their buttons and frames, windows and palettes, in times when MS Excel was the sole authority on how a computer software should look & feel (you can see the effect it had in Civilization games prior to the fifth installment..). All thanks to the once revolutionary Flash player, which is now sadly banned from every online platform, mostly because of scene politics, dry business, and PR nonsense. But I liked how it married a technical mind with an artistic edge, and paved a way to brave pioneers to show us how a software made for humans should look like.
I personally, as a developer, cannot fathom making a software that doesn't employ a tastefully tweaked tween animation since at least 2001. Of course, I'm a game developer, though I have moved from Flash to other graphics engines out there.
However, I can't understand this guy coming along and cynically destroying the point of the terms that were invented, changed, reinvented and solidified much before he had any appreciation for it. Initially the thing was known as 'easing,' but we kinda learned to grow out of this programming lingo, as soon as we learned that animation already uses this technique, known as "betweening", for almost 100 years. It simply made more sense, animation isn't just a word that is used for traditional animation -- animation in it's primary definition is that thing that gives anything immobile, uncanny, or simply "inanimate," a lively, unpredictable, and natural quality of change. It literally means "the state of being full of life."
With added animation you basically decorate a shift or change or motion with a series of subtle in-between frames, to enrich the experience, and make it more palatable. It made things pop, it made the interface seem more responsive, it made the transitions appear more fluid, or more organic, or naturally twitchy and bouncy, as opposed to synthetic jitter and instant state switching.
For this reason, the whole point of animating stuck with us, this has become known as betweening, or tweening in short. He also got the point of in and out completely backwards: you don't stop a train *in* the station, the point of *in* is to reflect "getting into motion" i.e. letting go, and *out* as "getting out of motion" i.e getting something to stop. His mind is not in the right place and he's definitely not an authority on these things.
Also when he talks about Quad, Cubic, Quartic, and Quintic, he's basically referring to the old 'easing' lingo that was too dry for most of us anyway, and thus abandoned, but seriously, these names are pretty old mathematical names for these exponential functions... What's he gonna do next, reinvent Bezier curves as well? I'm sorry, but in my practice, I'm perfectly well-acquainted with such names, when I see Quad and Cubic, I know pretty well what to expect, not to mention that in my native language we say "kvadrat" (pronounced as kvad-rut) which is a square, so these things run pretty deep.
And in fact, English etymology for square says this
"Middle English: shortening of Old French esquare (noun), esquarre (past participle, used as an adjective), esquarrer (verb), based on Latin quadra ‘square’."
No one's gonna change how things are called based on how terribly your ancestors adopted their words from Old French. No excuse.
I get why he decided to use flip, power, flip, to explain smooth stop. But it feels very unmotivated. If you add a little rigor you would notice that SmoothStart has derivative 0 at 0 and derivative n for x^n. So we really want a function with the opposite derivatives.
The constraints are f(0)=0, f(1)=1, f'(0)=n, f'(1)=0. So let f'(x) = n(1-x)^k obviously has these properties for f'. Then integrate using u-subsitution F(x) = -n/(k+1) (1-x)^(k+1) + C. Then solve the boundary condition and find that C=1 and n=k+1. So F(x) = 1 - (1-x)^n. Now you might say, "that is way harder". But it's also more general and doesn't just feel like trial and error.
What you call "trial and error" he calls "exposing the evolution" of the math behind the function so that simply looking at the function it's clear how it was composed.
@@stevedoetsch I forgot I wrote this. Future me still agrees with what I wrote.
If you want to design something then mathematical rigor is a tool to explore constraint space and design space methodically.
Anything else is trial and error.
“Having t till you gotta p”. (I'm so sorry!)
I'm one of those people that says "lerp" for any interpolation. Or at least used to, I've been a lot more semantically pedantic over time, which you could probably represent as an interpolation of the quadratic ease-in variety.
The shape of this square root graph in 17:24 doesn't look correct. sqrt(x) has this upper-right end in the origin, the curve is more abrupt there, as opposed to this.
I really like SmoothStart compared to EasingIn
He got it kinda wrong with the train example, the concept is EasingIn but into the movement, not stopping. So it would be the other way around, and it would make sense.
@@xriuk I suppose you could look at it that way, but it's not as intuitive
@@Komagb I usually use easings for interpolations (movement, rotations, etc.), So that makes sense and it's intuitive, because easingin means easing into the interpolation, and out when stopping
13:00
17:30 this was what i was looking for, awesome.
I dont get any of this... what foundational stuff am I missing?
I believe t means inTerpolant. Like how i is iteration?
good math stuff, helped me with 1D non-linear transforms
i dint get the Arch2. can anyone explain how to implement it
Yeah, that's where he stops being entirely truthful. He says it's t*(1-t) but actually it's 4*t*(1-t). The other curves from that point on are similar: you have to scale them up (often quite a lot) so they fit the full 0-1 height. I wonder if his graphing/tweening engine finds the min/max and does that automatically? With all the other unnecessary trivia that he put in there I'm surprised he didn't mention something major like "oh, you have to scale this up 6.75 times."
Huh. Actually, if you listen very closely, at 24:03-ish he adds, "normalized" (meaning "scaled to fit the 0-1 height range").
i'm terrible at math but when doing animation, i've always thought it's like ease in=ease at start (when going "in" to animation) ease out=ease at end (going "out" of animation) and sine, cube, quad as the exaggeration of the ease instictually. plus it didn't take a crazy genius to realize that, you just try each one and see the animation play...
p.s: i'm not a native english speaker
Too bad he was noticeably running out of time towards the end...
I guess that you could always email him
For anyone who wants easy access to the link from the last slide: essentialmath.com/tutorial.htm
x*(2-x)
Lol it's the guy that made the other dude move away :D
Neat stuff
14:21 Actually they are "terrible" names if you're not from places where the main language pulls from latin (or if you don't speak those languages). For example knowing Portuguese, which pulls from Latin a lot, those terms are very familiar.
Most if not all prefixes in math terms come from Latin, so if you know any romance language you easily identify the number associated with it. Even tho English does pull from Latin in some aspects (in this case the terms are using Latin prefixes even) it's not the same degree as Romance languages
Edit: Also regarding the EasingIn and EasingOut part, at the start of the presentation it was established that this functions could be called Easing Functions so int that context using EasingIn to identify the start of the function and EasingOut to mean the end of the function is not really an out there concept imo
this is an English talk towards everyone (this is not restricted to countries with English as the main language, and even if it was those countries are not filled with people that only speak English). And I acknowledged that for solely English people it would be weird for people that talked Romance languages it wouldn't be
the terms also make sense since you're easing out of the location and easing into a new location, they also come from slow in and slow out which was a technique coined in the 1920s in disney. I'm not sure this guy's issue with the labels , they are not confusing , i havent met any animation student or coworker whos found them confusing after a proper explanation
+Lucky
Not neccesarily. You can ease into an action/transition/transformation/animation, and ease out of that transition.
It doesn't make sense to me to ease out of the starting location.
+animowany111
Because you are using the definition of easing, Which the terms don't use, the term has EasingIn and EasingOut because that's what the functions are called. So knowing that Easing actually means "easing funtions", to go from there to "oh EasingIN is the start of the function" and "EasingOUT is the end of the function, is not that complicated and even if it was it wouldn't be rocket science and people would understand after short explanation, the way the talk refers to this it makes it seem like they are so complicated which they are not
e: There's people bellow even saying that the person giving the talk gave the wrong meaning of the term so go figure...
Well, it's a blend. Quad - is 4 not 2, even the quadratic function is the power of 2. So basically quad and quart has the same root, but they were fucked up by mathematicians because of calculations of square.
So it's not that obvious even for the those who knows etymology.
[0, 2pi] is a very important domain.
Use [0,1] for that;
Scale to 2π after calculations
So it is proved that Google also uses AfterEffects to create UI animations, rite!?
epic
0:13 He is here to plant his seeds uwu
The clock says transfemme. Shall we break the clock or is it right?
Super annoying that he decided that the terms literally everybody uses, every piece of software uses and every programming language uses aren't good enough for him so I have to go through the whole thing translating what he's saying. That's just petty and pointless. Sure, jellyfish aren't made of jelly and they're not fish. No, you don't get to use you're own name for them, that's what they're called, get over it.
the naming t comes from newton 's low of physics and yes it stands for time.
After watching this i now understand why so many games are riddled with issues.
I didn’t understand a word of this
This is why I use external dlls
Oof
B I G O O F
use tween engines! (Dotween etc)
Use Chebyshev polynomials. Goddamn game programmers.
If anyone can translate this to UNITY FOR ME PLEASE HELP!
Let me save you 30 mins: Go to wolphram and experiment with different X multiplications, exponentiation etc You won't get any practical tips from this talk.