Patt Vira | p5.js Coding Tutorial | Bouncing Wave Typography @pattvira | Uploaded June 2024 | Updated October 2024, 14 hours ago.
LET'S CONNECT
✨ Sign up for my newsletter at pattvira.com
✨ Instagram: instagram.com/pattvira
✨ Twitter: twitter.com/pattvira
--
Links:
🔗 p5.js editor: editor.p5js.org
🔗 Bouncing Wave Typography Code: editor.p5js.org/pattvira/sketches/_hi3uBMAo
🔗 Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdn

References:
🔗 Easing Functions: easings.net

Timestamps:
0:00 Intro
0:10 Draw text on canvas
3:37 Create Text and Wave classes
8:28 Write a method to move a Text object
11:35 Add interesting movement using easing functions
14:02 Reverse movement direction
16:49 Control total distance traveled for each Text object
19:39 Create multiple Wave objects
20:51 Create wavy and bouncy effects