Java For Kids tutorial 7

In a for loop draw an object with moving x or y coordinates.

Use the delay(time) function to animate.

Use clearDrawing as well.

Here is an example. Imagine it is an alien coming toward you.

    void main() {
        setColor(red);
        for(int count = 0; count < 50; count++) {
                fillCircle(150, count*5, 50);
                delay(0.1);
                clearDrawing();
        }
    }

Try it without clearDrawing() by commenting out that line. e.g.

        // clearDrawing();

Notes on Above Java Code:

• Set the color of the drawing object
• Do a loop for 50 times
• Draw a filled circle. The X coordinate (150) will stay constant, as it needs to only move down, not across. The Y co-ordinate will increase by 5 (count*5) each time the loop goes round (iterates).
  
  • if count = 0, then y = count * 5 = 0 * 5 = 0, Add 1 to count
  • if count = 1, then y = count * 5 = 1 * 5 = 5, add 1 to count
  • if count = 2, then y = count * 5 = 2 * 5 = 10, add 1 to count

So you can see that y increases by 5 every time the loop goes round, until count = 49. Then y will equal 49 * 5 = 245.

• delay(0.1) - stops the program executing for a tenth of a second.
• clearDrawing() - clears the screen so you only see that frame being painted

Also change the delay time. delay stops the program executing for the time that it put between the brackets ( ) after the word delay. The time is give as a double and not an int. That allows us to use fractions of a second as a time delay.

If a time delay of 0.10 seconds is given, then the animation's frame rate is 10 frames per second. Video(PAL) goes at 25 frames per second. USA TV runs at 30 fps(frames per second). Japanese anime usually runs at about 4 or 5 frames per second.

The more frames per second an animation is given, the smoother the animation will look. So try the delay in the above animation at 0.5 seconds (delay(0.50);) and see what it looks like. Is it jerkier or smoother than delay(0.1)? Try delay(0.025).

Choose the animation fps to suit the speed of the computers processor and filesize.

getDrawingHeight() returns the height of the window as an int. We could make the ball move down the screen until the y co-ordinate reaches the window. But we have to subtract the height of the ball, dont we?

Nooo, maybe we want to let the ball go offscreen, so let's make the ball go downwards until y equals the height of the window. Lets do it!

    void main() {
        int y = 0;		// initialize y
        int howFar = getDrawingHeight();
 
        setColor(green);        // green ball
        while (y < howFar)
        {
            // draw circle
            fillCircle(150, y, 50);
 
            // add 5 pixels each time it loops
            y = y + 5;
            delay(0.1);
            clearDrawing();
        }
    }

(to be continued…)