This is the highest level I've seen on a tutorial... like ever. Perfectly planned out, explains all the details and no wasted time. I rarely comment on stuff, but this tutorial deserves some serious love. Thank you!!!
Thank you for breaking this down in plain english! I am not math-minded and have hesitated to learn expressions because it's not the easiest thing for me to pick up immediately, but the clear explanations paired with accompanying visuals made this soooo much easier to understand. I also appreciate your delivery -- digestible for a beginner without skipping over the basics or sounding condescending
This comment has made my morning. There were definitely earlier scripts and recordings that were a bit too "math-splaining". I feel like taking the time on this was just validated :)
Best of the best. It's explicit and easy to understand to math dumbass like me. You can't find a better tut to explain Math.sin online. Truly appreciate and salute your effort.
Math.sin() - The entire swinging motion occurs from this expression. Math.sin() creates a sine wave, an occilating value positive and negative from the original starting value it is given. There are two values that you can give this expression to effect it’s output. The first being it’s source value, Math.sin(SOURCE VALUE). This is traditionally assigned to time, since time’s value increases exponentially with each frame of your After Effects timeline. The second value isn’t really mentioned anywhere, it literally is an optional modifier where we basically multiply the resulting output value of Math.sin() by another value. This increases it’s overall resulting value. You do this by using the “*” multiplication operator. So Math.sin(time)*20 will produce a value 20 times greater. In addition to modifying the final result, you can also modify the speed of time in the same way. So Math.sin(time*2)*20 will make time move 2 times as fast with the same 20 times greater value.
I would love a video on how you plan out these videos, not just the techniques, but the creative process. I recently discovered your channel, and I really enjoy it! (and your voice is very comfortable)
Thank you very much. I'm trying out some new audio gear here so I'm glad my voice is comforting, rather than powerfully grating. It might be my Canadian affect. We could get into some process stuff. I do often get into that on live streams, which is also a thing that happens on this channel.
Entertaining and informative, and nice and concise. Thanks for another great tutorial. I read Marcus Geduld's book recently as well. Dan Ebberts. Genius. Keep making these!
Evan, is it safe to assume the intro section from 2:29 onward (the black and blue wave shapes) was created using Wave Warp or is there some way to apply Math.sin to shape paths?
You're ability to animate your storytelling has become ridiculously good and your animated logo is awesome!!! Are you just writing command codes nonstop nowadays?
Besides subtracting in-point time from current time, you can determine the phase (in radians) of the wave according to y=a*sin(2*Pi*f*time+phase) but it gets a little sciency. Your solution is easier.
From 2:30-4:15 you have the sine wave happening on the dot while also having the shape behind it. How do you create the shape with the sine wave properties?
Hello, thank you for this wonderful tutorial. The little plus would be to put a link in the decription when you speak about a previous tutorial, like the time expression ^^ Thank you so much !
A very didactic tutorial, thank you very much. I had already guessed how to move objects along a sinusoid, but what I would like to do is draw a sinusoid. Or any other mathematical curve. Is it possible ?
Perhaps. I don't use that one as much in my work. I think we may get into some of the random functions like random() and noise(). But we will certainly come back to the Math family soon enough :)
Beatutifully animated Tutorial! I would love to know how you animated the actual continuous sine waves tho ... i cant seem to find a method to, for example, make a path behave like a sinewave in order to make a circle follow it like you did in the intro... Cheers
So, in this case I'm actually using the wave warp effect to make that line. Wave warp can deform layers into sine waves. There is a but more to it, like lining up the values so the circle seems to flow on the wave, but that's the start. Does that help at all?
Amazing tutorial! But I do have a question, do you know how I could go about keyframing the frequency so I could easily slow down and speed up the sine? When I do it normally it doesn't work quite right because say if I'm going from Freq=1 to Freq=2, when the value is at 1.5 the sines value jumps to what it would be if the frequency was set to 1.5 from the beginning of the comp rather than smoothly speeding up. Hopefully I explained that well.. Thank you! :)
HI. Can you tell me how to write an expression for something to increase steadily and after certain seconds or frames I want that increase rate to move a bit more faster..?
@ECAbrames thanks for greate tutorial.is it possible to connect variable parameters of expression to slider?i want to animate variable parameters in expression.
Hi, thanks for this tutorial. Im attempting to write the code to reproduce the 'snake' animation shown at the beginning and end of the video. Im trying to create 'followers', using your 'valueAtTime' method, but I can't work out how to split out the x and y values? This probably des not make sense?
When we want to reference only one part of a two part property we need to get specific with which "part" of the property we want. For example transform.position would return you something like [x,y] but transform.position[0] would just return you the single, non array, x value. So if you wanted to source them separately you would just want to call for either part [0] or part [1]. Does that help?
I love this. Of course dampening could be added with Math.exp(), using a time argument and mostly likely very small negative constant of decay, say 50*Math.sin(t)*Math.exp(t*-.001) or something...... Though, I could have sworn I saw something in the examples that at least resembled that in the video. You might have just convinced me to start using javascript in AfterEffects rather than python for my own tutorial videos. I am way more familiar with python but exporting the videos for VPython and manim is a painful experience. Professional tools for professional results, i guess! :-)
ECAbrams I just noticed that the way I put it did imply that I use python in AE. I use the manim (a la 3blue1brown) library via Anaconda for my upcoming algebra series. I went to a conference a few years back where I got to meet the makers of vpython for physics animations, which I very much enjoyed using my last year of college. I'm learning to use Adobe CC stuff for the finishing touches and my original point was that you have put out such a nice explanation here that I'm questioning my entire workflow. I have stopped work altogether temporarily to assess the situation. I want to give any future subscribers the best quality I can deliver and this made my options blown wide open. Maybe it was luck, but I am still very grateful.
Thanks so much for this tutorial! I was wondering, is there any way to add an ease on to a sin or cos cycle? I have tried searching for this answer, and have only come across a few (very confusing!) threads concerning this topic.
I'm not sure what you mean by easing on to a sin. We can keyframe the amplitude, would that be the change you want to ease on? Or do you want to ease the frequency?
@@ECAbrams Thanks for such a quick response! I just mean when we are using Math.sin to say, make scale of the circle pulse (8:55 in your video), is there a way that we can manipulate the how the sine curve begins/ends so that we can ease into and out of the scale changes. Essentially what I am after is harnessing the power and regularity of the sin/cos wave, but then having the legs of the curve have a more gradual slope. The answers to this question that I have seen have been something along the lines of taking the output of something like Math.cos(time * 2 Pi * frequency), finding its square root, and multiplying by the amplitude. I think there is a lot of confusion about the topic, and little clarity to be found.
So instead of a sine wave you want a difference shape to the oscillations? The most common method I know of is adding a wave to a wave, multiplying a wave by a wave, or dividing a wave by a wave. What you need are different math functions to combine to create different qualities of the standing wave. I hope that helps guide you in the right direction.
How do you match this expression to the wave warp effect? I seem to have the slightest variation to where my shapes movement on this wave created from Math.sin() doesn't stay in sync with the wave warp effect on a path. I am not sure if there is a way to use Math.sin() directly on a path so I thought I could accomplish the same effect with wave warp to a straight line and just match my shape amp to the path's wave warp- wave height to get them to sync on screen. The goal for me is to mimic what your intro did with the circular shape to move with the line path as if the circle is drawing it.
This is the highest level I've seen on a tutorial... like ever.
Perfectly planned out, explains all the details and no wasted time.
I rarely comment on stuff, but this tutorial deserves some serious love.
Thank you!!!
thank you for the kind words. I'm glad it ticks all the boxes for you.
Thank you for breaking this down in plain english! I am not math-minded and have hesitated to learn expressions because it's not the easiest thing for me to pick up immediately, but the clear explanations paired with accompanying visuals made this soooo much easier to understand. I also appreciate your delivery -- digestible for a beginner without skipping over the basics or sounding condescending
This comment has made my morning. There were definitely earlier scripts and recordings that were a bit too "math-splaining". I feel like taking the time on this was just validated :)
Absolutely stunning tutorial. Jaw dropped watching that opening example animation. Wonderful visual
Well, thank you very much. Dropping jaws and knowledge up on this channel :)
ECAbrams Every damn time. Learnt so much from you over the years. Thank you.
I'm fascinated by the animations used to describe the concepts in this video. Just blown away at the quality of this content.
I really love the effort you put on to demonstrate how it basically works in the beginning! Thank you for the tutorial.
You're very welcome. Glad you enjoy it. I'm going to try to stick with this kind of format for basic expression tutorials moving forward.
Wow, you successfully explained a subject that even after months of studying it in high school nobody understood.
i have never seen graph editor looks so beautiful like a heartbeat. what an amazing expression
the amount of work that was done before opening after effect to explain it is amazing i love it thanks !!
Thank you so much for concise and clear explanation explains! Absolutely stunning tutorial!
Glad it was helpful!
there's no way I would've cared or bothered with learning about this function had I not discovered this beautifully crafted tutorial. THANK YOU
The level of execution for a tutorial is mind-blowing. Thank you.
Glad you liked it!
you just saved me hours of painstaking matching of key frames in different stroke modifiers. thank you.
Have watched quite a lot of tutorials for expressions and I have to say that this one is really ON POINT .
daaaamn, you really went all in with the sine explanation. Super Impressive!
When I'm in I'm all in. I'm truly disruptive at a poker table, and out very quickly.
The patient, concise and CLEAR explanation of the set up of variables has been profoundly useful - THANK YOU!!
Excelente!! Como aporte comento que en las nuevas versiones hay que definir x, y, a y f con var o const o de lo contrario dará error.
Saludos!
Best of the best. It's explicit and easy to understand to math dumbass like me. You can't find a better tut to explain Math.sin online. Truly appreciate and salute your effort.
you're the reason why im into after effects
I'm glad to hear it. Hopfully your adveutres with Ae are always fun and worthwilse.
This is just so calming to watch . bless you for being so generous with your knowledge and c reativity
Copy. Paste. Pray.
Love it. Excellent (and beautiful) explanation as always good sir
Math.sin() - The entire swinging motion occurs from this expression. Math.sin() creates a sine wave, an
occilating value positive and negative from the original starting value it is given. There are two values
that you can give this expression to effect it’s output. The first being it’s source value,
Math.sin(SOURCE VALUE). This is traditionally assigned to time, since time’s value increases
exponentially with each frame of your After Effects timeline. The second value isn’t really mentioned
anywhere, it literally is an optional modifier where we basically multiply the resulting output value of
Math.sin() by another value. This increases it’s overall resulting value. You do this by using the “*”
multiplication operator. So Math.sin(time)*20 will produce a value 20 times greater. In addition to
modifying the final result, you can also modify the speed of time in the same way. So
Math.sin(time*2)*20 will make time move 2 times as fast with the same 20 times greater value.
A carafe of wine, After Effects, and this beautiful explanation of Math.sin. I sat here all evening tinkering along with this tutorial.
THANK YOU.
Best tutorials on youtube. Thank you, Evan.
Something a friend used this function for - A Newton 2 Physics simulation that kept the rotation of items "mostly upright" as they bounced around.
Damn! You have such a pleasant voice for these kind of tutorials. Now I can listen to them all day!!!
I just had to say that i really enjoy to saw ur toturial ! one of the best out there! thanks for shering ur wisdom with us!
I feel very smart after I watched this tutorial. call me Mr. professor now!
Mission accomplished!
I would love a video on how you plan out these videos, not just the techniques, but the creative process. I recently discovered your channel, and I really enjoy it! (and your voice is very comfortable)
Thank you very much. I'm trying out some new audio gear here so I'm glad my voice is comforting, rather than powerfully grating. It might be my Canadian affect. We could get into some process stuff. I do often get into that on live streams, which is also a thing that happens on this channel.
This is amazing. I'm definitely going to rewatch this video just for the beauty of it. Thank you for creating this tutorial
Entertaining and informative, and nice and concise. Thanks for another great tutorial. I read Marcus Geduld's book recently as well. Dan Ebberts. Genius. Keep making these!
I'll try my best. :) glad you enjoy it. I try to keep these under 15 minutes. I don't always succeed but that's the goal.
What an epic 13 mins!! , Great as always.
Loved the motion graphics explanation of the function!
Things are getting real meta over here. Using motion graphics to explain motion graphics concepts. Wheels within wheels.
Evan, is it safe to assume the intro section from 2:29 onward (the black and blue wave shapes) was created using Wave Warp or is there some way to apply Math.sin to shape paths?
DAMN, AE IS MUCH MORE COMPLICATED THAN I THINK.
THANKS TO YOU, THIS VIDEO EASE MY MIND :)
So happy for found this channel! Thanks for the amazing tutorials
Well, thank you for saying so. Glad you like what I do here.
Bruh this is freaking hard!
Thank you so much for such an indepth tutorial!!
I'll make sure to use these expressions in my future projects!
You're ability to animate your storytelling has become ridiculously good and your animated logo is awesome!!! Are you just writing command codes nonstop nowadays?
Another excellent tutorial, easy to follow and clearly explained. Even inspired some work I did on a recent project. Thanks!
That's fantastic! This is actually one of my favourite pieces to have made... but don't tell the other tutorials.
Besides subtracting in-point time from current time, you can determine the phase (in radians) of the wave according to y=a*sin(2*Pi*f*time+phase) but it gets a little sciency. Your solution is easier.
Best tutorial start I've seen. Lovely animation. Outdone yourself on this one!
Mazing explanation of each concept with fabulous visuals. Thank you
I'm glad you like it. This is one I'm particularly proud of. Would love to have the time to make more like this soon!
@@ECAbrams Looking forward to more. Just click the bell icon ;)
This was even better than your usual good stuff!
This is why I love your tutorial!
Absolutely awesome intro and tutorial!
Thanks.
i really , really like the new style keep it up Charles
simple explanation ... easy to understand ... thanks you
I love your editing style. Lots of love❤
I am wordless. Thanks for this great tutorial .......
Awesome channel, happy to find it
Not a second wasted … had to play it at .75 speed 😅 VERY nutritious, THANK YOU!
At 1:12, did you also use expressions to create that oscillation? Would you be able to quickly explain your method for that section of the video?
Do you mean the eaves in the circle? That's just the wave warp effect on a line. Not much to it.
the best ae tutorial ever please do more on expressions
AMAZING EXPLAINATION & ANIMATION!
Great stuff, thanks for explaining! The buttery voice certainly helps :D
You are a genius Evan!
Shout out to you!
From 2:30-4:15 you have the sine wave happening on the dot while also having the shape behind it. How do you create the shape with the sine wave properties?
Are you asking about the black wave? That would be from the wave warp effect, that also creates a sine wave in a different way.
Hello, thank you for this wonderful tutorial. The little plus would be to put a link in the decription when you speak about a previous tutorial, like the time expression ^^
Thank you so much !
You have done a great job! You don't know what it means to me.
Amazing tutorial. Thanks a lot. You are the best.
Thank u very much, Sir you teach us very well, brilliant work, biggest like fully played, stay blessed sir
How do you do multiple object like in the beginning in the video?
Eca is a legend!
GREAT TUTORIAL BY THE WAY!
Recalling the function y = A sin(kx + c) + d from math class!
Amazing thanks so much. Such a brilliant tutorial
Thank you so much.
Yo are amazing!!!!! Thank you for the excelent tutorial. Keep it coming!! Love AE expressions, such a great topic
A very didactic tutorial, thank you very much.
I had already guessed how to move objects along a sinusoid, but what I would like to do is draw a sinusoid. Or any other mathematical curve.
Is it possible ?
I have the same question! I want to make waves like the wave from 2:55 to 4:17
waaaw, this is really inspirational
I wish you continue feeding us such valuable knowledge
i'll try my level best
This was seriously helpful. Could never quite figure out how to work in that Math.sin expression. Math.exp next? Loveya
Perhaps. I don't use that one as much in my work. I think we may get into some of the random functions like random() and noise(). But we will certainly come back to the Math family soon enough :)
Thank you so much for this tutorial!
Cool tutorial! Great job!
Thanks for the tutorials EVAN :)
Balls to the walls on the animation for this one 👏👏👏
What a great artist.
I like the new intro, very cool!
Math is cool in After Effects! Thank you!
Math is cool everywhere!
Beatutifully animated Tutorial! I would love to know how you animated the actual continuous sine waves tho ... i cant seem to find a method to, for example, make a path behave like a sinewave in order to make a circle follow it like you did in the intro...
Cheers
So, in this case I'm actually using the wave warp effect to make that line. Wave warp can deform layers into sine waves. There is a but more to it, like lining up the values so the circle seems to flow on the wave, but that's the start. Does that help at all?
Amazing tutorial! But I do have a question, do you know how I could go about keyframing the frequency so I could easily slow down and speed up the sine? When I do it normally it doesn't work quite right because say if I'm going from Freq=1 to Freq=2, when the value is at 1.5 the sines value jumps to what it would be if the frequency was set to 1.5 from the beginning of the comp rather than smoothly speeding up. Hopefully I explained that well.. Thank you! :)
Thank you... best style of explain.....
absolutely great value, thanks so much
But was it great valueAtTime? A little expression humour for the comments section.
It´s the most beautiful tutorial
Thank you so much. I do enjoy being extra with these expressions pieces.
x=value[0];
a=240;
f=5;
y=Math.sin(time*2*Math.PI*f)*a;
[x,y]
HI. Can you tell me how to write an expression for something to increase steadily and after certain seconds or frames I want that increase rate to move a bit more faster..?
@ECAbrames thanks for greate tutorial.is it possible to connect variable parameters of expression to slider?i want to animate variable parameters in expression.
great tutorial, thanks!
MY GOD THIS ANIMATION OOOOOOOOOOOOOH !
hello, since I put the position of the shape at 0, 0, when I put the values of 0.0, the shape goes to the upper left corner
Hi, thanks for this tutorial. Im attempting to write the code to reproduce the 'snake' animation shown at the beginning and end of the video. Im trying to create 'followers', using your 'valueAtTime' method, but I can't work out how to split out the x and y values? This probably des not make sense?
When we want to reference only one part of a two part property we need to get specific with which "part" of the property we want. For example transform.position would return you something like [x,y] but transform.position[0] would just return you the single, non array, x value. So if you wanted to source them separately you would just want to call for either part [0] or part [1]. Does that help?
If there was a second like button I'll definitely smash it
Amazing Explanation
Glad you liked it
I love this. Of course dampening could be added with Math.exp(), using a time argument and mostly likely very small negative constant of decay, say 50*Math.sin(t)*Math.exp(t*-.001) or something...... Though, I could have sworn I saw something in the examples that at least resembled that in the video. You might have just convinced me to start using javascript in AfterEffects rather than python for my own tutorial videos. I am way more familiar with python but exporting the videos for VPython and manim is a painful experience. Professional tools for professional results, i guess! :-)
How do you apply python inside Ae? Can the expression accept python based expressions?
ECAbrams I just noticed that the way I put it did imply that I use python in AE. I use the manim (a la 3blue1brown) library via Anaconda for my upcoming algebra series. I went to a conference a few years back where I got to meet the makers of vpython for physics animations, which I very much enjoyed using my last year of college. I'm learning to use Adobe CC stuff for the finishing touches and my original point was that you have put out such a nice explanation here that I'm questioning my entire workflow. I have stopped work altogether temporarily to assess the situation. I want to give any future subscribers the best quality I can deliver and this made my options blown wide open. Maybe it was luck, but I am still very grateful.
Great work, Thanks!
Absolutely amazing
Thanks for the tutorial!
Nice guide cheers!
Thanks so much for this tutorial! I was wondering, is there any way to add an ease on to a sin or cos cycle? I have tried searching for this answer, and have only come across a few (very confusing!) threads concerning this topic.
I'm not sure what you mean by easing on to a sin. We can keyframe the amplitude, would that be the change you want to ease on? Or do you want to ease the frequency?
@@ECAbrams Thanks for such a quick response! I just mean when we are using Math.sin to say, make scale of the circle pulse (8:55 in your video), is there a way that we can manipulate the how the sine curve begins/ends so that we can ease into and out of the scale changes. Essentially what I am after is harnessing the power and regularity of the sin/cos wave, but then having the legs of the curve have a more gradual slope. The answers to this question that I have seen have been something along the lines of taking the output of something like Math.cos(time * 2 Pi * frequency), finding its square root, and multiplying by the amplitude. I think there is a lot of confusion about the topic, and little clarity to be found.
So instead of a sine wave you want a difference shape to the oscillations? The most common method I know of is adding a wave to a wave, multiplying a wave by a wave, or dividing a wave by a wave. What you need are different math functions to combine to create different qualities of the standing wave. I hope that helps guide you in the right direction.
@@ECAbrams That is really helpful, thanks so much!
Please, explain how to move the shape like in intro, not only in y but also in x, moving forward! Thanks
Which part of the intro are you asking about?
this is soooooo usefull! thank u so much!
Always amazing. Always.
How do you match this expression to the wave warp effect? I seem to have the slightest variation to where my shapes movement on this wave created from Math.sin() doesn't stay in sync with the wave warp effect on a path. I am not sure if there is a way to use Math.sin() directly on a path so I thought I could accomplish the same effect with wave warp to a straight line and just match my shape amp to the path's wave warp- wave height to get them to sync on screen.
The goal for me is to mimic what your intro did with the circular shape to move with the line path as if the circle is drawing it.
lol I am lame... I didn't use snap path to grid. Because my line wan't the same length as my comp it didn't equal the same wave length.
That might do it :) But we all make those kinds of errors. It took me a while the first few times.