No video

Learn Creative Coding: Image Effects

  Рет қаралды 13,721

Franks laboratory

Franks laboratory

Күн бұрын

Пікірлер: 85
@wizardfix
@wizardfix 6 ай бұрын
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 6 ай бұрын
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 8 ай бұрын
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 8 ай бұрын
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 8 ай бұрын
@@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 8 ай бұрын
@@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 8 ай бұрын
@@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.
@1SquidBoy
@1SquidBoy 4 ай бұрын
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 8 ай бұрын
thanks frank, i always liked making things from scratch!!
@Frankslaboratory
@Frankslaboratory 8 ай бұрын
Same here, I make everything from scratch on this channel
@JaCrispySSB
@JaCrispySSB 8 ай бұрын
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 8 ай бұрын
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 8 ай бұрын
@@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!!!
@carltone
@carltone 8 ай бұрын
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.
@claudineyribeiro518
@claudineyribeiro518 8 ай бұрын
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!!!
@nikolakosg4
@nikolakosg4 7 ай бұрын
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!!!!!!!
@javifontalva7752
@javifontalva7752 8 ай бұрын
After doing so many projects from you and radu, this one I could follow very easily. Fantastic job as usual!!
@Frankslaboratory
@Frankslaboratory 8 ай бұрын
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 8 ай бұрын
@@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.
@dKause
@dKause 7 ай бұрын
That is amazing - I searched for hours to find this effect
@Frankslaboratory
@Frankslaboratory 7 ай бұрын
Glad you found some value Daniel
@anthonymcguinness1789
@anthonymcguinness1789 8 ай бұрын
Love your work, keep it coming.
@Frankslaboratory
@Frankslaboratory 8 ай бұрын
I was having a lot of fun with this one
@braveitor
@braveitor 8 ай бұрын
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!
@Musfiq77
@Musfiq77 6 ай бұрын
Amazing, plz make webgl related content, waiting for long time, literally I was hoping.... one day you make webgl things
@Aristockij
@Aristockij 8 ай бұрын
you are the best! thank you for lessons!
@Frankslaboratory
@Frankslaboratory 8 ай бұрын
I'm here to help! :)
@jesusbecerra3345
@jesusbecerra3345 8 ай бұрын
Love the tutorial and the image material, someone has been playing Baldurs Gate 3.
@Frankslaboratory
@Frankslaboratory 8 ай бұрын
Hi Jesus. Yup. Playing too much Baldurs Gate 3 😆😆
@jesusbecerra3345
@jesusbecerra3345 8 ай бұрын
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 8 ай бұрын
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 8 ай бұрын
@@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.
@johntitus3985
@johntitus3985 8 ай бұрын
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 8 ай бұрын
Hi John. Nice to see you here. Hope you have fun I enjoyed preparing planning and recording this one
@majoralter
@majoralter 8 ай бұрын
Did you read my mind? I really needed this
@Frankslaboratory
@Frankslaboratory 8 ай бұрын
I had a feeling someone might find it useful :D
@dovakin_09
@dovakin_09 8 ай бұрын
Amazing! You're the BEST!
@Frankslaboratory
@Frankslaboratory 8 ай бұрын
Very kind to say
@shahbazkhan-ek7hp
@shahbazkhan-ek7hp 8 ай бұрын
Yes me. Your js game helped me understand classes and oop in js by a factor of 1000
@Frankslaboratory
@Frankslaboratory 8 ай бұрын
Very happy to hear that, thank you for taking the time to let me know
@user-rs1kp4uu4v
@user-rs1kp4uu4v 8 ай бұрын
it's fantastic job! You are the best as always.
@Frankslaboratory
@Frankslaboratory 8 ай бұрын
Thank you very much!
@goffyfoot82
@goffyfoot82 8 ай бұрын
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!!
@OFR5086
@OFR5086 8 ай бұрын
Amazing skill thanks for this.tutorial
@Frankslaboratory
@Frankslaboratory 8 ай бұрын
Hi. Glad you found some value. I was having a lot of fun with this one
@ssikarim
@ssikarim 8 ай бұрын
Thanks Frank. it s Amazing !!!!!!!!
@Frankslaboratory
@Frankslaboratory 8 ай бұрын
Happy to hear
@seba123321
@seba123321 8 ай бұрын
Very nice. Love it. I thought that some of the effects are much more complex.
@Frankslaboratory
@Frankslaboratory 8 ай бұрын
Sometimes its easier than it looks when you the the base techniques 😊
@alexeypetrov8543
@alexeypetrov8543 8 ай бұрын
That's really good!
@Frankslaboratory
@Frankslaboratory 8 ай бұрын
Glad you think so Alexey
@linusschulze5261
@linusschulze5261 8 ай бұрын
2nd comment, incredible effects😍!
@Frankslaboratory
@Frankslaboratory 8 ай бұрын
Thank you 😍!
@VinsentVH
@VinsentVH 8 ай бұрын
Awesome tutorial 👍
@Frankslaboratory
@Frankslaboratory 8 ай бұрын
Thank you
@youssefkamal6469
@youssefkamal6469 8 ай бұрын
great work ❤️
@Frankslaboratory
@Frankslaboratory 8 ай бұрын
Thank you Youssef 😊 💓
@suelingsusu1339
@suelingsusu1339 8 ай бұрын
Wow! Bravo! ❤🌹🙏🙏🙏🙏👌👌👌👌👏👏👏👏👏🖖🖖🖖🖖🖖🖖🖖
@Frankslaboratory
@Frankslaboratory 8 ай бұрын
Thank you Sue ❤
@Fanaro
@Fanaro 8 ай бұрын
You can use `dx ** 2` instead of `dx * dx`.
@Frankslaboratory
@Frankslaboratory 8 ай бұрын
Hi Fanaro. Great tip thank you. Will use it next time !
@_why_3881
@_why_3881 8 ай бұрын
Amazing like always. Do you plan to make a video about Multi-Window animation using Hashmap. Cheers
@animedreamz2009
@animedreamz2009 4 ай бұрын
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 3 ай бұрын
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.
@Nodsaibot
@Nodsaibot 8 ай бұрын
Thank you uncle F
@Frankslaboratory
@Frankslaboratory 8 ай бұрын
Uncle F is here to help :D
@douglascounts4634
@douglascounts4634 8 ай бұрын
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?
@Frankslaboratory
@Frankslaboratory 8 ай бұрын
Glad you like them Doug
@anfxf6513
@anfxf6513 8 ай бұрын
1st comment 😍😍
@Frankslaboratory
@Frankslaboratory 8 ай бұрын
You win! :)
@claudineyribeiro518
@claudineyribeiro518 8 ай бұрын
awesome. Can i translate it to vba with opengl and post im my channel?
@Frankslaboratory
@Frankslaboratory 8 ай бұрын
Sure. Looking forward to see that
@MSGMSUSA
@MSGMSUSA 8 ай бұрын
How can I learn to build a flow-chart building app using canvas?
@my2ndpassionart
@my2ndpassionart 3 ай бұрын
i want this also black & white on hover so what changes i have to do sir , please tell
@Frankslaboratory
@Frankslaboratory 3 ай бұрын
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 3 ай бұрын
@@Frankslaboratory I am not that smart , can u give me exact code and where i have to put that code ,please sir 😶
@wsricardo23
@wsricardo23 8 ай бұрын
Please . Where I find this code for study?
@burtlewis_SC
@burtlewis_SC 5 ай бұрын
It;s difficult to follow the code, is there a link to the code?
@alwysrite
@alwysrite 8 ай бұрын
yes less than a year
@Frankslaboratory
@Frankslaboratory 8 ай бұрын
And was it challenging to follow the class?
@tonywhite4476
@tonywhite4476 Ай бұрын
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 Ай бұрын
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.
@herosova
@herosova 8 ай бұрын
franks is not afriad of ai take over ai is afraid of franks code intelligence
@Frankslaboratory
@Frankslaboratory 8 ай бұрын
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
@user-ie5oj3jl1h
@user-ie5oj3jl1h 6 ай бұрын
Nice one Mr. Frank , How can reach you through twitter
Learn Creative Coding: Paint Brushes & Complex Shapes
33:58
Franks laboratory
Рет қаралды 47 М.
Learn Creative Coding: Flow Fields 🎨
1:01:20
Franks laboratory
Рет қаралды 34 М.
Prank vs Prank #shorts
00:28
Mr DegrEE
Рет қаралды 6 МЛН
Кадр сыртындағы қызықтар | Келінжан
00:16
WHO CAN RUN FASTER?
00:23
Zhong
Рет қаралды 42 МЛН
Challenge matching picture with Alfredo Larin family! 😁
00:21
BigSchool
Рет қаралды 40 МЛН
Recreating The Hover Effect That Shocked Frontend Devs
11:29
Conner Ardman
Рет қаралды 6 М.
State Management in 2D GAMES
39:34
Franks laboratory
Рет қаралды 6 М.
ASCII Art with Vanilla JavaScript
41:25
Franks laboratory
Рет қаралды 52 М.
Your Images DESERVE These Effects
4:46
Juxtopposed
Рет қаралды 39 М.
How I make science animations
43:39
Artem Kirsanov
Рет қаралды 715 М.
Pixel Art RPG Maker with JavaScript
1:35:59
Franks laboratory
Рет қаралды 19 М.
An introduction to Shader Art Coding
22:40
kishimisu
Рет қаралды 959 М.
Vanilla JavaScript Text Animation Tutorial [Particles & Physics effect]
59:28
Learn Creative Coding: Fractals
54:57
Franks laboratory
Рет қаралды 53 М.
Point & Shoot Games (JavaScript tutorial)
1:48:00
Franks laboratory
Рет қаралды 13 М.
Prank vs Prank #shorts
00:28
Mr DegrEE
Рет қаралды 6 МЛН