Intro to Animation

To create an animation, define a function that describes what one step of the animation looks like. Link that function to an amount of time to transition to the next step of the animation with setInterval. SetInterval returns a handler which we need to stop the animation.

To stop an animation, use clearInterval with the handler returned by setInterval.

The example below processes a user-defined marquee.

For more information on:

• setInterval
• clearInterval

Any questions or comments should be directed to: The creator's email

Animating Pictures

To animate a picture, number the frames of the animation from 0 to (last animation). Then create an animation that loops through the frames, replacing the src of the image with the current frame.

The below example uses the following horse pictures to perform the animation.

Any questions or comments should be directed to: The creator's email

Moving Objects

To move an object, set its position to absolute. Then, in Javascript, change its left and top styles.

To flip an object, set its transform CSS style to scaleX(-1).

The below example runs the horse from the previous example to coordinate (500,500) and back.

Any questions or comments should be directed to: The creator's email

Making Sounds

To make sounds, use the audio tag. When you want the sound to play, execute the sound with the play method.

The below example makes the running horse whinny every 5 seconds once you press the button. Press the button again to make the horse stop neighing.

Any questions or comments should be directed to: The creator's email

Manipulating Animations Through The Keyboard

You typically don't manipulate the animation directly through the keyboard. Instead, the animation is calculated based on some variable and the variable is changed via the keyboard.

In the below example, the horse's trajectory is calculated using two variables, horizdir and vertdir. Hitting the arrow keys on the keyboard causes horizdir or vertdir to increase or decrease, thereby changing the direction and velocity of the horse.

You can capture keyboard presses using the event object. The key attribute of the event object captures which key is pressed.

Any questions or comments should be directed to: The creator's email

Manipulating Animations Through The Mouse

Handling the mouse is essentially the same as handling the keyboard. However, instead of capturing keys using the event object, you capture the coordinates of the mouse with the attributes clientX and clientY.

In the below example, the horse runs to the last mouse click.

Any questions or comments should be directed to: The creator's email

Manipulating Animations Through The Touchscreen

The touchscreen is virtually identical to the mouse, except the event is called ontouchstart and it is possible for multiple fingers to come in contact with the touchscreen. As a result, touches are captured as an array of clientX and clientY called touches.

In the below example, the horse runs to the last touch of the "first" finger.

Any questions or comments should be directed to: The creator's email

Manipulating Animations Through The Gyroscope

Gyroscope manipulation currently is an unstable feature across browsers and operating systems. At the moment, not all browsers and operating systems support it. To use the gyroscope you must connect to the website using HTTPS. On some operating systems, the user must actively grant permission to the website to use the gyroscope. This means the user must activate gyroscope permission by (for example) pressing a button. The website cannot prompt the user to give permission on website load.

The gyroscope event contains three attributes called alpha, beta and gamma.

• Alpha is the device's compass direction.
• Beta is the device's vertical tilt.
• Gamma is the device's horizontal tilt.

The below example allows you to move the horse by tilting the screen. Note the function getgyropermission which is required on some operating systems to get permission. This is linked to a button.

The function orient reads the gyroscope to move the horse.

Any questions or comments should be directed to: The creator's email

Accessing the Videocamera

Videocamera support is not standard across browsers. There is a draft standard. In the standard, you access the videocamera using an object called navigator.mediaDevices. Like with the gyroscope, you have to ask for permission to access this using navigator.mediaDevices.getUserMedia({video:true, audio:false}). At the moment, the standard does not support audio. If you are granted permission, this returns a stream object which you can link to the video tag using the srcObject attribute.

To turn off the videocamera, you tell the stream getTracks()[0].stop().

The below example connects the videocamera to a video tag.

Any questions or comments should be directed to: The creator's email

Generating Random Numbers

The Math.random() function generates a random decimal number between 0 and 1. To generate a random number between 1 and maxnumber, use Math.floor(Math.random()*<maxnumber>)+1

The example below simulates rolling a single six sided die.

Any questions or comments should be directed to: The creator's email

Detecting Collisions

For a collision to occur, it must happen on both the vertical and horizontal planes. However, an analysis of a collision on one plane allows us to understand general rules for collisions. Figure (a) is an example of non-collisions on the vertical plane, while Figure (b) illustrates collisions on the vertical plane.

Observe the matching red and orange circles. Notice how when there are no collisions, either the right corner of the cyan block is to the left of the left corner of the blue block (red) or the left corner of the cyan block is to the right of the right corner of the blue block (orange).

In contrast, when there is a collision, the right corner of the cyan block is to the right of the left corner of the blue block (red) and the left corner of the cyan block is to the left of the right corner of the blue block (orange).

In other words, a collision occurs between two rectangular objects if and only if:

• The leftmost side of object 2 is to the left of the rightmost side of object 1 and
• The rightmost side of object 2 is to the right of the leftmost side of object 1 and
• The topmost side of object 2 is to the top of the bottommost side of object 1 and
• The bottommost side of object 2 is to the bottom of the topmost side of object 1.

The below example extends the moving horse with the mouse example by placing 5 rocks on the screen in random places. While the horse is in contact with a rock, it whinnies.

Any questions or comments should be directed to: The creator's email