p5.js Coding Tutorial | Bouncing Wave Typography

LET'S CONNECT
✨ Sign up for my newsletter at www.pattvira.com
✨ Instagram: / pattvira
✨ Twitter: / pattvira
--
Links:
🔗 p5.js editor: editor.p5js.org/
🔗 Bouncing Wave 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 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

[@zakyvids6566]

Please make a video teaching us JavaScript and Babylon.js Thankyou

[@paulh1720]

awesome video, - thanks for sharing, an awesome effect which I never saw achieved as yet in P5JS or processing..... , - and really good simple code : well done......., - i will definately use this code to try this (adding this effect to other effects I've created in processing, - I will update you in a few days/weeks when I get around to this )....

[@paulh1720]

I have used your black and white wave oscillator (Hypnotic_Flowers_01), were I used this to create an image MASK: i think that there is a whole new world and possibilities of image masking , in which you could use alot of your existing javascript motions to create black and white image masks, and then project or shine actually images against these masks - I'll update you on an example I've created using your Hypnotic_Flowers_01 . . . .

[@insaanonline]

You Can Run Code Using Ctrl+Enter

[@akashvanionwards912]

Hey can you create an ebook like thing for physics concepts in p5 js like u have created "coding math pdf".it would be nice

[@69zwaan]

let r=25;letter=['M','A','R','C','O','!'] function setup() { createCanvas(400, 400); } function draw() { background(0); stroke(255);fill(255) textSize(r/2) textAlign( CENTER) for (let i=0;i

[@waysearcher]

Hello. Can you pls create some creative from Awwwards? this will demonstrate the facets of the possible p5.js. Thank you

[@pattvira]

Interesting. I'll look into it!

[@zhiyan909]

🙏👍❤❤