p5.js Coding Tutorial | Text Distortion
LET'S CONNECT
✨ Sign up for my newsletter at https://www.pattvira.com
✨ Instagram: / pattvira
✨ Twitter: / pattvira
--
Links:
🔗 p5.js editor: https://editor.p5js.org/
🔗 Text Distortion Code: https://editor.p5js.org/pattvira/sket...
🔗 Introduction to Creative Coding Playlist: • START HERE: Creative Coding for Beginners
References:
🔗 Data Mini Challenge #1 - Color Inventory: • Design a Food Poster with Me! | Data Mini ...
🔗 Sine graph: https://www.desmos.com/calculator/nqf...
Timestamps:
0:00 Intro
0:10 Create a ring of circles
3:10 Create multiple rings of circles with varying radii
6:30 Create a linear distortion effect
8:50 Create an oscillated distortion effect
13:46 Add image onto sketch
14:57 Map pixel data from the image onto the rings
20:42 Repeat pixel data horizontally and vertically
25:48 Make it pretty