Learn Creative Coding: Flow Fields 🎨

Creating beautiful things with JavaScript can be easy, if you take if step by step, everything makes sense if you break it into individual parts. Let me show you how to take basic programming principles, functions, arrays and for loops, to create complex animated code bases. Once we fully understand the techniques we will take it to the next level.
🎨 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...
🎨 Skillshare (free 1 month trial):
www.skillshare.com/en/r/profi...
📚 Part 2: • JavaScript Flow Fields...
📚 Full playlist: • Flow Fields
Beginner friendly warm-up class you can watch before this video: • Learn Creative Coding:...
⭐️Tutorial Contents ⭐️
00:00 Intro
00:38 What is a flow field?
02:00 How to set up HTML5 Canvas project
02:52 How to draw shapes on canvas
06:13 Object oriented programming in JavaScript
12:45 Drawing particle systems
15:12 Animating particle systems
19:02 Drawing lines and trails
22:42 Motion patterns with trigonometry
23:55 Creating a vector field
33:33 How to create a flow field
38:42 Flow field experiments
42:16 Grid and debug mode
50:25 Randomized colors
53:13 Responsive design
58:33 Experimenting with flow field patterns
Today we will:
🎨 discover the tools - vanilla JavaScript, HTML5 Canvas
🎨 experiment with code
🎨 design animations and flow fields
More beginner friendly creative coding with vanilla JavaScript & HTML canvas:
• Front End Web Developm...
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory

[@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 🙂

[@jamdun3043]

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

[@akinjidesleek]

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

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

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

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

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

[@felipealvesbarretorodrigue9719]

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

[@Frankslaboratory]

Thank you Felipe! :)

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

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

[@eolseegoo9201]

Thank you very much for the wonderful instruction

[@mister_i_3708]

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

[@Frankslaboratory]

Hey Mister, yeah you are right :)

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

[@leoprone1]

thank you!

[@nasimajosefi]

As always beautiful ❤ thank you 🙏

[@Frankslaboratory]

Glad you like it Nasima

[@maurov6861]

magnificent as always, thanks a lot

[@Frankslaboratory]

Glad you liked it Mauro

[@reid_makes_art]

good stuff

[@krgrief]

this is an amazing channel. truly a hidden gem dude

[@Frankslaboratory]

Thank you, I'm happy you found some value

[@javifontalva7752]

Mindblowing!!!

[@Frankslaboratory]

Hi Javi, thanks :D

[@theonlinezone6904]

this tutoruial is great, thanks for creating this video!

[@Frankslaboratory]

Glad you found some value!

[@Tom-Tyrmand]

great thanks. Do not stop

[@Frankslaboratory]

Thanks Tom

[@user-yb5cn3np5q]

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.

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

[@Radu]

Amazing!

[@Frankslaboratory]

Thank you Radu!

[@sebastiancioek5970]

Thank You very much!:-)

[@Frankslaboratory]

Hi Sebastian!

[@nimira43]

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

[@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,

[@Bobby-wk3gx]

Love your video ❤

[@Frankslaboratory]

Hi Bobby. Thank you ❤️

[@alvarobyrne]

awe... some!

[@koko-mt7zr]

Amazing ❤

[@Frankslaboratory]

Thank you ❤

[@DynamicSun]

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

[@AZHARakaGoat]

💛

[@ya64]

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

[@Intellectualmind4]

Great content 👍😊

[@Frankslaboratory]

Hi Dipesh, thank you

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

[@amitkr6759]

You are cool man 🔥🔥

[@Frankslaboratory]

Hi Amit

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

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

[@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?

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

[@DigitalCraftstodio]

my teacher is back...🙃

[@Frankslaboratory]

Indeed 😊

[@notedbongo]

36:31

[@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 😊

[@ville9756]

[@time4062]

Hmesa ki tarah "shandar"

[@Frankslaboratory]

What does it mean :)

[@nagesh007]

Awesome

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

[@yuribarros5826]

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

[@AZHARakaGoat]

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 |

[@nasimulhaque9824]

Holly molly

[@Frankslaboratory]

Hi Nasimul, nice to meet you

[@yeti2725]

I'm stuck does anyone have the source code

[@Frankslaboratory]

You can send me an email

[@freiesleben6126]

Ok i understood this video can i get a job?

[@Frankslaboratory]

Yes you can

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