p5.js Coding Tutorial | Rotating Typography

LET'S CONNECT
✨ Sign up for my newsletter at www.pattvira.com
✨ Instagram: / pattvira
✨ Twitter: / pattvira
--
Links:
🔗 p5.js editor: editor.p5js.org/
🔗 Rotating Typography Code: editor.p5js.org/pattvira/sket...
🔗 Introduction to Creative Coding Playlist: • START HERE: Creative C...
References:
🔗 Easing Functions: easings.net
Timestamps:
0:00 Intro
0:10 Create a string of text that rotates around a circular path
7:26 Create a Type class
10:48 Create multiple Type objects
15:31 Add easing functions
20:53 Add final touches

[@mehmeterendesign]

One of my fav…

[@paulh1720]

thanks you. i've been struggling with idea's, and mask creation, - and I was thinking about rotating fonts , concentrically, but was'nt sure how to do it

[@kastelruther]

Thanks a lot for this! There's something I don't fully understand: why do we need to multiply the x and y coordinates with cos(angle) and sin(angle), respectively? I see that it has an effect on the orientation of the letters, but I don't really understand how this happens... could you maybe help me understand this? Also related question: how can we make it so that each letter on the rotating circle is oriented so that is iying on its side (i.e. so that when each letter reaches the 0-degree point, it is lying on its side rather than standing upright)? Thanks in advance :)

[@auwalirobello8706]

Thank you. Please do a simple pendulum and other scientific simulations, please. I'm part of a research team working on science laboratory simulations for universities in Nigeria. I believe we can collaborate

[@slacle]

You might be interested in "Nature of Code" by Daniel Shiffman