Learn Creative Coding: Flow Fields 🎨

[@Frankslaboratory]

🎨 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

[@Frankslaboratory]

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!

[@tedreams]

Thanks so much for that tutorial, I'm new here and I'm gonna stick here haha😂

[@danielmelo389]

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

[@youcube291]

Thanks for information yes i am new but i enjoy it 🙂

[@ContProf]

keep shring like this video are amazing

[@akinjidesleek]

Starting the playlist now. Can’t wait to replicate this as a background in a react codebase!

[@Desertfox180]

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.

[@Frankslaboratory]

Well done, glad to hear you expanded the codebase and added more features, I was hoping someone would do that

[@WolfPup-gb8ze]

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.

[@Frankslaboratory]

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.

[@fqgiord]

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!!!

[@RedEyedJedi]

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.

[@regibyte]

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!

[@Frankslaboratory]

Hi Reginaldo, it's very kind of you to say that. Thank you for letting me know you found some value!

[@felipealvesbarretorodrigue9719]

I want to say that your work is amazing! Thanks for sharing it and teaching us!

[@Frankslaboratory]

Thank you Felipe! :)

[@milhod7432]

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 !

[@ashiroen]

Such a great video! I couldn't pick a better intro to canvas. Can't wait for next part.

[@Frankslaboratory]

Hello Vojta, welcome to the world of web animation, have fun :) Working on the next part with text fields now.

[@jamdun3043]

This should be taught in every chlidren class worldwide :P JavaScript application

[@ContProf]

keep going

[@wendyyu3767]

This is incredible! exactly what I was hoping to find help for, thank you so much for making these tutorials

[@Frankslaboratory]

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,

[@MorninEveryone]

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!

[@Frankslaboratory]

Glad you found some value Michel. Thank you for taking the time to let me know. Nice to see a comment like this

[@krgrief]

this is an amazing channel. truly a hidden gem dude

[@Frankslaboratory]

Thank you, I'm happy you found some value

[@leoprone1]

thank you!

[@eolseegoo9201]

Thank you very much for the wonderful instruction

[@ya64]

Really cool effect. I wonder if it would be possible the increase performance.

[@mister_i_3708]

35:44 It`s like that photo of night sky.

[@Frankslaboratory]

Hey Mister, yeah you are right :)

[@alisandogan5885]

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...

[@Frankslaboratory]

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

[@alisandogan5885]

@@Frankslaboratory Thanks for the answer...

[@MaxMov-sp8hr]

Programming is interesting, but the art in it is amazing!

[@Frankslaboratory]

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.

[@uraharaYorrch]

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?

[@Frankslaboratory]

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,

[@theonlinezone6904]

this tutoruial is great, thanks for creating this video!

[@Frankslaboratory]

Glad you found some value!

[@reid_makes_art]

good stuff

[@DynamicSun]

ok, i see, today it's QuantumSystems maybe the HiggisField of Javascript :-D inspiring

[@nimira43]

Thanks as always for your tutorials. Hope you're gonna release a new Udemy course.

[@Tom-Tyrmand]

great thanks. Do not stop

[@Frankslaboratory]

Thanks Tom

[@maurov6861]

magnificent as always, thanks a lot

[@Frankslaboratory]

Glad you liked it Mauro

[@nasimajosefi]

As always beautiful ❤ thank you 🙏

[@Frankslaboratory]

Glad you like it Nasima

[@DarkGourmand]

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]

Hi, sure, use the Udemy link in the description and use code "FREE_100", should give you the full course free of charge

[@DarkGourmand]

@@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!!!!!

[@alvarobyrne]

awe... some!

[@RobertWildling]

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.)

[@Frankslaboratory]

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.

[@RobertWildling]

@@Frankslaboratory Thank you! I understand now!

[@pabloantonio5003]

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

[@Frankslaboratory]

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

[@kaminasimon4740]

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?

[@Frankslaboratory]

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.

[@javifontalva7752]

Mindblowing!!!

[@Frankslaboratory]

Hi Javi, thanks :D

[@sebastiancioek5970]

Thank You very much!:-)

[@Frankslaboratory]

Hi Sebastian!

[@PaDSt3r]

Awesome! When will the next video on wrapping around text be released?

[@Frankslaboratory]

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.

[@samarbid13]

Amazing work! Any Github repo links?

[@DigitalCraftstodio]

my teacher is back...🙃

[@Frankslaboratory]

Indeed 😊

[@theman7050]

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.

[@Frankslaboratory]

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

[@theman7050]

Thank you very much. I will try it :)@@Frankslaboratory

[@MadaraAzukar]

💛

[@Radu]

Amazing!

[@Frankslaboratory]

Thank you Radu!

[@Chrisalead5]

Nice one except it's not Perlin Noise at all ! But it is still beautiful ^^

[@Frankslaboratory]

Yup. Never said this is Perlin noise. You can easily plug Perlin into this codebase

[@felipe1876]

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.

[@Frankslaboratory]

Hi Felipe. Sometimes I come up with cool effects with happy accidents. Glad you're having fun with the project 😊

[@Bobby-wk3gx]

Love your video ❤

[@Frankslaboratory]

Hi Bobby. Thank you ❤️

[@koko-mt7zr]

Amazing ❤

[@Frankslaboratory]

Thank you ❤

[@Intellectualmind4]

Great content 👍😊

[@Frankslaboratory]

Hi Dipesh, thank you

[@amitkr6759]

You are cool man 🔥🔥

[@Frankslaboratory]

Hi Amit

[@nagesh007]

Awesome

[@notedbongo]

36:31

[@time4062]

Hmesa ki tarah "shandar"

[@Frankslaboratory]

What does it mean :)

[@MadaraAzukar]

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 |

[@yuribarros5826]

Hello, I really liked the content. 1 more subscriber and 1 more like!

[@nasimulhaque9824]

Holly molly

[@Frankslaboratory]

Hi Nasimul, nice to meet you

[@freiesleben6126]

Ok i understood this video can i get a job?

[@Frankslaboratory]

Yes you can

[@yeti2725]

I'm stuck does anyone have the source code

[@Frankslaboratory]

You can send me an email

[@starscorpion8044]

I challenge you to make a raycasting engine using vanilla javascript and HTML5 canvas.

[@RedEyedJedi]

if( e.key === 'd') this.debug = !this.debug; I LOVE THIS LINE