Highlighted

Oscillate Y value between two designated points

Community Beginner ,
Jul 26, 2020

Copy link to clipboard

Copied

I would like to be able to write an expression that will translate my Y position value between two numbers evenly. Wiggle won't work because wiggle is random. Instead, I want to write an expression that allows my Y value to oscillate back and forth between two points at the same speed/frequency.

 

For example:

If my y postion value is set to 540, I would like it to move between 540 and 550 at the same speed. Like a bouncey ball that never looses it's bounce.

Adobe Community Professional
Correct answer by Rick Gerard | Adobe Community Professional

There are lots of ways to do what you want to do. If you use Wiggle you'll get random values. For Example:

 

 

wgl = wiggle(4, 50);
[value[0], wgl [1]]

 

 

Will give you this (Graph Editor Value Graph to show you the random Y value)

Screenshot_2020-07-26 12.32.16_dF0H83.png

Your ball would bounce continuously but the height would vary.

 

You could use the Math.sin(time * (Math.PI * 10)) function to create a smooth change from 0 to 1 and then 0 to -1 5 times a second. Multiply that value by the number of pixels you want to have the layer move and you end up with this:

 

 

y = Math.sin(time * (Math.PI * 10));
[value[0], value[1] + y * 100]

 

 

Screenshot_2020-07-26 13.03.42_Emq67M.png

If you want a bouncing ball where the ball decelerates as it rises and then accelerates as it falls you would start by setting two keyframes with the same value for y but different values for x. If you wanted the oscillations to happen every 10 frames the first step would look like this:

Screenshot_2020-07-26 13.09.20_RXoDY3.png

Then you would switch to the pen tool and use the Convert Vertex tool by holding down the Alt/Option key and drag out the bezier handles on the motion path so the ball moved to the apex of the bounce on frame five like this:

Screenshot_2020-07-26 13.11.59_p9zjXg.png

I've turned on the Grid to help make the motion path symmetrical. The last step before adding the expression would be to adjust the Speed graph so the acceleration looks like this. You want instant acceleration to max speed when the ball hits the ground. Auto Bezier is the right tool in Graph Editor. and this is what the graph looks like;

Screenshot_2020-07-26 14.03.06_UPY3HZ.png

You want the speed to be zero halfway between the keyframes and a deceleration then acceleration curve on either side. pulling the control handles all the way toward each other and matching the speed will give you a decent approximation of gravity. 

 

Then a simple loopOut("pingpong")[1] expression will give you a ball that bounces up and down. Resetting the position properties of both keyframes to the center of the comp and matching up both path vertex handles so they are vertical will give you a ball that continuously bounces up and down. You can use a combination of loopOut("pingpong")[1], and loopOut("offset")[1] to make the ball continuously bounce up and down while moving across the screen. Here's the expression for a ball bouncing in place;

 

 

y = loopOut("pingpong")[1];
[value[0], y]

 

 

You could leave the starting and ending positions different and keep the path the same, then add this expression with separate loop operators for X and Y and end up with a ball that bounced across the screen. 

 

That should get you started.

 

Topics

Expressions

Views

55

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Oscillate Y value between two designated points

Community Beginner ,
Jul 26, 2020

Copy link to clipboard

Copied

I would like to be able to write an expression that will translate my Y position value between two numbers evenly. Wiggle won't work because wiggle is random. Instead, I want to write an expression that allows my Y value to oscillate back and forth between two points at the same speed/frequency.

 

For example:

If my y postion value is set to 540, I would like it to move between 540 and 550 at the same speed. Like a bouncey ball that never looses it's bounce.

Adobe Community Professional
Correct answer by Rick Gerard | Adobe Community Professional

There are lots of ways to do what you want to do. If you use Wiggle you'll get random values. For Example:

 

 

wgl = wiggle(4, 50);
[value[0], wgl [1]]

 

 

Will give you this (Graph Editor Value Graph to show you the random Y value)

Screenshot_2020-07-26 12.32.16_dF0H83.png

Your ball would bounce continuously but the height would vary.

 

You could use the Math.sin(time * (Math.PI * 10)) function to create a smooth change from 0 to 1 and then 0 to -1 5 times a second. Multiply that value by the number of pixels you want to have the layer move and you end up with this:

 

 

y = Math.sin(time * (Math.PI * 10));
[value[0], value[1] + y * 100]

 

 

Screenshot_2020-07-26 13.03.42_Emq67M.png

If you want a bouncing ball where the ball decelerates as it rises and then accelerates as it falls you would start by setting two keyframes with the same value for y but different values for x. If you wanted the oscillations to happen every 10 frames the first step would look like this:

Screenshot_2020-07-26 13.09.20_RXoDY3.png

Then you would switch to the pen tool and use the Convert Vertex tool by holding down the Alt/Option key and drag out the bezier handles on the motion path so the ball moved to the apex of the bounce on frame five like this:

Screenshot_2020-07-26 13.11.59_p9zjXg.png

I've turned on the Grid to help make the motion path symmetrical. The last step before adding the expression would be to adjust the Speed graph so the acceleration looks like this. You want instant acceleration to max speed when the ball hits the ground. Auto Bezier is the right tool in Graph Editor. and this is what the graph looks like;

Screenshot_2020-07-26 14.03.06_UPY3HZ.png

You want the speed to be zero halfway between the keyframes and a deceleration then acceleration curve on either side. pulling the control handles all the way toward each other and matching the speed will give you a decent approximation of gravity. 

 

Then a simple loopOut("pingpong")[1] expression will give you a ball that bounces up and down. Resetting the position properties of both keyframes to the center of the comp and matching up both path vertex handles so they are vertical will give you a ball that continuously bounces up and down. You can use a combination of loopOut("pingpong")[1], and loopOut("offset")[1] to make the ball continuously bounce up and down while moving across the screen. Here's the expression for a ball bouncing in place;

 

 

y = loopOut("pingpong")[1];
[value[0], y]

 

 

You could leave the starting and ending positions different and keep the path the same, then add this expression with separate loop operators for X and Y and end up with a ball that bounced across the screen. 

 

That should get you started.

 

Topics

Expressions

Views

56

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Jul 26, 2020

Copy link to clipboard

Copied

There are lots of ways to do what you want to do. If you use Wiggle you'll get random values. For Example:

 

 

wgl = wiggle(4, 50);
[value[0], wgl [1]]

 

 

Will give you this (Graph Editor Value Graph to show you the random Y value)

Screenshot_2020-07-26 12.32.16_dF0H83.png

Your ball would bounce continuously but the height would vary.

 

You could use the Math.sin(time * (Math.PI * 10)) function to create a smooth change from 0 to 1 and then 0 to -1 5 times a second. Multiply that value by the number of pixels you want to have the layer move and you end up with this:

 

 

y = Math.sin(time * (Math.PI * 10));
[value[0], value[1] + y * 100]

 

 

Screenshot_2020-07-26 13.03.42_Emq67M.png

If you want a bouncing ball where the ball decelerates as it rises and then accelerates as it falls you would start by setting two keyframes with the same value for y but different values for x. If you wanted the oscillations to happen every 10 frames the first step would look like this:

Screenshot_2020-07-26 13.09.20_RXoDY3.png

Then you would switch to the pen tool and use the Convert Vertex tool by holding down the Alt/Option key and drag out the bezier handles on the motion path so the ball moved to the apex of the bounce on frame five like this:

Screenshot_2020-07-26 13.11.59_p9zjXg.png

I've turned on the Grid to help make the motion path symmetrical. The last step before adding the expression would be to adjust the Speed graph so the acceleration looks like this. You want instant acceleration to max speed when the ball hits the ground. Auto Bezier is the right tool in Graph Editor. and this is what the graph looks like;

Screenshot_2020-07-26 14.03.06_UPY3HZ.png

You want the speed to be zero halfway between the keyframes and a deceleration then acceleration curve on either side. pulling the control handles all the way toward each other and matching the speed will give you a decent approximation of gravity. 

 

Then a simple loopOut("pingpong")[1] expression will give you a ball that bounces up and down. Resetting the position properties of both keyframes to the center of the comp and matching up both path vertex handles so they are vertical will give you a ball that continuously bounces up and down. You can use a combination of loopOut("pingpong")[1], and loopOut("offset")[1] to make the ball continuously bounce up and down while moving across the screen. Here's the expression for a ball bouncing in place;

 

 

y = loopOut("pingpong")[1];
[value[0], y]

 

 

You could leave the starting and ending positions different and keep the path the same, then add this expression with separate loop operators for X and Y and end up with a ball that bounced across the screen. 

 

That should get you started.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Jul 27, 2020

Copy link to clipboard

Copied

This is exactly what I as looking to do and so much more. Thank you for such an in depth explaination and even a look into some other functions. I really appreciate the time and care you took in answering my question. This is amazing. Thank you so much and God bless you!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...