The first step in making graphics shapes in Java is to set the color. After that you can draw the shape and then you must select another color to draw any further shapes of a different color. Basic shapes include rectangles and circles.

Colors are selected by using the setColor method. Its basic form is:

    setColor(color);

Look in the JUDO help files for a list of usable colors. Some are: red orange yellow green blue purple black white etc..

To change color for a shape just call the setColor method before drawing the shape.

The formula for setting the Background Color is:

    setBackgroundColor(color);

Do it now!

    void main() {
        setBackgroundColor(black);
    }

All the shapes require pixel co-ordinates to create their size and position relative to the window they are drawn in. These are created according to their x, y positions.

To draw a rectangle, you will need to give the top-left x and y points and the width and height.

To draw a rectangle at position (x,y), you would use the formula:

    drawRectangle(x, y, width, height);

Note that the x, y co-ordinates are the top-left corner. All numbers must be int's.

To draw a rectangle at position (100,100), 200 pixels wide and 200 pixels high, you would use the code:

    drawRectangle(100, 100, 200, 200);

Lets do it!

    void main() {
        setBackgroundColor(red);
        setColor(blue);
        drawRectangle(100, 100, 300, 150);
    }

Here is what you should get. Amazing!

Try a circle! Here is the template, where x, y are the top-left co-ordinates:

    drawCircle(x, y, radius)

Exercise:

Draw a green circle with top-left at (100, 200) and a radius of 50. What is the code for it?

Answer:

    setColor(green);
    drawCircle(100, 200, 50);

Notice that the shapes that we have drawn are only outlines and are not filled in. To draw filled shapes use:

    fillRectangle(x, y, width, height);
    fillCircle(x, y, radius);
    fillOval(x, y, width, height);

Lets draw a self portrait!

    void main() {
        setBackgroundColor(yellow);
 
        // body
        setColor(red);
        fillRectangle(100, 100, 50, 50);
 
        // arms
        setColor(green);
        fillRectangle(25, 100, 75, 10);
        fillRectangle(150, 100, 75, 10);
 
        // legs
        fillRectangle(100, 150, 10, 75);
        fillRectangle(140, 150, 10, 75);
 
        // head
        setColor(blue);
        fillCircle(100, 50, 50);
    }

Here it is. Wow!

Java Exercise:

1. Give the figure eyes, nose and a mouth. And shoes if you like… be creative…
2. Go to JUDO / Help / Tutorials / Graphics and read and do the examples.
3. Read up on method descriptions for drawLine and drawString
4. Draw a house and a star.

drawString() paints a string of text at the point given.

Here is the template, where String is the text to be written and x, y the coordinates of the bottom-left of the text:

    drawString(String, x, y);

e.g. #1

    String name = "Steve";
 
    drawString(name, 35, 25);

e.g. #2

    drawString("This is text", 15, 35);

Sooo, Lets make our logo:

    void main() {
        setBackgroundColor(white);
        setColor(black);
        fillRectangle(100, 100, 100, 100);
        setColor(white);
        drawString("Java For Kids", 150, 120);
        setColor(red);
        drawRectangle(100, 100, 100, 100);
    }

Java Exercises:

1. Draw a line of circles. Use a for loop. Hint, use:

Here may be an algorithm u could use:

        // declare width, height of window
        // declare number of circles in a row
        // get width and height of window
        // divide width by number of circles you want = radius x 2
        // loop for number of circles
        //     draw a circle at count * radius
        // end loop

Cut and paste the above algorithm into JUDO and use it as a plan for your program.

Fill in the code after each comment.

How would you fill the whole window with circles?

Hint - use a for loop inside a for loop. Try it!

I encourage you to get it totally wrong and pull your hair out.

1. Draw a series of concentric circles.
2. Draw a series of concentric rectangles.

House.

    void main() {
        setBackgroundColor(black);
        setColor(white);
 
        // front
        fillRectangle(100, 100, 300, 100);
 
        // roof
        drawLine(100, 100, 250, 25);
        drawLine(250, 25, 400, 100);
 
        // windows
        setColor(blue);
        fillRectangle(125, 125, 20, 20);
        fillRectangle(355, 125, 20, 20);
 
        // door
        setColor(red);
        fillRectangle(240, 150, 30, 50);
}

Row of Circles.

    void main() {
        // declare width, height of window
        int width;
        int height;
        int gap;
 
        // declare number of circles in a row
        int cnum = 40;
 
        // get width and height of window
        width = getDrawingWidth();
 
        // divide width by number of circles you want = radius x 2
        gap = width/cnum;
 
        // loop for number of circles
        for (int counter = 0; counter < cnum; counter++)
        {
                // draw a circle at count * radius
                setColor(red);
                fillCircle(counter*gap, 0, gap);
        // end loop
        }
    }