Math for Game Programmers: Fast and Funky 1D Nonlinear Transformations

[@graphics_travelers]

Shame, he should have more time for these kind of presentations. His work is priceless.

[@awoidf]

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.

[@DetectivePoofPoof]

These math talks are the best!

[@TheRealSergen]

Ñ

[@totallynothyper964]

@@TheRealSergen Ç

[@KKomalShashank]

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.

[@thiagooliveira7935]

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...

[@seditt5146]

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.

[@chaosordeal294]

Use a physics library for jumping or lose endless potential for emergent play.

[@DobinSergei]

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.

[@2Dspectre]

the more i rewatch this, the more valuable it appears to be to me.

[@youtubehandlesux]

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

[@youtubehandlesux]

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

[@davidpike5959]

Excellent talk, especially when you pause it and code it live as well. Thank you!

[@primevst]

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

[@brianviktor8212]

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.

[@KimboKG14]

12:05 didn't noticed this last time I watched. Now I understood the purpose of this talk.

[@cdanek]

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).

[@PolicePeople]

Nice catch! The arch and bell curve functions also don't seem to interpolate all the way to 1 before returning to 0.

[@DobinSergei]

Congratulations 🎉 You have discovered Modulation.

[@shuvam0516]

The animation is awesome.

[@TheLavaBlock]

Good talk, timeless!

[@shanmukhag2349]

Really good channel. Happy that I followed you guys, good work GDC.

[@jaredsimpson5672]

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.

[@stevedoetsch]

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.

[@jaredsimpson5672]

@@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.

[@michaelschlachter8865]

This talk is excellent.

[@synystersocks4275]

lovely accurate, effective efficient math for curves, thanks ^^ its hard to find better concepts than old dated ones ^^

[@marcospaulo6697]

this is what i call a good talk

[@f1f1s]

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.

[@ZeroZ30o]

Great talk as always with this host

[@jerrygreenest]

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...

[@Matheus29001]

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".

[@triberium_]

Damn, wish there was more examples like his, I'm on the hunt, but this stuff is greattt

[@monkeyrobotsinc.9875]

Squirrel is kewl. i liked his tween joke.

[@pirateskeleton7828]

Very useful topic. Saving this for later reference, since I've made a custom Tweening class and these will come in handy.

[@Hex72]

This is juicy. Helped me understand a few things a little more.

[@ColinPaddock]

Heyyy! It’s Squirrell again!

[@milanstevic8424]

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.

[@NoahtheEpicGuy]

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.

[@hanflingch]

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.

[@seymorases]

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 😂

[@markemerson98]

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..

[@stevedoetsch]

Here's the pseudo-code: 12:01

[@SkitzFist1]

@@stevedoetsch Would you be able to explain the pseudo code for an idiot (me)? I don't really understand what the parameters represent.

[@monfort537]

@@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

[@PhilStrahl]

“Having t till you gotta p”. (I'm so sorry!)

[@DoubleBob]

I really like SmoothStart compared to EasingIn

[@xriuk]

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]

@@xriuk I suppose you could look at it that way, but it's not as intuitive

[@xriuk]

@@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

[@rafalkowalczyk5027]

good math stuff, helped me with 1D non-linear transforms

[@gurkiratsinghbajwa6629]

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.

[@konstantinkh]

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.

[@natfailsyoutube8163]

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.

[@unvergebeneid]

Too bad he was noticeably running out of time towards the end...

[@TF2Gaming101]

I guess that you could always email him

[@Kakerate2]

13:00 17:30 this was what i was looking for, awesome.

[@mrsecify]

I don't quite understand the SmoothStart2.2 approximation with Mix function. How does that work?

[@graphics_travelers]

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)

[@milanstevic8424]

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% ..."

[@deraminator945]

Lol it's the guy that made the other dude move away :D

[@husodaroo2959]

20:09 What does the t parameter do in the mix function? Looks like something is missing....

[@therupoe]

I dont get any of this... what foundational stuff am I missing?

[@x3ICEx]

Links to the two talks referenced at 0:40 in my comments below.

[@fdagpigj]

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?

[@x3ICEx]

Oh yes, I should have known. Trucking KZbin 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..."

[@x3ICEx]

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 KZbin shows it to me but not anyone else. I despise such shadow ban practices.

[@fdagpigj]

Yeah, youtube's whole moderation system is kinda crap but at least that workaround worked

[@maymayman0]

0:13 He is here to plant his seeds uwu

[@mryodak]

What about easing using trigonometric function. Is it expensive too?

[@BlueEyesWhiteTeddy]

[0, 2pi] is a very important domain.

[@kaleygoode1681]

Use [0,1] for that; Scale to 2π after calculations

[@blucenere]

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

[@xriuk]

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.

[@magnusm4]

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)" ?

[@blucenere]

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

[@saulocpp]

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.

[@boorchboorch]

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

[@Lugmillord]

24:18 Looking at the composite I'm getting some Bernstein-vibes. It's just missing the outer functions to complete the picture.

[@assafdarsagol]

x*(2-x)

[@drahsid2]

Neat stuff

[@BrianBakerCA]

I believe t means inTerpolant. Like how i is iteration?

[@yashaswiification]

i dint get the Arch2. can anyone explain how to implement it

[@joshuagrams7465]

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."

[@joshuagrams7465]

Huh. Actually, if you listen very closely, at 24:03-ish he adds, "normalized" (meaning "scaled to fit the 0-1 height range").

[@LimboPuff]

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?

[@LimboPuff]

Thanks for the meat, Squirrel. But in my test, BellCurve6 don't work properly.

[@tomasz-rozanski]

Try SmoothStopArch3(t) * SmoothStartArch3(t)

[@LimboPuff]

Thanks, I ran some tests, turn out I just need ((1-t) * t )^n to get the bell shape.

[@SpiritedSeeker]

For anyone who wants easy access to the link from the last slide: essentialmath.com/tutorial.htm

[@akashverma4280]

So it is proved that Google also uses AfterEffects to create UI animations, rite!?

[@TF2Gaming101]

epic

[@davidmurphy563]

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.

[@hole1274]

I didn’t understand a word of this

[@flobbie87]

After watching this i now understand why so many games are riddled with issues.

[@raiju6090]

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

[@raiju6090]

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

[@luckytries]

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

[@animowany111]

+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.

[@raiju6090]

+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...

[@yrussq]

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.

[@abdelhaksaouli8802]

the naming t comes from newton 's low of physics and yes it stands for time.

[@astralojiavideogamecovers8815]

This is why I use external dlls

[@shockminerx1518]

Oof

[@godfu23]

B I G O O F

[@KilgoreTroutAsf]

Use Chebyshev polynomials. Goddamn game programmers.

[@stelianoo0]

If anyone can translate this to UNITY FOR ME PLEASE HELP!

[@kingvandit8234]

use tween engines! (Dotween etc)

[@IGOH4nI]

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.