CSCI 111: Graphics notes

CSCI 111: Notes
Introductory Graphics

Graphics

These are not all in the text, see sections 2.7, 2.8 and 2.9 and Chapter 2 slides 50-64

Java API Class Library. In these notes we will look at the java.awt package and the Graphics Class

In the last program we wrote a sentence on our applet. Often one wants to program graphical images.

import java.awt.*; import java.applet.Applet; public class FirstLine extends Applet { public void paint(Graphics g) { g.drawLine(0,0,100,100); } }

What should the file be called? And what is this?

OK, what are we doing here?
We are drawing a line from pixel location (0,0) (top left corner) to pixel location (100,100).

Pixels have locations and colors. For location, we consider horizontal and vertical (or (x,y)) coordinates
(again, with (0,0) being top left)

Notice the use of g. It is the graphics area. It is an instance of the class Graphics.

We have two methods in this program

  1. paint is a method we are defining for our new subclass FirstLine of the class Applet
  2. drawLine is a pre-defined method of the class Graphics of which g is an instance

Parameters (or arguments)

In defining the method paint we specify that the paint method needs a parameter to be passed that is a Graphics object.
In the code for that method, we are calling the object g
Here, since the paint method is for an applet, the graphics area is defined by the applet (i.e., where the html file says it is)

The g.drawLine(0,0,100,100); indicates that the drawLine method needs 4 parameters...also note the ; at the end of the statement

Since drawLine is a pre-defined method of the class Graphics, you can see what parameters are necessary by looking at the API for Graphics

Other methods for Graphics

Look at the API; there are a lot of methods. Below is what the API provides for information about some of these methods. Your book discusses, in particular:

Color and Fill

 java.awt.Color provides a list color possibilities. Note that colors look different on different machines. and objects can be filled:

Sequencing Statements

Simple program sequence example and resulting applet .

Type it in. What name would you give the file? Make an html file yourself and try it out (don't forget to compile).

Often in lab 3 students want to fill a polygon and/or make triangles. This page shows how to use the fillPolygon method provided by the Graphics class, as well as how to write methods for yourself when the API does not provide them.

Here is an example from the book. It might help you for lab 3. And another very simple one.

Displaying Characters

g.drawString("Hello World",100,100);

Concatenation puts strings (lists of characters) together with the use of an operator (the + ... just like in Math)

g.drawString("Hello " + "there " + World",100,100);
Should be g.drawString("Hello " + "there " + "World",100,100);

Notice the blanks inside the " ". Without these the words would go together.

I have made some courses for The O'Reilly School of Technology (O'Reilly Books) that shows much more depth into Strings, Fonts, and Numbers but it is more than you need here. However, here is the link if you want to explore it for additional information.

Comments

Sometimes it is hard to see what people are doing in their code. (HA HA HA HA HA!)

Programmers should comment their code so others know what is going on

// draw an isosceles triangle g.drawLine(20,80,70,10); g.drawLine(70,10,120,80); g.drawLine(20,80,120,80); // rectangle base /* continues until the next */
// until the end of the line
/** used to generate documentation automatically */ for javadoc

Exercises

Notice the exercises at the end of each chapter. Sometimes we might look at these in class; sometimes not. However, they are very good exercises to do since they could be like what might be on the midterm and final tests.

A fancier HelloWorld

See http://www.ecst.csuchico.edu/~amk/foo/javanut1/section4/SecondApplet.java for a fancier HelloWorld. Notice the use of documentation. Compile it and make an html for it to see what it looks like. Or, be lazy and go here to see it.

Slides and code.