Java

Java

TOPIC 21 – LOOP APPLICATION: ANIMATION

LESSON NOTE

ANIMATION BASICS

An animation is simply the display of a graphical object that gets moved locations (or warped shapes) every so often. If this occurs regularly and fast enough, it fools the viewer's brain into thinking that the graphical shape is an object that is moving.

We will look at the basic setup of doing animation using NOOPDraw. We will use a while loop where every pass in the loop will represent a frame in the animation.

DELAY

For an animation to be viewable, we need to slow things down a little so that we don't have too much happening in a small amount of time. We can slow Java statement execution down by using:

Thread.sleep(milliseconds);

Essentially the above line of code stops all execution of statements for the amount of milliseconds specified.

One note, to use this statement, we need to add a "throws exception" at the end of the function prototype that contains it.

For example, if we want to use it in the main function, our prototype will have to look like this:

public static void main(String[] args) throws InterruptedException
{

...

}

STRUCTURE OF ANIMATION

Animation (as well as video games) have the following structure:

while(true) //loop forever

{

Update the current state of the animation.

Draw the current state of the animation.

Pause for a small amount of time.

}

Of course, if we want the animation to stop on its own, we could add a way to stopping the loop.

EXAMPLE 1 – APPEARING DOTS

In this example, we will make a dot appear every second. The dot is randomly given an x and y coordinate between 0 and 449. Make sure you understand how the code works.

public class Animation01

{

public static void main(String[] args) throws InterruptedException

{

NOOPDraw.createWindow(500,500,"Our First Animation");

while(true)

{

int randomX = (int)(Math.random() * 450);

int randomY = (int)(Math.random() * 450);

NOOPDraw.drawPoint(randomX, randomY);

Thread.sleep(1000);

}

The result (click image to view an SWF video):

EXAMPLE 1B – ADDING COLOUR

In this example, we've only added one line (highlighted in yellow). We change the drawing colour to a new random colour before drawing each dot. We also change the delay amount to 500 milliseconds.

public class Animation01B

{

public static void main(String[] args) throws InterruptedException

{

NOOPDraw.createWindow(500,500,"Our First Animation");

while(true)

{

NOOPDraw.setRandomColor();

int randomX = (int)(Math.random() * 450);

int randomY = (int)(Math.random() * 450);

NOOPDraw.drawPoint(randomX, randomY);

Thread.sleep(500);

}

The result (click image to view an SWF video):

EXAMPLE 2 – JUMPING CIRCLE

In this example, we introduce the clearScreen() method which erases the previous frame. We also work with an ellipse instead of a dot and the size of the ellipse is also randomly generated.

public class Animation02

{

public static void main(String[] args) throws InterruptedException

{

NOOPDraw.createWindow(500, 500, "Jumping Circle");

while(true)

{

NOOPDraw.clearScreen();

int randomX = (int)(Math.random() * 450); //0 to 449

int randomY = (int)(Math.random() * 450); //0 to 449

int size = (int)(Math.random() * 50) + 10; //10 to 59

NOOPDraw.fillEllipse(randomX, randomY, size, size);

Thread.sleep(1000);

}

The result (click image to view an SWF video):

EXAMPLE 3 – MOVING BLOCK

In this example, a block is gradually moved from left to right until it goes off screen. Notice that this is quite simple, all we are doing is increasing x a little bit every time. Also, we are now redrawing frames once every 50ms which is 20 times per second – or a frame rate of 20fps.

public class Animation03

{

public static void main(String[] args) throws InterruptedException

{

NOOPDraw.createWindow(500, 500, "Horizontal Moving Block");

int squareX = 0;

int squareY = 200; //won't change

while(true)

{

NOOPDraw.clearScreen();

squareX=squareX+2;

NOOPDraw.fillRectangle(squareX, squareY, 40, 40);

Thread.sleep(50);

}

The result (click image to view an SWF video):

EXAMPLE 3B – RETURNING BLOCK

This example is very similar to the previous one. However, when the block gets off the screen (when its x-coordinate reaches 490), then it is teleported to an x-coordinate of 0.

public class Animation03B

{

public static void main(String[] args) throws InterruptedException

{

NOOPDraw.createWindow(500, 500, "Horizontal Moving Square");

int squareX = 0;

int squareY = 200; //won't change

while(true)

{

NOOPDraw.clearScreen();

squareX=squareX+2;

if (squareX > 490)

{

squareX = 0;

}

NOOPDraw.fillRectangle(squareX, squareY, 40, 40);

Thread.sleep(25);

}

The result (click image to view an SWF video):

USING OBJECTS TO GROUP DATA

As our graphical applications get more advanced, we will start having a lot of data about each shape. It is beneficial to use object oriented programming to group data together.

Let's consider all of these details that we want for an object that will move on the screen:

Colour (red, green, blue)
Size
X & Y coordinates
Direction of movement
Name

We create a class called MovingObject that looks like this:

public class MovingObject

{

public int red;

public int green;

public int blue;

public int size;

public int x;

public int y;

public int xDirection;

public int yDirection;

public String name;

}

We can now create an animation with the above object.

EXAMPLE 4 – USING OOP

In this example, we use a MovingObject object to store all the data of a graphical object moving on the screen.

public class Animation04

{

public static void main(String[] args) throws InterruptedException

{

NOOPDraw.createWindow(500, 500, "Using OOP");

//Create object

MovingObject mo = new MovingObject();

mo.red=255;

mo.green=128;

mo.blue=128;

mo.size=50;

mo.x=250;

mo.y=250;

mo.xDirection = 5;

mo.yDirection = 4;

mo.name="UFO";

while(true)

{

//Clear screen

NOOPDraw.clearScreen();

//Update location.

mo.x = mo.x + mo.xDirection;

mo.y = mo.y + mo.yDirection;

//Moving off window?

if (mo.x > 490)

{

mo.x = -mo.size;

}

if (mo.y > 470)

{

mo.y = -mo.size;

}

//Draw object and text

NOOPDraw.setColor(mo.red, mo.green, mo.blue);

NOOPDraw.fillRectangle(mo.x, mo.y, mo.size, mo.size);

NOOPDraw.drawString(mo.name, mo.x, mo.y-10);

//Delay

Thread.sleep(50);

}

The result (click image to view an SWF video):