🎨 Today we will learn how to build a 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
Hi creative coders! Are you new here or you watched my videos before? Fundamentals are important, the most complex effects are made by combining multiple simple techniques. Like in this video. Have fun!
I'm building a raycasting game engine in javascript using lots of things you teached in your videos, amazing content. The only problem I'm facing now is that when I apply texture the canvas fillrect slow down my code, a lot. I'm about to try webgl. Thanks a lot
Thanks, this was a lot of fun! I went ahead and added buttons for increasing and decreasing zoom and curve. As well as text fields to set a min and max colour and saturation for my random colour and saturation variables.
I was looking for videos on the Perlin noise and I ran across your video. I've seen a lot of your videos and I was so glad to find it. I immediately knew it would be good and thoroughly explained. No need to look further. Thank you.
Glad you think so. I dont cover perlin noise pattern here. I make the shapes using simple sine and cosine pattern instead and text and image shapes, which I havent seen many people do yet. Perlin noise is a lot of code to write without a library so I chose a simpler pattern that can be explained for beginners. Hope the result is still good.
Just amazing your code!! I'm learning programing and see this topic is great because I can see JS in different perspective with interesting pattern! Math + Code + Creativity! Congrats!!!
Fraaaaank I love your videos man you give me inspiration every single day to learn move about graphics programming!!! Please keep up the incredible work you give to the community. No one else does the same as you, your videos are unique!
Hi Wendy, I was planning to do this effect for a while, because it's so simple to achieve and the results can be quite impressive, glad you found some value,
So, I was in the middle of the Flow Field tutorial, wondering how to adapt the canvas when the window resizes.. Then, you add the 'keydown' eventListener into Particle class, so I tried to do the same with 'resize' eventListener. Let me tell you I failed xD THEN, you propose to do it and I was so happy ! Again, you never disappoint !
Frank, you are amazing, thank you so much for doing these beautiful tutorials, so much valuable information! I am having so much fun learning from you!
Hello Franks. A truly inspiring video. And by the way, do you think there are significant performance differences between webgl and 2d? Sorry for my english...
Hi. Yes there is a significant difference. WebGL as well as CSS as far as I know is GPU accelerated. Graphics card helps with it. 2D drawing context relies on the CPU. Your English is great
That .shift() is linear in number of elements in the array. That's why you can't get further than 2000 particles. Use a circular buffer, and the problem should go away. Also devtools has the Performance tab, and it can show the time spent of certain lines of code exactly.
hey i've been looking for sources to learn creative coding and your content is probably the best i've seen so far javascript oriented, thanks for uploading this can you maybe make a tutorial on "bigger" elements? like, showing how to change the shape of a circle to make it look like a bubble in the air, or turning a triangle into a squere, then a pentagon and so?
Hi, I think you are describing a morph effect. I only experimented with it in CSS with clip-path creating more complex shapes. I would like to do it on canvas, need to research this, no idea how to approach it right now,
Hi frank, just saw your channel and was super impressed. As a new learner in web development i just had a question. Is there a demand for these creative skills in web development? Or is it more like a hobby?
Hi Kamina, there is an ever increasing demand for creative coding skills as more people learn to utilize canvas, as well as the toolkit gets more cross browser support etc. Also these videos use vanilla JS, as I say in the intro it's just functions, arrays and for loops so for some people this might be a good way to practice and learn JavaScript in general. There is a massive demand for vanilla JavaScript experts and there always will be.
Can i please please get access to the full class where you teach image manipulation ? I am a broke student who can't pay but found this tutorial really interesting. Thanks anyways!
@@Frankslaboratory Oh my god thank you so so much, You have no idea how much you helped me!! I will forever be indebted to you, and one day I will surely payback to you I promise. Thanks a lot lot lot! Im so happy right now!!!!!
Simply mindblowing! Thank you very much for this! - A question: around min 40 or 45 you create the drawGrid function. You call this function on the animate loop. Is it really necessary to draw this grid on each tick of the animation? (Haven't finished watching the tute yet, currently I am at min 50; so it might become clear later on... but if not, I'd love to know why.)
Hi. I only draw the grid when debug mode is on. It needs to be redrawn because we are using clearRect to delete canvas between every animation loop. It would be possible to create a separate canvas element just for that grid and then it wouldn't have to be redrawn like this.
it'd be interesting a dark color where speed is greater... and light color for areas where the speed is lower... to see where the fluid is going faster... good video
I did that in the video where I make particle rain react to pixel data. I'll show some interesting experiments that can be done with this effect in part 2
Hey Mike, I recorded everything but it's not edited yet, will release it as soon as it's ready and nice, the second part needs some visual help elements to explain how it's done, so it's taking some time.
Hello Frank awesome video. But I do have an issue which I have shared with you via email. It's the jittery accumulation of these lines on the left and right edges of the screen. Please take a look.
Hi, I'm not sure if I responded to that email or if it's in my to do pile. I get a lot of emails that take a lot of focus and time to respond, because it's always something code related. It will be jittery for example if canvas width and height in not divisible by cell size without a remainder, so the edges get a margin where the particles go wild. I would fix it by expending the grid slighly over the edges for example
In drawGrid, lines 99 and 105 i made a mistake to invert the position of the arguments coding "moveTo(0, this.cellSize * c) and moveTo(this.cellSize * r, 0). The grid looks like a pattern that I fail to describe, but its cool.
Hello i have made a library for graphs And i am setting the FillStyle to c | main. (Where c = #ff2d8a. And main = hsla(225,36%,1%,0.731) ) And then i am seeing a blended color which i want but After updating (update happens when moving touch over the canvas ) then the color is hsla(225,36%,17%,0.731) which is variable named main So i want to permanently set the blend color ( Compositing or filter. Will be an option ) but i want to try with bit wise |
🎨 Today we will learn how to build a 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
Hi creative coders! Are you new here or you watched my videos before? Fundamentals are important, the most complex effects are made by combining multiple simple techniques. Like in this video. Have fun!
Thanks so much for that tutorial, I'm new here and I'm gonna stick here haha😂
I'm building a raycasting game engine in javascript using lots of things you teached in your videos, amazing content. The only problem I'm facing now is that when I apply texture the canvas fillrect slow down my code, a lot. I'm about to try webgl. Thanks a lot
Thanks for information yes i am new but i enjoy it 🙂
Thanks, this was a lot of fun! I went ahead and added buttons for increasing and decreasing zoom and curve. As well as text fields to set a min and max colour and saturation for my random colour and saturation variables.
Well done, glad to hear you expanded the codebase and added more features, I was hoping someone would do that
I was looking for videos on the Perlin noise and I ran across your video. I've seen a lot of your videos and I was so glad to find it. I immediately knew it would be good
and thoroughly explained. No need to look further. Thank you.
Glad you think so. I dont cover perlin noise pattern here. I make the shapes using simple sine and cosine pattern instead and text and image shapes, which I havent seen many people do yet. Perlin noise is a lot of code to write without a library so I chose a simpler pattern that can be explained for beginners. Hope the result is still good.
Starting the playlist now. Can’t wait to replicate this as a background in a react codebase!
Just amazing your code!! I'm learning programing and see this topic is great because I can see JS in different perspective with interesting pattern! Math + Code + Creativity! Congrats!!!
Fraaaaank I love your videos man you give me inspiration every single day to learn move about graphics programming!!! Please keep up the incredible work you give to the community.
No one else does the same as you, your videos are unique!
Hi Reginaldo, it's very kind of you to say that. Thank you for letting me know you found some value!
I want to say that your work is amazing! Thanks for sharing it and teaching us!
Thank you Felipe! :)
Frank is so good that I clicked like before the video even started. I already know what to expect so why not give credit where credit is due.
Such a great video! I couldn't pick a better intro to canvas. Can't wait for next part.
Hello Vojta, welcome to the world of web animation, have fun :) Working on the next part with text fields now.
This is incredible! exactly what I was hoping to find help for, thank you so much for making these tutorials
Hi Wendy, I was planning to do this effect for a while, because it's so simple to achieve and the results can be quite impressive, glad you found some value,
So, I was in the middle of the Flow Field tutorial, wondering how to adapt the canvas when the window resizes.. Then, you add the 'keydown' eventListener into Particle class, so I tried to do the same with 'resize' eventListener. Let me tell you I failed xD THEN, you propose to do it and I was so happy ! Again, you never disappoint !
Frank, you are amazing, thank you so much for doing these beautiful tutorials, so much valuable information! I am having so much fun learning from you!
Glad you found some value Michel. Thank you for taking the time to let me know. Nice to see a comment like this
Hello Franks. A truly inspiring video. And by the way, do you think there are significant performance differences between webgl and 2d? Sorry for my english...
Hi. Yes there is a significant difference. WebGL as well as CSS as far as I know is GPU accelerated. Graphics card helps with it. 2D drawing context relies on the CPU. Your English is great
@@Frankslaboratory Thanks for the answer...
35:44 It`s like that photo of night sky.
Hey Mister, yeah you are right :)
That .shift() is linear in number of elements in the array. That's why you can't get further than 2000 particles. Use a circular buffer, and the problem should go away.
Also devtools has the Performance tab, and it can show the time spent of certain lines of code exactly.
This should be taught in every chlidren class worldwide :P JavaScript application
this is an amazing channel. truly a hidden gem dude
Thank you, I'm happy you found some value
hey i've been looking for sources to learn creative coding and your content is probably the best i've seen so far javascript oriented, thanks for uploading this
can you maybe make a tutorial on "bigger" elements? like, showing how to change the shape of a circle to make it look like a bubble in the air, or turning a triangle into a squere, then a pentagon and so?
Hi, I think you are describing a morph effect. I only experimented with it in CSS with clip-path creating more complex shapes. I would like to do it on canvas, need to research this, no idea how to approach it right now,
Thank you very much for the wonderful instruction
Really cool effect. I wonder if it would be possible the increase performance.
good stuff
thank you!
this tutoruial is great, thanks for creating this video!
Glad you found some value!
Programming is interesting, but the art in it is amazing!
Hi Max, yea, I love flow fields, it's such a simple effect to build and it can be modified in so many different ways.
Thanks as always for your tutorials. Hope you're gonna release a new Udemy course.
Hi frank, just saw your channel and was super impressed. As a new learner in web development i just had a question. Is there a demand for these creative skills in web development? Or is it more like a hobby?
Hi Kamina, there is an ever increasing demand for creative coding skills as more people learn to utilize canvas, as well as the toolkit gets more cross browser support etc. Also these videos use vanilla JS, as I say in the intro it's just functions, arrays and for loops so for some people this might be a good way to practice and learn JavaScript in general. There is a massive demand for vanilla JavaScript experts and there always will be.
great thanks. Do not stop
Thanks Tom
Can i please please get access to the full class where you teach image manipulation ?
I am a broke student who can't pay but found this tutorial really interesting.
Thanks anyways!
Hi, sure, use the Udemy link in the description and use code "FREE_100", should give you the full course free of charge
@@Frankslaboratory Oh my god thank you so so much,
You have no idea how much you helped me!!
I will forever be indebted to you, and one day I will surely payback to you I promise.
Thanks a lot lot lot!
Im so happy right now!!!!!
ok, i see, today it's QuantumSystems maybe the HiggisField of Javascript :-D inspiring
magnificent as always, thanks a lot
Glad you liked it Mauro
Simply mindblowing! Thank you very much for this! - A question: around min 40 or 45 you create the drawGrid function. You call this function on the animate loop. Is it really necessary to draw this grid on each tick of the animation? (Haven't finished watching the tute yet, currently I am at min 50; so it might become clear later on... but if not, I'd love to know why.)
Hi. I only draw the grid when debug mode is on. It needs to be redrawn because we are using clearRect to delete canvas between every animation loop. It would be possible to create a separate canvas element just for that grid and then it wouldn't have to be redrawn like this.
@@Frankslaboratory Thank you! I understand now!
As always beautiful ❤ thank you 🙏
Glad you like it Nasima
it'd be interesting a dark color where speed is greater... and light color for areas where the speed is lower... to see where the fluid is going faster... good video
I did that in the video where I make particle rain react to pixel data. I'll show some interesting experiments that can be done with this effect in part 2
Awesome! When will the next video on wrapping around text be released?
Hey Mike, I recorded everything but it's not edited yet, will release it as soon as it's ready and nice, the second part needs some visual help elements to explain how it's done, so it's taking some time.
awe... some!
Mindblowing!!!
Hi Javi, thanks :D
Amazing work!
Any Github repo links?
Thank You very much!:-)
Hi Sebastian!
Amazing!
Thank you Radu!
💛
Great content 👍😊
Hi Dipesh, thank you
Hello Frank awesome video. But I do have an issue which I have shared with you via email. It's the jittery accumulation of these lines on the left and right edges of the screen. Please take a look.
Hi, I'm not sure if I responded to that email or if it's in my to do pile. I get a lot of emails that take a lot of focus and time to respond, because it's always something code related. It will be jittery for example if canvas width and height in not divisible by cell size without a remainder, so the edges get a margin where the particles go wild. I would fix it by expending the grid slighly over the edges for example
Thank you very much. I will try it :)@@Frankslaboratory
Love your video ❤
Hi Bobby. Thank you ❤️
Amazing ❤
Thank you ❤
Nice one except it's not Perlin Noise at all ! But it is still beautiful ^^
Yup. Never said this is Perlin noise. You can easily plug Perlin into this codebase
In drawGrid, lines 99 and 105 i made a mistake to invert the position of the arguments coding "moveTo(0, this.cellSize * c) and moveTo(this.cellSize * r, 0). The grid looks like a pattern that I fail to describe, but its cool.
Hi Felipe. Sometimes I come up with cool effects with happy accidents. Glad you're having fun with the project 😊
You are cool man 🔥🔥
Hi Amit
my teacher is back...🙃
Indeed 😊
36:31
Hello, I really liked the content. 1 more subscriber and 1 more like!
Hmesa ki tarah "shandar"
What does it mean :)
I'm stuck does anyone have the source code
You can send me an email
Awesome
Holly molly
Hi Nasimul, nice to meet you
Hello i have made a library for graphs
And i am setting the FillStyle to
c | main. (Where c = #ff2d8a. And main = hsla(225,36%,1%,0.731) )
And then i am seeing a blended color which i want but
After updating (update happens when moving touch over the canvas )
then the color is hsla(225,36%,17%,0.731) which is variable named main
So i want to permanently set the blend color
( Compositing or filter. Will be an option ) but i want to try with bit wise |
Ok i understood this video can i get a job?
Yes you can
I challenge you to make a raycasting engine using vanilla javascript and HTML5 canvas.
if( e.key === 'd') this.debug = !this.debug; I LOVE THIS LINE