Welcome to my CPE 474 final project: the **Animated Keyboard!**

Press these buttons to make different sounds:

### Timing Functions

Each of the cube-instruments use a different **timing function** to achieve their motion. For each movement, I pass in a start transform, an ending transform and a duration. Without the timing function, each animation would simply linearly go from the starting transform to the ending transform.

This would be super boring. Instead, I modify each animation with a**timing function.** First, I *normalize the time elapsed* for each animation. That is, instead of going from (starting milliseconds) to (ending milliseconds), each animation goes from 0 to 1. Then, I pass in the normalized time parameter into my timing function.

Javascript lets you treat functions like variables and argument parameters, so the entire function to animate a cube looks like:

### Timing Function Examples

#### Shimmy

Without the timing function, it looks like this:
It simply goes from big -> small, and makes one quarter-turn. We apply its timing function:

At u == 0.5, the result is random between 0.5 and 1.

At u == 1, the result is always 1.

As u goes from 0 to 1, it restricts the space that the function can land on, eventually landing on exactly 1. So the end result is a sort of "jitter" as it bounces around different angles, until it finally settles on the end transform, at u == 1.

#### Clap

Without the timing function, it looks like this:

It rotates and moves in a random direction. Here's the timing function(s):**from** the end transform **to** the start transform. I could've achieved the same effect just by switching the transforms in the animation function call, but this was cooler.

Remember that cubing a value below 1 makes it*smaller*, in a curvy shape that passes through (1, 1):
As you can see from the "clapping" cube, it starts moving quickly (at u == 1) and eases slowly back towards 0. I use the "ease" effect for the bass drum cube as well.
#### Double-tap

Finally, the double-tap:
This is an interesting one. Without a timing function, it looks like this:
Here's what the timing function looks like:
### Final Remarks

As you can see, timing functions are pretty powerful. I used similar timing functions to control the bouncy cubes and the particles that shrink and disappear. You can check out the timing code I wrote right here. It's well-documented and contains some stuff you might recognize from a graphics class, like lerpVectors and slerp. Check it out!

Press these buttons to make different sounds:

This would be super boring. Instead, I modify each animation with a

Javascript lets you treat functions like variables and argument parameters, so the entire function to animate a cube looks like:

animate_cube( cube, start_transform, end_transform, duration, timing_function );

function shimmy(u) { return Math.random() * (1 - u) + u; }When u == 0, the result is random between 0 and 1.

At u == 0.5, the result is random between 0.5 and 1.

At u == 1, the result is always 1.

As u goes from 0 to 1, it restricts the space that the function can land on, eventually landing on exactly 1. So the end result is a sort of "jitter" as it bounces around different angles, until it finally settles on the end transform, at u == 1.

It rotates and moves in a random direction. Here's the timing function(s):

function easeIn(u) { return u*u*u; } function clap(u) { return easeIn(1 - u); }As you can see, we can easily chain timing functions by calling one from another. In this case, clap() simply runs the easeIn function backwards, so it runs

Remember that cubing a value below 1 makes it

function instant(u) { if (u < 0.5) { return 0; } else { return 1; } }If u is less than 1/2, it returns 0. Otherwise, it returns 1. This makes the animation abruptly jump from the starting transform to the ending transform, then back again, giving a quick "click" animation.