eti3210 03 line embed

49
Computer Graphic for Education ETI 3260 คอมพิวเตอร์กราฟิกเพื่องานทางการศึกษา

Upload: saramkul

Post on 10-Mar-2015

97 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: ETI3210 03 Line Embed

Computer Graphic for Education

ETI 3260 คอมพิวเตอร์กราฟิกเพื่องานทางการศกึษา

Page 2: ETI3210 03 Line Embed

ภาพกราฟิกพืน้ฐาน

Page 3: ETI3210 03 Line Embed

Coordinate System

• ในการวาดรูปกราฟิก จะต้องท าการระบรุะบบพิกดัหรือโคออร์ดิเนตส าหรับอ้างอิงก่อน เช่น การระบตุ าแหน่งจดุบนจอคอมพิวเตอร์นัน้ จะใช้ต าแหน่งของพิกเซลในลกัษณะคูล่ าดบั (x,y)

Page 4: ETI3210 03 Line Embed

ระบบโคออร์ดิเนตคาร์ทีเซียน 2 มิติ

• ระบบโคออร์ดิเนตคาร์ทีเซียน จะระบโุดยคูพ่ิกดั (x,y) ตามแนวนอนและแนวตัง้ตามล าดบั โดยมีจดุก าหนดอยูท่ี่ (0,0) โดยคา่ของแกน x จะเพิ่มขึน้จากซ้ายไปขวา และคา่ของแกน y จะเพิ่มขึน้จากลา่งขึน้บนและแกน x และแกน y จะตัง้ฉากกนั เรียกวา่ ระนาบ xy

Page 5: ETI3210 03 Line Embed

ระบบโคออร์ดินเนตของจอภาพ

• เน่ืองจากต าแหน่งบนจอภาพเป็นการอ้างอิงโคออร์ดิเนตท่ีสมัพนัธ์กบัต าแหน่งพิกเซลในเฟรมบฟัเฟอร์ คา่ของโคออร์ดิเนตพิกเซลให้คา่จ านวนเส้น (คา่ y) จ านวนคอลมัน์ (คา่ x)

• การท างานของฮาร์ดแวร์ เช่น การรีเฟรชจอภาพจะมีการก าหนดแอดเดรสของพิกเซลจากมมุบนซ้ายของจอภาพโดยเร่ิมจาก 0 ซึง่เร่ิมท่ีเส้นบนสดุ ไปจนถึง ymax ท่ีเส้นลา่งสดุของจอภาพ และต าแหน่งพิกเซลแตล่ะเส้นจะเร่ิมท่ี 0 ท่ีอยูซ้่ายสดุไปถึง xmax ซึง่อยูข่วาสดุของเส้น

Page 6: ETI3210 03 Line Embed

Point & Line

• การพลอ็ตจดุสามารถท าได้โดยการแปลงต าแหน่งโคออร์ดิเนตให้เป็นขัน้ตอนท างานส าหรับอปุกรณ์แสดงผลใช้

• ตวัอยา่งเช่นจอ CRT ล าแสงอิเลก็ตรอนจะท าให้เกิดแสงท่ีจอภาพฟอสเฟอร์ในต าแหน่งท่ีต้องการ โดยการก าหนดจะต าแหนง่ของล าแสดงอิเลก็ตรอนก็ขึน้กบัเทคโนโลยีท่ีใช้

Page 7: ETI3210 03 Line Embed

Point & Line

• เช่นในระบบ Random scan จะเก็บค าสัง่การพลอ็ตจดุใน display list และคา่โคออร์ดิเนตในค าสัง่จะถกูแปลงเป็น Voltages ท่ีหกัเหต าแหน่งของล าแสงอิเลก็ตรอน

• ในขณะท่ีระบบ Raster-scan การพลอ็ตจดุจะท าโดยก าหนดคา่บติให้อดคล้องกบัต าแหน่งจอภาพท่ีระบไุว้ภายในเฟรมบฟัเฟอร์เป็น 1 เม่ือล าแสงอิเล็กตรอนกวาดพืน้ท่ีในแนวนอน (scan line) มนัจะท าการปลอ่ยอิเล็กตรอน หรือพลอ็ตจดุเม่ือเจอคา่ 1 ในเฟรมบฟัเฟอร์

Page 8: ETI3210 03 Line Embed

Point & Line

• ส าหรับการวาดเส้นตรง จะท าโดยการค านวณต าแหน่งระหวา่งเส้นซึง่อยูร่ะหวา่งต าแหน่งของสองจดุ Endpoint

• ใน analog device เช่น vector pen plotter หรือ random-scan display เส้นตรงจะวาดเส้นเรียบๆจากจดุ endpoint หนึง่ไปยงัอีกจดุหนึง่อยา่งเรียบร้อย

• ใน digital device เส้นตรงจะถกูแบง่สว่นด้วยการพลอ็ตจดุตอ่ๆกนัระหวา่งสอง endpoint ซึง่จดุจะถกูค านวณโดยสมการเส้นตรง

Page 9: ETI3210 03 Line Embed

Point & Line

• ส าหรับ raster video display เส้นตรงจะถกูโหลดลงเฟรมบฟัเฟอร์ท่ีต าแหน่งโคออร์ดิเนตพิกเซลท่ีสอดคล้องกนั จากนัน้วิดีโอคอนโทรลเลอร์จะอา่นจากเฟรมบฟัเฟอร์ แล้วพลอ็ตจดุพิกเซลบนจอภาพ โดยต าแหน่งบนจอภาพนัน้อ้างเป็นเลขจ านวนเตม็ ดงันัน้ ต าแหน่งของจดุจะต้องท าการประมาณให้เป็นคา่จ านวนเตม็ด้วย เช่น คา่ท่ีค านวณออกมาได้เป็นต าแหน่ง (10.48, 20.51) จะต้องถกูเปลี่ยนให้เป็นต าแหน่งพิกเซล (10,21) เป็นต้น ซึง่การปัดเศษเป็นจ านวนเตม็นีท้ าให้การแสดงผลออกมาเป็นขัน้บนัได ซึง่สามารถมองเห็นได้จากอปุกรณ์ท่ีมี resolution ต ่าๆ

Page 10: ETI3210 03 Line Embed

Point & Line

การพลอ็ตจดุแบบบนอปุกรณ์ดิจิตอล ท าให้เกิดเส้นแบบขัน้บนัใด

Page 11: ETI3210 03 Line Embed

วาดเสน้ตรง

• การวาดเส้นตรงมี 4 แบบ คือ • การวาดเส้นตรงในแนวนอน

• การวาดเส้นตรงในแนวตัง้

• การวาดเส้นตรงในแนวทแยงมมุ

• การวาดเส้นตรงท่ีมีความชนัใดๆ

Page 12: ETI3210 03 Line Embed

การวาดเสน้ตรงในแนวนอนและแนวตั้ง

• การวาดเส้นตรงในแนวนอนและแนวตัง้นัน้เป็นการวาดเส้นตรงท่ีง่ายท่ีสดุ คือ • การวาดเส้นตรงในแนวนอน ถ้าคา่ของแกน x ท่ีจดุเร่ิมต้นน้อยกวา่คา่ของ x ท่ีจดุสดุท้าย ให้คา่ทางแกน y มีคา่คงท่ีแล้วเพิ่มคา่ทางแกน x ขึน้ทีละ 1 พิกเซล

• การวาดเส้นตรงในแนวตัง้ ถ้า y เร่ิมต้นน้อยกวา่ y สดุท้าย จะให้คา่ทางแกน x คงท่ีแล้วเพิ่มคา่ทางแกน y ขึน้ทีละ 1 พิกเซล

Page 13: ETI3210 03 Line Embed

การวาดเสน้ตรงแนวนอนและเสน้ตรงแนวตั้ง

(x, ystart )

(x, yend)

(xstart, y) (xend, y)

Page 14: ETI3210 03 Line Embed

การวาดเสน้ตรงในแนวทแยงมุม

• เส้นตรงในแนวทแยงมมุเป็นเส้นตรงท่ีมีความชนัเป็น +1 หรือ -1

• การวาดเส้นตรงท่ีมีความชนั +1 ถ้าจดุเร่ิมต้นมีโคออร์ดิเนตน้อยกว่าจดุสดุท้าย ท าได้โดยการเพิ่มค่าแกน x และแกน y ขึน้ทีละ 1 พิกเซล

• การวาดเส้นตรงท่ีมีความชนั -1 สามารถท าได้โดยการเพิ่มค่าแกน x ขึน้ทีละ 1 พิกเซล พร้อมกบัลดคา่แกน y ลงทีละ 1 พิกเซล

Page 15: ETI3210 03 Line Embed

การวาดเสน้ตรงแนวนอนและเสน้ตรงแนวตั้ง

(xstart, ystart ) (xend, yend)

(xend, yend)

(xstart, ystart )

Page 16: ETI3210 03 Line Embed

การวาดเสน้ตรงท่ีมีความชนัใดๆ

• การวาดเส้นตรงท่ีมีความชนัใดๆ เป็นข้อยุง่ยาก และมีปัญหาเกิดขึน้หลายประการ เช่น การเกิดเป็นเส้นแบบขัน้บนัได แตก็่สามารถปรับปรุงการแสดงผลได้โดยก าหนดความละเอียดของจอภาพให้สงูขึน้ ผสมกบัการใช้เทคนิคการแสดงผลขัน้สงู

Page 17: ETI3210 03 Line Embed

สมการเสน้ตรง

สมการของเส้นตรง คือ 𝑦 = 𝑚. 𝑥 + 𝑏

โดย 𝑚 คือความชนั และ 𝑏 คือ จดุตดัแกน 𝑦

ให้ 2 endpoints คือ 𝑥1, 𝑦1 และ 𝑥2, 𝑦2 ดงัรูป

(1)

Page 18: ETI3210 03 Line Embed

สมการเสน้ตรง

เราสามารถหาคา่ m และ b ได้ดงันี ้

𝑚 = 𝑦2 − 𝑦1𝑥2 − 𝑥1

𝑏 = 𝑦1 −𝑚𝑥1

จากสมการ (2) จะได้ ∆𝑦 = 𝑚∆𝑥

และ

∆𝑥 =∆𝑦

𝑚

(2)

(3)

(4)

(5)

Page 19: ETI3210 03 Line Embed

อลักอริทึม DDA

• DDA ยอ่มาจาก digital differential analyzer เป็นอลักอริทมึส าหรับพลอ็ตต าแหน่งจดุพิกเซลท่ีได้จากการปัดคา่โคออร์ดิเนตด้วยตวัเลขจ านวนเต็มท่ีใกล้ท่ีสดุตามการพาดผา่นของเส้นตรง ท าให้การเขียนโปรแกรมง่ายขึน้

Page 20: ETI3210 03 Line Embed

อลักอริทึม DDA

จากสมการ 𝑚 = ∆𝑦

∆𝑥

ส าหรับคา่ 𝑚 ≤ 1 และ 𝑥𝑠𝑡𝑎𝑟𝑡 <𝑥𝑒𝑛𝑑

สามารถสร้างเส้นตรงได้โดยการเพิ่มคา่ของ 𝑥จากคา่ 𝑥 เดิมขึน้ 1(∆𝑥 = 1) จนถึง 𝑥end และค านวณคา่ 𝑦 ได้จากสมการ

𝑦𝑘+1 = 𝑦𝑘 +m

Page 21: ETI3210 03 Line Embed

อลักอริทึม DDA

ถ้า 𝑚 > 1และ 𝑦𝑠𝑡𝑎𝑟𝑡 < 𝑦𝑒𝑛𝑑

เราจะสร้างเส้นตรงได้โดยเพิ่มคา่ของ 𝑦 จนถึง 𝑦𝑒𝑛𝑑 ทีละ 1

(∆𝑦 = 1)แล้วค านวณคา่ 𝑥 ได้ดงันี ้

𝑥𝑘+1 = 𝑥𝑘 +1

𝑚

Page 22: ETI3210 03 Line Embed

ตวัอยา่ง

• เม่ือเส้นตรงมีความชนั 𝑚 < 1(0.8) จากจดุเร่ิมต้น (2,2) ไปยงัจดุสิน้สดุ (12,10)

• จะเพิ่มคา่ x ทีละ 1 และหาคา่ 𝑦𝑘+1 โดย 𝑦𝑘+1 = 𝑦𝑘 +𝑚 x yk+1 ROUND(y)

2 2 2

3 2.8 3

4 3.6 4

5 4.4 4

6 5.2 5

7 6 6

… … …

12 10 10

Page 23: ETI3210 03 Line Embed

ผลการวาดเสน้ตรงโดยใชอ้ลักอริทึม DDA

14

13

12

11

10

9

8

7

6

5

4

3

2

1

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14

Page 24: ETI3210 03 Line Embed

ตวัอยา่ง

• เม่ือเส้นตรงมีความชนั 𝑚 > 1(1.25) จากจดุเร่ิมต้น (2,2) ไปยงัจดุสิน้สดุ (10,12)

• จะเพิ่มคา่ x ทีละ 1 และหาคา่ 𝑦𝑘+1 โดย 𝑦𝑘+1 = 𝑦𝑘 +𝑚

Xk+1 ROUND(x) y

2 2 2

2.8 3 3

3.6 4 4

4.4 4 5

5.2 5 6

6 6 7

… … …

10 10 12

Page 25: ETI3210 03 Line Embed

ผลการวาดเสน้ตรงโดยใชอ้ลักอริทึม DDA

14

13

12

11

10

9

8

7

6

5

4

3

2

1

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14

Page 26: ETI3210 03 Line Embed

อลักอริทึม DDA

• เป็นวิธีท่ีเร็วในการค านวณต าแหน่งพิกเซลมากกวา่ใช้สมการเส้นตรงเน่ืองจากไมมี่การคณู

• คา่การสะสมในการปัดคา่ของการบวกเลขทศนิยมจะเพิ่มขึน้เร่ือยๆ ท าให้ต าแหน่งพิกเซลห่างจากเส้นตรงท่ีแท้จริงออกไปทกุที

• การปัดคา่ และการค านวณเลขทศนิยมยงัใช้เวลามากอยู ่

Page 27: ETI3210 03 Line Embed

อลักอริทึมเส้นตรง Integer DDA

• เน่ืองจากการท างานของอลักอริทมึ DDA มีการค านวณท่ีใช้เวลามากเน่ืองจากเป็นการบวกเลขท่ีเป็นเลขทศนิยม

• ท าให้มีการพฒันาอลักอริทมึท่ีใช้เวลาน้อยกวา่ โดยการค านวณเลขจ านวนเต็มอยา่งเดียวเท่านัน้ เรียกวา่ Integer DDA

• หลกัการคือ แทนคา่ความชนัซึง่เป็นจ านวนจริงด้วยจ านวนเตม็ คือ น าคา่ของ ∆𝑦 = 𝑦𝑒𝑛𝑑 − 𝑦𝑠𝑡𝑎𝑟𝑡และ ∆𝑥 = 𝑥𝑒𝑛𝑑 −𝑥𝑠𝑡𝑎𝑟𝑡 มาใช้โดยตรง แทนท่ีจะน าไปคิดเป็นคา่ความชนั และพิจารณาคา่ error (เป็นระยะทางระหวา่งจดุท่ีพลอ็ตเพ่ือสร้างเส้นตรงกบัจดุสิน้สดุของเส้นท่ีควรจะเป็นจริงๆ) เร่ิมต้น

• error = ∆𝑦 − ∆𝑥

Page 28: ETI3210 03 Line Embed

อลักอริทึมเส้นตรง Integer DDA

• แบง่เป็น 4 วิธี ขึน้กบัความชนัของเส้นตรง – กรณีท่ี 1 คา่ความชนั อยูร่ะหวา่ง 0 ถงึ 1 โดย คา่ ∆𝑥 และ ∆𝑦 เป็นบวก

– กรณีท่ี 2 คา่ความชนั มากกวา่ 1 โดยคา่ ∆𝑥 และ ∆𝑦 เป็นบวก

– กรณีท่ี 3 คา่ความชนัอยูร่ะหวา่ง -1 ถงึ 0 โดยท่ี ∆𝑥 เป็นลบ และ ∆𝑦 เป็นบวก

– กรณีท่ี 4 คา่ความชนัน้อยกวา่ -1 โดยท่ีคา่ ∆𝑥 เป็นลบ และ ∆𝑦 เป็นบวก

Page 29: ETI3210 03 Line Embed

อลักอริทึมเส้นตรง Integer DDA

เม่ือคา่ความชนั อยูร่ะหวา่ง 0 ถึง 1 โดย คา่ ∆𝑥 และ ∆𝑦 เป็นบวก • กรณีนีแ้ยกเป็น 2 แบบ คือ error เป็นลบ และ คา่ error เป็นบวก

• ถ้าคา่ error เป็นลบ ให้พลอ็ตจดุต่อไปทางขวาของจดุเดิมท่ีเพิ่งพลอ็ตมาโดยเลื่อนไปหนึง่หน่วย แล้วหาคา่ error ตอ่ไปด้วย error = error +

∆𝑦

• ถ้าคา่ error เป็นบวก ให้พลอ็ตจดุต่อไปที่ต าแหน่งสงูขึน้ไปหน่วยหน่วย และไปทางขวาหนึง่หน่วยจากจดุเดิม แล้วหาคา่ error ตอ่ไปด้วย error = error + ∆𝑦 − ∆𝑥

Page 30: ETI3210 03 Line Embed

อลักอริทึมเส้นตรง Integer DDA

เม่ือคา่ความชนั มากกวา่ 1 โดยคา่ ∆𝑥 และ ∆𝑦 เป็นบวก • แบง่ออกเป็น 2 แบบ ดงันี ้

• ถ้า error เป็นลบ ให้พลอ็ตจดุต่อไปที่ต าแหน่งสงูขึน้ไปหนึง่หน่วยและทางขวาหนึง่หน่วยจากจดุเดิม หาคา่ error ตอ่ไปด้วย error = error

+ ∆𝑦 − ∆𝑥

• ถ้า error เป็นบวก ให้พลอ็ตจดุต่อไปที่ต าแหน่งสงูขึน้ไปหนึง่หน่วยจากจดุเดิม หาคา่ error ตอ่ไปด้วย error= error −∆𝑥

Page 31: ETI3210 03 Line Embed

อลักอริทึมเส้นตรง Integer DDA

กรณีท่ี 3 คา่ความชนัอยูร่ะหวา่ง -1 ถึง 0 โดยท่ี ∆𝑥 เป็นลบ และ ∆𝑦 เป็นบวก • แยกเป็น 2 แบบ คือ

• ถ้า error เป็นลบ ให้พลอ็ตจดุต่อไปทางซ้ายหนึง่หน่วยจากจดุเดิม และหาคา่ error ตอ่ไปด้วย error = error + ∆𝑦

• ถ้า error เป็นบวก ให้พลอ็ตจดุต่อไปที่ต าแหน่งสงูขึน้ไปหนึง่หน่วยและไปทางซ้ายอีกหนึง่หน่วยจากจดุเดิม หาคา่ error ตอ่ไปด้วย error = error + ∆𝑥 + ∆𝑦

Page 32: ETI3210 03 Line Embed

อลักอริทึมเส้นตรง Integer DDA

• กรณีท่ี 4 คา่ความชนัน้อยกวา่ -1 โดยท่ีคา่ ∆𝑥 เป็นลบ และ ∆𝑦 เป็นบวก

• แยกเป็น 2 แบบ คือ

• ถ้า error เป็นลบ ให้พลอ็ตจดุตอ่ไปท่ีต าแหน่งสงูขึน้ไปหนึง่หน่วยและไปทางซ้ายอีกหนึง่หน่วยจากจดุเดิม หาคา่ error ตอ่ไปด้วย error = error + ∆𝑥 + ∆𝑦

• ถ้า error เป็นบวก ให้พลอ็ตจดุตอ่ไปสงูขึน้หนึง่หน่วยจากจดุเดิม และหาคา่ error ตอ่ไปด้วย error = error + ∆𝑥

Page 33: ETI3210 03 Line Embed

ตวัอยา่ง

• วาดเส้นตรงด้วยอลักอริทมึ Integer DDA เม่ือเส้นตรงมีความชนั m > 1 (1.25) จาก (2,2) ไป (10,12)

• หาคา่

∆𝑥 = 10 − 2 = 8

∆𝑦 = 12 − 2 = 10

∆𝑦 − ∆𝑥 = 10 – 8 = 2 = error

• เข้ากรณีท่ี 2 และคา่ error เป็นบวก จะเพิ่มต าแหน่งสงูขึน้หนึง่หน่วย คือ เพิ่มคา่ y

Page 34: ETI3210 03 Line Embed

ตวัอยา่ง

Step Error เดมิ X เดมิ Y เดมิ X ใหม่ Y ใหม่ Error ใหม่

1 2 2 2 2 3 2-8=-6

2 -6 2 3 3 4 -6+(10-8)=-4

3 -4 3 4 4 5 -4+2=-2

4 -2 4 5 5 6 -2+2 = 0

5 0 5 6 6 7 0+2 = 2

6 2 6 7 6 8 2-8=-6

7 -6 6 8 7 9 -6+2=-4

8 -4 7 9 8 10 -4+2=-2

9 -2 8 10 9 11 -2+2=0

10 0 9 11 10 12 0+2=2

Page 35: ETI3210 03 Line Embed

ตวัอยา่ง

14

13

12

11

10

9

8

7

6

5

4

3

2

1

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14

Page 36: ETI3210 03 Line Embed

อลักอริทึมเส้นตรงของ Bresenham

• เป็นการสร้างเส้นตรงท่ีมีความแมน่ย าและมีประสิทธิภาพสงู

• เป็นการค านวณคา่จ านวนเต็มท่ีเพิ่มขึน้เทา่นัน้

• สามารถใช้ในการแสดงผลวงกลมและเส้นโค้งอ่ืนๆ ได้ด้วย

• หลกัการจะเป็นการตดัสินใจในแตล่ะขัน้ตอนวา่จดุตอ่ไปจะเพิ่มขึน้ทางทางไหน เช่น จากต าแหน่งพิกเซล (50,50) เราต้องตดัสินใจว่าจะเลือกต าแหน่งพิกเซลตอ่ไปเป็นต าแหน่งใดระหวา่ง (51,50) หรือ (51,49) ซึง่จะสามารถตอบได้ดว้ยอลักอริทมึนี ้โดยการตรวจสอบเคร่ืองหมายของพารามิเตอร์ของจ านวนเต็ม ท่ีมีคา่เป็นสดัสว่นของความแตกตา่งระหวา่งต าแหน่งพิกเว,ตามแนวตัง้ 2 ต าแหน่งจากเส้นทางของเส้นตรงของจริง

Page 37: ETI3210 03 Line Embed

อลักอริทึมเส้นตรงของ Bresenham

• แยกพิจารณาเป็น 2 กรณี คือ

• 𝑚 < 1

• 𝑚 ≥ 1

Page 38: ETI3210 03 Line Embed

อลักอริทึมเส้นตรงของ Bresenham

• กรณี 𝑚 < 1 และ 𝑥𝑠𝑡𝑎𝑟𝑡 < 𝑥𝑒𝑛𝑑

ก าหนดให้พิกเซลปัจจบุนัอยูท่ี่ (𝑥𝑘 , 𝑦𝑘) คา่ต าแหน่งพิกเซลถดัไปทางแกน 𝑥 จะมีคา่เพิ่มขึน้ทีละ 1 จากคา่เดมิ และคา่ y จะเป็นไปได้ 2 กรณี ดงันี ้

𝑥𝑘+1 = 𝑥𝑘 + 1

𝑦𝑘+1 = 𝑦𝑘𝑦𝑘+1

𝑖𝑓 𝑑𝑙𝑜𝑤𝑒𝑟 < 𝑑𝑢𝑝𝑝𝑒𝑟

𝑖𝑓 𝑑𝑙𝑜𝑤𝑒𝑟 > 𝑑𝑢𝑝𝑝𝑒𝑟

Page 39: ETI3210 03 Line Embed

อลักอริทึมเส้นตรงของ Bresenham

dupper

dlower

Page 40: ETI3210 03 Line Embed

อลักอริทึมเส้นตรงของ Bresenham

จากรูป สามารถหาคา่ 𝑑𝑙𝑜𝑤𝑒𝑟 และ 𝑑𝑢𝑝𝑝𝑒𝑟 ได้ดงันี ้

จาก 𝑦 = 𝑚 𝑥𝑘 + 1 + 𝑏

จะได้ 𝑑𝑙𝑜𝑤𝑒𝑟 = y − 𝑦𝑘

𝑑𝑙𝑜𝑤𝑒𝑟 = m 𝑥𝑘 + 1 + 𝑏 − 𝑦𝑘

และ

𝑑𝑢𝑝𝑝𝑒𝑟 = 𝑦𝑘 + 1 -𝑦

𝑑𝑢𝑝𝑝𝑒𝑟 = 𝑦𝑘 + 1 −𝑚 𝑥𝑘 + 1 − 𝑏

Page 41: ETI3210 03 Line Embed

อลักอริทึมเส้นตรงของ Bresenham

ระยะระหวา่ง 𝑑𝑙𝑜𝑤𝑒𝑟และ 𝑑𝑢𝑝𝑝𝑒𝑟 เป็นดงันี ้ 𝑑𝑙𝑜𝑤𝑒𝑟 − 𝑑𝑢𝑝𝑝𝑒𝑟= 2𝑚 𝑥𝑘 + 1 − 2𝑦𝑘 + 2𝑏 − 1

ก าหนดให้ 𝑝𝑘เป็นคา่ท่ีใช้ตดัสินวา่ต าแหน่งพิกเซลถดัไปควรเป็นจดุใด ระหวา่ง 𝑥𝑘 + 1, 𝑦𝑘 และ 𝑥𝑘 + 1, 𝑦𝑘 + 1

โดย 𝑝𝑘 = ∆𝑥 𝑑𝑙𝑜𝑤𝑒𝑟 − 𝑑𝑢𝑝𝑝𝑒𝑟

แทน 𝑚 = ∆𝑦

∆𝑥 จะได้

𝑝𝑘 = 2∆𝑦. 𝑥𝑘 − 2∆𝑥. 𝑦𝑘 + 2∆𝑦 + ∆𝑥 2𝑏 − 1

Page 42: ETI3210 03 Line Embed

อลักอริทึมเส้นตรงของ Bresenham

เน่ืองจากคา่ของ ∆𝑥 เป็นบวก จะได้วา่

𝑦𝑘+1 = 𝑦𝑘

𝑦𝑘 + 1 𝑖𝑓𝑝𝑘 < 0𝑖𝑓 𝑝𝑘 ≥ 0

ในการค านวณเพื่อหาคา่ต าแหน่งพิกเซลถดัไป จะได้ 𝑝𝑘+1 = 2∆𝑦. 𝑥𝑘+1 − 2∆𝑥. 𝑦𝑘+1 + 2∆𝑦 + ∆𝑥(2𝑏 − 1)

𝑝𝑘+1 − 𝑝𝑘 = 2∆𝑦 𝑥𝑘+1 − 𝑥𝑘 − 2∆𝑥 𝑦𝑘+1 − 𝑦𝑘

ซึง่ 𝑥𝑘+1 = 𝑥𝑘+1 จะได้ 𝑥𝑘+1 − 𝑥𝑘 = 1 ดงันัน้ 𝑝𝑘+1 = 𝑝𝑘 + 2∆𝑦 − 2∆𝑥 𝑦𝑘+1 − 𝑦𝑘

Page 43: ETI3210 03 Line Embed

อลักอริทึมเส้นตรงของ Bresenham

ในการค านวณ สามรถหาคา่ 𝑝0 ได้จากสมการข้างต้น จะได้วา่

𝑝0 = 2∆𝑦 − ∆𝑥

Page 44: ETI3210 03 Line Embed

อลักอริทึมเส้นตรงของ Bresenham

สามารถสรุปอลักอริทมึในการวาดเส้นตรงของ Bresenham โดยสมมตุิวา่เส้นตรงมีความชนัเป็นบวกท่ีน้อยกวา่ 1 ได้ดงันี ้

1. รับคา่จดุ 2 จดุ ก าหนดให้จดุทางซ้ายมือเป็น 𝑥0, 𝑦0

2. แสดงจดุ 𝑥0, 𝑦0 บนจอภาพ

3. หาคา่ ∆𝑥, ∆𝑦, 2∆𝑦 และ 2∆𝑦 − 2∆𝑥 โดยก าหนดคา่เร่ิมต้น 𝑝0 = 2∆𝑦 − ∆𝑥

4. ส าหรับคา่𝑥𝑘ใดๆ เม่ือ k เร่ิมจาก k=0

• ถ้า 𝑥𝑘 < 0 ให้แสดงผลจดุ 𝑥𝑘 + 1, 𝑦𝑘 บนจอภาพ

• ถ้า 𝑥𝑘 >= 0 ให้แสดงผลจดุ 𝑥𝑘 + 1, 𝑦𝑘 + 1 บนจอภาพ

• ค านวณค่า 𝑝𝑘+1 = 𝑝𝑘 + 2∆𝑦 − 2∆𝑥 𝑦𝑘+1 − 𝑦𝑘

5. วนรอบซ า้ขัน้ตอนท่ี 4 ∆𝑥 − 1 ครัง้

Page 45: ETI3210 03 Line Embed

ตวัอยา่ง การวาดเสน้ตรงดว้ยอลักอริทึมของ Bresenham

• สมมตุิวา่จดุเร่ิมต้นอยูท่ี่ 20,10 และจดุสดุท้ายอยูท่ี่ (30,18) ท าให้เส้นตรงนีมี้ความชนั 0.8

• หาคา่ ∆𝑥 = 10, ∆𝑦=8

• คา่ 𝑝0 = 2∆𝑦 − ∆𝑥=6

• และคา่ส าหรับการค านวณพิกเซลถดัไป 2∆𝑦 = 16, และ 2∆𝑦 − 2∆𝑥 =-4

• เราพลอ็ตจดุเร่ิมต้น 𝑥0, 𝑦0 = 20,10 และค านวณคา่พิกเซลถดัไปได้ดงันี ้

Page 46: ETI3210 03 Line Embed

ตวัอยา่ง การวาดเสน้ตรงดว้ยอลักอริทึมของ Bresenham

k 𝒑𝒌 𝒙𝒌+𝟏, 𝒚𝒌+𝟏

0 6 (21,11)

1 2 (22,12)

2 -2 (23,12)

3 14 (24,13)

4 10 (25,14)

5 6 (26,15)

6 2 (27,16)

7 -2 (28,16)

8 14 (29,17)

9 10 (30,18)

Page 47: ETI3210 03 Line Embed

ตวัอยา่ง

19

18

17

16

15

14

13

12

11

10

20 21 22 23 24 25 26 27 28 29 30 31 32

Page 48: ETI3210 03 Line Embed

อลักอริทึมเส้นตรงของ Bresenham

กรณี 𝑚 > 1 และ 𝑥𝑠𝑡𝑎𝑟𝑡 < 𝑥𝑒𝑛𝑑

ในกรณีนีใ้ห้ท าการค านวณโดยการ step คา่ตามแกน y และคา่ตามแกน x ให้ท าการพิจารณาโดยใช้ 𝑝𝑘ในการตดัสินใจเลือกต าแหน่งท่ีเหมาะสม ดงันี ้

𝑦𝑘+1 = 𝑦𝑘 + 1

𝑥𝑘+1 = 𝑥𝑘 , 𝑑𝑙𝑜𝑤𝑒𝑟 < 𝑑𝑢𝑝𝑝𝑒𝑟 , 𝑝𝑘 < 0

𝑥𝑘 + 1, 𝑑𝑙𝑜𝑤𝑒𝑟 > 𝑑𝑢𝑝𝑝𝑒𝑟, 𝑝𝑘 > 0

Page 49: ETI3210 03 Line Embed

END