Ripples: Say you have a picture. You click a point. It sends out one ripple circle which gets bigger and bigger, where it magnifies the image below in the locality of the ring by x3. Maybe put a bit of a blue wash underneath at the points of the ripple circle. Could that be done on a canvas without slowing the framerate? If that was possible, could you click 3 times in succession, so you get 3 ever expanding ripple rings? If that is possible, maybe click at 2 separate points where two ripple rings would expand from different origins and even interact? Would you do all this by cutting the grid into small squares, or would you do it somehow by looking at the pixels around the ripple ring equation at that point in time and doing magnifications of squares at set points around that circle?
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!
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 :)
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 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.
@@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
@@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.
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.
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!!!
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 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!!!
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.
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!!!!!!!
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!
@@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.
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.
@@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.
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.
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!!
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.
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
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.
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.
Ripples: Say you have a picture. You click a point. It sends out one ripple circle which gets bigger and bigger, where it magnifies the image below in the locality of the ring by x3. Maybe put a bit of a blue wash underneath at the points of the ripple circle. Could that be done on a canvas without slowing the framerate? If that was possible, could you click 3 times in succession, so you get 3 ever expanding ripple rings? If that is possible, maybe click at 2 separate points where two ripple rings would expand from different origins and even interact? Would you do all this by cutting the grid into small squares, or would you do it somehow by looking at the pixels around the ripple ring equation at that point in time and doing magnifications of squares at set points around that circle?
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!
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 :)
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.
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
@@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.
@@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
@@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.
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.
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!!!
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!
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 😆
@@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!!!
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.
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!!!!!!!
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!
thanks frank, i always liked making things from scratch!!
Same here, I make everything from scratch on this channel
After doing so many projects from you and radu, this one I could follow very easily. Fantastic job as usual!!
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
@@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.
That is amazing - I searched for hours to find this effect
Glad you found some value Daniel
Love the tutorial and the image material, someone has been playing Baldurs Gate 3.
Hi Jesus. Yup. Playing too much Baldurs Gate 3 😆😆
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
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.
@@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.
Love your work, keep it coming.
I was having a lot of fun with this one
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.
Hi John. Nice to see you here. Hope you have fun I enjoyed preparing planning and recording this one
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!!
you are the best! thank you for lessons!
I'm here to help! :)
Did you read my mind? I really needed this
I had a feeling someone might find it useful :D
Yes me. Your js game helped me understand classes and oop in js by a factor of 1000
Very happy to hear that, thank you for taking the time to let me know
it's fantastic job! You are the best as always.
Thank you very much!
Amazing! You're the BEST!
Very kind to say
Amazing like always. Do you plan to make a video about Multi-Window animation using Hashmap. Cheers
Amazing, plz make webgl related content, waiting for long time, literally I was hoping.... one day you make webgl things
That's really good!
Glad you think so Alexey
Very nice. Love it. I thought that some of the effects are much more complex.
Sometimes its easier than it looks when you the the base techniques 😊
Thanks Frank. it s Amazing !!!!!!!!
Happy to hear
great work ❤️
Thank you Youssef 😊 💓
Amazing skill thanks for this.tutorial
Hi. Glad you found some value. I was having a lot of fun with this one
Awesome tutorial 👍
Thank you
awesome. Can i translate it to vba with opengl and post im my channel?
Sure. Looking forward to see that
2nd comment, incredible effects😍!
Thank you 😍!
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
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.
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?
Glad you like them Doug
i want this also black & white on hover so what changes i have to do sir , please tell
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
@@Frankslaboratory I am not that smart , can u give me exact code and where i have to put that code ,please sir 😶
How can I learn to build a flow-chart building app using canvas?
Wow! Bravo! ❤🌹🙏🙏🙏🙏👌👌👌👌👏👏👏👏👏🖖🖖🖖🖖🖖🖖🖖
Thank you Sue ❤
Please . Where I find this code for study?
It;s difficult to follow the code, is there a link to the code?
You can use `dx ** 2` instead of `dx * dx`.
Hi Fanaro. Great tip thank you. Will use it next time !
1st comment 😍😍
You win! :)
I did it.
Well done !
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.
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.
yes less than a year
And was it challenging to follow the class?
less thn a year
franks is not afriad of ai take over ai is afraid of franks code intelligence
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
Nice one Mr. Frank , How can reach you through twitter