How to Create Cool Bounce Effects Using a Loop

The Art of Code Guide 4 years ago

Description

In this video we'll build an easing function for a bounce. This could be used in a game, or a UI to make objects or elements bounce realistically. There are a few different ways to do this. In this video, we'll use a loop to add bounces.

========== Timetable =================

0:00 - Intro
1:06 - Hardcoded Bounce Desmos
5:22 - Hardcoded Bounce Shadertoy
7:06 - Visualize Graph
10:20 - Building the Loop
18:49 - Geometric Series
20:40 - Attenuation
21:55 - Normalizing Length
23:58 - Fixing Floating Point Error
25:21 - Outro

========== Social Media Links ==========

Twitter: @The_ArtOfCode
Facebook: https://www.facebook.com/groups/theartofcode/
Patreon: https://www.patreon.com/TheArtOfCode
ShaderToy: https://www.shadertoy.com/user/BigWIngs
PayPal Donation: https://paypal.me/theartofcode
FX Hash (NFTs): https://www.fxhash.xyz/u/The%20Art%20of%20Code

========== If you want to follow along ==========

Starting point:
https://www.shadertoy.com/view/7tfyW8
End point:
https://www.shadertoy.com/view/NlXyzS

========== Other videos to watch ==========

Easing functions: https://youtu.be/pydKWTSGMEM
ShaderToy for complete beginners: https://youtu.be/u5HAYVHsasc
The most useful function (smoothstep): https://youtu.be/60VoL-F-jIQ