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

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

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.

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

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

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

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!

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 !

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

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

this is an amazing channel. truly a hidden gem dude

good stuff

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

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.

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!

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

thank you!

Thank you very much for the wonderful instruction

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?

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

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

this tutoruial is great, thanks for creating this video!

great thanks. Do not stop

Mindblowing!!!

magnificent as always, thanks a lot

As always beautiful ❤ thank you 🙏

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

awe... some!

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

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

💛

my teacher is back...🙃

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?

Amazing!

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!

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

Amazing ❤

Great content 👍😊

Love your video ❤

Thank You very much!:-)

Awesome

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

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

You are cool man 🔥🔥

36:31

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.

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.

Amazing work! Any Github repo links?

Hmesa ki tarah "shandar"

Holly molly

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 |

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

I'm stuck does anyone have the source code

Ok i understood this video can i get a job?

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