CS203 Lecture 6 11 September 2015 Note: we had a guest speaker in class for this lecture. These a.re the notes I would have used had I given the lecture Announcements HW2 due on Mon Handouts Methods handout (read for next time) “Car” code Graphics-­‐Intro JPanel (or Canvas): a kind of Java object that can put in a GUI (Graphical User Interface), and can be drawn on. • JPanel does “double-­‐buffering”; this means the it waits until you draw all the elements of your scene, and then displays the new scene “all at once” onto the screen. This is nice for animations, because they do not flicker. With a Canvas, it physically draws individual elements directly onto the screen, which can be nice during debugging (e.g., breakpoints, single-­‐stepping). Graphics: a kind of Java object that accepts drawing commands. JFrame: a “top-­‐level” GUI that can contain other GUI object (such as a JPanel); a JFrame has a border, and a “close box” and such • Every JPanel and Canvas has a Graphics object • In order to display the JPanel or Canvas, we put it inside a JFrame Think of: • the JPanel (or Canvas) object as the “canvas” you’re painting on • the Graphics object as the painter who has a paint brush in his hand, and is standing in front of the canvas (i.e., JPanel object) • the Graphics object has commands to: o draw a rectangle (or other kinds of shape) on the canvas o draw text onto the canvas o change the color of paint brush o etc. Code (uses Canvas so that we can single-­‐step and see things draw one-­‐by-­‐one): import java.awt.*;
import javax.swing.*;
. . .
public class MyPicture extends Canvas { // declare MyPicture to be a
// particular kind of Canvas,
//with the behavior listed below
public void init() {
// code that is executed once, when Canvas is created,
// for example, to set the size and background color
. . .
}
public void paint(Graphics g) {
// code that draws whatever the Canvas is supposed to draw;
// typically, you give a series of commands to the Graphics
// object (g) that set the drawing color and that actually
// paint things onto the Canvas
. . .
}
public static void main(String[] args) {
// create the frame object
JFrame f = new JFrame();
// create MyPicture object
MyPicture pic = new MyPicture();
// put MyPicture object into the frame
f.getContentPane().add(pic);
// tell frame what behavior should be when the “close” box
// is pressed. In this case we tell it to exit the program
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
// set height/width of the frame. The “+25” to allow
// vertical space for the frame’s header
f.setSize(pic.getWidth(), pic.getHeight()+25);
// display the frame on the screen
f.setVisible(true);
}
}
Our main method creates a JFrame—a “actual window”, and put the Canvas in to it. Then it tells the JFrame to become visible. • init: executed once, when Canvas is created • paint: executed every time the Canvas needs to draw itself (e.g., when it uncovered by another window) You should not need to worry about changing the main method—just focus on paint (and possibly) init. pixels – screen is made up of pixels (unit for displaying a color), can think of a pixel as a small dot of color drawing canvas – rectangle •
•
•
upper-­‐left corner is (0, 0) increasing x moves to the right o so the pixel one to the right of the upper-­‐left corner is (1,0) increasing y moves down o so the pixel one below the upper-­‐left corner is (0,1) o this is non-­‐intuitive to math folks, which expect that increasing y will move up, as in the Cartesian plane Graphics-­‐Drawing Shapes: ovals arcs lines rectangles polygons Note: the order in which object are drawn matters. Later stuff overwrites earlier stuff. Ovals: g.drawOval(50, 100, 40, 60); // position upper-­‐left (50, 100), width = 40, height = 60 g.fillOval(50, 100, 40, 60); // does same thing, but fills it g.drawArc(80, 200, 30, 90, 0, 90); // position (80, 200), width = 30, height = 90, start angle = 0 // degrees_shown = 90 (counterclockwise) // circles are just ovals with the same width and height Lines g.drawLine(0, 50, 100, 70); // draws line from (0, 50) to (100, 70) Rectangles g.drawRect(200, 10, 50, 100); // draws rectangle with upper-­‐left coordinate at (200, 10), width = 50, height = 100 g.fillRect(200, 10, 50, 100); // fills rectangle like above Polygons Polygon trapezoid = new Polygon(); trapezoid.addPoint(10, 10); trapezoid.addPoint(60, 30); trapezoid.addPoint(60, 90); trapezoid.addPoint(10, 100); g.drawPolygon(trapezoid); // actually draws the polygon // note: the order of points added matters (does connect-­‐the dots) Could also fill using: g.fillPolygon(trapezoid); Colors There are several pre-­‐defined colors in Java: • examples: Color.RED, Color.BLUE, Color.YELLOW You can also create your own colors using the red, green, and blue components of colors Color beige = new Color(245, 245, 250); g.setColor(Color.GREEN); // draw a tree g.setColor(beige); // not Color.BEIGE // draw the bark of the tree // note: built-­‐in colors are used as Color.NAME // note: your colors – you use the name you specify in the variable How do you know what numbers to use? • Well, the graphics handout has a huge list of colors by the red, green, and blue components. • If you’re good at color, you can figure it out. 0 is black (no light). 255 is white (all light). So, white has the values 255, 255, 255 as the red, green, and blue. • The color mixing uses the red/green/blue as primary colors. The color mixing is actually mixing light. o red, blue, and green make white o mixing red and green make yellow o mixing blue and red make magenta o mixing blue and green make cyan (turquoise) // in the code: your pen changes to the color and all code after that is drawn in that color Graphics-­‐Drawing Text g.drawString(“Steve!”, 200, 300); // puts “Steve” at lower-­‐left position (200, 300) // notice that the order of arguments is different (the position is at the end) // notice that the corner of the box is also lower-­‐left instead of upper-­‐left You can also create your own font (see handout for more details) Font largeFont = new Font(“Serif”, Font.PLAIN, 60); // creates font with decorations, not bold/italic // pixel height of 60 g.setFont(largeFont); // sets the font for any drawstring methods after this also have Font.BOLD, Font.ITALIC, Font.BOLD + ITALIC also have “SansSerif”, “Monospaced”, “Dialog”, “DialogInput” Examples Go over car code with class • make note: super paint call in the paint method • make note: setBackground call (to set the color of the window) in the init method If time, go over Mr. Frosty code.