Download Chapter5. Graphics [4/12 revised]

Great Ideas of CS with Java








Part 1 WWW & Computer programming in the language Java
Ch 1: The World Wide Web
Ch 2: Watch out: Here comes Java
Ch 3: Numerical computation & Function
Ch 4: Subroutines & Databases
Ch 5: Graphics
Ch 6: Simulation
Ch 7: Software engineering







Part 2 Understanding what a computer is and how it works
Ch 8: Machine architecture
Ch 9: Language translation
Ch 10: Virtual Environment for Computing
Ch 11: Security, Privacy, and Wishful thinking
Ch 12: Computer Communication






Part 3 Advanced topics
Ch 13: Program Execution Time
Ch 14: Parallel Computation
Ch 15: Noncomputability
Ch 16: Artificial intelligence
1
SNU
IDB Lab.
Ch5. Graphics, Classes, and Objects
Copyright © SNU IDB Lab.
SNU
2
IDB Lab.
참고자료
컴퓨터 그래픽스
SNU
3
IDB Lab.
컴퓨터 그래픽스의 역사

1950년대 초반 MIT에서 Whirlwind 시스템개발

1960년 Boeing사의 William Fetter가 “컴퓨터 그래픽스”라는 말을 처음 사용

1963년 Ivan Sutherland의MIT 박사학위논문 SketchPad 시스템


1970년대 University of Utah와 Evans-Sutherland사를 중심으로 기술개발


Graphics분야 최초의 박사논문
상용 Graphics 시스템
1979년 Stanford University의 James Clark 교수가 Geometry Engine 개발

Raster Graphics System 의 등장
4
SNU
IDB Lab.
초기의 비대화형 컴퓨터시스템
(카드펀치입력 및 IBM704 시스템)
Main frame computer를 이용한 Vector Graphics Systems 의 개발
5
SNU
IDB Lab.
문자를 이용한 그래픽스
6
SNU
IDB Lab.
대화형 컴퓨터 그래픽스

1963년 Ivan Sutherland의 MIT 박사학위논문
“Sketchpad, a Man-Machine Graphical Interface Systems”
7
SNU
IDB Lab.
Geometry Engine

1979년 당시 Stanford University 교수이던 James Clark에 의하여 개발



실시간 래스터 그래픽스 시스템
1982년 James Clark과 Stanford 대학원생들이 창업한
Silicon Graphics, Inc. 에서 상용화
Jurassic Park, Terminator II, Batman Forever, Casper, Toy Story
등의 영화제작에서 활용
8
SNU
IDB Lab.
Foley 교수와 van Dam 교과서의
교과서 초판 (1982) 표지
9
SNU
IDB Lab.
벡터 그래픽스와 래스터 그래픽스
10
SNU
IDB Lab.
벡터 그래픽스의 원리
•그림을 선의 구성으로 봄
•직선의 처음 점과 마지막 점을 이어 주면서 refresh
•복잡함
11
SNU
IDB Lab.
벡터 그래픽스의 구조
12
SNU
IDB Lab.
벡터 그래픽스 시스템
13
SNU
IDB Lab.
Raster Graphics

Raster scan

화면전체를 raster scanline을 따라 refresh



raster : each a row of individual pixels
전자빔이 모든 픽셀들을 지나가면서 쏘아짐
왼쪽 위부터 오른쪽으로 이동(초당 30~60회)
14
SNU
IDB Lab.
Raster Graphics

Frame buffer (refresh buffer)



픽셀의 색상값 저장 장소
색상값 : Red, Green, Blue 의 조합
버퍼의 깊이(Depth) : 한 픽셀을 표현하기 위한 비트 수


예 : 깊이 : 24 bit  2 24 가지의 색상 표현
해상도 1024 x 768 : true color(24 bit 색상) 표현하기 위하여 2.25
MB 필요

프레임 버퍼의 크기 : 1024 x 768 x 3(byte) = 2,359,296 byte
15
SNU
IDB Lab.
그래픽 기본 용어
Frame Buffer
1
0
0
0
1
0
1
0
1
0
0
0
1
0
0
0
1
0
1
0
1
0
0
0
1
0 0 0 0 1
0 1 0 0 1
0 0 1 0 1
0 0 0 1 1
16
SNU
IDB Lab.
래스터 그래픽스의 구조
17
SNU
IDB Lab.
컴퓨터 그래픽스의 중요분야

모델링 (Modeling)
점, 선분, 면, 곡선, 곡면, 입체 모델링

애니메이션 (Animation)
각종 영상 및 형상변환, 캐릭터 동작제어, 카메라 동작제어 등

렌더링 (Rendering)
가시성 검사, 숨은면 제거, 텍스춰 매핑, 쉐이딩
18
SNU
IDB Lab.
모델링
19
SNU
IDB Lab.
애니메이션
20
SNU
IDB Lab.
렌더링
21
SNU
IDB Lab.
컴퓨터 그래픽스의 응용






그래픽스 사용자 인터페이스 (GUI)
비즈니스 그래픽스
과학, 공학, 의학에서의 데이터 가시화
게임, 영화, 캐릭터 산업
멀티미디어
가상현실
22
SNU
IDB Lab.
CG 응용: 자연과학적 가시화
23
SNU
IDB Lab.
CG 응용: 가상현실
24
SNU
IDB Lab.
Table of contents





Graphics?
Graphics primitives
Let’s draw some pictures
Subclasses and the Java Class Hierarchy
Summary
25
SNU
IDB Lab.
Graphics ?



By now you have learned a lot about programming Java and ……..
you learn here how to draw a line or an arc on the computer screen and how
to color things and…..
Then suddenly you can draw any picture that you can imagine.

A set of graphics primitives that will enable us to create essentially any
picture on a computer screen.

Draw the graphics within the context of applets

A Touch of Graphics (of course with Java!)




Canvas class
Graphics class
pixels
Coordinates
26
SNU
IDB Lab.
Figure 5.1
27
SNU
IDB Lab.
You need a canvas if you want to draw!
Figure 5.2
200X200 Grid and a point
** Declaring a graphics object and canvas object within Java
Graphics g;
Canvas c;
g = c.get.Graphics(); // get a graphics object from c
28
SNU
IDB Lab.
Table of contents

Graphics ?

Graphics primitives



Let’s draw some pictures
Subclasses and the Java Class Hierarchy
Summary
29
SNU
IDB Lab.
Graphics primitives

Graphics Methods










void drawLine(int x1, int y1, int x2, int y2)
void drawRect(int x, int y,
int width, int height)
void drawOval(int x, int y,
int width, int height)
Void drawArc(int x, int y, int width, int height, int StartAngle, int arcAngle)
void fillLine(int x1, int y1, int x2, int y2)
void fillRect(int x, int y,
int width, int height)
void fillOval(int x, int y,
int width, int height)
Void fillArc(int x, int y, int width, int height, int StartAngle, int arcAngle)
void setColor(Color c)
A graphics object G



G.drawline(50,50,150,100)
G.drawOval(50,50,100,50)
G.drawRect(50,100,100,50)
30
SNU
IDB Lab.
G.drawLine(50,50,150,100)
Figure 5.3
31
SNU
IDB Lab.
G.drawOval(50,50,100,50)
G.drawRect(50,100,100,50)
Figure 5.4
32
SNU
IDB Lab.
Void drawArc(int x, int y, int width, int height, int startAngle, int arcAngle)
G.drawArc(50,50,100,50,45,135)
Figure 5.5
33
SNU
IDB Lab.
Some more primitives



You can present a series of characters to label your graphic
void drawString(String s, int x , int y)
Setting colors with Color class
having three variables (red, green, blue)



Color c1 // c1.red, c1.green, c1.blue (value between 0 and 255)
void setColor(Color c);
Color c2; c2 = newColor(100, 100, 100);
34
SNU
IDB Lab.
Table of contents

Graphics ?
Graphics primitives

Let’s draw some pictures



Subclasses and the Java Class Hierarchy
Summary
35
SNU
IDB Lab.
Let’s draw some pictures

GDemo.java (196 page) Draw things on fixed locations

GDemo2.java Draw things by changing locations

GDemo3.java Simple vector graphics using Arrays

Serpinsky.java Graphics using Recursion (simple fractals)
36
SNU
IDB Lab.
import awb.*;
import java.awt.*;
import java.awt.event.*;
public void actionPerformed(ActionEvent event)
{
Object cause = event.getSource();
public class GDemo extends java.applet.Applet
implements ActionListener
// A demonstration program for the Graphics methods
// drawLine, drawOval, and drawRect.
{
Graphics g;
Canvas c;
Button b1, b2, b3, b4;
public void init()
{
c = new Canvas();
c.setSize(200, 200);
add(c);
g = c.getGraphics();
b1 = new Button("Start");
b2 = new Button("Line");
b3 = new Button("Oval");
b4 = new Button("Rectangle");
b1.addActionListener(this);
b2.addActionListener(this);
b3.addActionListener(this);
b4.addActionListener(this);
add(b1); add(b2); add(b3); add(b4);
}
}
}
if (cause == b1)
{
g.setColor(Color.white); // Color the whole canvas white
g.fillRect(0, 0, 200, 200);
}
if (cause == b2)
{
g.setColor(Color.blue);
g.drawLine(50, 50, 150, 100); // Demonstrate drawLine
}
if (cause == b3)
{
g.setColor(Color.green);
g.drawOval(50, 50, 100, 50); // Demonstrate drawOval
}
if (cause == b4)
{
g.setColor(Color.red);
g.drawRect(50, 100, 100, 50); // Demonstrate drawRect
}
GDemo.java
37
SNU
IDB Lab.
import awb.*;
import java.awt.*;
import java.awt.event.*;
public void actionPerformed(ActionEvent event)
{
Object cause = event.getSource();
public class GDemo2 extends java.applet.Applet
implements ActionListener
// A demonstration program for the Graphics methods drawLine,
// drawOval, and drawRect.
{
Graphics g;
Canvas c;
IntField iX, iY;
Button b1, b2, b3, b4, b5;
int x, y;
public void init()
{
c = new Canvas();
c.setSize(200, 200);
add(c);
g = c.getGraphics();
b1 = new Button("Start");
b2 = new Button("Oval");
b3 = new Button("Rectangle");
b4 = new Button("SetCorner");
b5 = new Button("Shift");
iX = new IntField(20);
iY = new IntField(20);
b1.addActionListener(this);
b2.addActionListener(this);
b3.addActionListener(this);
b4.addActionListener(this);
b5.addActionListener(this);
add(iX); add(iY);
add(b1); add(b2); add(b3); add(b4); add(b5);
}
}
}
if (cause == b1)
{
g.setColor(Color.white); // Color the whole canvas white
g.fillRect(0, 0, 200, 200);
}
if (cause == b2)
{
g.setColor(Color.green);
g.drawOval(x, y, 100, 50); // Demonstrate drawOval
}
if (cause == b3)
{
g.setColor(Color.red);
g.drawRect(x, y, 100, 50); // Demonstrate drawRect
}
if (cause == b4)
{
x = iX.getInt();
y = iY.getInt();
}
if (cause == b5)
{
x = x + 5;
y = y + 5;
}
GDemo2.java
38
SNU
IDB Lab.
import awb.*;
import java.awt.*;
import java.awt.event.*;
public void actionPerformed(ActionEvent event)
{
Object cause = event.getSource();
public class GDemo3 extends java.applet.Applet
implements ActionListener
// A demonstration program for the Graphics methods
// combined with arrays
{
Graphics g;
Canvas c;
Button b1, b2;
int x[] = {45, 95, 130, 130, 95, 45, 10, 10};
int y[] = {10, 10, 45, 95, 130, 130, 95, 45};
int n;
public void init()
{
c = new Canvas();
c.setSize(200, 200);
add(c);
g = c.getGraphics();
b1 = new Button("Start");
b2 = new Button("StringFig");
b1.addActionListener(this);
b2.addActionListener(this);
add(b1); add(b2);
n = 8;
}
}
}
if (cause == b1)
{
g.setColor(Color.white); // Color the whole canvas white
g.fillRect(0, 0, 200, 200);
}
if (cause == b2)
{
int k, j;
k = 0;
g.setColor(Color.blue);
while (k < n)
{
j = 0;
while (j < n)
{
g.drawLine(x[k], y[k], x[j], y[j]);
j = j + 1;
}
k = k + 1;
}
}
GDemo3.java
39
SNU
IDB Lab.
void serpinsky(int x1, int y1, int x2, int y2, int x3, int y3)
{
import awb.*;
int size, limit=10;
import java.awt.*;
size = (x2-x1)*(x2-x1) + (y2-y1)*(y2-y1);
import java.awt.event.*;
if (size < limit)
return; // do nothing
public class Serpinsky extends java.applet.Applet
triangle(x1, y1, x2, y2, x3, y3);
implements ActionListener
serpinsky(x1, y1, mid(x1,x2), mid(y1,y2), mid(x1,x3), mid(y1,
// A demonstration program for the Graphics methods drawLine, serpinsky(x2, y2, mid(x2,x1), mid(y2,y1), mid(x2,x3), mid(y2,
// drawOval, and drawRect.
serpinsky(x3, y3, mid(x3,x1), mid(y3,y1), mid(x3,x2), mid(y3,
{
}
Graphics g;
Canvas c;
public void init()
IntField iSlow;
{
Button b1, b2, b3, b4, b5, b6, b7, b8, b9;
c = new Canvas();
Color col;
c.setSize(400, 400);
int x, y, slow;
add(c);
g = c.getGraphics();
int mid(int a, int b)
b1 = new Button("Start"); b2 = new Button("Triangle");
{
b3 = new Button("Gasket"); b4 = new Button("Red");
return (a + b)/2;
b5 = new Button("Green"); b6 = new Button("Blue");
}
b7 = new Button("Black"); b8 = new Button("White");
b9 = new Button("Slow");
void triangle(int x1, int y1, int x2, int y2, int x3, int y3)
iSlow = new IntField(10);
{
col = Color.blue;
int k;
slow = 0;
k = 0; while ( k < slow) k = k + 1; // code to slow down b1.addActionListener(this); b2.addActionListener(this);
g.drawLine(x1, y1, x2, y2);
b3.addActionListener(this); b4.addActionListener(this);
g.drawLine(x2, y2, x3, y3);
b5.addActionListener(this); b6.addActionListener(this);
g.drawLine(x3, y3, x1, y1);
b7.addActionListener(this); b8.addActionListener(this);
}
b9.addActionListener(this);
add(iSlow);
add(b1); add(b2); add(b3); add(b4); add(b5);
add(b6); add(b7); add(b8); add(b9);
}
Serpinsky.java
40
SNU
IDB Lab.
public void actionPerformed(ActionEvent event)
{
Object cause = event.getSource();
if (cause == b1)
{
g.setColor(Color.white); // Color the whole canvas white
g.fillRect(0, 0, 400, 400);
g.setColor(Color.black);
g.drawString("Serpinsky Gasket", 20, 20);
}
if (cause == b2)
{
g.setColor(col);
triangle(50, 310, 200, 70, 350, 310);
}
if (cause == b3)
{
g.setColor(col);
serpinsky(50, 310, 200, 70, 350, 310);
}
}
}
if (cause == b4)
{
col = Color.red;
}
if (cause == b5)
{
col = Color.green;
}
if (cause == b6)
{
col = Color.blue;
}
if (cause == b7)
{
col = Color.black;
}
if (cause == b8)
{
col = Color.white;
}
if (cause == b9)
{
slow = iSlow.getInt();
}
Serpinsky.java
41
SNU
IDB Lab.
Table of contents

Graphics ?
Graphics primitives
Let’s draw some pictures

Subclasses and the Java Class Hierarchy

Summary


42
SNU
IDB Lab.
Suppose we finish the programming for
“House”, and we want to do more!
Figure 5.6
You may want to stretch the house.
You may want to reverse the color of the house.
You may want to draw a village of houses.
43
SNU
IDB Lab.
Subclasses and the Java Class Hierarchy
Every class in Java has a superclass except the highest class of all, object
The Class hierarchy is a very large tree extending down from object.
Checkbox
Choice
TextComponent
TextArea
TextField
List
Component
Button
Canvas
Object
Container
Label
Scrollbar
House
StreetHouse
44
ReverseHouse
SNU
IDB Lab.
Table of contents

Graphics ?
Graphics primitives
Let’s draw some pictures
Subclasses and the Java Class Hierarchy

Summary



45
SNU
IDB Lab.
Summary





참고자료: Introduction to Computer Graphics
A set of graphics primitives
You can declare a canvas and craft your design using the primitives
You can define your own class for drawing scenes on the screen
You can even extend a defined class with subclassing technique
46
SNU
IDB Lab.


Ch5: Computer Graphics
Text Review Time
47
SNU
IDB Lab.