🎨 Today we will build TEXT flow field. EXTENDED class with BONUS lessons and more creative coding experiments, full source code from multiple different stages, learn how to create image flow fields and animate smooth color transitions. 🎨 Udemy: www.udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A 🎨 Skillshare (free 1 month trial): www.skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on
I wasn't even able to draw a simple shape with JavaScript, but now, thanks to your inspiring content and projects, I feel confident enough to build my own 2D games and complex animations. Thank you so much for your hard work, and please keep uploading videos like this, it's so fun!
@@Frankslaboratory I take op's words as mine as well. your channel is amazing. also you know how to encourage and set expectation of the audience. You are good on pointing things that are not necessary us to understand (complex coding) in a way that is totally fine do not understand. It takes out such a heavy burden from my shoulder that I can't explain.
I'm planning to make more this year. My first priority is that each video has high quality visuals and the explanation process is easy to follow. That's why I struggle to release a new video every week :D
I was analyzing the flow field to see how the angles were changing. I noticed that if there is a cell that has color anywhere but the top, leftmost pixel, that cell is assigned the default direction. I looked more closely at the code and discovered that it is because that is the only pixel in that cell that is used to calculate the grayscale value. If it has no color, the grayscale will be 0, thus the angle is 0. Did you look at an alternate method where you use the color pixels across the entire cell, somehow combining them to give a better result and not muddy the value integrating across every pixel?
Damn, this is awesome! And sooo dangerous! I "wasted" 2 days now with playing around with he effects! Way better than any of those Hollywood FX movies! T H A N K Y O U !!!!
Hi Robert, it is indeed. It can be an endless rabbit hole, tweaking values, colours, shapes and combining it with techniques from other effects. There are probably infinite combinations :D
did you get a solution for this? i tried updating the for loops x and y indexes per iteration by the number of pixels left over but it didn't seem to work
I am still having issues with the Text being skewed even after fixing the canvas width and height. I followed this from the beginning and have watched up to that part multiple times over the past few days and still cannot solve it any advice?
Nothing happens when I target the .colorAngle in the update method. The particles don't appear like in the video. I've started from scratch twice now and reviewed every single line. I can't understand why it responds differently from the video :( These are the best videos for me to learn web development after several years studying the basics of html, css and javascript. It's so frustrating not to be able to carry on with the video!
🎨 Today we will build TEXT flow field. EXTENDED class with BONUS lessons and more creative coding experiments, full source code from multiple different stages, learn how to create image flow fields and animate smooth color transitions.
🎨 Udemy: www.udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A
🎨 Skillshare (free 1 month trial):
www.skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on
1
I wasn't even able to draw a simple shape with JavaScript, but now, thanks to your inspiring content and projects, I feel confident enough to build my own 2D games and complex animations.
Thank you so much for your hard work, and please keep uploading videos like this, it's so fun!
Well done. Thank you for your feedback, I already have other videos planned. Will focus on gamedev for a while now
@@Frankslaboratory I take op's words as mine as well. your channel is amazing. also you know how to encourage and set expectation of the audience. You are good on pointing things that are not necessary us to understand (complex coding) in a way that is totally fine do not understand. It takes out such a heavy burden from my shoulder that I can't explain.
Your channel deserves so much more recognition than it does! Your content is so incredible.
You are the only creative man on the TH-cam and internet....⚘👍
Nooo, there are many others :)
Very powerful guy, amazing effect!
Neskutečná frajeřina. Díky, za další skvělý tutoriál. Jsi mistr.
Awesome!!! Please more videos! :)
I'm planning to make more this year. My first priority is that each video has high quality visuals and the explanation process is easy to follow. That's why I struggle to release a new video every week :D
Another very interesting video, thank you. You are a unique Canvas guru.
Your videos are SO informative, and well-explained, thank you so much for your hard work!!! Best videos on JS ever!
Very kind of you to give me this feedback! Thank you for taking the time to let me know you found some value.
I was analyzing the flow field to see how the angles were changing. I noticed that if there is a cell that has color anywhere but the top, leftmost pixel, that cell is assigned the default direction. I looked more closely at the code and discovered that it is because that is the only pixel in that cell that is used to calculate the grayscale value. If it has no color, the grayscale will be 0, thus the angle is 0. Did you look at an alternate method where you use the color pixels across the entire cell, somehow combining them to give a better result and not muddy the value integrating across every pixel?
Very high quality Content
Indeed.
Glad you think so
Your videos are amazing I learn a lot from them and they are very fun to follow along
Keep it up👍👍👍
Thank you I appreciate the feedback
Awesome. How about transitions from one image to another?
I had subscribed your channel
@@thefuntech2810 Cool :-) hope you found something you like.
I didn't think of that, but it could actually be done quite easily since I have pixel data for each cell as an object. Will try!
@@Frankslaboratory You can make your own morphing algorithm based on that :-)
Beautiful man. As always.
Thank you :)
WOW... that is top notch cleverness... BRAVO!!🙏🙏🙏👏👏👏🖖🖖🖖🖖🌹🌹🌹
Shandar , love from India ❤
Greetings to India ❤
Damn, this is awesome! And sooo dangerous! I "wasted" 2 days now with playing around with he effects! Way better than any of those Hollywood FX movies!
T H A N K Y O U !!!!
Hi Robert, it is indeed. It can be an endless rabbit hole, tweaking values, colours, shapes and combining it with techniques from other effects. There are probably infinite combinations :D
@@Frankslaboratory Most likely! - Would you mind to have a look at your Udemy course? I left a question there regarding a for-loop.
@@RobertWildling Hi, will find it there and respond now
@@Frankslaboratory Thank you very much!
Your videos are amazing!
Glad to hear!
Tanks very good work
Glad you think so
Can you make this with react?
how do you switch the canvas grid on/off and the text color?
I set up debug mode toggle by pressing letter d. I show how to do that in the first part of the class
@@Frankslaboratory my bad. Thanks
Any idea on how we could accomplish it with still keeping the dynamic resizing?
did you get a solution for this? i tried updating the for loops x and y indexes per iteration by the number of pixels left over but it didn't seem to work
Really beautiful effect 🤩
Thank you mate, I hope we get some new creative coding content from you soon as well :)
I am still having issues with the Text being skewed even after fixing the canvas width and height. I followed this from the beginning and have watched up to that part multiple times over the past few days and still cannot solve it any advice?
There's a typo in your code somewhere. Hard to tell. Email me and I send you the code when I have time
This is top knotch quality content, thank you so much for this ❤
legendary 👏👏
Glad you found some value Fudzer
I absolutely love your videos. Use code to show different beauty. Thanks.🥰
can you share the final code? You did a lot of refactoring it's hard to follow
Hey buddy, you are such a nice artist ❤❤
Thank you :)
thanks you!
Nothing happens when I target the .colorAngle in the update method. The particles don't appear like in the video. I've started from scratch twice now and reviewed every single line. I can't understand why it responds differently from the video :(
These are the best videos for me to learn web development after several years studying the basics of html, css and javascript. It's so frustrating not to be able to carry on with the video!
You can always email me for code. Also I share source code on Udemy with the extended version
PLEASE PLEASE PLEASE will you do a animation using react. i just cant crack transferring particle animations into react
Amazing!
Thank you
🔥
magnificent
Thank you
Hi Frank
Hi Dipesh, you reacted in seconds :D