From the course: Vanilla JavaScript: Animations

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Adding acceleration

Adding acceleration - JavaScript Tutorial

From the course: Vanilla JavaScript: Animations

Start my 1-month free trial

Adding acceleration

“

- [Narrator] At the moment, our animation is very linear, and dull. Let's add some acceleration to things to make it a bit more lively and believable. To do so, we'll increase the velocity of the circle every interval, based upon an acceleration parameter. So the first thing we'll need to do is create two additional variables. We'll create a variable for velocity, which is starting at one, and acceleration, which we'll set to 0.5. To actually make this work we have to go down to our drawCircle function, and what we'll do, is right after a context.fill, we'll then mock around with both velocity, acceleration and the circle X position for the next iteration of our circle. We'll set velocity plus equal to acceleration. This is the same thing as saying velocity equals velocity plus acceleration. And then we'll set circleX to itself plus velocity. What this is basically going to do, is really speed up the animation as time goes on, because this will forever increment. Alright, let's save…

Contents