Learn Creative Coding: Image Effects

Поділитися
Вставка
  • Опубліковано 29 жов 2024

КОМЕНТАРІ • 89

  • @wizardfix
    @wizardfix 9 місяців тому +3

    As usual from Frank, not only a plethora of great ideas to work with, but also presented and taught brilliantly.
    I am now totally sold on the object-oriented approach for all animation projects, as it really helps keep things organised, whereas a purely functional design, with a whole bunch of functions passing all sorts of values and references between them, would end up degenerating into a mess.
    Well done Frank for championing the OOP approach!

    • @Frankslaboratory
      @Frankslaboratory  8 місяців тому +1

      Thank you for your kind feedback. Nice to see this comment. I have been using this OOP approach for a lot of projects lately. I like it because it's simple and easy to keep it clean. Good to hear somebody else agrees :)

  • @DrummingDivingPythonProgrammer
    @DrummingDivingPythonProgrammer 11 місяців тому +5

    this is so incredibly conveniently timed. I'm working in python and pygame rather than javascript, but you just laid out a roadmap to get to a place I hadn't quite worked out yet.

    • @Frankslaboratory
      @Frankslaboratory  11 місяців тому +1

      Have you converted a JS codebase into Python before? I haven't tried yet because I don't use Python very often, but it should be quite straightforward

    • @DrummingDivingPythonProgrammer
      @DrummingDivingPythonProgrammer 11 місяців тому

      @@Frankslaboratory I have done several such projects. Most of the logic here, and in other stuff like sand games or CGOL is just math. Drawing stuff, pygame has rough equivalents for most stuff you'd use in canvas, for those that don't you can still work it out in python or pygame. As an example, you'd extract your image data by loading said image into pygame as a surface, then reading from it as a surfarray. That gives you a x/y grid representation of the colors in the image. Then you can draw it however you like, or manipulate it as you've shown here. Using numpy to help is not a bad idea. It's pretty efficient at grid based stuff, so you can take that extracted data and draw it anywhere on the grid, scale it, manipulate it, whatever.

    • @Frankslaboratory
      @Frankslaboratory  11 місяців тому +1

      @@DrummingDivingPythonProgrammer It's good to know that there are equivalents of the more specialized methods, or at least a workaround, like you just described, that allows us to achieve a similar result. I will try to make something in it as well when I have time, sounds like a fun thing to learn

    • @DrummingDivingPythonProgrammer
      @DrummingDivingPythonProgrammer 11 місяців тому

      @@Frankslaboratory it can occasionally be a challenge trying to figure out stuff that uses specific libraries in other languages. You don't do that. You do raw code. Where you make calls to canvas/ctx/blah, I make calls to pygame. It's basically the same thing in the end, even if we take a slightly different path to get there. Pygame can draw images, filled rects, empty rects, other shapes, a lot like you'd do with javascript. But, it's still python. It takes a good bit of work to get the same sort of performance you can get out of javascript or a compiled language. It is possible, though. I've got a falling sand game for example that can run at higher grid dimensions than powdertoy, even though I don't have nearly as many particles or interactions yet. My conway's implementation can handle 1.4m pixels without breaking a sweat. This is single threaded without any gpu acceleration. Many people believe python is too slow for games. This is...misleading, at best. It can work, but you've got to put some time in learning how to take advantage of what python can do, and what its libraries like numba and numpy can do.

  • @claudineyribeiro518
    @claudineyribeiro518 10 місяців тому

    Hi I've just ported your code to Excel VBA using openGL (fixed pipeline) and without any AI help. It was a big deal for me. Thansk for your tutorials!!!

  • @JaCrispySSB
    @JaCrispySSB 11 місяців тому +1

    been watching your creative coding videos for awhile now and this one has me so excited, you've truly inspired me to keep working on my own passion projects. You showed me how fun coding can really be and I can't thank you enough for that!

    • @Frankslaboratory
      @Frankslaboratory  11 місяців тому +1

      Hi. Very happy to see this comment. Thank you for taking the time to let me know. It's a good hobby to have, we can play and learn at the same time 😆

    • @JaCrispySSB
      @JaCrispySSB 10 місяців тому

      @@Frankslaboratory making the learning process fun and engaging is the best way for people to better themselves. That’s why I appreciate great teachers like you so very much. Keep up the amazing content!!!

  • @1SquidBoy
    @1SquidBoy 6 місяців тому

    I just found your channel, Frank. I don't know why youtube didn't suggest you to me when I first found hyperplexed, I really love what you're doing with creative coding in vanilla js.

  • @sakuraixid
    @sakuraixid 11 місяців тому +2

    thanks frank, i always liked making things from scratch!!

    • @Frankslaboratory
      @Frankslaboratory  11 місяців тому

      Same here, I make everything from scratch on this channel

  • @braveitor
    @braveitor 10 місяців тому

    Fantastic! It's always interesting to see how these effects are done with plain javascript, and though algebra can be hard, but the explanations you gave where quite clear. Thanks!

  • @carltone
    @carltone 11 місяців тому

    Frank, another excellent instructional video. I have been following your videos for over a year. You have the best non webpage JavaScript instructional videos on the net IMO. I often reference your videos to engineer types in embedded engineering discussions where like me , folks want to make UI’s for their projects. This video is so well done. Your explanation during the code creation and results displayed on the canvas rendering. Talk about cause and effect. Well done and thank-you for sharing your knowledge.

  • @dKause
    @dKause 9 місяців тому

    That is amazing - I searched for hours to find this effect

  • @majoralter
    @majoralter 11 місяців тому

    Did you read my mind? I really needed this

    • @Frankslaboratory
      @Frankslaboratory  11 місяців тому

      I had a feeling someone might find it useful :D

  • @nikolakosg4
    @nikolakosg4 10 місяців тому

    Maybe the best on the internet right now!!!!!!! I love your content!!!!
    I am a junior game developer and I can keep up easily great explanations !!!
    I also love when you explaing everything even if its advanced and an advanced person should know it but you dont forget us juniors watching and explain how it works anyway!!!!!!!

  • @jesusbecerra3345
    @jesusbecerra3345 11 місяців тому +1

    Love the tutorial and the image material, someone has been playing Baldurs Gate 3.

    • @Frankslaboratory
      @Frankslaboratory  11 місяців тому

      Hi Jesus. Yup. Playing too much Baldurs Gate 3 😆😆

    • @jesusbecerra3345
      @jesusbecerra3345 11 місяців тому

      Can't blame you, I am only about 30 hours in and still in act 1, it is a huge game. So much to do, do you have a favorite class? 😁@@Frankslaboratory

    • @Frankslaboratory
      @Frankslaboratory  11 місяців тому

      I played through act 1 around 5 times already because it was available in early access since 2020. It can go very differently depending on which choices you make. My favourite build is Karlach barbarian build where you throw enemies around. What is yours.

    • @jesusbecerra3345
      @jesusbecerra3345 10 місяців тому

      @@Frankslaboratory I can't believe all of the updates they keep making to this game even after full release. Actual epilogue content and sounds like they will be releasing more. That Karlach build sounds really fun, I'm doing a beast master hunter with levels into fighter for multiple actions. Karlach is still my MVP even as a regular barbarian build.

  • @shahbazkhan-ek7hp
    @shahbazkhan-ek7hp 11 місяців тому

    Yes me. Your js game helped me understand classes and oop in js by a factor of 1000

    • @Frankslaboratory
      @Frankslaboratory  11 місяців тому

      Very happy to hear that, thank you for taking the time to let me know

  • @javifontalva7752
    @javifontalva7752 11 місяців тому +1

    After doing so many projects from you and radu, this one I could follow very easily. Fantastic job as usual!!

    • @Frankslaboratory
      @Frankslaboratory  11 місяців тому

      Hi Javi, you are getting advanced, especially if you are able to follow Radu's latest series. He keeps surprising us with what he can do with code

    • @javifontalva7752
      @javifontalva7752 10 місяців тому

      @@Frankslaboratory Indeed. I am still getting my head around how network works. I couldn't have done it without doing your tutorial first. I'm already looking forward to your next game because I know it is going to be multilevel.

  • @johntitus3985
    @johntitus3985 11 місяців тому

    Another wonderful tutorial from the Master. I am definitely going to have to take some time this weekend to go through this. As always thank you for sharing.

    • @Frankslaboratory
      @Frankslaboratory  11 місяців тому +1

      Hi John. Nice to see you here. Hope you have fun I enjoyed preparing planning and recording this one

  • @anthonymcguinness1789
    @anthonymcguinness1789 11 місяців тому +1

    Love your work, keep it coming.

  • @Aristockij
    @Aristockij 11 місяців тому +1

    you are the best! thank you for lessons!

  • @dovakin_09
    @dovakin_09 11 місяців тому

    Amazing! You're the BEST!

  • @goffyfoot82
    @goffyfoot82 11 місяців тому

    Thankyou for your time and energy with all your supplied materials. I have some basic web development javascript skills. Creating elements and swapping elements in the html and Node for backend.
    The game dev aspect of javascript is what I need work on and these are a great exersize in that ...... Thanks and Peace ..enjoy!!

  • @ЛеонідПрокопенко-л8м
    @ЛеонідПрокопенко-л8м 11 місяців тому

    it's fantastic job! You are the best as always.

  • @Musfiq77
    @Musfiq77 8 місяців тому

    Amazing, plz make webgl related content, waiting for long time, literally I was hoping.... one day you make webgl things

  • @OFR5086
    @OFR5086 10 місяців тому

    Amazing skill thanks for this.tutorial

    • @Frankslaboratory
      @Frankslaboratory  10 місяців тому +1

      Hi. Glad you found some value. I was having a lot of fun with this one

  • @ssikarim
    @ssikarim 11 місяців тому

    Thanks Frank. it s Amazing !!!!!!!!

  • @alexeypetrov8543
    @alexeypetrov8543 11 місяців тому

    That's really good!

  • @VinsentVH
    @VinsentVH 11 місяців тому

    Awesome tutorial 👍

  • @youssefkamal6469
    @youssefkamal6469 11 місяців тому

    great work ❤️

  • @_why_3881
    @_why_3881 11 місяців тому

    Amazing like always. Do you plan to make a video about Multi-Window animation using Hashmap. Cheers

  • @seba123321
    @seba123321 11 місяців тому

    Very nice. Love it. I thought that some of the effects are much more complex.

    • @Frankslaboratory
      @Frankslaboratory  11 місяців тому

      Sometimes its easier than it looks when you the the base techniques 😊

  • @animedreamz2009
    @animedreamz2009 6 місяців тому

    What about in webgl? You could map the image to a plane geometry that is a particle mesh and the code would be a lot smaller and be more performant

    • @Frankslaboratory
      @Frankslaboratory  5 місяців тому

      More performant for sure, I don't see how it would be smaller. Webgl is so much code to draw even simple shapes, did I miss some new developments in the world of webgl? Will check.

  • @MSGMSUSA
    @MSGMSUSA 10 місяців тому

    How can I learn to build a flow-chart building app using canvas?

  • @Fanaro
    @Fanaro 10 місяців тому

    You can use `dx ** 2` instead of `dx * dx`.

    • @Frankslaboratory
      @Frankslaboratory  10 місяців тому +1

      Hi Fanaro. Great tip thank you. Will use it next time !

  • @douglascounts4634
    @douglascounts4634 11 місяців тому

    Yet another great video. These are always great.
    Where you get these images from? Can you give us a link to the source of them?

  • @suelingsusu1339
    @suelingsusu1339 11 місяців тому

    Wow! Bravo! ❤🌹🙏🙏🙏🙏👌👌👌👌👏👏👏👏👏🖖🖖🖖🖖🖖🖖🖖

  • @claudineyribeiro518
    @claudineyribeiro518 10 місяців тому +1

    awesome. Can i translate it to vba with opengl and post im my channel?

  • @wsricardo23
    @wsricardo23 11 місяців тому

    Please . Where I find this code for study?

  • @my2ndpassionart
    @my2ndpassionart 5 місяців тому +1

    i want this also black & white on hover so what changes i have to do sir , please tell

    • @Frankslaboratory
      @Frankslaboratory  5 місяців тому +2

      Conditionally pass draw image identical but black and white image for some cells, or apply global composite operation to a portion of canvas. Probably there are other ways this is just from the top of my head

    • @my2ndpassionart
      @my2ndpassionart 5 місяців тому +1

      @@Frankslaboratory I am not that smart , can u give me exact code and where i have to put that code ,please sir 😶

  • @linusschulze5261
    @linusschulze5261 11 місяців тому

    2nd comment, incredible effects😍!

  • @charliecampbell1232
    @charliecampbell1232 Місяць тому

    I did it.

  • @burtlewis_SC
    @burtlewis_SC 7 місяців тому

    It;s difficult to follow the code, is there a link to the code?

  • @Nodsaibot
    @Nodsaibot 11 місяців тому

    Thank you uncle F

  • @anfxf6513
    @anfxf6513 11 місяців тому

    1st comment 😍😍

  • @tonywhite4476
    @tonywhite4476 4 місяці тому

    Your videos would be better if you included the code.I know you want people to learn it and maybe sell some courses but I don't know how many times I've followed your videos and get an error or something doesn't work and I have to search the video for that section or start all over.

    • @Frankslaboratory
      @Frankslaboratory  3 місяці тому

      Hi Tony, yes, I certainly don't want people to get frustrated from a random typo. I will start providing source code I think. My extended classes on Udemy always provide source code already.

  • @alwysrite
    @alwysrite 11 місяців тому

    yes less than a year

    • @Frankslaboratory
      @Frankslaboratory  11 місяців тому

      And was it challenging to follow the class?

  • @nayanbiswas370
    @nayanbiswas370 Місяць тому

    less thn a year

  • @herosova
    @herosova 11 місяців тому

    franks is not afriad of ai take over ai is afraid of franks code intelligence

    • @Frankslaboratory
      @Frankslaboratory  11 місяців тому

      Who knows what AI will be able to do in the next 5 years, it's not that good to take my job yet :D

  • @danielsurmat-d7h
    @danielsurmat-d7h 8 місяців тому

    Nice one Mr. Frank , How can reach you through twitter