Web programming 11 Complex Animations Subscribe Pub Share

Previous: Web programming 10 Reactive Animations.

Ok, time to show you that even when things get complicated, they're actually simple. Just keep in mind what you want to do...

So, your homework was to get the ball to bounce up and down, but that's clear, so let's make it bounce all the time...

To bounce it, we'll change the direction of movement to up/down and we have to make the movement continuous, for a perpetuum mobile. So instead of just one function moveItBack we'll need two functions down and up which will chain each-other, so one is called at the end of the other, for a continuous movement.

Before we leave this lesson for even more interesting stuff, let's look at a new shape, called an ellipse - an ellipse is like a circle except it has a horizontal radius and a vertical radius, so it can look really funny:

The red ellipse is a circle because both radiuses are the same value, so it's like a circle with the same radius all around. The other ones are either wider or taller, since one of their radiuses is bigger.

Homework is to play with them... make them twice the size, then half the size. Make one ellipse as wide as the canvas and another one just 3 pixels tall... and find it with a microscope...

I think you see where this is heading: we'll talk about real physics... continue to Web programming 12 Physics and Animations.


Was this useful?    

By: Razie | 2014-06-19 .. 2014-06-21 | Tags: post , html , lesson , hacker.factory , javascript , animation , raphael


See more in: Cool Scala Subscribe

Viewed 1306 times ( | History | Print ) this page.

You need to log in to post a comment!