🎨 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 🙂
@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.
@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.
@fqgiord9 ай бұрын
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!!!
@felipealvesbarretorodrigue9719 Жыл бұрын
I want to say that your work is amazing! Thanks for sharing it and teaching us!
@Frankslaboratory Жыл бұрын
Thank you Felipe! :)
@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.
@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!
@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 !
@jamdun30433 ай бұрын
This should be taught in every chlidren class worldwide :P JavaScript application
@mister_i_3708 Жыл бұрын
35:44 It`s like that photo of night sky.
@Frankslaboratory Жыл бұрын
Hey Mister, yeah you are right :)
@krgrief Жыл бұрын
this is an amazing channel. truly a hidden gem dude
@Frankslaboratory Жыл бұрын
Thank you, I'm happy you found some value
@reid_makes_art4 ай бұрын
good stuff
@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,
@user-yb5cn3np5q8 ай бұрын
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.
@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
@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.
@leoprone12 ай бұрын
thank you!
@eolseegoo92018 ай бұрын
Thank you very much for the wonderful instruction
@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,
@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...
@DynamicSun Жыл бұрын
ok, i see, today it's QuantumSystems maybe the HiggisField of Javascript :-D inspiring
@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
@javifontalva7752 Жыл бұрын
Mindblowing!!!
@Frankslaboratory Жыл бұрын
Hi Javi, thanks :D
@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
@ya648 ай бұрын
Really cool effect. I wonder if it would be possible the increase performance.
@alvarobyrne Жыл бұрын
awe... some!
@nimira43 Жыл бұрын
Thanks as always for your tutorials. Hope you're gonna release a new Udemy course.
@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
@AZHARakaGoat Жыл бұрын
💛
@DigitalCraftstodio Жыл бұрын
my teacher is back...🙃
@Frankslaboratory Жыл бұрын
Indeed 😊
@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.
@Radu Жыл бұрын
Amazing!
@Frankslaboratory Жыл бұрын
Thank you Radu!
@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!!!!!
@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!
@koko-mt7zr Жыл бұрын
Amazing ❤
@Frankslaboratory Жыл бұрын
Thank you ❤
@Intellectualmind4 Жыл бұрын
Great content 👍😊
@Frankslaboratory Жыл бұрын
Hi Dipesh, thank you
@Bobby-wk3gx Жыл бұрын
Love your video ❤
@Frankslaboratory Жыл бұрын
Hi Bobby. Thank you ❤️
@sebastiancioek5970 Жыл бұрын
Thank You very much!:-)
@Frankslaboratory Жыл бұрын
Hi Sebastian!
@nagesh007 Жыл бұрын
Awesome
@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.
@Chrisalead58 ай бұрын
Nice one except it's not Perlin Noise at all ! But it is still beautiful ^^
@Frankslaboratory8 ай бұрын
Yup. Never said this is Perlin noise. You can easily plug Perlin into this codebase
@amitkr6759 Жыл бұрын
You are cool man 🔥🔥
@Frankslaboratory Жыл бұрын
Hi Amit
@notedbongo7 ай бұрын
36:31
@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
@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 😊
@samarbid13 Жыл бұрын
Amazing work! Any Github repo links?
@time4062 Жыл бұрын
Hmesa ki tarah "shandar"
@Frankslaboratory Жыл бұрын
What does it mean :)
@ville975610 ай бұрын
@nasimulhaque9824 Жыл бұрын
Holly molly
@Frankslaboratory Жыл бұрын
Hi Nasimul, nice to meet you
@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 |
@yuribarros58263 ай бұрын
Hello, I really liked the content. 1 more subscriber and 1 more like!
@yeti2725 Жыл бұрын
I'm stuck does anyone have the source code
@Frankslaboratory Жыл бұрын
You can send me an email
@freiesleben612611 ай бұрын
Ok i understood this video can i get a job?
@Frankslaboratory11 ай бұрын
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