JavaScript Flow Fields - Advanced Experiments

แชร์
ฝัง
  • เผยแพร่เมื่อ 23 ธ.ค. 2024

ความคิดเห็น •

  • @Frankslaboratory
    @Frankslaboratory  ปีที่แล้ว +2

    🎨 Today we will build TEXT 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

  • @comoyun
    @comoyun ปีที่แล้ว +11

    I wasn't even able to draw a simple shape with JavaScript, but now, thanks to your inspiring content and projects, I feel confident enough to build my own 2D games and complex animations.
    Thank you so much for your hard work, and please keep uploading videos like this, it's so fun!

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว +3

      Well done. Thank you for your feedback, I already have other videos planned. Will focus on gamedev for a while now

    • @felipe1876
      @felipe1876 ปีที่แล้ว

      ​@@Frankslaboratory I take op's words as mine as well. your channel is amazing. also you know how to encourage and set expectation of the audience. You are good on pointing things that are not necessary us to understand (complex coding) in a way that is totally fine do not understand. It takes out such a heavy burden from my shoulder that I can't explain.

  • @chadbroderick160
    @chadbroderick160 ปีที่แล้ว +3

    Your channel deserves so much more recognition than it does! Your content is so incredible.

  • @gsrcreations108
    @gsrcreations108 ปีที่แล้ว +3

    You are the only creative man on the TH-cam and internet....⚘👍

  • @xuexidada5951
    @xuexidada5951 ปีที่แล้ว +1

    Very powerful guy, amazing effect!

  • @lexart1
    @lexart1 ปีที่แล้ว

    Neskutečná frajeřina. Díky, za další skvělý tutoriál. Jsi mistr.

  • @berkipekoglu
    @berkipekoglu ปีที่แล้ว +1

    Awesome!!! Please more videos! :)

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว

      I'm planning to make more this year. My first priority is that each video has high quality visuals and the explanation process is easy to follow. That's why I struggle to release a new video every week :D

  • @2002budokan
    @2002budokan ปีที่แล้ว +1

    Another very interesting video, thank you. You are a unique Canvas guru.

  • @hazadus
    @hazadus ปีที่แล้ว

    Your videos are SO informative, and well-explained, thank you so much for your hard work!!! Best videos on JS ever!

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว +1

      Very kind of you to give me this feedback! Thank you for taking the time to let me know you found some value.

  • @larryk5541
    @larryk5541 หลายเดือนก่อน

    I was analyzing the flow field to see how the angles were changing. I noticed that if there is a cell that has color anywhere but the top, leftmost pixel, that cell is assigned the default direction. I looked more closely at the code and discovered that it is because that is the only pixel in that cell that is used to calculate the grayscale value. If it has no color, the grayscale will be 0, thus the angle is 0. Did you look at an alternate method where you use the color pixels across the entire cell, somehow combining them to give a better result and not muddy the value integrating across every pixel?

  • @thefuntech2810
    @thefuntech2810 ปีที่แล้ว +1

    Very high quality Content

  • @memesclips901
    @memesclips901 ปีที่แล้ว +4

    Your videos are amazing I learn a lot from them and they are very fun to follow along
    Keep it up👍👍👍

  • @Radu
    @Radu ปีที่แล้ว +1

    Awesome. How about transitions from one image to another?

    • @thefuntech2810
      @thefuntech2810 ปีที่แล้ว +1

      I had subscribed your channel

    • @Radu
      @Radu ปีที่แล้ว

      @@thefuntech2810 Cool :-) hope you found something you like.

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว +1

      I didn't think of that, but it could actually be done quite easily since I have pixel data for each cell as an object. Will try!

    • @Radu
      @Radu ปีที่แล้ว

      @@Frankslaboratory You can make your own morphing algorithm based on that :-)

  • @widevader
    @widevader ปีที่แล้ว

    Beautiful man. As always.

  • @suelingsusu1339
    @suelingsusu1339 ปีที่แล้ว

    WOW... that is top notch cleverness... BRAVO!!🙏🙏🙏👏👏👏🖖🖖🖖🖖🌹🌹🌹

  • @time4062
    @time4062 ปีที่แล้ว

    Shandar , love from India ❤

  • @RobertWildling
    @RobertWildling ปีที่แล้ว

    Damn, this is awesome! And sooo dangerous! I "wasted" 2 days now with playing around with he effects! Way better than any of those Hollywood FX movies!
    T H A N K Y O U !!!!

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว +1

      Hi Robert, it is indeed. It can be an endless rabbit hole, tweaking values, colours, shapes and combining it with techniques from other effects. There are probably infinite combinations :D

    • @RobertWildling
      @RobertWildling ปีที่แล้ว

      @@Frankslaboratory Most likely! - Would you mind to have a look at your Udemy course? I left a question there regarding a for-loop.

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว +1

      @@RobertWildling Hi, will find it there and respond now

    • @RobertWildling
      @RobertWildling ปีที่แล้ว

      @@Frankslaboratory Thank you very much!

  • @ЛеонідПрокопенко-л8м
    @ЛеонідПрокопенко-л8м ปีที่แล้ว

    Your videos are amazing!

  • @OFR5086
    @OFR5086 ปีที่แล้ว +1

    Tanks very good work

  • @movieana2089
    @movieana2089 ปีที่แล้ว

    Can you make this with react?

  • @quatuormortis96
    @quatuormortis96 ปีที่แล้ว

    how do you switch the canvas grid on/off and the text color?

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว

      I set up debug mode toggle by pressing letter d. I show how to do that in the first part of the class

    • @quatuormortis96
      @quatuormortis96 ปีที่แล้ว

      @@Frankslaboratory my bad. Thanks

  • @A1Productionzz
    @A1Productionzz ปีที่แล้ว

    Any idea on how we could accomplish it with still keeping the dynamic resizing?

    • @DragoCyan
      @DragoCyan 3 หลายเดือนก่อน

      did you get a solution for this? i tried updating the for loops x and y indexes per iteration by the number of pixels left over but it didn't seem to work

  • @ThreePixDroid_RU
    @ThreePixDroid_RU ปีที่แล้ว

    Really beautiful effect 🤩

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว

      Thank you mate, I hope we get some new creative coding content from you soon as well :)

  • @bassveronica
    @bassveronica 9 หลายเดือนก่อน

    I am still having issues with the Text being skewed even after fixing the canvas width and height. I followed this from the beginning and have watched up to that part multiple times over the past few days and still cannot solve it any advice?

    • @Frankslaboratory
      @Frankslaboratory  9 หลายเดือนก่อน

      There's a typo in your code somewhere. Hard to tell. Email me and I send you the code when I have time

  • @deathdefier45
    @deathdefier45 ปีที่แล้ว

    This is top knotch quality content, thank you so much for this ❤

  • @naranyala_dev
    @naranyala_dev ปีที่แล้ว

    legendary 👏👏

  • @TianyuLu-t6n
    @TianyuLu-t6n ปีที่แล้ว

    I absolutely love your videos. Use code to show different beauty. Thanks.🥰

  • @vrednerboy
    @vrednerboy 3 หลายเดือนก่อน

    can you share the final code? You did a lot of refactoring it's hard to follow

  • @time4062
    @time4062 ปีที่แล้ว +1

    Hey buddy, you are such a nice artist ❤❤

  • @leoprone1
    @leoprone1 6 หลายเดือนก่อน

    thanks you!

  • @jcosk8
    @jcosk8 ปีที่แล้ว

    Nothing happens when I target the .colorAngle in the update method. The particles don't appear like in the video. I've started from scratch twice now and reviewed every single line. I can't understand why it responds differently from the video :(
    These are the best videos for me to learn web development after several years studying the basics of html, css and javascript. It's so frustrating not to be able to carry on with the video!

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว

      You can always email me for code. Also I share source code on Udemy with the extended version

  • @letthemcode7199
    @letthemcode7199 ปีที่แล้ว

    PLEASE PLEASE PLEASE will you do a animation using react. i just cant crack transferring particle animations into react

  • @autozone5335
    @autozone5335 ปีที่แล้ว

    Amazing!

  • @MadaraAzukar
    @MadaraAzukar ปีที่แล้ว +1

    🔥

  • @hex9219
    @hex9219 ปีที่แล้ว

    magnificent

  • @Intellectualmind4
    @Intellectualmind4 ปีที่แล้ว

    Hi Frank