Download Ch1: Simple Graphics using Applets

CS 152L
Computer Programming
Fundamentals
Chapter 1.4: Simple Graphics & Applets
Instructor:
Joel Castellanos
e-mail: [email protected]
Web: http://cs.unm.edu/~joel/
Office: Farris Engineering
Center (FEC) room 319
1/24/2013
Quiz: Java Bytecode
Java Bytecode is:
a) Machine code for the particular machine on
which the Java source code was compiled.
b) The binary code Java uses to store bytes.
c) The hexadecimal code Java uses to store
bytes.
d) Machine code for a Java Virtual Machine.
e) A device that bites, chews and spits Java code.
2
1
Quiz: Graphics Supplement 1.4
1) import javax.swing.JApplet;
2) import java.awt.Graphics;
3) public class Toy_1_4 extends JApplet
4) { public void paint(Graphics canvas)
5)
{ // drawOval(x, y, width, height);
6)
canvas.drawOval( 50,50,25,25);
7)
canvas.drawOval(100,50,25,25);
8)
canvas.drawOval(150,50,25,25);
9)
canvas.drawOval(200,50,25,25);
10) }
11) }
3
(a)
(b)
(c)
(d)
drawOval(x, y, width, height)
1) canvas.drawOval( 50, 50, 25, 25);
50
50
25
25
drawOval is a method that requires four
arguments.
Since width = height, the "oval" is a circle.
4
2) canvas.drawOval(100,50,25,25);
3) canvas.drawOval(150,50,25,25);
4) canvas.drawOval(200,50,25,25);
2
Computer Coordinate System
y-axis
x-axis
0, 0 1, 0 2, 0 3, 0 4, 0 5, 0
6x6
Pixels
0, 1 1, 1 2, 1 3, 1 4, 1 5, 1
0, 2 1, 2 2, 2 3, 2 4, 2 5, 2
0, 3 1, 3 2, 3 3, 3 4, 3 5, 3
0, 4 1, 4 2, 4 3, 4 4, 4 5, 4
"Line" drawn
from:
(0,0) to (3,5)
0, 5 1, 5 2, 5 3, 5 4, 5 5, 5
5
Pixel
A pixel is a square of light on a computer display.
Window with
200 x 200 pixel
drawing area.
12 x 12 pixel segment of
drawing area.
6
3
Background Color and Shapes
7
1)
2)
3)
4)
5)
6)
7)
8)
9)
10)
11)
12)
13)
14)
15)
16)
17)
18)
import javax.swing.JApplet;
import java.awt.Color;
import java.awt.Graphics;
What does this draw?
(10,50)
public class Toy_1_4c extends JApplet
{
public void paint(Graphics canvas)
{
canvas.setColor(Color.YELLOW);
canvas.fillRect(0,0,200,200);
canvas.setColor(Color.BLUE);
//drawLine(int x1, int y1, int x2, int y2)
canvas.drawLine(10, 50, 10, 180);
canvas.drawLine(10, 50, 50, 180);
canvas.drawLine(10, 50, 100, 180);
}
}
Anti-Aliasing
Anti-aliasing is a transformation that tries to
reduce artifacts caused by drawing on a grid.
Parallel lines drawn with Java. The second was
drawn with anti-aliasing on.
8
4
Parallel Lines without/with Anti-Aliasing
9
1)
2)
3)
4)
5)
6)
7)
8)
9)
10)
11)
12)
13)
14)
15)
16)
17)
18)
import javax.swing.JApplet;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
public class Toy_1_4b extends JApplet
{
public void paint(Graphics canvas)
{ canvas.setColor(Color.BLUE);
canvas.drawLine(0, 0, 166, 199);
Graphics2D canvas2D = (Graphics2D) canvas;
canvas2D.setRenderingHint(
RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
canvas.drawLine(10, 0, 176, 199);
}
}
Java: Applet verses Application
Java Application:
 Every application must have at least one class with
public static void main(String[] args)
 Before an application can display graphics, it must create
and display a window.
Java Applet:
 An applet runs inside a web browser window.
 Every applet starts with a graphics area given to it by the
browser.
 Applets *can* create more windows, but usually they don't.
 Usually, applets are used for relatively simple programs.
10
5
Applets
A web page includes with an applet by using the
applet tag. For example:
<applet code="myApplet.class"
width=300 height=200>
</applet>
The browser automatically calls:
 init(): called when the applet starts.
 paint(Graphics canvas): called each time the
browser thinks the applet needs to be repainted.
 Note: If you don't one of these, you will inherit an
11
empty one from the JApplet class.
Overriding Applet's init() method
1) import javax.swing.JApplet;
2) import java.awt.Graphics;
3)
4) public class Toy_1_4_Applet2
5) {
6)
public void init()
7)
{ this.setSize(500,300);
8)
}
9)
10) public void paint(Graphics
11) { canvas.drawOval(100, 50,
12)
canvas.drawOval(100, 50,
13) }
14) }
12
extends JApplet
Called once:
When applet
starts
canvas)
25, 25);
50, 50);
Called every time repaint is needed
6
Adding Color
13
java.awt.Color
14
1. import javax.swing.JApplet;
2. import java.awt.Color;
3. import java.awt.Graphics;
4. public class Toy_1_4 extends JApplet
5. {
6.
public void paint(Graphics canvas)
7.
{
8.
Color periwinkle = new Color(204, 204, 255);
9.
Color pumpkin = new Color(255, 117, 24);
255
10.
11.
canvas.setColor(periwinkle);
12.
canvas.fillOval(50, 50, 50, 50);
13.
14.
canvas.setColor(pumpkin);
15.
canvas.fillOval(100, 50, 50, 100);
16. }
17.}
0
7
How to Read Java Documentation
Syntactic Variables
java.awt.Color Constructor:
Color(int red, int green, int blue)
Argument Type
1. public void paint(Graphics canvas)
2. {
NO int
3.
int green = 0;
4.
Color blue = new Color(0, green, 255);
15
How Color constructor is used
Applet in Action
16
1) import javax.swing.JApplet;
2) import java.awt.Graphics;
3) public class Toy_1_4 extends JApplet
4) {
5)
public void paint(Graphics canvas)
6)
{
canvas is an instance of the
7)
java.awt.Graphics class
8)
System.out.println("called paint()");
9)
10)
canvas.drawOval( 50,50,25,25);
11)
canvas.drawOval(100,50,50,100);
12) }
13) }
Prints every time window is repainted.
8
java.awt.Graphics
drawOval(int left, int top, int width, int height)
fillOval(int left, int top, int width, int height)
drawArc(int left, int top, int width, int height,
int startAngle, int arcAngle)
drawRect(int left, int top, int width, int height)
fillRect(int left, int top, int width, int height)
drawLine(int x1, int y1, int x2, int y2)
setColor(java.awt.Color myColor)
17
Fall 2011: Drawing with Shapes
18
9