JavaScript Animation Basics

[@Radu]

Did you ever animate using JavaScript?

[@davidmurphy563]

js is not my favourite language. I only use it for frontend stuff when I have to. For hobbies what I like doing is messing about with the gpu shader in glsl, either with shadertoy or the godot game engine. That's loads of fun, if you haven't tried it I recommend it.

[@carltone]

@@davidmurphy563 thanks for sharing the shader names. I looked them up, yet another coding path to investigate with this winter :)

[@carltone]

Radu, I have not used animation in any of my JS projects. But clear, simple explanation on how to animate, I might try some. Thank you for putting this video together and sharing your knowledge.

[@davidmurphy563]

@@carltone Welcome! Coding a fragment shader is a completely difference experience, you're writing script that effectively runs on reach pixel on your screen simultaneously. Check out Art of Code channel, he's got some top beginner tutorials to get you started. Good luck!

[@PenguinCrayon269]

i followed your js neural network car course!

[@___d3p1]

I love when you relate maths with the behaviour of your code! Great content as always!

[@Radu]

Glad you enjoy it!

[@chisomodimmegwa3479]

The way you explained the animation behaviour with mathematical graph unlocked something in my BRAIN bruh. Great content

[@Radu]

Happy to hear you got something out of this :-)

[@wgalloPT]

QUESTION: which of your tutorial illustrates this better? you have a short video. It is a fly crossing the frame, going up and down. The viewer marks a red dot on top of the fly, that will follow the fly on each frame. From that dot, a trail follows. It could be just a line as trail, or a trail with small circles. The idea is to visualize the movement of the fly thru the video. I went looking for it, but you have so many....thank you so much !!!! They are all awesome!!! Thank you so much !!!!

[@wgalloPT]

OMG...NEVERMIND...i FOUND IT....you are amazing at those videos !!!! thank you

[@Radu]

I'm not sure I know what you're talking about :-)

[@Radu]

Really? Which one? :-D

[@TJ-hs1qm]

12:10 for abs(p) < 1 sin(p*x) isn't compressed but elongated. It's like the value for sin(p*t) is coming from the past (future if p is neg) and projecting it now, at t the present time. It's sort of lagging behind. for abs(p) > 1 sin(p*t) is coming from the future (past if p is neg), so it is sped up meaning smaller wavelength and higher frequency (meaning compressed).

[@Radu]

True. Thanks for explaining it in such a nice way! :-)

[@tejendrasinghrajawat]

new in your channel and start loving your videos , please create more amazing content for us ❤❤

[@Radu]

Welcome! I will try my best :-)

[@danigolmestre]

Very good Radu!

[@Radu]

Thanks!

[@moonbafeel1877]

I love what I'm watching Thanks professor

[@Radu]

Happy to hear :-)

[@Eternam]

Thank you Radu, very nice explananation of animation fundamentals. Love your videos

[@Radu]

Thank you :-)

[@sharmarahul384]

Please make explaining video of making simplest computer things from logic gates through simulation programs. I found it cool and want to learn more things like add, subtract, multiply, etc using logic gates!

[@Radu]

Unfortunately, this is not something I plan to do anytime soon... It is interesting, but I don't want to go so low-level, sorry :-(

[@Likemea]

Thank you for your videos. I am JavaScript coder. You give us Its very useful information !!! 💕

[@Radu]

Glad to hear that

[@alsose5453]

doing well and thanks again!

[@Radu]

No problem :-)

[@despot979]

Just for the info that I sing intro with you every time :D

[@Radu]

You do a better job than me, I'm sure :-D

[@wgalloPT]

Its me again...sorry to bug you...what I thought it was the solution for what I was looking for, it wasn't. Here is what I would like to do: * there is a video and a fly passes by, moving up and down. * Me, the viewer, on the first frame of the video, click with a red marker on top of the fly. * Then i hit play, and it will draw a trail following the movement the fly did on the video (basically tracking the movement of the fly through the entire video). * The line stays and doesnt disappear so I can see the movement the fly did on the video. Do you have a tutorial with that? Im so sorry about the confusion trying to explain it to you. Anyway, just wondering and congratulating you for the best teaching ever !!!

[@Radu]

Do you have a sample video to work with? Flies are something... hard to see, so, depending on the footage, you may need to use one method or another :-)

[@wgalloPT]

Oh...my point is "any" point of movement in the video, when selected, will draw a path..thank you so muh for replying and thinking of it..

[@Radu]

@@wgalloPT I'll think about it and make something one day :-) but will take a while...

[@wgalloPT]

@@Radu understood, no problem

[@mamavscience2977]

When "playing with math" (I love it that you portray math as a pleasurable activity!), are you trying to approximate how objects move in Nature, or just exploring how math impacts the visuals?

[@Radu]

I do both :-)

[@Datta3]

Canvas and video animation please do at one video

[@Radu]

I use Canvas and Video quite often, what do you mean by animation? :-)

[@Datta3]

@@Radu animation on video

[@Datta3]

@@Radu video edit in canvas,like background music, background colour,etc

[@Radu]

@@Datta3 Background color... like some kind of green-screen effect?

[@Datta3]

@@Radu yes,i just say how we work with video in canvas. And makes it better,