Bài giảng đồ họa máy tính cô Lê Na ĐH Vinh

Phan Lê NaBộ môn Khoa học Máy tínhKhoa Công nghệ Thông tinTrường Đại học Vinh

Phan Lê Na

Bộ môn Khoa học Máy tính Khoa Công nghệ Thông tin Trường Đại học Vinh

phanlena@yahoo.com

 Mục đích:

Cung cấp một số kỹ thuật đồ hoạ

Dùng ngôn ngữ lập trình minh hoạ kỹ thuật đồ hoạ

- Học sinh phải nắm vững các kỹ thuật đồ hoạ

- Học sinh cố gắng hiểu và thuộc ngay tại lớp

Tài liệu tham khảo

1 Hoàng Ki m, D ơng Anh Đức, Lê Đình Duy, Vũ Hải ếm, Dương Anh Đức, Lê Đình Duy, Vũ Hải

Quân, Giáo trình Cơ sở Đồ hoạ Máy tính , NXB Giáo dục,

2000.

2 Lê Tấn Hùng, Huỳnh Quyết Thắng, Kỹ thuật đồ hoạ,

NXB KH-KT 2003.

3 Phan Hữu Phúc, Cơ sở đồ họa máy tính , NXB GD 2003.

4 L ơng Chi Mai-Huỳnh Thị Thanh Bình, Nhập môn

ĐHMT , NXB KH - KT 2004.

Nội dung

Chươngư1 : Giới thiệu về đồ họa máy tính

Chươngư2 : Kỹ thuật chuyển động hình phẳng

Ch ươngư3: Các thuật toán vẽ đ ờng

Chươngư4 : Các phép biến đổi trong mặt phẳng

-Trong suốt gần 50 năm phỏt triển của mỏy tớnh, khả năng phỏt sinh hỡnh ảnh bằng mỏy tớnh của chỳng ta đó đạt tới mức hầu như tất cả cỏc mỏy tớnh đều cú khả năng

Khi đó thi t k xong ph n khung c a đ i t ng, cỏc mụ hỡnh chi u sỏng, tụ màu và ần khung của đối tượng, cỏc mụ hỡnh chiếu sỏng, tụ màu và ủa đối tượng, cỏc mụ hỡnh chiếu sỏng, tụ màu và ối tượng, cỏc mụ hỡnh chiếu sỏng, tụ màu và ượng, cỏc mụ hỡnh chiếu sỏng, tụ màu và

t o búng b m t s đ c k t h p đ t o ra k t qu r t g n v i th gi i th c ẽ được kết hợp để tạo ra kết quả rất gần với thế giới thực ượng, cỏc mụ hỡnh chiếu sỏng, tụ màu và ợng, cỏc mụ hỡnh chiếu sỏng, tụ màu và ể tạo ra kết quả rất gần với thế giới thực ả rất gần với thế giới thực ất gần với thế giới thực ần khung của đối tượng, cỏc mụ hỡnh chiếu sỏng, tụ màu và ới thế giới thực ới thế giới thực ực

I Giới thiệu về đồ hoạ máy tính

-Lĩnh vực giải trớ, nghệ thuật

Hỗ trợ cho cỏc họa sĩ, cỏc nhà tạo mẫu trong việc thiết kế cỏc hỡnh ảnh sống động, và rất thực

Tạo ra cỏc chương trỡnh trũ chơi, giải trớ; hỗ trợ cho cỏc kĩ xảo điện ảnh

-Giỏo dục và đào tạo

-Giao tiếp giữa mỏy tớnh và người dựng

2 Khái niệm về đồ hoạ:

Đồ họa mỏy tớnh là tất cả các vấn đề liờn quan đến việc sử dụng mỏy tớnh để phỏt sinh

ra hỡnh ảnh: tạo, lưu trữ, thao tỏc trờn cỏc mụ hỡnh và cỏc ảnh

Đồ họa mỏy tớnh bao gồm thiết kế phần cứng như thiết bị hiển thị, cỏc thuật toỏn cần thiết để phỏt sinh cỏc đường trờn cỏc thiết bị đó, cỏc phần mềm được sử dụng cho người lập trỡnh hệ thống và người lập trỡnh ứng dụng đồ họa, và cỏc chương trỡnh ứng dụng tạo ảnh bằng mỏy tớnh

Một hệ đồ họa gåm phần cứng và phần mềm

Phần cứng bao gồm các thiết bị hiển thị và nhập dữ liệu, …

Phần mềm bao gồm các công cụ lập trình và các trình ứng dụng đồ họa

-Các hàm cơ sở bao gồm việc tạo các đối tượng cơ sở của hình ảnh như đoạn thẳng,

đa giác, đường tròn, …, thay đổi màu sắc, chọn khung nhìn, áp dụng các phép biến đổi, …

-Các ứng dụng đồ họa được thiết kế cho phép người dùng tạo các đối tượng, hình ảnh, … không cần quan tâm tới việc chúng được tạo ra như thế nào

II Giíi thiÖu §å ho¹ Turbo C

Trong chế độ văn bản: màn hình có thể hiển thị 256 ký tự trong bảng mã ASCII (25 dòng/trang, 80Ký tự/dòng)

Trong chế độ đồ họa: Thay cho các ký tự mã ASCII là các Pixel (điểm) Đó là các phần tử nhỏ nhất đ ợc dùng để tạo nên hình vẽ.

 Có hai chế độ hiển thị:

Chế độ văn bản (Text) và Chế độ đồ họa (Graph).

2 Khởi tạo đồ hoạ

a Yêu cầu các tệp

*.BGI: Chứa các tệp điều khiển màn hình

*.CHR: Chứa các phông chữ

graphics.h, stdlib.h, stdio.h,

conio.h, Dos.h,…

Màn hình đồ hoạ gồm nhiều điểm ảnh đ ợc sắp xếp trên các đ ờng thẳng nằm ngang và thẳng đứng

Số l ợng các điểm ảnh phụ thuộc vào loại màn hình (Driver) và ứng với mỗi loại màn hình lại còn phụ thuộc vào kiểu màn hình (Mode).

ATT.BGI Dïng cho c¸c m¸y AAT&T 6300

CGA.BGI Dïng cho c¸c m¸y IBM CGA,MCGA

IBM8514.BGI Dïng cho mµn h×nh IBM8514 vµ c¸c m¸y

b Khởi tạo đồ hoạ

void initgraph (int *graphdriver, int *graphmode, char *pathtodriver);

Trong đó:

 graphdriver: biến kiểu int chỉ card màn hình

 graphmode: biến kiểu int chỉ mode màn hình

 pathtodriver : biến kiểu char chỉ đ ờng dẫn vào th

VÝ dô 1: void main()

{ int gd=EGA, gm=EGALO;

7=HERCMONO

0 = DETECT;

Driver Mode Sè ®iÓm ¶nh

3 Hàm xử lý chế độ đồ hoạ

Hàm graphresult: int;

graphresult

== 0 (= = grOk): Chuyển đ ợc sang chế độ đồ họa

!=0 (!=grOk): ch a chuyển đ ợc sang chế độ đồ hoạ Đang có lỗi, th ờng sai đ ờng dẫn

VÝ dô:

C¸ch 1 : if (graphresult()!= grOk) exit(1);

C¸ch 2 :

if (graphresult() != grOk) {

printf("Press any key to halt:");

getch();

exit(1);

}

4 Khai b¸o Unit:

6 Cấu trúc chung một ch ơng trình đồ họa đơn giản

7.1 Hàm vẽ điểm: putpixel (int x,int y, int color);

Trong đó: x, y: là toạ độ điểm color: 0 15;

putpixel(300,300,7);

putpixel(250,100,Red);

Vẽ điểm có màu color tại toạ độ x,y

Đối với máy 16 màu :

7 Các hàm vẽ và tô màu

§èi víi m¸y 16 mµu

if (graphresult()!= grOk) exit(1);

for (i=1; i<=10;i++)

putpixel(100+i*10,100+i*10,i);

getch();

closegraph();

Ví dụ 2: Vẽ điểm với các toạ độ đ ợc nhập vào

Ví dụ 3: Vẽ bầu trời đầy sao

randomize() ; Khởi tạo cấp số ngẫu nhiên

random(n) ; Hàm tạo số bất kỳ từ 0 đến n-1

delay(n) ; Hàm làm trễ

d ơng là toạ độ của các điểm Vẽ các điểm đó lên màn hình đồ hoạ

7.2.Đ ờng thẳng

void line( int x1, int y1,int x2, int y2);

Vẽ một đoạn thẳng từ tọa độ x1,y1 đến toạ độ x2,y2

(x1,y1)

line(100,100,200,200);

 Hàm xác định màu:

void setcolor(Màu);

•Hàm setlinestyle(Md,mẫu,Mn); thi t l p ki u md (style), ập kiểu md (style), ể tạo ra kết quả rất gần với thế giới thực

m u tụ (pattern), Mn (thickness) ẫu tụ (pattern), Mn (thickness) được đượng, cỏc mụ hỡnh chiếu sỏng, tụ màu và dùng cho vi c v các c ệ giữa nhiều đối tượng với nhau ẽ được kết hợp để tạo ra kết quả rất gần với thế giới thực

điểm ảnh

setlinestyle(2,1,1);

line(100,100,300,300);

Ví dụ 2: Vẽ đ ờng thẳng với các toạ độ đ ợc nhập vào.

Ví dụ 3: Vẽ chùm đ ờng thẳng xuất phát điểm giữa

màn hình (hoặc đọc từ tệp văn bản sn.kq)

Ví dụ 1: Vẽ đ ờng thẳng bất kỳ

#include <graphics.h>// xuat phat (100,100)

}cleardevice;

}

closegraph();

}

#include <graphics.h> #include <stdlib.h>

#include <stdio.h> #include <conio.h>//xuat phat (x,y) doc tu tep

#include <graphics.h> #include <stdlib.h>

#include <stdio.h> #include <conio.h>//xuat phat tu (x,y) nhap vao

#include <graphics.h> #include <stdlib.h>

#include <stdio.h> #include <conio.h>//xuat phat tu diem ngau nhien

Ví dụ 5: Cho tệp văn bản sn.vb gồm các bộ 4 số nguyên d ơng là toạ độ của các đ ờng thẳng Vẽ các đ ờng thẳng đó lên màn hình đồ hoạ

#Hµm lineto(int x,int y); vÏ ®o¹n th¼ng tõ ®iÓm hiÖn t¹i tíi (x,y)

#Hµm linerel(int dx,int dy); vÏ ®o¹n th¼ng tõ ®iÓm hiÖn t¹i tíi (x,y)

if (graphresult() != grOk) exit(1);

VÝ dô: draw a line (20,30) to (120, 130)

Ví dụ 6: Vẽ hệ trục toạ độ Đề các có gốc tại điểm giữa màn hình

(getmaxx() / 2,0)

(0,getmaxy() / 2) (getmaxx(),getmaxy() / 2)

Ví dụ 7: Vẽ hệ trục toạ độ theo dx, dy

(dx, 0)

(0, getmaxy()-dy)

(getmaxx(), getmaxy()-dy) dy

dx

Ví dụ 8 : Vẽ hệ trục toạ độ theo dx, dy với (dx,dy) nhập vào

#BiÓu diÔn h×nh Bar

7.3 Hµm vÏ khung h×nh ch÷ nhËt

void rectangle(int x1,int y1,int x2,int y2);

(x1,y1)

(x2,y2)

rectangle(100,100,200,200);

Ví dụ 1: Vẽ khung hình chữ nhật bất kỳ

Ví dụ 2: Vẽ khung hình chữ nhật với các toạ độ đ ợc nhập

vào

#Hàm thiết lập màu nền:

setbkcolor(Màu);

Ví dụ: setbkcolor(10);

Ví dụ 3: Cho tệp văn bản SN.INP gồm các số nguyên, số l ợng các số trong tệp là một số chia hết cho 4 Mỗi bộ 4 số nguyên liên tiếp thể hiện toạ độ của khung HCN Vẽ các khung HCN

đó lên màn hình đồ hoạ.

VÝ dô 4: VÏ chïm khung h×nh ch÷ nhËt lång nhau xuÊt ph¸t gi÷a mµn h×nh

*

rectangle(x-2*i,y-2*i,x+2*i,y+2*i);

Ví dụ 5: Vẽ chùm khung hình chữ nhật xuất phát tại các vị trí ngẫu nhiên.

Ví dụ 6: Vẽ chùm khung hình chữ nhật xuất phát tại vị trí nhập vào bàn phím.

Ví dụ 7: Vẽ chùm khung hình chữ nhật xuất phát tại vị trí

đọc từ tệp văn bản kq.inp.

{ int gd= DETECT,gm;int i,x,y;initgraph(&gd, &gm, "");

if (graphresult()!= grOk) exit(1);randomize();

7.4 Hàm vẽ HCN đặc

v oid bar (int x1, int y1, int x2, int y2);

void setfillstyle(Kiểu, màu);

Ví dụ 1: Vẽ hình chữ nhật đặc tuỳ ý

Ví dụ 2: Vẽ hình chữ nhật đặc với các toạ độ đ ợc nhập vào

Ví dụ 3: Cho tệp văn bản SN.INP gồm các số nguyên, số l ợng các số trong tệp là một số chia hết cho 4 Mỗi bộ 4 số nguyên liên tiếp thể hiện toạ độ của HCN đặc Vẽ các HCN đó lên

màn hình đồ hoạ.

Ví dụ 4: Vẽ chùm HCN đặc xuất phát góc trên bên trái màn hình.

{ int gd= DETECT,gm;int i,x,y;initgraph(&gd, &gm, "");

if (graphresult()!= grOk) exit(1);randomize();

while (!kbhit()){x=0;y=0;setbkcolor(random(16));

for (i=1;i<=50;i++)

{ int gd= DETECT,gm;int i,x,y;initgraph(&gd, &gm, "");

if (graphresult()!= grOk) exit(1);randomize();

Ví dụ 4 : Cho tệp văn bản SN.INP gồm các số nguyên, số l ợng các số trong tệp là một số chia hết cho 4 Mỗi bộ 4 số nguyên liên tiếp thể hiện toạ độ của HCN 3 chiều Vẽ các HCN đó lên màn hình đồ hoạ.

VÝ dô 1 : BiÓu diÔn h×nh Bar doanh thu 4 quý trong n¨m 150,180, 200,250

(x,getmaxy()-dy-a[i])

(x+dr, getmaxy()-dy)

dl dl

a[i]

dx

Các b ớc giải:

Gán a[i]: int a[]={150,180,250,200};

 Khởi tạo đồ hoạ

Vẽ hệ trục toạ độ (dx,dy)

Biểu diễn hình Bar:

Ví dụ 2 : Biểu diễn doanh thu 6 tháng trong năm với các số liệu đ ợc nhập vào từ bàn phím.

• Khởi tạo đồ hoạ

• Vẽ hệ trục toạ độ (dx,dy)

int i=0,dx=30,dy=100,x,dr=30,dl=35;int a[6];

printf(" Nhap doanh thu 6 thang:\n");for (i=0;i<6;i++)

• Ví dụ 3: Biểu diễn doanh thu các tháng trong năm với các

số liệu đ ợc lấy từ tệp văn bản đã cho sn.kq gồm các số

nguyên d ơng.( với (dx,dy) nhập hoặc đọc từ tệp)

• Khởi tạo đồ hoạ

• Vẽ hệ trục toạ độ (dx,dy)

• Biểu diễn hình Bar

x [a, b], (x1,y1,x2,y2) cửa sổ hiển thị€ [a, b], (x1,y1,x2,y2) cửa sổ hiển thị

- Khởi tạo đồ hoạ -chuong trinh chinh

Ví dụ1 : Vẽ đồ thị hàm số y= x 2 /30, x [-150, 150] € [-150, 150]

{ return sin(x);}//ve ham y=f(x) bat ky

void dothi(float a,float b, int x1,int y1,int x2,int y2)

Ví dụ 2: Vẽ đồ thị hàm số y= sin(x), x€ [-4, 4]

Ví dụ 3: Vẽ đồ thị hàm số y= cos(x), x€ [-4, 4]

# Biểu diễn biểu đồ hình quạt:

* Hàm vẽ hình quạt:

void pieslice (int x,int y,int gbd,int gkt,int R);

1st Qtr 2nd Qtr 3rd Qtr 4th Qtr

VÝ dô 1: VÏ c¸i qu¹t.

VÝ dô 2: VÏ bÇu trêi tr¨ng sao.

Ví dụ 2: Biểu diễn biểu đồ hình quạt doanh thu 4 quý trong năm với số liệu là 150, 180, 200, 250.

1st Qtr 2nd Qtr 3rd Qtr 4th Qtr

for (i=0;i<4;i++) tong+=a[i];

initgraph(&gd,&gm,"");if (graphresult()!= grOk) exit(1); setbkcolor(15); for (i=0;i<4;i++) {ptr=a[i]/tong;

dl=ptr*360;setcolor(i);setfillstyle(i+2,i+3);

Ví dụ 3: Biểu diễn biểu đồ hình quạt doanh thu 4 quý trong năm với số liệu đ ợc nhập vào.

{ int gd= DETECT,gm;int i,tong=0,goc=0;

float a[4],dl,ptr;for (i=0;i<4;i++)

Ví dụ 4: Biểu diễn biểu đồ hình quạt doanh thu các tháng

trong năm với số liệu lấy từ tệp văn bản quat.Inp gồm các số nguyên d ơng.

int i=0,n,goc=0; float a[12],dl,ptr,tong=0;

f=fopen("quat.inp","rt"); while (!feof(f))

{ fscanf(f,"%f",&a[i]); i++;};n=i;

for (i=0;i<n;i++) tong+=a[i]; fclose(f);

initgraph(&gd,&gm,"");if (graphresult()!= grOk) exit(1); setbkcolor(15);

VÝ dô 2: VÏ ® êng trßn víi t©m vµ b¸n kÝnh ® îc nhËp vµo

VÝ dô 3 : VÏ c¬n lèc cã t©m lèc xuÊt hiÖn ngÉu nhiªn.

Ví dụ 3: Vẽ cơn lốc có tâm lốc xuất hiện tại điểm đọc từ tệp.

{ int gd= DETECT,gm;FILE *f;int i,x,y;

f=fopen("vb1.txt","rt"); fscanf(f,"%d%d",&x,&y); fclose(f);

VÝ dô 1 : VÏ khung Elip víi t©m vµ b¸n kÝnh ® îc nhËp vµo.

VÝ dô 2 : VÏ chïm khung Elip víi t©m ngÉu nhiªn.

initgraph(&gd, &gm, "");if (graphresult()!= grOk) exit(1);

randomize(); while (!kbhit())

{setbkcolor(random(16));

for (i=1;i<=50;i++){setcolor(random(16));

ellipse(x,y,0,360,random(300),random(200));delay(50);

}cleardevice();}getch();closegraph();}

initgraph(&gd, &gm, "");if (graphresult()!= grOk) exit(1);

randomize(); while (!kbhit())

{setbkcolor(random(16));

for (i=1;i<=50;i++){setcolor(random(16));

*Vẽ Elip đặc

fillellipse (x, y, Rx, Ry);

Vẽ Elip có tâm (x,y) và bán kính Rx,Ry

Ví dụ 1: Vẽ Elip đặc có tâm và bán kính đ ợc nhập vào.

Ví dụ 2 : Vẽ chùm Elip đặc với tâm ngẫu nhiên.

initgraph(&gd, &gm, "");if (graphresult()!= grOk) exit(1);

randomize(); while (!kbhit())

{setbkcolor(random(16));

for (i=1;i<=50;i++){setcolor(random(16));setfillstyle(random(12),random(16));

ellipse(x,y,0,360,random(300),random(200));delay(50);

initgraph(&gd, &gm, "");if (graphresult()!= grOk) exit(1);

randomize(); while (!kbhit())

8 HiÓn thÞ v¨n b¶n    

a.Hµm outtextxy(int x,int y,char *st);

HiÓn thÞ x©u st t¹i vÞ trÝ (x,y).

Các b ớc giải:

1 Gán các câu thơ :

char xau[3][80]={

"Yeu em yeu ca khoang troi",

"Suong giang buoi som",

"Nang doi chieu hom“

Ví dụ 2: In 4 câu thơ sau:

Em thấy không tất cả đã xa rồi

Trong tiếng thở thời gian rất khẽ

Tuổi thơ kia ra đi cao ngạo thế

Hoa súng tím vào trong mắt mê say.

{ int gd= DETECT, gm; int i;char xau[3][80]={

"Yeu em yeu ca khoang troi",

"Suong giang buoi som",

"Nang doi chieu hom“};

clrscr();

initgraph(&gd, &gm, "");if (graphresult()!= grOk) exit(1);

VÝ dô 2: In 4 c©u th¬ lªn mµn h×nh víi c¸c c©u th¬

® îc nhËp vµo.

C¸c b íc gi¶i:

1 Khai b¸o: char xau[10][80];

NhËp th¬: for(i=0;i<3;++i){ printf("nhap xau %d =",i);gets(xau[i]);}

2 KT§H

3 In ra mµn h×nh

Chó ý: settextstyle(2,1,3);{In däc}

for(i=0;i<3;++i) { printf("nhap xau %d =",i);gets(xau[i]);}

initgraph(&gd, &gm, ""); if (graphresult()!= grOk) exit(1);

setbkcolor(15);randomize();settextstyle(2,0,3);//in ngang

for(i=0;i<3;++i)

for(i=0;i<3;++i){ printf("nhap xau %d =",i);gets(xau[i]);}

initgraph(&gd, &gm, ""); if (graphresult()!= grOk) exit(1);

setbkcolor(15);randomize();settextstyle(2,1,3);//in doc

for(i=0;i<3;++i)

{ setcolor(i+3);outtextxy(100+20*i,100,xau[i]);delay(50);

}getch();closegraph();

}

VÝ dô 2: In c¸c c©u th¬ lªn mµn h×nh víi c¸c c©u th¬

{ int gd= DETECT, gm;FILE *f;int i=0;char d[256];

initgraph(&gd, &gm, "");if (graphresult()!= grOk) exit(1);

Chươngư2:ưKỹưthuậtưchuyểnưđộngưhìnhưphẳng

1 Ph ¬ng ph¸p vÏ, xo¸ t¹i c¸c vÞ trÝ gÇn nhau

Ví dụ 1 : Vẽ đ ờng tròn chuyển động dọc màn hình

(bán kính tuỳ ý, nhập vào hoặc đọc từ tệp)

//Chuyen dong doc tu duoi len setbkcolor(9); y=getmaxy()-20;

while (!kbhit()) {setcolor(random(16));

Ví dụ 2: Vẽ đ ờng thẳng chuyển động ngang

//chuyen dong tu phai sang trai

Ví dụ 3 : Vẽ khung Elip chuyển động xiết màn hình.

Ví dụ 4: Vẽ hình chữ nhật đặc chuyển động xiết màn hình.

//Hinh quat chuyen dong theo cheo phu tu tren xuong x=getmaxx()-20;y=20;setbkcolor(9);

while (!kbhit()) {setfillstyle(random(13),random(16));