Java For Kids Tutorial 6

Java GRAPHICS

Selecting a color

	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:,/p>

		setBackgroundColor(color) ;

Do it now !

	void main() 	{
		setBackgroundColor(black) ;
	}

Drawing Shapes using Java

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..
Go to JUDO - Help - Tutorials - Graphics and read and do the examples.
Read up on method descriptions for drawLine and drawString
draw a house and a star.

Java drawString method

	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 :
   getDrawingHeight() Returns the height of the drawing area or the window
   getDrawingWidth() Returns the width of the drawing area or window
   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.
2. a. draw a series of concentric circles . b. a series of concentric rectangles.

Some Answers
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
}
}